Nhiều hình nền. Căn chỉnh các phần tử với vị trí: đã sửa bằng hàm CSS calc()

Từ tác giả: CSS có thể làm được nhiều điều hơn nhiều nhà phát triển web nhận ra. Mỗi năm, ngôn ngữ đánh dấu kiểu ngày càng trở nên mạnh mẽ hơn, tạo ra chức năng mới trong các trình duyệt mà trước đây chỉ có thể triển khai được thông qua JS. Trong bài viết này, chúng ta sẽ xem xét 8 thủ thuật hàm CSS không yêu cầu bất kỳ JS nào.

Chú giải công cụ sử dụng CSS thuần túy

Rất nhiều trang web vẫn sử dụng JS để tạo chú giải công cụ, nhưng ngày nay việc thực hiện chúng bằng CSS đã dễ dàng hơn nhiều. Cách dễ nhất là thêm văn bản chú giải công cụ vào thuộc tính dữ liệu trong mã HTML. Ví dụ: data-tooltip="...". Để hiển thị văn bản chú giải công cụ bên trong hàm attr(), bạn cần thêm mã CSS sau vào đánh dấu hiện có của mình:

Chú giải công cụ::after ( nội dung: attr(data-tooltip); )

Chú giải công cụ::sau( nội dung: attr(dữ liệu - tooltip);

Không cần giải thích, phải không? Tất nhiên, bạn cần thêm một số mã và tạo kiểu cho chú giải công cụ một cách chính xác, nhưng đừng lo lắng. Hoàn toàn dành cho những mục đích này, có một thư viện đặc biệt được viết bằng CSS, Hint.css.

Sử dụng thuộc tính dữ liệu tùy chỉnh và hàm attr()

Chúng ta đã sử dụng hàm attr() để tạo chú giải công cụ nhưng nó còn có những cách sử dụng khác. Sử dụng chức năng này, cùng với các thuộc tính dữ liệu, bạn có thể tạo bản xem trước hình ảnh với tiêu đề và mô tả. Và tất cả điều này được thực hiện một mình chuỗi HTML mã số:

< a class = "caption" href = "#" data - title = "Con kền kền" data - description = "..." > < img src = "img.jpg" alt = "Hình minh họa" / > < / a >

Hàm attr() bây giờ có thể được sử dụng để hiển thị tiêu đề và mô tả:

Chú thích::after ( nội dung: attr(data-title); ... )

Chú thích::sau ( nội dung: attr(dữ liệu - tiêu đề); . . .

Dưới đây là ví dụ về hình ảnh xem trước có tiêu đề bật lên trong sự kiện di chuột:

Bộ đếm CSS

Những gì chúng ta có thể làm với bộ đếm CSS giống như một phép thuật. Tính năng này không phải là tính năng được biết đến nhiều nhất và hầu hết mọi người sẽ nghĩ rằng nó được hỗ trợ kém. Tuy nhiên, tất cả các trình duyệt đều hỗ trợ bộ đếm CSS:

Bạn không nên sử dụng bộ đếm CSS trên danh sách được đánh số (ol). Tuy nhiên, chúng rất tốt cho việc điều hướng trang hoặc hiển thị số bên dưới các mục trong thư viện. Bạn thậm chí có thể đếm số lượng phần tử được chọn, điều này thật ấn tượng khi xét đến đoạn mã nhỏ đằng sau nó (và hoàn toàn không có JS).

Bộ đếm CSS cũng rất tốt cho việc thay đổi động các số trong danh sách các phần tử có thể được xáo trộn bằng chuột:

Giống như ví dụ trước, hãy lưu ý rằng nội dung được tạo có vấn đề về khả năng truy cập.

Hiệu ứng kính mờ sử dụng bộ lọc CSS

VỚI phát hành iOS 7 Apple đã mang đến cho chúng ta hiệu ứng kính mờ - một yếu tố mờ, mờ trông giống như kính mờ. Nhờ Apple mà hiệu ứng này đã bắt đầu xuất hiện ở nhiều nơi. Khá khó để tạo lại hiệu ứng. Trước khi có bộ lọc CSS, hiệu ứng kính mờ phải được mô phỏng thông qua hình ảnh mờ. Hiện tại, các bộ lọc CSS được hỗ trợ đầy đủ trên hầu hết các trình duyệt, giúp việc tạo lại hiệu ứng này dễ dàng hơn nhiều.

Trong tương lai, chúng tôi sẽ có thể tạo các hiệu ứng tương tự bằng cách sử dụng bộ lọc phông nền và hàm filter(), hiện chỉ được hỗ trợ trong Safari.

Sử dụng thẻ HTML làm hình nền

Thông thường bạn chỉ định làm hình nền hoặc độ dốc tập tin JPEG hoặc PNG. Bạn có biết rằng bạn có thể sử dụng hàm element() để chỉ định hình nền không? thẻ div? Hiện nay hàm element() chỉ được hỗ trợ trên Firefox:

Khả năng của chức năng này gần như vô tận, đây là một ví dụ từ MDN.

Lưới thông minh sử dụng calc()

Lưới lỏng – công cụ tuyệt vời Tuy nhiên, có một số vấn đề nghiêm trọng. Ví dụ: bạn không thể tạo các ngăn ở trên và dưới có cùng kích thước với các ngăn ở bên trái và bên phải. Ngoài ra, tùy thuộc vào hệ thống lưới được sử dụng, các điểm đánh dấu sẽ bị lộn xộn. Bạn thậm chí không thể gọi nó là flexbox giải pháp tốt nhất tuy nhiên, với hàm calc(), có thể được sử dụng làm giá trị trong CSS, lưới có thể trở nên tốt hơn nhiều. Trong hướng dẫn SitePoint này, George Martzoukos trình bày một số ví dụ thực tế, bao gồm một lưới thư viện với khoảng cách hoàn hảo. Với bộ tiền xử lý CSS, việc tạo một hệ thống lưới có thể cực kỳ dễ dàng và bản thân lưới cũng sẽ rất dễ bảo trì. Hỗ trợ hàm rất tốt, hãy nhớ sử dụng hàm calc().

Căn chỉnh các phần tử với vị trí: đã sửa bằng hàm CSS calc()

Một ví dụ khác về việc sử dụng hàm tính toán() – căn chỉnh các phần tử với định vị cố định. Ví dụ: bạn có một trình bao bọc khối cho nội dung có phần đệm bên trái và bên phải linh hoạt và bạn muốn căn chỉnh chính xác một phần tử cố định trong vùng chứa. Bạn sẽ cần phải dành nhiều thời gian để tính toán các giá trị chính xác cho thuộc tính bên phải hoặc bên trái. Tuy nhiên, với calc() bạn có thể kết hợp tương đối và giá trị tuyệt đốiđể căn chỉnh hoàn hảo.

TẢI XUỐNG VÍ DỤ

Nếu bạn giống tôi, khi thấy một ví dụ ấn tượng về chức năng CSS3 mới, bạn sẽ nóng lòng muốn bắt đầu sử dụng nó trên trang web của mình. Tất nhiên, sau đó bạn nhận thấy rằng nó chỉ khả dụng trong một hoặc hai trình duyệt chính (và không bao giờ có IE trong số đó), vì vậy, bạn thường quyết định chờ đợi.

tôi có cho bạn Tin tốt: phiên bản mới nhất các trình duyệt đang triển khai một số tính năng thú vị cuối cùng đã được hỗ trợ ở mọi nơi và bạn có thể bắt đầu sử dụng chúng ngay bây giờ!

Lưu ý: hầu hết các tính năng này không hoạt động trong các phiên bản IE cũ hơn (9 trở xuống). Nếu những trình duyệt này chiếm tỷ lệ lớn trong số khách truy cập của bạn, tôi e rằng bạn sẽ phải sử dụng các giải pháp thay thế để triển khai các tính năng này. Chà, đối với phần còn lại, đây là những gì trình duyệt hiện đại có thể cung cấp cho chúng ta:

1. Hoạt ảnh và chuyển tiếp bằng CSS

Hoạt ảnh sử dụng CSS cuối cùng cũng có sẵn trên tất cả các trình duyệt chính, thậm chí cả IE (bắt đầu từ phiên bản 10). Có hai cách để tạo hoạt ảnh trong CSS.

Cách đầu tiên rất đơn giản, nó được thực hiện bằng cách tạo hiệu ứng thay đổi thuộc tính CSS bằng cách sử dụng khai báo chuyển đổi. Với các hiệu ứng chuyển tiếp, bạn có thể tạo hiệu ứng di chuột qua hoặc nhấp chuột hoặc bạn có thể kích hoạt hoạt ảnh bằng cách thay đổi kiểu của phần tử từ sử dụng JavaScript. Trong ví dụ bên dưới, quá trình chuyển đổi được thực hiện bằng cách di chuột qua hành tinh, điều này sẽ buộc tên lửa di chuyển đến gần hơn.

Cách thứ hai để xác định hoạt ảnh phức tạp hơn một chút - nó liên quan đến việc mô tả các khoảnh khắc cụ thể của hoạt ảnh bằng quy tắc @keyframe. Điều này sẽ cho phép bạn tạo hoạt ảnh lặp lại độc lập với hành động của người dùng và không được kích hoạt bởi Javascript.

HTML

CSS

Container( chiều rộng: 300px; chiều cao: 300px; lề: 0 tự động; vị trí: tương đối; tràn:ẩn; ) .planet( vị trí: tuyệt đối; trên cùng: 0; trái: 0; chiều rộng: 100%; chiều cao: 100%; nền :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) trung tâm trung tâm không lặp lại; ) .rocket( vị trí: tuyệt đối ; trên cùng:0; trái:0; chiều rộng:100%; chiều cao:100%; nền:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) trung tâm 50px không lặp lại; /* Chrome vẫn yêu cầu tiền tố -webkit- */ -webkit-animation:orbit 2s vô hạn tuyến tính; animation:orbit 2s vô hạn tuyến tính; transition:background-position 0.8s; ) .container:hover .rocket( nền-position:80px center; ) /* Xác định quy tắc hoạt ảnh khung hình chính */ @-webkit-keyframes quỹ đạo ( từ ( -webkit-transform:rotate(0deg);) đến ( -webkit-transform :rotate(360deg); ) ) @keyframes quỹ đạo ( from ( Transform:rotate(0deg); /* Các thuộc tính -webkit-transform được đưa vào đây vì Chrome có thể bắt đầu hỗ trợ các khung hình chính mà không có tiền tố trong tương lai, nhưng không chắc chắn về điều đó nó sẽ hỗ trợ các thuộc tính biến đổi không có tiền tố */ -webkit-transform:rotate(0deg);) thành ( Transform:rotate(360deg); -webkit-transform:rotate(360deg); ) )

