NộI Dung
- 01. Khớp hình ảnh với sơ đồ màu trang web
- 02. Chia sẻ đồng đều không gian trong hàng cuối cùng của lưới
- 03. Tạo hình ảnh động hạt với bóng hộp
- 04. Tạo hình ảnh động cho khối đa diện với các phép biến đổi
- 05. Master 'calc ()' để định vị
- 06. Làm cho mô hình hộp trở nên lành mạnh với 'kích thước hộp'
- 07. Căn giữa theo chiều dọc với CSS
- 08. Nhắm mục tiêu ngân hàng các đối tượng liên quan
- 09. Kiểm soát gạch nối
- 10. Tận dụng lợi thế của việc viết các Chế độ
- 11. Sử dụng gradient theo những cách khác thường
- 12. Sử dụng Kết hợp chuỗi trên các liên kết
- 13. Làm cho FOUT làm việc cho bạn
- 14. Khám phá SVG để biết hình nền
- 15. Tập trung người dùng với hiệu ứng chuyển tiếp 3D
- 16. Tạo menu hình tròn với CSS và toán học
- 17. Tạo hoạt ảnh cho các liên kết khi di chuột
- 18. Tạo hoạt ảnh khung hình chính đơn giản
- 19. Tạo hiệu ứng 3D nổi với bóng đổ
- 20. Cập nhật eleMents của trang bằng cách sử dụng ': target'
- 21. Cung cấp phản hồi bằng hình ảnh động tinh tế
- 22. Chuẩn bị cho 'will-animate'
- 23. Các trường nhập nhân bản
- 24. Tạm dừng và phát hoạt ảnh CSS
- 25. Không sử dụng các biến CSS
Tại một số thời điểm với bất kỳ công nghệ nào, có cảm giác rằng hầu hết mọi thứ có thể làm được đều đã được thực hiện. Khi một thứ gì đó không còn hoàn toàn mới và sáng bóng, sự quan tâm sẽ giảm dần và sự chú ý sẽ được tập trung vào điều quan trọng tiếp theo. Điều này thường xảy ra trong ngành công nghiệp web, vốn dễ bị kích thích tột độ bởi một khía cạnh nào đó của công nghệ trước khi, sớm hay muộn, đẩy nó xuống tầm thường.
Khi CSS lần đầu tiên xuất hiện, nó đã mang tính cách mạng và theo thời gian, nó đã phát triển để cho phép các nhà thiết kế tạo ra các bố cục trang web linh hoạt, chặt chẽ và đẹp mắt. Tuy nhiên, cuối cùng, đã có gợi ý từ nhiều quý khác nhau rằng CSS đang mệt mỏi và có lẽ thời gian của nó đã trôi qua.
Tôi muốn chứng tỏ rằng vẫn còn rất nhiều điều thú vị và cuộc sống trong thế giới CSS, cho dù đó là những thuộc tính tiên tiến mà bạn có thể chưa khám phá hay thông qua việc sử dụng một khía cạnh của CSS theo cách mà bạn chưa từng xem xét trước đây.
Dưới đây là một số mẹo từ một số chuyên gia CSS hàng đầu của ngành.
(Lưu ý: Một số kỹ thuật trong tính năng này là tiên tiến và có thể không được hỗ trợ đầy đủ trên tất cả các trình duyệt. Hãy kiểm tra kỹ lưỡng và đảm bảo có sẵn các phương pháp dự phòng trước khi đưa bất kỳ tác phẩm nào vào hoạt động.)
01. Khớp hình ảnh với sơ đồ màu trang web
Christopher Schmitt, người tổ chức hội nghị
Các hội nghị có cách phối màu riêng và với nhiều diễn giả, quy trình quản lý ảnh chân dung có thể phức tạp. Việc áp dụng bộ lọc theo cách thủ công không chia tỷ lệ và phụ thuộc vào việc bạn có quyền truy cập, chẳng hạn như một hành động Photoshop cụ thể. Bây giờ tôi sử dụng các PNG có thang độ xám độ phân giải cao và thêm tông màu bằng cách sử dụng các bộ lọc CSS. Điều này cho phép tôi so khớp bất kỳ ảnh chân dung nào với sơ đồ của sự kiện và cũng có thể sử dụng lại hình ảnh trên nhiều chủ đề. Tôi chỉ cần một quy tắc CSS mới cho mỗi quy tắc. Xem một bản demo.
02. Chia sẻ đồng đều không gian trong hàng cuối cùng của lưới
Stephen Hay, nhà thiết kế và tác giả
Nếu bạn có một số lượng không xác định các mục được hiển thị trong lưới, bạn có thể sử dụng Flexbox để chia đều hàng cuối cùng. Vì vậy, nếu chỉ có một mục, nó sẽ chiếm toàn bộ hàng; nếu có hai mục, hàng sẽ được chia đôi, v.v. Xem một bản demo.
03. Tạo hình ảnh động hạt với bóng hộp
Ana Tudor, lập trình viên và người cuồng toán học
Bằng cách trộn bóng hộp với một số phép toán và Sass, bạn có thể vẽ đồ thị các đường cong 2D, mô phỏng chuyển động 3D và tạo các hoạt ảnh hạt điên rồ mà mọi người sẽ nhầm với các hình ảnh canvas! Xem một bản trình diễn và một bản khác.
04. Tạo hình ảnh động cho khối đa diện với các phép biến đổi
Ana Tudor, lập trình viên và người cuồng toán học
Bạn có thể đã thấy các đa giác CSS thuần túy được tạo với các đường viền, nhưng chúng tôi có một công cụ mạnh mẽ hơn nhiều trong biến đổi bất động sản. Chuỗi và áp dụng các phép biến đổi trên các phần tử lồng nhau cho phép chúng ta tạo đa giác phức tạp với nền hoặc đường viền hình ảnh và nội thất trong suốt. Sử dụng các phép biến đổi 3D, chúng ta có thể kết hợp các hình dạng 2D này thành các khối đa diện và làm cho các chất rắn hợp nhất, mở ra, phát nổ hoặc kết hợp lại theo cách dễ bị nhầm với WebGL. Xem một bản demo.
05. Master 'calc ()' để định vị
Ana Tudor, lập trình viên và người cuồng toán học
tôi đã yêu calc () từ thời điểm tôi phát hiện ra nó. Nó hữu ích để điều chỉnh lề, khoảng đệm hoặc kích thước và có thể là một cứu cánh khi được sử dụng để định vị hoặc định kích thước nền, bên trong gradient hoặc chuyển đổi và được kết hợp không chỉ với cùng các đơn vị cũ mà còn với các khung nhìn mới và thú vị.
06. Làm cho mô hình hộp trở nên lành mạnh với 'kích thước hộp'
Sawyer Hollenshead, nhà phát triển và nhà thiết kế của Oak Studios
Sử dụng đóng hộp để cứu lấy sự tỉnh táo của bạn. Nếu không có nó, một phần tử có chiều rộng xác định là 250px và 25px của padding kết hợp với chiều rộng 300px, làm cho việc trộn pixel và tỷ lệ phần trăm trở nên khó khăn. Với định cỡ hộp:hộp viền thay vào đó, đường viền và phần đệm được đặt trong chiều rộng đã xác định.
07. Căn giữa theo chiều dọc với CSS
Trent Walton, người sáng lập Paravel
Trước đây, thật khó để căn giữa một thứ gì đó theo chiều dọc bằng CSS, chẳng hạn như nếu bạn có một hình ảnh với văn bản liền kề mà bạn muốn căn chỉnh theo chiều dọc. Thay vì dậm chân tại chỗ và chửi bới, hãy sử dụng Flexbox để đối phó với những rắc rối về căn chỉnh. Xem một bản demo.
08. Nhắm mục tiêu ngân hàng các đối tượng liên quan
Jonathan Smiley, đối tác Zurb và trưởng nhóm thiết kế
Giảm trọng số dòng CSS bằng cách sử dụng các bộ chọn thuộc tính gần đúng trên tên lớp, để nhắm mục tiêu một ngân hàng lớn các đối tượng có liên quan, thay vì gắn các thuộc tính chung cho mỗi lớp đơn lẻ. Ví dụ: ... [class * = "- block-grid-"] {} ... sẽ nhắm mục tiêu những thứ như: .small-block-grid-3 .large-block-grid-5
09. Kiểm soát gạch nối
Savid Storey, người ủng hộ web mở
Dấu gạch nối được coi là đương nhiên trong bản in và một số nhà phát triển sử dụng dấu gạch ngang tài sản trực tuyến, nhưng ít người biết đến các tài sản khác cung cấp khả năng kiểm soát tốt hơn. Nếu không cẩn thận, bạn sẽ nhận được các thang gạch nối trong đó dấu gạch nối được sử dụng trên nhiều dòng. Nguyên tắc chung là không quá hai hàng liên tiếp mà bạn có thể kiểm soát bằng cách sử dụng gạch nối-giới hạn-dòng. Cũng thế, dấu gạch nối-giới hạn-ký tự cho phép bạn chỉ định độ dài tối thiểu của một từ sẽ được gạch nối, cùng với số ký tự tối thiểu trước và sau dấu gạch ngang.
10. Tận dụng lợi thế của việc viết các Chế độ
David Storey, người ủng hộ web mở
Chế độ viết cho phép bạn xác định hướng dòng chảy của văn bản. Một số văn bản Đông Á được viết theo chiều dọc, các dòng lớn dần từ phải sang trái, được chỉ định bằng chế độ viết: vertical-rl (tb-rl trong IE). Văn bản dọc không thực sự được sử dụng trong hệ thống chữ viết của Châu Âu, nhưng có thể hữu ích cho các tiêu đề bảng khi bạn hạn chế không gian ngang.
11. Sử dụng gradient theo những cách khác thường
Ruth John, nhà thiết kế
Gradient nền có thể trông tuyệt vời khi được sử dụng với đường viền và dấu đầu dòng. Tôi sử dụng cả trên blog của mình và với bộ xử lý trước có thể gọi mixin với mã được sử dụng lại, để không lặp lại nó theo cách thủ công. Đừng làm quá phức tạp vì chuyển sắc có thể nặng về bộ xử lý. SCSS mixin cho các dấu đầu dòng danh sách:
@mixin gradedBullet ($ color) {background-image: linear-gradient (trái, làm sáng ($ color, 15%) 10px, $ color 11px, $ color 20px, làm tối ($ color, 15%) 21px, làm tối ($ color , 15%) 30px, trong suốt 31px); }
12. Sử dụng Kết hợp chuỗi trên các liên kết
Ruth John, nhà thiết kế
Trên blog của mình, tôi đã sử dụng các bộ chọn thuộc tính CSS có tính năng khớp chuỗi để tạo kiểu cho các biểu tượng xã hội. Những thứ này xuất hiện khắp blog của tôi, đôi khi có văn bản và đôi khi không có, nhưng luôn có biểu tượng. Để tạo kiểu liên kết phù hợp với biểu tượng xã hội chính xác, tôi sử dụng kết hợp chuỗi trên href thuộc tính của phần tử neo. tôi sử dụng *= nên href trên phần tử neo chỉ phải chứa chuỗi tôi chỉ định.
/ * cho tất cả các liên kết xã hội * / .social a: before {display: inline-block; padding-right: 30px; font-family: 'FontAwesome';} / * Từng liên kết cụ thể * / .social a [href * = "twitter"]: before {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: before {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: before {content: " f09e"; màu: # b47742;}
13. Làm cho FOUT làm việc cho bạn
Jason Pamental, hiệu trưởng thiết kế H + W
Web được xây dựng dựa trên tiền đề nó phải cung cấp nội dung, ngay cả khi trình duyệt không thể hiển thị bling. Phông chữ web tải chậm có thể gây khó chịu, FOUT (Flash Of Unstyled Text) gây chói tai khi điều hướng và văn bản hiển thị trong khi tải phông chữ xuống. Google và Typekit cung cấp một câu trả lời: trình tải phông chữ web. Bằng cách đưa các lớp vào một trang, dựa trên trạng thái tải của các phông chữ, bạn có thể tạo kiểu dự phòng với các lớp đó để giữ cho tốc độ chỉnh lại ở mức tối thiểu, đồng thời loại bỏ hội chứng 'nội dung vô hình' của WebKit. Xem một bản demo.
14. Khám phá SVG để biết hình nền
Emil Björklund, nhà phát triển web inUse
Các trình duyệt duy nhất hiện không hỗ trợ SVG là IE8 trở xuống và Android 2 WebKit, và do đó, việc sử dụng SVG cho hình nền trong CSS là khả thi, đặc biệt là cùng với giải pháp dự phòng PNG, chẳng hạn như Grunticon. SVG có thể được tạo kiểu bởi CSS và có một số thuộc tính CSS (bộ lọc!) Thú vị từ SVG mà chúng ta có thể sử dụng khi áp dụng cho HTML.
15. Tập trung người dùng với hiệu ứng chuyển tiếp 3D
Emil Björklund, nhà phát triển web inUse
Sử dụng các phép biến đổi 3D và sử dụng kích thước z trong giao diện người dùng có thể thực sự hữu ích, đặc biệt là để ẩn / hiển thị hoặc thu gọn / mở rộng nội dung. Cũng khá dễ dàng để dự phòng chuyển đổi 2D hoặc hoàn toàn không chuyển đổi trong những tình huống đó. Đó là một lĩnh vực mà một chút cải tiến tiến bộ có thể đi được một chặng đường dài.
16. Tạo menu hình tròn với CSS và toán học
Sara Soueidan, nhà phát triển giao diện người dùng
Menu tròn phổ biến trong các ứng dụng dành cho thiết bị di động và bạn có thể sử dụng các chuyển đổi và chuyển tiếp CSS để tạo menu tròn đơn giản. Menu này có thể được sửa đổi và tùy chỉnh để tạo menu mở lên hoặc xuống. Không có cách trực tiếp nào trong CSS để dịch một mục theo đường chéo, nhưng bạn có thể sử dụng giá trị của bán kính vòng tròn mà bạn muốn định vị các mục và áp dụng một quy tắc toán học đơn giản để tính toán các giá trị dịch ngang và dọc để chuyển đến translateX () và dịchY () chức năng. Bằng cách đó, bạn kết thúc với một đường chéo dịch để di chuyển các mục menu đến các vị trí chính xác trên vòng tròn. Sự kiện nhấp chuột đóng / mở menu có thể được xử lý bằng JavaScript hoặc bạn có thể tiến thêm một bước nữa và có menu chỉ CSS bằng cách sử dụng hack hộp kiểm CSS. Trong bản trình diễn của mình, tôi sử dụng JavaScript và API HTML5 classList, không được hỗ trợ trong tất cả các trình duyệt, vì vậy bạn sẽ cần xem bản trình diễn trong một trình duyệt hiện đại để làm cho nó hoạt động hoặc bỏ ghi chú mã jQuery thay vì sử dụng API classList mã.
Xem bản demo và hướng dẫn đầy đủ. Ví dụ về hack CSS Checkbox.
17. Tạo hoạt ảnh cho các liên kết khi di chuột
Paul Lloyd, nhà thiết kế tương tác của The Guardian
Không nên dựa vào trạng thái di chuột để thực hiện một hành động hoặc cung cấp thông tin quan trọng, nhưng bạn vẫn có thể cải tiến giao diện cho người dùng dựa trên chuột. Trên 24ways.org, chúng tôi tiết lộ tiêu đề bài viết khi bạn di chuột qua các liên kết trong điều hướng trước đó / tiếp theo. Điều này đạt được bằng cách tạo ::sau phần tử giả có chứa nội dung được tạo có nguồn gốc từ giá trị của một dữ liệu- , với một chuyển tiếp CSS được áp dụng để nó có thể trượt sang chế độ xem khi di chuột. Xem một bản demo.
18. Tạo hoạt ảnh khung hình chính đơn giản
Paul Lloyd, nhà thiết kế tương tác của The Guardian
Trên 24ways.org, chúng tôi đã thêm các nắp động ở góc vào phần tóm tắt, mở khi di chuột. Điều này được thực hiện bằng cách kết hợp @keyframes quy tắc với thuộc tính hoạt ảnh, thay đổi vị trí của hình nền để đạt được hoạt ảnh dựa trên sprite. Bí quyết là khai báo số lượng khung hình bạn có trong mô hình hoạt ảnh của mình với bước () giá trị. Xem một bản demo.
19. Tạo hiệu ứng 3D nổi với bóng đổ
Catherine Farman, nhà phát triển Happy Cog
Một dự án gần đây yêu cầu một bức ảnh sản phẩm nổi với bóng tròn bên dưới, tạo hiệu ứng 3D bật ra khỏi màn hình. Shadow sử dụng một số tính năng CSS3: bán kính biên giới độ trong suốt alpha và bóng hộp. Nó hoạt động tốt cho các lưới sản phẩm, giới thiệu hình ảnh trong một nhân vật chính trên trang chủ hoặc bất kỳ thiết kế kỳ quái nào có đường cong lệch hình. Xem một bản demo.
20. Cập nhật eleMents của trang bằng cách sử dụng ': target'
Simon Madine, nhà phát triển web cấp cao của HeRe
CSS không phải là một ngôn ngữ lập trình theo nghĩa thông thường, nhưng bạn vẫn có thể thực hiện những điều thông minh mà không cần quay lại JavaScript. Ví dụ, :Mục tiêu lớp giả được áp dụng cho các phần tử là mục tiêu của một liên kết được nhấp.
Bạn có thể sử dụng điều này để xác định trạng thái của trang, nhắm mục tiêu trang chính có chứa nhiều phần tử và các liên kết của bạn trở thành phương tiện để kiểm soát giao diện và bố cục của tất cả các trang con chỉ bằng một cú nhấp chuột. Xem một bản demo.
21. Cung cấp phản hồi bằng hình ảnh động tinh tế
Neil Renicker, nhà thiết kế và nhà phát triển
Phần tử giả CSS ::trước và ::sau cùng với các chuyển tiếp CSS, có thể kích hoạt hoạt ảnh thú vị cung cấp phản hồi tinh tế cho người dùng chuột. Ví dụ: tạo một mũi tên CSS bên trong phần tử giả, áp dụng chuyển đổi sang phần tử giả (chuyển tiếp: tất cả dễ dàng vào-ra .15 giây;), và sau đó thêm một thay đổi bố cục đơn giản vào :bay lượn lớp giả (chẳng hạn như sửa đổi margin-top). Xem một bản demo.
22. Chuẩn bị cho 'will-animate'
Paul Lewis, lập trình viên và thành viên nhóm quan hệ nhà phát triển Chrome
Nếu bạn đã sử dụng -webkit-biến đổi: translateZ (0) để làm cho các trang của bạn nhanh hơn một cách kỳ diệu, việc hack, trong nhiều trình duyệt chỉ đơn giản là tạo ra một lớp tổng hợp mới, đang được thay thế bằng ý chí hoạt hình. Ngay sau đó, bạn sẽ có thể cho trình duyệt biết bạn định thay đổi gì về một phần tử (vị trí, kích thước, nội dung hoặc vị trí cuộn của nó) và trình duyệt sẽ áp dụng tối ưu hóa phù hợp. Thêm thông tin.
23. Các trường nhập nhân bản
Yaron Schoen, người sáng lập Made For Humans
Thêm hoạt ảnh nhanh vào các phần tử mà người dùng tương tác làm cho giao diện cảm thấy ít tính toán hơn. Với các trường đầu vào, hãy thử đặt một cuộc gọi chuyển tiếp bên trong, vì vậy bất cứ khi nào bạn tập trung hoặc không tập trung, sẽ có một quá trình chuyển đổi suôn sẻ.
input, textarea {-moz-chuyển đổi: dễ dàng hết 0,2 giây; -o-chuyển tiếp: tất cả 0,2 giây dễ dàng ra ngoài; -webkit-chuyển tiếp: dễ dàng hết 0,2 giây; -ms-chuyển tiếp: dễ dàng hết 0,2 giây; quá trình chuyển đổi: tất cả 0,2 giây dễ dàng ra ngoài;
24. Tạm dừng và phát hoạt ảnh CSS
Val Head, nhà thiết kế và nhà tư vấn
Bạn có thể 'tạm dừng' và 'phát' hoạt ảnh CSS bằng cách thay đổi hoạt hình-phát-trạng thái bất động sản. Đặt nó thành 'tạm dừng' sẽ dừng hoạt ảnh của bạn tại chỗ, cho đến khi bạn thay đổi hoạt hình-phát-trạng thái đến đang chạy, ví dụ trên di chuột.
.animating_thing {animation: quay vô hạn tuyến tính 10s; animation-play-state: tạm dừng; }. animating_thing: hover {animation-play-state: running; }
25. Không sử dụng các biến CSS
Dave Shea, nhà thiết kế và tác giả
Cuối cùng chúng tôi cũng nhận được các biến CSS, chẳng hạn như để viết một lần giá trị hex của màu và tham chiếu nó thông qua biểu định kiểu. Nhưng thông số kỹ thuật chính thức dài dòng, thêm độ phức tạp về cú pháp, cung cấp chức năng hấp dẫn và phần lớn không được hỗ trợ bởi hầu hết các trình duyệt. Trong thời đại mà Sass phổ biến rộng rãi và vượt ra ngoài các biến với logic lập trình mạnh mẽ như các hàm tùy chỉnh và các câu lệnh if / else, thì thông số kỹ thuật chính thức còn rất ngắn.
Hy vọng rằng những mẹo hàng đầu này đã đổi mới cách nhìn của bạn về CSS và những khả năng mà nó thể hiện trong việc phát triển và thiết kế web. Đừng quên kiểm tra kỹ bất kỳ kỹ thuật nào trong số này để kiểm tra khả năng hỗ trợ của trình duyệt trước khi đưa bất kỳ công việc nào vào hoạt động.
Từ ngữ: Craig Grannell Hình minh họa: Mike Chipperfield
Bài báo này ban đầu xuất hiện trên tạp chí net số 253.