Còn rất nhiều điều bạn có thể tìm hiểu về hoạt ảnh bằng CSS. Tôi khuyên bạn nên bắt đầu với bài viết này trên Mạng lưới nhà phát triển Mozilla (MDN). Nếu bạn quan tâm đến việc hỗ trợ trình duyệt, hãy xem bảng tương thích này.

2. Tính giá trị bằng calc()

Một tính năng CSS mới tuyệt vời khác là hàm calc(). Nó cho phép bạn thực hiện các phép tính số học đơn giản trong CSS. Bạn có thể sử dụng nó bất cứ nơi nào bạn cần chiều dài hoặc kích thước. Điều tuyệt vời hơn nữa là bạn có thể tự do pha trộn đơn vị khác nhau, chẳng hạn như tỷ lệ phần trăm và pixel. Điều này khiến nhiều thủ thuật đánh dấu mà bạn từng sử dụng trước đây trở nên lỗi thời. Điều này là không đủ cho bạn? Hàm này hoạt động trong IE9 trở lên, không có tiền tố.

HTML

CSS

Container( /* Tính chiều rộng */ width: calc(100% - 40px); màu nền:#CDEBC4; color:#6D8B64; text-align:center; đệm:25px 0; lề: 0 tự động; )

Tìm hiểu thêm về hàm calc() tại đây hoặc xem bảng tương thích.

3. Bộ chọn được cải tiến

Hiện tại, nếu bạn đang gán ID cho các thành phần chỉ để áp dụng kiểu cho chúng thì có thể bạn đã làm sai. CSS 2.1 và CSS 3 đã giới thiệu một số bộ chọn mạnh mẽ có thể làm cho đánh dấu của bạn sạch hơn và bảng định kiểu của bạn thú vị hơn.

Các bộ chọn sau được hỗ trợ bởi tất cả các trình duyệt chính, bao gồm IE9 trở lên.

HTML

Đó là một đoạn văn bản đơn giản được áp dụng một số kiểu CSS3 thú vị...

/* Kiểu phần tử (không có gì thú vị ở đây) */ p( cỡ chữ: 16px; chiều rộng: 420px; lề: 20px auto 0; text-align:center; ) .container( width: 420px; lề:50px auto 0; tràn : ẩn; đệm:5px; ) .elem( chiều rộng:30px; chiều cao:30px; lề:4px; màu nền:#A0DFAC; float:trái; ) .elem span( vị trí: tuyệt đối; trên cùng:5px; trái:5px ; right:5px; đáy:5px; border:2px Solid #fff; ) /* Bộ chọn chọn chữ cái đầu tiên và dòng đầu tiên: */ p::first-letter( nền-color: #666; color: #FFF; phông chữ -size: 24px; kiểu phông chữ:bình thường; hiển thị: khối nội tuyến; phần đệm: 0 5px; bán kính đường viền: 3px; lề phải: 2px; họ phông chữ: serif; ) p::dòng đầu tiên( phông chữ - size: 18px; text-transform: Smallcaps; font-style: italic; text-trang trí: gạch chân; ) /* Làm cho phần tử đầu tiên và cuối cùng có màu tím */ .elem:first-child, .elem:last-child( nền -color :#948bd8; ) /* Làm cho mọi phần tử chẵn thành tròn */ .elem:nth-child(odd)( border-radius:50%; ) /* Làm cho phần tử thứ sáu có màu đỏ */ .elem:nth-child( 6)( màu nền:#cb6364; ) /* Áp dụng kiểu cho các phần tử chứa phần tử span */ .elem:not(:empty)( nền-color:#444; vị trí:relative; -webkit-transform:rotate(25deg); Transform:rotate(25deg); ) /* Chọn các phần tử theo thuộc tính */ .elem( nền-color:#aaa; ) .elem( nền-color:#d7cb89; ) /* Giá trị thuộc tính phải bắt đầu bằng bar. Cả hai phần tử đều phù hợp với điều này */ .elem( width: 16px; chiều cao: 16px; lề: 11px; ) /* Phần tử theo sau phần tử có thuộc tính data-foo="bar2" */ .elem + .elem( nền- màu:#78ccd2; )

Tìm hiểu thêm về các bộ chọn này tại đây hoặc xem qua trình duyệt nào hỗ trợ chúng.

4. Tạo và đếm nội dung

Tạo nội dung- một công cụ mạnh mẽ trong tay các nhà phát triển - được cung cấp nhờ các phần tử giả ::trước và::after. Tính năng này cho phép bạn sử dụng ít mã HTML hơn để đạt được kết quả tương tự.

Điều này đặc biệt hữu ích trong trường hợp bạn cần thêm bóng hoặc các hiệu ứng khác. Các yếu tố hình ảnh, sẽ cần thêm phần tử span hoặc div. Kết quả là HTML nhỏ hơn, chính xác về mặt ngữ nghĩa.

CSS3 cũng cung cấp quyền truy cập của các phần tử giả vào bộ đếm, có thể tăng dần bằng quy tắc CSS. Họ cũng có thể truy cập các thuộc tính của phần tử cha chứa chúng. Xem mã ví dụ bên dưới.

HTML

CSS

Container( /* Đặt bộ đếm cnt thành 0 */ thiết lập lại bộ đếm: cnt; vị trí: tương đối; text-align:center; đệm:20px 0; width:420px; chiều cao: 160px; lề: 0 tự động; ) /* Bạn có thể áp dụng kiểu cho các phần tử giả và đặt nội dung của chúng như thể chúng là các phần tử thực trên trang */ .container::trước( display: block; content:"Di chuột qua các phần tử này:"; font-size:18px; font- trọng lượng: đậm; căn chỉnh văn bản: trung tâm; đệm:15px; ) .container span( display:inline-block; đệm:2px 6px; màu nền:#78CCD2; màu:#186C72; bán kính đường viền:4px; lề: 3px; con trỏ:mặc định; ) /* Tạo bộ đếm phần tử giả */ .container span::after( /* Mỗi lần quy tắc này được thực thi, bộ đếm được tăng thêm 1 */ counter-increment: cnt; /* Thêm một giá trị bộ đếm như một phần của nội dung */ content:" #" counter(cnt); display:inline-block; buffer:4px; ) /* Các phần tử giả thậm chí có thể truy cập các thuộc tính của các phần tử cha của chúng */ .container span: : trước( vị trí: tuyệt đối; đáy: 0; trái: 0; chiều rộng: 100%; nội dung:attr(tiêu đề dữ liệu); màu:#666; độ mờ: 0; /* Tạo hiệu ứng chuyển tiếp */ -webkit-transition:opacity 0,4s; chuyển tiếp: độ mờ 0,4s; ) .container span:hover::Before( opacity:1; )

Việc tạo nội dung được hỗ trợ ở mọi nơi, bao gồm IE9 trở lên.

5. Độ dốc

Chuyển màu cung cấp cho các nhà thiết kế web khả năng tạo chuyển tiếp mượt mà giữa các màu mà không cần sử dụng hình ảnh. Độ dốc CSS cũng trông tuyệt vời trên màn hình retina vì chúng được tạo nhanh chóng.

Chúng có thể là tuyến tính hoặc hướng tâm và cũng có thể được lặp lại. Chuyển màu đã có sẵn được một thời gian và sau một vài thay đổi nhỏ về cú pháp trong vài tháng qua, cuối cùng chúng đã có sẵn ở hầu hết mọi nơi mà không cần tiền tố!

HTML

CSS

Vùng chứa( text-align:center; phần đệm:20px 0; chiều rộng:450px; lề: 0 tự động; ) .container div( chiều rộng:100px; chiều cao:100px; hiển thị:khối nội tuyến; lề:2px; bóng hộp: 0 0 1px rgba(0, 0, 0, 0.5) inet, 0 1px 1px #DDD; bán kính đường viền:2px; màu:#666; căn chỉnh dọc: trên cùng; chiều cao dòng: 230px; cỡ chữ: 12px; ) #el1( nền:tuyến tính-gradient(xuống dưới, #8dd2d9 , #58c0c7); ) #el2( nền:radial-gradient(#77d19e,#46c17b); ) #el3( nền:repeating-ographic-gradient(-45deg , #de9dd4, #de9dd4 5px, trắng 5px, trắng 10px); ) #el4( nền:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, trắng 5px, trắng 10px); )

Nhìn miêu tả cụ thểở đây và bảng tương thích ở đây.

6. Phông chữ

Bạn có thể tưởng tượng rằng đã có lúc chúng ta bị giới hạn chỉ ở một số phông chữ “an toàn trên web” và không có gì hơn không? Thật khó tin khi ngày nay chúng ta có các dịch vụ như Google Fonts hoặc typekit cho phép bạn thêm các phông chữ đẹp chỉ bằng cách đưa biểu định kiểu vào mã trang của bạn.

Thậm chí còn có những phông chữ biểu tượng như fontawesome chứa các biểu tượng vector dễ thương thay vì chữ cái và số. Tất cả điều này có thể thực hiện được nhờ quy tắc @font-face, cho phép bạn xác định tên, đặc điểm và tệp mã nguồn của phông chữ, sau đó bạn có thể tham khảo những quy tắc này trong phần khai báo phông chữ/họ phông chữ của mình.

HTML

Đây là phông chữ web đẹp của tôi!

CSS

h1( /* Sử dụng phông chữ có trong mã HTML: */ font-family: Satisfy, cursive; font-weight: normal; font-size:24px; buffer-top: 60px; )

Với một chút tinh chỉnh, bạn có thể làm cho phông chữ web hoạt động ngay cả trong IE6. Hai dịch vụ phông chữ được đề cập ở trên sẽ giải quyết vấn đề này nên bạn không phải làm gì thêm.

7. Kích thước khối

Vấn đề đau đầu nhất đối với người mới bắt đầu sử dụng CSS là mô hình hộp. Những người tạo ra các tiêu chuẩn có thể có lý do của họ, nhưng không rõ lý do tại sao chiều rộng và chiều cao của một phần tử lại bị ảnh hưởng bởi phần đệm và đường viền.

Tính năng nhỏ (có hại) này phá vỡ đánh dấu và gây ra sự tàn phá, nhưng cuối cùng cũng có cách để khôi phục sự tỉnh táo bằng cách sử dụng quy tắc kích thước hộp. Bạn có thể đặt giá trị trong hộp viền, điều này sẽ làm cho các phần tử hoạt động chính xác như bạn dự định. Xem cho chính mình:

HTML

CSS

Container( text-align:center; ) .container div( /* Đặt thuộc tính box-sizing: */ box-sizing:border-box; /* Firefox vẫn yêu cầu tiền tố -moz */ -moz-box-sizing: border -box; width:120px; Height:120px; display:inline-block; Vertical-align:top; ) /* Nhờ có kích thước hộp, chúng ta có thể đặt bất kỳ phần đệm và đường viền nào chúng ta muốn và các phần tử sẽ giữ nguyên size */ # el1( color:#524480; màu nền:#B2A4E0; ) #el2( đệm:8px; viền:10px rắn #9ec551; màu nền:#fff; ) #el3( đệm:32px; nền- màu:#ccc ; )

Tìm hiểu thêm về quy tắc kích thước hộp tại đây hoặc xem bảng tương thích.

8. Đường viền dạng hình ảnh

Thuộc tính border-image cho phép bạn hiển thị các đường viền tùy chỉnh xung quanh các phần tử. Các đường viền được chứa trong một hình ảnh duy nhất (sprite), trong đó mỗi vùng của hình ảnh tương ứng với một phần cụ thể của đường viền. Ví dụ sau sử dụng hình ảnh làm đường viền.

HTML

Chào mừng những đường viền hình ảnh đẹp!

CSS

p( text-align:center; phần đệm:20px; chiều rộng:340px; lề: 0 tự động; /* Đặt thuộc tính đường viền và hình ảnh cho đường viền */ border:30px Solid Transparent; border-image:url(http:// demo.guidezine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) vòng 30 30; )

Để biết thêm chi tiết, hãy xem trang MDN và bài viết này về các thủ thuật CSS. Đường viền hình ảnh được hỗ trợ trong tất cả các trình duyệt chính và IE11.

9. Quy tắc truy vấn phương tiện

Các quy tắc truy vấn phương tiện là hoàn toàn cần thiết nếu bạn nghiêm túc về việc thiết kế web. Chúng đã có sẵn được một thời gian và điều đáng nói là chúng đã thay đổi cách xây dựng trang web.

Trước đây, bạn phải tạo một trang web thông thường đủ rộng để phù hợp với độ phân giải thấp nhất màn hình được sử dụng vào thời điểm đó; và một phiên bản dành cho thiết bị di động riêng biệt. Các trang web chúng tôi tạo hiện nay đều có tính phản hồi cao: chúng thích ứng với loại thiết bị, hướng màn hình và độ phân giải.

Quy tắc truy vấn phương tiện rất dễ sử dụng - tất cả những gì bạn cần làm là nhập Kiểu CSS trong một khối có quy tắc @media. Mỗi khối @media được kích hoạt khi đáp ứng một hoặc nhiều điều kiện. Ví dụ: hãy thử thay đổi kích thước trang này. Cũng trong ví dụ bên dưới, hãy thử xóa khối @media và xem những thay đổi nào.

HTML

CSS

/* Tạo kiểu cho nội dung chính và khối bên */ .container( width:900px; lề: 0 auto; tràn:hidden; ) .main-section( nền-color:#CDEBC4; color:#6D8B64; width:520px; float : trái; chiều cao:500px; ) .sidebar( màu nền:#ccc; chiều rộng:350px; float:phải; chiều cao:400px; ) .container p( đệm-top:100px; text-align:center; ) .note ( text-align:center; đệm-top:60px; font-style:italic; ) /* Quy tắc truy vấn phương tiện đơn giản này đặt các cột bên dưới nhau trên màn hình nhỏ */ @media (max-width:900px)( .container( chiều rộng :100%; ) .main-section, .sidebar( width:auto; lề-bottom:20px; float:none; ) )

Quy tắc truy vấn phương tiện có thể bao gồm các kiểm tra về độ phân giải và hướng màn hình của thiết bị, độ sâu màu, mật độ điểm ảnh, v.v. Bạn sẽ tìm thấy chi tiết trong bài viết này, và cũng có thể xem bảng tương thích.

10. Nhiều hình nền

Bằng cách sử dụng nhiều hình nền, nhà thiết kế có thể đạt được một số hiệu ứng rất thú vị. Họ có thể chồng các hình ảnh khác nhau lên nhau làm nền của cùng một phần tử.

Mỗi hình ảnh (hoặc lớp) riêng lẻ có thể được di chuyển hoặc hoạt hình, như được minh họa trong ví dụ bên dưới (di chuột qua hình ảnh). Tất cả các quy tắc CSS liên quan đến nền giờ đây có thể chấp nhận danh sách thuộc tính được phân tách bằng dấu phẩy, mỗi thuộc tính cho một hình nền cụ thể:

HTML

CSS

Space( /* Truyền danh sách hình nền được phân tách bằng dấu phẩy: */ nền:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img /rocket_big. png") trung tâm không lặp lại 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") trung tâm phía dưới không lặp lại; chiều rộng:200px; chiều cao:200px; lề: 0 tự động; bán kính đường viền:3px; /* Tạo hiệu ứng hoạt hình cho vị trí của cả hai hình nền */ transition:background-position 1s; ) .space:hover( / * Điều tương tự cũng áp dụng cho các thuộc tính như vị trí nền và lặp lại */ vị trí nền:35% 20px, trên cùng bên phải; )

Thông tin thêm về nhiều hình nền có thể được tìm thấy ở đây. Tính năng này được các trình duyệt hỗ trợ rộng rãi - tất cả các phiên bản mới đều hỗ trợ nó ( xem bảng).

11. Cột CSS

Bố cục cột nổi tiếng là khó triển khai trong CSS. Thông thường, điều này sẽ liên quan đến việc sử dụng JavaScript hoặc xử lý phía máy chủ để tách nội dung thành các phần tử khác nhau.

Quá trình này phức tạp không cần thiết và khiến nhà phát triển mất thời gian quý báu khỏi những việc thực sự quan trọng. May mắn thay, hiện nay có một cách giải quyết vấn đề này bằng cách sử dụng quy tắc cột CSS:

HTML

CSS

Container( width: 500px; Margin: 0 auto; ) /* Tạo cột giờ đây dễ dàng như thế này: */ .container p( -moz-columns:3; -webkit-columns:3; columns:3; )

Quy tắc này là được hỗ trợ rộng rãi, mặc dù vẫn yêu cầu tiền tố. Nơi nội dung được chia thành các cột tùy thuộc vào sự hỗ trợ của trình duyệt đối với các quy tắc bố cục cụ thể và trên sự khác biệt trong xử lý trình duyệt các trường hợp biên giới.

12. Chuyển đổi 3D bằng CSS

Không có gì đẹp mắt bằng một bản demo 3D ấn tượng bằng CSS. Mặc dù còn gây tranh cãi khi sử dụng loại chuyển đổi này bên ngoài các bản trình diễn hoặc trang web danh mục đầu tư, CSS 3D cung cấp chức năng mạnh mẽ cho các nhà thiết kế và nhà phát triển có thể chiếm được cảm tình của người dùng nếu nó được triển khai tốt.

Hãy xem mã ví dụ sau:

HTML

CSS

Container( /* Hiệu ứng 3D sẽ được phát âm như thế nào */ phối cảnh: 800px; -webkit-perspective: 800px; nền: radial-gradient(#e0e0e0, #aaa); width:480px; Height:480px; lề:0 auto; border -radius:6px; location:relative; ) .iphone-front, .iphone-back( /* Kích hoạt tính năng chuyển đổi 3D */ Transform-style: Serve-3d; -webkit-transform-style: Prevent-3d; /* Chúng tôi sử dụng hai phần tử div riêng biệt cho mặt trước và mặt sau của điện thoại Đoạn mã sau sẽ ẩn div khi nó được lật để hiển thị mặt sau: */ backface-visibility:hidden; -webkit-backface-visibility:hidden;width:200px; chiều cao:333px ; vị trí:tuyệt đối; trên cùng:50%; trái:50%; lề:-166px 0 0 -100px; nền:url(http://demo.tutorialzine.com/2013/10/css3-features-you -can-final-use/assets/img/iphone.png) trung tâm bên trái không lặp lại; /* Hoạt ảnh chuyển tiếp */ transition:0.8s; ) .iphone-back( /* Mặt sau được lật 180 độ theo mặc định * / biến đổi:rotateY (180deg); -webkit-transform:rotateY(180deg); vị trí nền: chính giữa bên phải; ) .container:hover .iphone-front( /* Khi chuột ở trên vùng chứa, hãy lật mặt trước lên và ẩn nó đi, ... */ Transform:rotateY(180deg); -webkit-transform:rotateY(180deg) ; ) .container :hover .iphone-back( /* ... trong khi hiển thị bảng mặt sau */ Transform:rotateY(360deg); -webkit-transform:rotateY(360deg); )

Mã này dựa trên của chúng tôi Biểu mẫu đăng nhập kiểu Apple. Nếu bạn muốn tìm hiểu thêm về chuyển đổi 3D trong CSS, hãy xem phần này hướng dẫn chi tiết. Nếu bạn không cần hỗ trợ cho các phiên bản IE cũ hơn, phần còn lại hỗ trợ trình duyệt nó đủ rộng.

Các phương pháp khác đáng nói đến

Có những tính năng đáng nhớ khác đáng được đề cập. Nếu chưa, bạn có thể ngừng thêm tiền tố vào các thuộc tính bán kính đường viền và bóng hộp. Bây giờ bạn cũng có thể sử dụng data-uris làm hình nền trong tất cả các trình duyệt. Độ mờ cũng được hỗ trợ ở mọi nơi, cũng như thuộc tính kích thước nền rất hữu ích.

Chúng tôi sẽ phải chờ thêm một thời gian nữa để được hỗ trợ cho flexbox, @supports, bộ lọc và mặt nạ CSS, nhưng tôi nghĩ sự chờ đợi này sẽ xứng đáng!

Dịch bài viết" 12 tính năng CSS3 tuyệt vời mà cuối cùng bạn có thể bắt đầu sử dụng"đã được chuẩn bị bởi nhóm dự án thân thiện.

Tốt xấu

Ngày tốt. Tôi muốn cho bạn biết về xu hướng của các hàm trong CSS 3 cũng như cách nó có thể và thậm chí đôi khi nên được sử dụng trong các dự án.

Để không lãng phí thời gian của bạn, tôi sẽ mô tả các đặc tính mà tôi muốn nói với bạn:

• chức năng truy cập
• hàm tính toán
• hàm attr
• chức năng chuyển đổi
• đơn vị đo lường - rem
• đơn vị đo lường - vw
• đơn vị đo lường - vh

Các hàm trong css 3

Niềm vui mừng lớn lao lan khắp đội ngũ các nhà phát triển khi chúng tôi nhận được một trong những chức năng đầu tiên - truy vấn phương tiện, cho phép chúng tôi chấp nhận một số kiểu nhất định tùy thuộc vào tất cả các loại yếu tố bên ngoài. Trên thực tế, nó chỉ là một sự bổ sung lớn cho những gì đã được chuẩn hóa từ trước. phiên bản css 2.1 chức năng

Nhờ sự xuất hiện của những cơ hội như vậy, thế giới trở nên tươi sáng hơn, các trang web trở nên thuận tiện hơn rất nhiều khi được xem từ tất cả các loại tiện ích và các khái niệm như Thiết kế web đáp ứng và Thiết kế web thích ứng đã ra đời (trên thực tế, thứ hai là một tập hợp con của cái đầu tiên).

w3c không dừng lại ở đó và gần đây chúng tôi đã nghe nói về một chức năng như hỗ trợ hoặc Truy vấn tính năng CSS, chỉ được hỗ trợ trong firefox bắt đầu từ phiên bản 21, chrome bắt đầu từ phiên bản 28 và trong opera mới nhất (12.1).

Đây là những ngôi sao của chúng tôi, họ được chú ý và mọi người đều yêu mến họ. Với họ mọi thứ đều khá rõ ràng và hiển nhiên. Bây giờ chúng ta hãy xem xét các chức năng ít quan trọng hơn.

Quầy tính tiền

Đây là một hàm tăng dần trong css, hàm này đã tồn tại từ phiên bản 2.1. Bạn hỏi cô ấy đang làm gì vậy?! Và cô ấy làm như sau:
Chức năng bộ đếm cho phép bạn bắt đầu bộ đếm bằng một tên, tăng nó và đặt lại về 0. Nội dung bộ đếm có thể được hiển thị thông qua các phần tử giả sau và trước. Nói chung, hãy bắt chước danh sách của bạn, mặc dù tôi không tìm thấy bất kỳ lợi ích nào từ chức năng này cho bản thân tôi.

tính toán

Về hỗ trợ:

• Trình duyệt web IE 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera không hỗ trợ

Cá nhân tôi thực sự thích chức năng này, vì nó sẽ cho phép tôi rút ngắn mã một chút, chẳng hạn như khi tôi cần căn giữa một phần tử:

francose Ngày 25 tháng 4 năm 2014 tại 07:04

Các hàm định giờ trong CSS 3 và cách chúng được sử dụng

• Phát triển trang web,
• CSS
• HTML

• Dịch

Này mọi người, hãy thắt dây an toàn và giữ chặt nhé, vì đây là một khoảnh khắc thực sự thú vị: bạn phải hiểu được sự phức tạp của những khoảng thời gian cực kỳ thú vị. S x tính năng CSS!

Được rồi, chủ đề của bài viết này có lẽ sẽ không khiến bạn sôi máu, nhưng đừng nói đùa: các hàm tạm thời là một loại ngọc ẩn khi nói đến CSS và bạn có thể sẽ ngạc nhiên về số lượng nội dung thú vị mà bạn có thể làm với họ.

Trước hết, chúng ta phải hiểu rõ khi nào các hàm tính thời gian được sử dụng trong CSS. Vì vậy, chức năng này được thiết kế để hoạt động với hoạt ảnh CSS: chuyển tiếp và hoạt ảnh theo từng khung hình (khung hình chính).

Về chức năng định giờ trong CSS

Tính chất này là một trong những tính chất khó thấy nhất trong Hoạt ảnh CSS, trong khi hầu hết các thuộc tính trong danh mục này đều khá dễ hiểu. Tuy nhiên, bản chất của nó là kiểm soát và thay đổi tốc độ của hoạt ảnh: nó xác định các điểm tăng tốc và giảm tốc trong một khoảng thời gian xác định.

Sử dụng thuộc tính này bạn có thể đạt được khác nhau nhận thức của người dùng về tốc độ hoạt ảnh, trong khi thời lượng thực tế của nó không thay đổi. Vì vậy, nếu bạn vẫn chưa quyết định bỏ chạy mà không nhìn lại, hãy tiếp tục, bởi vì các hàm tạm thời chứa đựng nhiều điều thú vị hơn những hàm sau từ đặc tả khô khan.

Lưu ý: thuộc tính chức năng thời gian không tồn tại. Bằng cách đặt tên cho thuộc tính này, tôi thực sự đang nói về transition-timing-function và animation-timing-function .

Trước khi tiến xa hơn, hãy làm quen với cú pháp và xem nó phù hợp như thế nào với toàn bộ quá trình xác định hoạt ảnh CSS. Để đơn giản, hãy sử dụng chuyển tiếp CSS và viết riêng tất cả các thuộc tính chuyển tiếp:

Div ( transition-property: nền; transition-duration: 1s; transition-delay: .5s; transition-timing-function: Linear; ) /* Điều này tất nhiên có thể được rút ngắn thành: */ div ( transition: nền 1s tuyến tính .5s; )
Ký hiệu viết tắt cho quá trình chuyển đổi không có thứ tự giá trị nghiêm ngặt, nhưng yêu cầu giá trị độ trễ chuyển tiếp xuất hiện sau giá trị thời lượng chuyển tiếp (không nhất thiết phải ngay sau đó). Ngoài ra, giá trị thời lượng chuyển tiếp là giá trị duy nhất cần thiết để xác định hàm. Và vì các giá trị mặc định cho các tham số còn lại khá chấp nhận được nên bạn sẽ hiếm khi cần nhiều hơn:

Div ( transition: 1s; ) /* Tương tự như: */ div ( transition: tất cả 1s 0s dễ dàng; )

Nhưng nó thật nhàm chán. Mặc dù các giá trị mặc định phù hợp với một số thao tác di chuột cơ bản, nhưng khi bạn đang làm việc gì đó quan trọng hơn, các hàm định thời gian chứng tỏ là một công cụ quan trọng để tinh chỉnh hoạt ảnh của bạn!

Bây giờ bạn đã biết Cái gì thực hiện các chức năng tạm thời, đã đến lúc tìm hiểu Làm sao họ làm điều đó.

Chúng ta hãy nhìn dưới mui xe

Nhiều bạn có lẽ chưa tập trung chú ý vào các giá trị hợp lệ của thuộc tính hàm thời gian. Vì vậy, có năm trong số chúng: dễ dàng (mặc định), dễ dàng, dễ dàng, dễ dàng, dễ dàng và tuyến tính. Hơn nữa, những giá trị này chỉ là ký hiệu ngắn gọn của định nghĩa đường cong Bezier.

Ơ, cái gì cơ?!

Có thể bạn không quen với thuật ngữ này, nhưng tôi cá là bạn đã thực sự nhìn thấy đường cong Bezier. Chết tiệt nếu bạn sử dụng bất kỳ gói đồ họa, thì có lẽ họ thậm chí còn tự tạo ra nó! Đúng rồi, vì khi bạn sử dụng công cụ Pen hoặc Path để tạo đường cong mượt mà thì thứ bạn nhận được là đường cong Bezier! Trong trường hợp của chúng tôi, đó là “sự kỳ diệu” của hàm thời gian, mô tả loại gia tốc trên biểu đồ.

Đường cong Bezier này tương ứng với giá trị dễ dàng (tín dụng hình ảnh: Tạp chí Smashing)

Nếu phản ứng của bạn khi nhìn thấy đường cong Bezier lần đầu tiên giống với phản ứng của tôi, thì bạn có thể đặt câu hỏi: làm thế nào có thể xây dựng một đường cong như vậy từ bốn điểm trên biểu đồ?! Tôi khó có thể giải thích điều này cho bạn bằng lời, nhưng tôi có một ảnh gif tuyệt vời sẽ giúp tôi điều này:

Vẽ đường cong Bezier (ảnh lấy từ Wikipedia)

Vì đường cong này được xây dựng từ bốn điểm nên chúng tôi gọi nó là đường cong Bezier bậc ba, trái ngược với đường cong bậc hai (ba điểm) và đường cong bậc bốn (bậc bốn, năm điểm).

hàm khối-bezier()

Nhưng bây giờ nó sẽ trở nên thú vị hơn đối với bạn, bởi vì tôi sẽ nói với bạn rằng bạn có thể xác định một đường cong bậc ba bằng cách sử dụng hàm cub-bezier(), sử dụng nó thay vì các giá trị chính của thuộc tính hàm thời gian. Tôi nghĩ bạn cần một chút thời gian để kiềm chế sự phấn khích của mình.

Với hàm cub-bezier(), bạn có thể thao tác đường cong theo ý muốn, đồng thời thiết lập hoàn toàn mọi thông số gia tốc cho hoạt ảnh của mình! Vì vậy, chúng ta hãy xem chức năng này hoạt động như thế nào và nó cho phép bạn tạo các đường cong Bezier của riêng mình như thế nào.

Đầu tiên, chúng ta đã biết rằng một đường cong bậc ba được xây dựng bằng bốn điểm: 0, 1, 2, 3. Thứ hai, điều quan trọng cần nhớ là điểm đầu và điểm cuối (0 và 3) đã được xác định trên biểu đồ, trong đó điểm 0 luôn có giá trị 0;0 (dưới cùng bên trái) và điểm 3 có giá trị 1;1 (trên cùng bên phải).

Điều kiện này khiến chúng ta chỉ còn hai điểm cần được đặt trên biểu đồ và điều này có thể được thực hiện bằng cách sử dụng hàm cub-bezier()! Phải có bốn đối số: hai đối số đầu tiên là tọa độ x, y của điểm đầu tiên; hai thứ hai là tọa độ x, y của điểm thứ hai.

Hàm định thời chuyển tiếp: khối-bezier(x1, y1, x2, y2);
Để giúp bạn hiểu cú pháp và cách hàm này tạo đường cong cũng như tác dụng vật lý của nó đối với hoạt ảnh, tôi sẽ chỉ cho bạn năm giá trị chính của thuộc tính hàm định giờ, tương đương với khối-beizer() của chúng, và hiệu ứng hoạt hình thu được.

DỄ DÀNG VÀO

Hãy bắt đầu với giá trị quan trọng này, vì cả logic xây dựng đường cong và chuyển nó thành hoạt ảnh có lẽ là dễ hiểu nhất hiện nay.

/* Tương đương với giá trị khóa easy-in-out */ transition-timing-function: cub-bezier(.42, 0, .58, 1);

Đường cong Bezier đối xứng hoàn hảo, có nghĩa là hoạt ảnh sẽ tăng tốc và chậm lại ở cùng một tốc độ (tín dụng hình ảnh: Smashing Magazine)

Điểm 1 nằm ở 0,42 trên trục x và 0 trên trục y, trong khi điểm 2 lần lượt nằm ở 0,58 và 1. Kết quả là một đường cong Bezier đối xứng hoàn hảo: hoạt ảnh sẽ tăng tốc và giảm tốc độ ở cùng một tốc độ. Do đó tên của từ khóa.

Nhìn vào bản demo bạn sẽ thấy tác dụng vật lý của giá trị easy-in-out, so sánh nó với các giá trị khác.

Nguồn hoạt hình trên Codepen

XOA DỊU

Giá trị khóa này là giá trị mặc định của thuộc tính hàm thời gian. Trên thực tế, nó rất giống với phần trước, mặc dù hoạt ảnh tăng tốc nhanh hơn và hoạt ảnh chậm lại dần dần.

/* Tương đương với giá trị khóa dễ */ transition-timing-function: cub-bezier(.25, .1, .25, 1);

Đường cong dễ dàng có phần đầu dốc và phần tiếp theo mượt mà hơn nhiều (hình ảnh do Tạp chí Smashing cung cấp)

Lưu ý rằng đường cong có độ dốc rõ hơn ở phần đầu, trong khi phần cuối dài hơn - điều này có tác động vật lý trực tiếp của chức năng định thời gian lên hoạt ảnh. Khi bạn đã xem qua tất cả các ví dụ, hãy nhớ quay lại bản demo lúc đầu để so sánh các hiệu ứng.

EASE-IN VÀ EASE-OUT

Như bạn có thể đoán, dữ liệu giá trị khóa có ý nghĩa ngược lại. tính năng dễ dàng tăng tốc hoạt ảnh một cách mượt mà đến tốc độ tối đa về cuối, trong khi tính năng dễ dàng giảm nhẹ nhàng tốc độ tối đa ban đầu trước khi hoạt ảnh kết thúc. Theo logic, giá trị khóa dễ vào mà chúng ta đã xem xét trước đó là sự kết hợp tuyệt vời của hai đường cong Bezier này.

/* Tương đương với easy-in */ transition-timing-function: cub-bezier(.42, 0, 1, 1); /* Tương đương với easy-out */ transition-timing-function: cub-bezier(0, 0, .58, 1);


Đường cong Bezier: thoải mái ở bên trái, dễ dàng ra ở bên phải (nguồn hình ảnh: Tạp chí Smashing)

TUYẾN TÍNH

Giá trị khóa cuối cùng, thực tế không áp dụng cho các đường cong. Đúng như tên gọi của nó, thuộc tính hàm thời gian tuyến tính đặt tốc độ giống nhau trong toàn bộ hoạt ảnh, có nghĩa là thay vì đường cong Bezier, chúng ta có một đường thẳng. Nghĩa là, trong trong trường hợp này Không có mô hình gia tốc nào cho hình ảnh đồ thị.

/* Tương đương với tuyến tính */ transition-timing-function: cub-bezier(0, 0, 1, 1);

Tuyến tính có nghĩa là tốc độ như nhau trong suốt hoạt ảnh (tín dụng hình ảnh: Tạp chí Smashing)

Nếu bạn xem lại bản demo lúc đầu, có thể bạn sẽ nhận thấy rằng mặc dù có cùng thời lượng nhưng một số hoạt ảnh có vẻ chậm hơn những hoạt ảnh khác. Tại sao chuyện này đang xảy ra? Chà, ví dụ, với tính năng easy-in-out, phần đầu và phần cuối của hoạt ảnh bị trì hoãn. Do đó, để duy trì trong thời lượng nhất định, về cơ bản, tốc độ hoạt ảnh cao hơn đáng kể. Do hành vi này, chúng tôi nhận thấy nó ngắn hơn và nhanh hơn, trong khi đó, chẳng hạn, hoạt ảnh tuyến tính có vẻ dài và lôi cuốn chúng tôi.

Đến bây giờ, bạn có thể cảm thấy bài viết này hơi chậm để đi vào vấn đề, vì vậy hãy chuyển ngay sang hàm cub-bezier() và tạo các hàm tính thời gian của riêng bạn với nó.

Tạo mô hình tăng tốc của riêng bạn bằng hàm cub-bezier()

Bây giờ chúng ta đã tìm hiểu các giá trị chính của thuộc tính hàm thời gian và các đường cong Bezier tương ứng của chúng, đồng thời thấy tác dụng của chúng đối với hoạt ảnh, hãy tìm hiểu cách tạo mô hình gia tốc của riêng mình bằng cách sử dụng thao tác đường cong.

Đến bây giờ, chúng tôi giả định rằng bạn đã biết cách đặt điểm 1 và 2 trên biểu đồ bằng hàm cub-bezier() và hiểu rõ ràng về cách điều này ảnh hưởng đến hoạt ảnh. Mặc dù vậy, nếu bạn thực hiện việc này một cách “mù quáng”, không có gì đáng ngạc nhiên khi hoạt động này có thể nhanh chóng trở nên nhàm chán.

May mắn thay, có những người như Lea Verou trên Trái đất có lẽ sẽ không nghỉ ngơi cho đến khi việc mã hóa CSS trở nên dễ dàng hơn! Lee đã phát triển ứng dụng Cubic Bezier để tạo các đường cong Bezier của riêng bạn và so sánh chúng với các đường cong tiêu chuẩn. Vì vậy, thay vì chạy đi chạy lại các số trong cub-bezier() , hãy truy cập Cubic Bézier , chơi với đường cong và xem kết quả. Điều này mát mẻ hơn nhiều!

Ảnh chụp màn hình trang web Cubic Bézier (nguồn hình ảnh: Tạp chí Smashing)

Ở giai đoạn đầu, các đường cong hàm thời gian tiêu chuẩn là thứ bạn cần, nhưng sự khác biệt giữa chúng không quá rõ ràng. Nhưng một khi bạn bắt đầu tạo các đường cong Bezier của riêng mình, bạn sẽ cảm nhận được tác động của chúng đối với hoạt ảnh thu được mạnh mẽ như thế nào.

Chỉ cần xem các ví dụ sau và nhận thấy sự khác biệt đáng kể giữa các hoạt ảnh khi chúng có tổng thời lượng như nhau.

Nguồn hoạt hình trên Codepen

Chà, bây giờ chúng ta hãy xem ví dụ đầu tiên trong số các ví dụ trên và cố gắng hiểu hiệu ứng này khác biệt như thế nào so với các ví dụ còn lại.

/* các giá trị cub-bezier() ​​cho ví dụ đầu tiên từ bản demo */ transition-timing-function: cub-bezier(.1, .9, .9, .1);

Ví dụ về đường cong Bezier tùy chỉnh (tín dụng hình ảnh: Tạp chí Smashing)

Sự khác biệt chính giữa hàm thời gian này và các giá trị mặc định là độ lệch rõ rệt của đường cong so với thang đo “tiến trình” (dọc theo trục y). Điều này quyết định bắt đầu nhanh và hoạt ảnh kết thúc nhưng có một khoảng dừng dài ở giữa (tại thời điểm đường cong phẳng ra). Mô hình này hoàn toàn trái ngược với những gì chúng ta đã quen với các tính năng tính thời gian thông thường, có cách tiếp cận ngược lại, làm chậm hoạt ảnh ở đầu và cuối thay vì ở giữa.

Bây giờ hãy sáng tạo

Đúng vậy: Đường cong Bezier ngày càng thú vị hơn! Và ai có thể nghĩ vậy? Trong khi đó, ranh giới của trí tưởng tượng được mở rộng khi phát hiện ra rằng chỉ có thang thời gian (dọc theo trục x) bị giới hạn trên biểu đồ bởi khoảng từ 0 đến 1, trong khi thang đo tiến triển (dọc theo trục y) có thể mở rộng ngoài nó cả bên dưới và bên trên.

Thang tiến triển chính xác như những gì bạn nghĩ: phần dưới cùng (0) biểu thị phần bắt đầu của hoạt ảnh và phần trên cùng (1) biểu thị phần cuối. Thông thường, đường cong Bezier hình khối sẽ luôn tuân theo một tỷ lệ nhất định từ dưới lên trên với các cường độ khác nhau cho đến khi đạt đến điểm cuối của hoạt ảnh. Tuy nhiên, khả năng đặt điểm 1 và 2 bên ngoài khoảng cách 0-1 cho phép đường cong mở rộng ra ngoài nó, gây ra chuyển động trong hướng ngược lại! Như thường lệ, cách tốt nhất để hiểu điều này là xem xét:

Đường cong Bezier với các giá trị nằm ngoài 0-1 (tín dụng hình ảnh: Tạp chí Smashing)

Điểm 2 nằm ngoài khoảng 0-1 thông thường bằng -0,5, từ đó kéo đường cong xuống. Hãy xem bản demo sau và bạn sẽ thấy hiệu ứng "nảy" ở giữa hoạt ảnh.

Nguồn hoạt hình trên Codepen

Ngược lại, bạn có thể đặt "chuyển động lùi" này ở đầu hoạt ảnh và cũng có thể làm cho đường cong "chạy hết" vượt quá điểm cuối dự định một chút. Hãy tưởng tượng lùi lại vài bước để bắt đầu chạy; rồi cuối cùng bạn lao qua vạch đích, buộc bạn phải lùi lại một chút để kiểm tra thời gian trên đồng hồ bấm giờ. Hãy xem ví dụ để thực sự hiểu những gì chúng ta đang nói đến. Chúng ta đang nói về. Ngoài ra, hãy tìm hiểu đường cong Bezier tạo ra hiệu ứng này.

Nguồn hoạt hình trên Codepen

Đường cong Bezier với các giá trị nằm ngoài 0-1 (tín dụng hình ảnh: Tạp chí Smashing)

Bây giờ bạn đã có một ý tưởng khá hay về việc các giá trị cub-bezier() vượt quá 0-1 có thể ảnh hưởng về mặt vật lý như thế nào đến hành vi của hoạt ảnh. Tất nhiên, chúng ta có thể nhìn chằm chằm vào các khối chuyển động cả ngày, nhưng hãy kết thúc phần này bằng một ví dụ thể hiện rõ ràng cách tiếp cận sáng tạo khi sử dụng hàm thời gian.

Nguồn hoạt hình trên Codepen

Đúng vậy: chúng ta đang tạo hoạt ảnh cho một quả bóng bay! Cái gì?.. Đây có phải là điều bạn luôn muốn làm với CSS không?

Bản chất của hoạt ảnh là “thổi phồng” quả bóng bằng cách nhấp vào nó sao cho nó bay lên “trần nhà” và hơi nảy ra khỏi quả bóng, giống như thật. Giá trị của cub-bezier() vượt quá ranh giới 0-1 là công cụ cho phép chúng ta tạo ra hiệu ứng “nảy” này, tái tạo hành vi thực tế. Đoạn mã được trình bày hiển thị tọa độ được đặt trong hàm cub-bezier() và sau đó hiển thị đường cong kết quả.

/* Các giá trị cub-bezier() ​​cho quả bóng nảy */ transition-timing-function: cub-bezier(.65, 1.95, .03, .32);

Đường cong Bezier mô phỏng một quả bóng "nảy" (nguồn hình ảnh: Tạp chí Smashing)

Ví dụ này cho thấy một cách hoàn hảo cách đường cong được chuyển thành hình ảnh động cuối cùng, vì đường cong phản ánh nó gần như hoàn hảo. Đầu tiên, đường cong đi từ đầu thang tiến triển theo một đường thẳng, làm cho quả bóng chuyển động từ đầu đến cuối với cùng tốc độ. Sau đó, giống như một quả bóng bay chậm lại, đường cong uốn cong mạnh theo hướng ngược lại trước khi dần dần bắt đầu quay trở lại đỉnh. Trên thực tế, mọi thứ đều rất đơn giản!

Vì vậy, một khi bạn nắm vững đường cong và nghệ thuật điều khiển nó, bạn sẽ trở nên thông minh!

Chức năng định giờ và hoạt ảnh CSS theo từng khung hình

Trước khi chúng ta tiến xa hơn, cần đề cập đến hành vi của các hàm tính thời gian khi được sử dụng trong hoạt ảnh theo từng khung hình. Nghĩa tổng quát giống nhau (so với các chuyển tiếp), tuy nhiên có một ngoại lệ đáng ghi nhớ: khi bạn áp dụng một hàm tạm thời cho nhiều khung, nó sẽ thực thi trên từng khung hình hơn trong toàn bộ hoạt ảnh.

Nghĩa là, nếu bạn có bốn khung di chuyển một hình vuông từ góc này sang góc khác bên trong một thùng chứa và bạn áp dụng một chức năng tạm thời với tính năng "nảy" (giống như chúng ta đã sử dụng cho quả bóng), mỗi chuyển động trong số bốn chuyển động sẽ là chịu sự "nảy" này hơn tất cả hoạt hình. Hãy xem hành vi này trong thực tế và trong mã.

Hoạt hình gốc trên Codepen (gif bị cong)

@keyframes hình vuông ( 25% ( top:200px; left:0; ) 50% ( top:200px; left:400px; ) 75% ( top:0; left:400px; ) ) div ( animation: Square 8s khối vô hạn- bezier(.65, 1.95, .03, .32); top: 0; left: 0; /* Các kiểu khác */ )
Lưu ý rằng khi khung không được xác định 100%, phần tử chỉ cần trở về trạng thái ban đầu. Trong trường hợp này, đây là thứ chúng ta cần, vì vậy chúng ta sẽ không xác định khung này. Từ ví dụ này, bạn có thể thấy rõ hoạt động của hàm thời gian trên cả bốn khung hình bằng cách hình vuông trên mỗi khung hình bật ra khỏi các bức tường của khung hình.

Nếu bạn cần xác định hàm tính thời gian của riêng mình cho một khung cụ thể, thì hãy xác định hàm đó trực tiếp trong mã cho khung đó, như trong ví dụ sau:

@keyframes hình vuông ( 50% ( top: 200px; left: 400px; animation-timing-function: easy-in-out; ) )

Các bước chức năng tạm thời()

Bạn có nghĩ rằng đây là sự kết thúc của cuộc phiêu lưu của chúng tôi? Cho dù nó thế nào đi chăng nữa! Tôi đã nói với bạn rằng CSS không bị giới hạn ở các hàm tính thời gian tích hợp sẵn!

Trong phần này, chúng ta sẽ khám phá khái niệm về hàm "bước" và thay thế đường cong bằng đường thẳng bằng cách sử dụng hàm thời gian từng bước.

Chức năng này rất hữu ích, mặc dù tính đặc hiệu của nó. Nó cho phép bạn chia hoạt ảnh thành các phân đoạn, điều này sẽ phân biệt nó với chuyển động hoạt hình thông thường. Ví dụ: nếu chúng ta cần di chuyển một hình vuông 400 pixel sang phải trong 4 bước trong 4 giây, thì thay vì di chuyển trơn tru, nó sẽ “nhảy” 100 pixel mỗi giây. Bây giờ chúng ta hãy xem mã cho ví dụ này. Chắc hẳn anh ấy đã có một luồng gió mới sau khi đi sâu vào sự phức tạp của hàm cub-bezier()!

Nguồn hoạt hình trên Codepen

Div ( transition: 4s step(4); ) div:target ( left: 400px; )
Như bạn có thể thấy, tất cả chỉ là xác định số lượng phân đoạn hoạt ảnh. Nhưng hãy nhớ rằng nó không thể âm hoặc số thập phân. Ngoài ra còn có một đối số thứ hai, tùy chọn, có các giá trị có thể là bắt đầu và kết thúc (giá trị sau là giá trị mặc định).

Chức năng chuyển đổi thời gian: các bước (4, bắt đầu); chức năng chuyển đổi thời gian: các bước (4, kết thúc);
Giá trị bắt đầu bắt đầu hoạt ảnh ở đầu mỗi bước và giá trị cuối bắt đầu hoạt ảnh ở cuối. Liên quan đến “hình vuông chuyển động”, bức tranh này sẽ giúp giải thích rõ hơn sự khác biệt giữa hai ý nghĩa này.

Sự khác biệt giữa giá trị bắt đầu và kết thúc của hàm step() (hình ảnh do Tạp chí Smashing cung cấp)

Như bạn có thể thấy, với giá trị bắt đầu, hoạt ảnh sẽ bắt đầu ngay lập tức và với giá trị kết thúc, hoạt ảnh sẽ bắt đầu với độ trễ một giây (trong trường hợp này).

Chà, để hiểu rõ hơn, hãy lưu ý rằng hàm step() có hai đối số được xác định trước: step-start và step-end , tương ứng với các bước (1, bắt đầu) và các bước (1, kết thúc).

Cách tiếp cận sáng tạo đối với các chức năng "từng bước"

Có lẽ từ công việc hàng ngày Có thể bạn sẽ không thường xuyên tạo hoạt ảnh cho một hình vuông chuyển động, nhưng bạn có thể thực hiện nhiều điều thú vị khác với hàm step(). Giả sử nếu bạn có sẵn một số nhân vật hoạt hình thì bạn có thể sử dụng kỹ thuật đã học để tạo hoạt ảnh chỉ bằng một vài nhân vật hoạt hình. Thuộc tính CSS! Hãy xem bản demo và mã.

Nguồn hoạt hình trên Codepen

Div ( chiều rộng: 125px; chiều cao: 150px; nền: url(images/sprite.jpg) left; transition: 2s step(16); /* Số bước = số khung hình trong phim hoạt hình */ ) div:target ( vị trí nền: -2000px 0; )
Vậy là chúng ta có một hình chữ nhật rộng 125px với hình nền 2000px chứa 16 khung hình. Ban đầu, hình ảnh này nằm ở cạnh trái của hình chữ nhật và tất cả những gì chúng ta phải làm là di chuyển nó sang trái để tất cả 16 khung hình đi qua “cửa sổ” nhỏ của hình chữ nhật. Với hoạt ảnh "bình thường", các khung hình sẽ lướt qua một cách đơn giản, nhưng với hàm step(), hình nền được dịch chuyển sang trái theo đúng 16 bước, hiển thị đầy đủ từng khung hình của hình ảnh. Đây là cách chúng tôi tạo một phim hoạt hình nhỏ chỉ bằng hoạt ảnh CSS!

Trình diễn cách dịch chuyển hình nền để mỗi khung hình đi qua một "cửa sổ" nhỏ (nguồn hình ảnh: Smashing Magazine)

Tôi đã tìm thấy một cách sử dụng thú vị khác của hàm step() nhờ Leah Weru (còn ai nữa?), người đã nghĩ ra một hoạt hình gõ máy tính rất thú vị. Tôi sẽ kể cho bạn nghe về nó bây giờ.

Nguồn hoạt hình trên Codepen

Đầu tiên, bạn cần một số văn bản. Và thật không may, bạn cần biết nó chứa bao nhiêu ký tự, vì bạn sẽ phải sử dụng con số này trong CSS. Một điều kiện khác: phông chữ phải cách đều nhau để tất cả các ký tự đều có cùng chiều rộng.

đập phá

.text ( width: 6.6em; width: 11ch; /* Số ký tự */ border-right: .1em Solid; font: 5em monospace; )
Văn bản của chúng tôi bao gồm 11 ký tự. Chúng tôi sẽ chỉ ra độ dài của chuỗi bằng đơn vị ch và đối với các trình duyệt không hỗ trợ nó, chúng tôi sẽ viết một giá trị khác. Hơn nữa về bên phải các dòng chúng ta sẽ đặt một khung màu đen, khung này sẽ trở thành con trỏ. Và bây giờ mọi thứ đã sẵn sàng, tất cả những gì chúng ta cần làm là tạo hiệu ứng động cho văn bản, việc này cực kỳ dễ dàng.

Chúng ta sẽ cần hai hình động riêng biệt: một cho con trỏ và một cho bản in. Để tạo con trỏ, bạn chỉ cần làm cho khung màu đen nhấp nháy.

@keyframes con trỏ ( 50% ( border-color: trong suốt; ) ) .text ( /* kiểu hiện có */ hoạt hình: con trỏ 1s cuối bước vô hạn; )
Đúng như dự đoán, khung chỉ đơn giản thay đổi màu từ đen sang trong suốt và ngược lại. Trong trường hợp này, hàm step() có một ý nghĩa nhất định: loại bỏ nó và con trỏ, thay vì “nhấp nháy”, sẽ xuất hiện và biến mất một cách trơn tru.

Cuối cùng, hoạt ảnh gõ cũng đơn giản như vậy. Tất cả những gì chúng ta cần làm là giảm độ dài của chuỗi xuống 0, sau đó tăng dần theo 11 bước (theo số lượng ký tự).

@keyframes đang gõ ( from ( width: 0; ) .text ( /* kiểu hiện có */ hoạt hình: gõ 8 bước (11), con trỏ 1 giây ở cuối bước vô hạn; )
Văn bản sẽ “mở rộng” từng chữ cái một trong tám giây, trong khi “con trỏ” (viền bên phải) sẽ nhấp nháy liên tục. Kỹ thuật này đơn giản nhưng hiệu quả.

Bây giờ chúng ta có thể mở rộng ví dụ tuyệt vời này bằng cách thử tác dụng ngược lại - xóa văn bản. Để thực hiện việc này, bạn cần thay đổi từ khóa khung từ từ sang thành rồi thêm tham số animation-fill-mode với giá trị chuyển tiếp để đảm bảo rằng khi văn bản bị "xóa" (tức là khi hoạt ảnh kết thúc), nó vẫn giữ nguyên "LOẠI BỎ". Nhìn vào bản demo.

Nguồn hoạt hình trên Codepen

@-webkit-keyframes đang gõ ( to ( width: 0; ) ) @keyframes đang gõ ( to ( width: 0; ) ) @-webkit-keyframes con trỏ ( 50% ( border-color: Transparent; ) ) @keyframes con trỏ ( 50 % ( border-color: trong suốt; ) .text ( width: 6.6em; width: 11ch; /* Số ký tự */ border-right: .1em Solid; tràn: ẩn; phông chữ: 5em monospace; lề trên: 50px ; -webkit-animation: con trỏ 1s ở cuối bước vô hạn; hoạt hình: con trỏ 1s ở cuối bước vô hạn; ) #go:target .text ( -webkit-animation: gõ 4s bước(11) về phía trước, con trỏ 1s ở cuối bước vô hạn ; hoạt hình: gõ 4 giây bước (11) về phía trước, con trỏ 1 giây cuối bước vô hạn; )

Nhược điểm của cả hai ví dụ được hiển thị trong phần này là bạn phải biết trước số lượng khung hình hoặc ký tự để chỉ định số bước hoạt ảnh chính xác. Nếu số của chúng thay đổi, bạn sẽ phải thay đổi mã. Mặc dù vậy, sức mạnh của hàm step() có thể thấy rõ bằng mắt thường, cũng như chức năng thực sự tuyệt vời của các hàm định giờ CSS nói chung.

Hỗ trợ trình duyệt

Rõ ràng, bạn sẽ không thể sử dụng các tính năng định giờ CSS nếu trình duyệt của bạn không hỗ trợ chuyển tiếp CSS và hoạt ảnh theo từng khung hình. May mắn thay, sự hỗ trợ hiện nay khá tốt.

HỖ TRỢ CHUYỂN TIẾP CSS

Trình duyệt	Với tiền tố	Không có tiền tố
trình duyệt web IE	KHÔNG	10+
Firefox	4+ (-moz-)	16+
Trình duyệt Chrome	4+ (-webkit-)	26+
Cuộc đi săn	3.1+ (-webkit-)	6.1+
Opera	10,5+ (-o- tiền tố)	12.1+

Mặc dù thực tế là mọi thứ phiên bản mới nhất các trình duyệt đã loại bỏ tiền tố để chuyển đổi; tuy nhiên, sẽ không thừa nếu đăng ký thêm các thuộc tính với tiền tố -webkit- để hỗ trợ các trình duyệt di động lỗi thời. Đồng thời, từ quan điểm cải tiến lũy tiến, tôi cho rằng cần phải sử dụng các tiền tố -moz- và -o- rồiđi qua.

HỖ TRỢ CÁC CHỨC NĂNG CSS TẠM THỜI

Mặc dù một số người mất nhiều thời gian hơn để hỗ trợ đầy đủ chức năng của các chức năng tạm thời, nhưng có thể dễ dàng nhận thấy điều đó trong thời gian nhất định chức năng này được triển khai trong tất cả các trình duyệt hiện đại.

Điểm mấu chốt

Vậy chúng ta đã học được gì về chức năng định giờ CSS? Hãy tóm tắt.

1. Họ xác định khi nào hoạt ảnh tăng tốc và chậm lại
2. Chúng thú vị hơn nhiều so với một tập hợp các giá trị được xác định trước
3. Bạn có thể tạo hiệu ứng "nảy" với các giá trị cub-bezier() nằm ngoài phạm vi 0-1
4. Bạn có thể chia hoạt ảnh thành nhiều bước/phân đoạn
5. Hỗ trợ trình duyệt rất tuyệt vời và ngày càng tốt hơn

Và bất chấp tính chất đa nền tảng của các công nghệ được mô tả, đây sẽ không phải là bài viết về các kỹ thuật CSS 3 nếu tôi không đề cập đến tính năng nâng cao lũy tiến. Luôn đi từ đơn giản đến phức tạp: đảm bảo tác phẩm của bạn có thể truy cập được trên các thiết bị và trình duyệt không hỗ trợ chức năng trước khi tạo hiệu ứng cho các trình duyệt có thể xử lý chúng.

Bây giờ hãy tiếp tục! Những bước đi vui vẻ và uyển chuyển!

thẻ:

• css 3
• hoạt hình css
• chuyển tiếp css
• khung hình chính css
• bezier
• đường cong bezier

Thêm thẻ

Ngày tốt. Tôi muốn cho bạn biết về xu hướng của các hàm trong CSS 3 cũng như cách nó có thể và thậm chí đôi khi nên được sử dụng trong các dự án.

Để không lãng phí thời gian của bạn, tôi sẽ mô tả các đặc tính mà tôi muốn nói với bạn:

• chức năng truy cập
• hàm tính toán
• hàm attr
• chức năng chuyển đổi
• đơn vị đo lường - rem
• đơn vị đo lường - vw
• đơn vị đo lường - vh

Các hàm trong css 3

Niềm vui mừng to lớn vang lên trong lòng các nhà phát triển khi chúng tôi nhận được một trong những chức năng đầu tiên - truy vấn phương tiện, cho phép chúng tôi chấp nhận một số kiểu nhất định tùy thuộc vào tất cả các loại yếu tố bên ngoài. Trên thực tế, đây chỉ là một bổ sung lớn cho chức năng đã được chuẩn hóa trong phiên bản CSS 2.1.

Nhờ sự xuất hiện của những cơ hội như vậy, thế giới trở nên tươi sáng hơn, các trang web trở nên thuận tiện hơn rất nhiều khi được xem từ tất cả các loại tiện ích và các khái niệm như Thiết kế web đáp ứng và Thiết kế web thích ứng đã ra đời (trên thực tế, thứ hai là một tập hợp con của cái đầu tiên).

w3c không dừng lại ở đó và gần đây chúng tôi đã nghe nói về một chức năng như hỗ trợ hoặc Truy vấn tính năng CSS, chỉ được hỗ trợ trong firefox bắt đầu từ phiên bản 21, chrome bắt đầu từ phiên bản 28 và trong opera mới nhất (12.1).

Đây là những ngôi sao của chúng tôi, họ là trung tâm của sự chú ý và mọi người đều yêu mến họ. Với họ mọi thứ đều khá rõ ràng và hiển nhiên. Bây giờ chúng ta hãy xem xét các chức năng ít quan trọng hơn.

Quầy tính tiền

Đây là một hàm tăng dần trong css, hàm này đã tồn tại từ phiên bản 2.1. Bạn hỏi cô ấy đang làm gì vậy?! Và cô ấy làm như sau:
Chức năng bộ đếm cho phép bạn bắt đầu bộ đếm bằng một tên, tăng nó và đặt lại về 0. Nội dung bộ đếm có thể được hiển thị thông qua các phần tử giả sau và trước. Nói chung, hãy bắt chước danh sách của bạn, mặc dù tôi không tìm thấy bất kỳ lợi ích nào từ chức năng này cho bản thân tôi.

tính toán

Về hỗ trợ:

• Trình khám phá Internet 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Opera không hỗ trợ

Đối với cá nhân tôi Chức năng này Tôi thực sự thích nó, vì nó sẽ cho phép tôi rút ngắn mã một chút, chẳng hạn như khi tôi cần căn giữa một phần tử:

Hộp ( vị trí: tuyệt đối; chiều rộng: 400px; bên trái: calc(50% - 200px); )

Chuyển đổi

Chức năng chuyển đổi cho phép bạn chấp nhận một số kiểu nhất định tùy thuộc vào kiểu của phần tử gốc.

Cha mẹ ( kiểu phông chữ: in nghiêng; ) .child ( kiểu phông chữ: chuyển đổi (nghiêng, bình thường); )

Kết quả chúng ta có logic sau: Nếu thuộc tính kiểu phông chữ của phần tử cha có giá trị in nghiêng thì áp dụng bình thường cho phần tử con, nhưng nếu phần tử cha có giá trị khác với phần tử in nghiêng thì phần tử con sẽ in nghiêng.

Tôi không tìm thấy thông tin hỗ trợ cho phương pháp này, nhưng kết quả thử nghiệm khiến tôi tin rằng chưa có ai hỗ trợ nó. Chà, tôi không khó chịu, tôi hoàn toàn không sử dụng tầng, vì vậy tôi không cần những khả năng như vậy và nói chung chúng có cấu hình hẹp.

attr

Tôi nghĩ nhiều người cũng quen thuộc với hàm attr.

.new ( /* một số kiểu */ ) .new::after ( content: attr(data-price); )

Hàm này cho phép bạn hiển thị giá trị của bất kỳ thuộc tính nào thông qua các phần tử giả sau và trước. Nhân tiện, chức năng này cũng đã tồn tại kể từ phiên bản css 2.1, nhưng đã nhận được bản cập nhật ở phiên bản 3. Thuộc tính này sẽ cho phép bạn viết những thứ như:

stock > * ( display: block; width: attr(length em); /* default 0 */ Height: 1em; border: Solid Thin; Margin: 0.5em; )

Hiện tại không có hỗ trợ cho cải tiến này ở bất cứ đâu.

Thật không may, tài liệu này đang ở trạng thái Đề xuất cho Ứng viên và vẫn chưa biết liệu các tính năng trên có hoạt động trong tương lai gần hay không. Tài liệu cũng chứa dòng sau:

Các tính năng sau có nguy cơ gặp rủi ro và có thể bị loại bỏ trong thời gian CR: 'calc()', 'toggle()', 'attr()'.

Vì vậy, chúng ta có thể không thấy được tất cả những thú vui này.

Điểm mấu chốt

Cá nhân tôi thích việc css giới thiệu các chức năng và nó cho phép bạn thực hiện những việc đã được thực hiện trước đây và tôi nghĩ điều đó thật tuyệt. Đó là nơi tôi đã nói xong về chức năng.

Rem, vw và vh

Giá trị rem tương tự như em, với điểm khác biệt duy nhất là nó luôn xem xét giá trị html chứ không phải giá trị gốc như với ems thông thường. Do đó có tên root em => rem.

rem được hỗ trợ bởi tất cả các trình duyệt hiện đại, bao gồm cả Internet Explorer 9 và 10. Nếu bạn hỗ trợ phiên bản 8 của ie thì rất tiếc là bạn sẽ không sử dụng được rem.

vw và vh

Đằng sau những chữ viết tắt thoạt nhìn khó hiểu này là những đơn vị đo lường rất rõ ràng và hữu ích.

Đơn vị 1 vh hoặc vw bằng 1% chiều rộng hoặc chiều cao khung nhìn của người dùng. Do đó, 100wh sẽ bằng 100% chiều rộng của cửa sổ trình duyệt, điều này trong một số trường hợp có thể hữu ích, vì khi đặt một giá trị chẳng hạn như chiều rộng, bạn không bắt đầu từ chiều rộng gốc mà từ khung nhìn, điều này bạn sẽ không thể làm được với %.

Ủng hộ:

• Trình khám phá Internet 9+
• Mozilla Firefox 19+
• Chrome 24+
• Safari 6+
• Opera không hỗ trợ

Cảm ơn bạn đã quan tâm, tôi hy vọng điều này hữu ích cho bạn trong nhiệm vụ đôi khi khó khăn của chúng tôi.