[Kỹ thuật web] 50 Thủ Thuật CSS Mới

CSS gần như là một trong những kỹ thuật phát triển nhất trong thiết kế webkể từ khi các trình duyệt đồ họa web đầu tiên được áp dụng trên quy mô rộng.

Một trong những phần hay nhất của CSS là nó quá đơn giản một khi bạn biết được những điều cơ bản.

Dưới đây là 50 thủ thuật CSS mới, các kỹ thuật và tài liệu hướng dẫn sẽ giúp bạn cải thiện chất lượng của thiết kế web về sau của bạn. Hãy chắc là bạn đã xem bài viết trước của chúng tôi: 53 kỹ thuật CSS- Bạn không thể sống nếu không có.

1. Security and Performance (An toàn và Hiệu suất)

Trong khi CSS thường đơn thuần chỉ được coi như là một kỹ thuật tạo phong cách cho ngôn ngữ, đây là các cách bạn có thể sử dụng CSS để add sự an toàn cho trang web của bạn. Ngoài ra còn có các cách có thể tối ưu hóa CSS của bạn để cải thiện thời gian load trang. Cả hai vấn đề này sẽ được đề cập bên dưới.

Làm cho các trang của bạn load nhanh hơn bằng cách kết hợp và nén các file javascript và css

This tutorial chỉ cho bạn cách làm thế nào tạo một PHP script để nén và kết hợp multiple CSS và / hoặc JavaScript files với gzip. Nó tăng tốc độ load trang trong khi vẫn có thể chỉnh sửa CSS riêng lẻ hoặc JavaScript files mà không cần phải kết hợp và nén lại mọi thứ.

Thử nghiệm cho thấy, nhóm JavaScript files đã giảm từ 168Kb (và 1905 ms to transfer) xuống 37Kb (và 400 ms).

The Definitive Post on Gzipping Your CSS

Bài post gồm các phương pháp tốt nhất và mới nhất về việc sử dụng GZIP để nén CSS. Hiện có hai phương pháp khác nhau, cả hai đều hiệu quả như nhau. Một bao hàm việc add một mẫu PHP cho CSS file của bạn (và đổi tên file với PHP mở rộng thay vì CSS) trong khi phương pháp khác lại liên quan đến việc sử dụng một PHP code tương tự với một số bổ sung nhưng trong một file riêng biệt.

Clickjane.css: A CSS User Style Sheet để giúp Phát hiện và ngăn chặn Clickjacking Attacks

Bài post này giới thiệu cách làm thế nào sử dụng clickjane.css để ngăn chặn clickjacking.

5 Step Style Sheet Weight Loss Program

Bài post chỉ ra năm cách khác nhau để làm giảm kích thước style sheets của bạn. Các kỹ thuật sắp xếp theo thứ tự từ việc nghiên cứu cách phân loại các bộ chọn(selector) đến việc sử dụng CSS shorthand (phép tốc ký). Mỗi kỹ thuật được giải thích một cách tỉ mỉ và kèm theo các tài liệu liên quan.

2. Page Layout

Đây là những gì được xây dựng cho CSS. Các option gần như là vô tận, nhất là khi CSS3 trở thành một tiêu chuẩn mới.

Canh lề các hình ảnh trực tiếp với Vertical-Align Property

Sự canh chỉnh mặc định theo chiều dọc cho các hình ảnh trực tiếp trong text đôi khi có vẻ không mấy thú vị. tutorial này chỉ ra cho bạn cách làm thế nào để canh chỉnh hình ảnh trực tiếp với kiểu chữ của trang web tốt hơn.

CSS Centering

Bài post bao gồm các hướng dẫn để hiệu chỉnh liquid layouts (layout lỏng) với CSS. Nó rất đơn giản và dễ hiểu và hoạt động trong hầu như tất cả các trình duyệt. Về cơ bản, nó chỉ sử dụng lề trái và lề phải kết hợp với một số code bổ sung để tạo nên cross-browser tương thích.

Tạo Footer Stay Put với CSS

Giữ các footer ở phần dưới cùng của trang web có thể là một điều rắc rối thực sự với CSS, bởi vì nó phụ thuộc vào phần còn lại của trang được thiết lập như thế nào. This tutorial chỉ ra cách chính xác phải làm thế nào để giữ footer ở nơi nên giữ; bên dưới phần còn lại của nội dung! Đây là một bài viết rất tỉ mỉ, với các hướng dẫn hoàn chỉnh, từng bước, từng bước.

Căn chỉnh theo chiều dọc với CSS

Bài post trình bày năm cách tuyệt vời để căn chỉnh nội dung theo chiều dọc. Chỉ ra cả cái xấu và cái tốt của mỗi phương pháp với các hướng dẫn hoàn chỉnh để thực hiện chúng. Các phương pháp được sắp xếp theo thứ tự từ việc sử dụng divs (hoạt động như các table) đến việc sử dụng các vị trí tuyệt đối.

Các lời khuyên cần thiết cho việc tạo ra một Print CSS Stylesheet

Bài post gồm toàn bộ các mẹo thú vị để tạo ra một print stylesheets tốt hơn. Bao gồm các hướng dẫn cho tất cả mọi thứ từ liên kết các destination (Bản ghi, tệp tin, tài liệu, hoặc đĩa mà thông tin được sao chép hoặc di chuyển vào đó; ngược với nguồn.) đằng sau liên kết text đến phân chia các comment vào một trang mới. Chọn lọc và chọn các kỹ thuật được cung cấp hoặc copy toàn bộ stylesheet.

Fluid Images

Fluid layouts rất lớn. Chúng thường hoạt động thực sự tốt cho đến khi bạn bắt đầu đưa các yếu tố có chiều rộng cố định vào; Như các hình ảnh. Bài post này cũng chỉ bạn cách làm thế nào để làm cho các hình ảnh thay đổi. Nó hoạt động trong hầu hết các video nhúng. Trong khi đó kỹ thuật cơ bản chỉ bao gồm một thuộc tính CSS, có một giải pháp thay thế (cách khác) cần thiết để làm cho nó hoạt động trên các Windows machines.

Equal Height Columns linh động

Bài tutorial này chỉ bạn cách làm thế nào để tạo ra các equal height column linh hoạt bằng cách sử dụng markup hợp lệ (valid) và ngữ nghĩa (semantic). Đó là một cross-browser thích hợp hoạt động với cả thiết kế fixed, fluid, và thậm chí cả thiết kế đàn hồi. Đó là một hướng dẫn rất đầy đủ nhưng hoàn toàn không phức tạp.

CSS Columns with Borders

Đây là một technique để tạo equal-height columns với CSS có các border. Nó sử dụng một loạt các divs lồng nhau để đạt được hiệu ứng này thay vì sử dụng các hình ảnh. Kết quả cuối cùng là rất tuyệt vời.

Tạo một Polaroid Photo Viewer với CSS3 và jQuery

Thư viện hình ảnh được tạo ra với technique này là hoàn toàn awesome. HTML và CSS không phải là siêu phức tạp, và tất cả mọi thứ được giải thích thực sự rõ ràng.

A Killer Collection of Global CSS Reset Styles

Một collection các global resets cực kỳ đầy đủ, bài đăng này trình bày khá chi tiết về mỗi reset mà có thể bạn cần.

Making Module Layout Systems

tutorial này đưa ra các hướng dẫn đầy đủ để tạo ra các Module Layout Systems bằng cách sử dụng CSS. Thực tế là sử dụng grid – dựa trên divs khác nhau khi cần thiết cho các yếu tố của nội dung riêng. Kết quả cuối cùng mang lại rất nhiều sự linh hoạt để phân chia mọi thứ từ các hình ảnh đến text trong khi vẫn giữ tất cả được thống nhất và cân bằng.

Multiple Backgrounds (CSS3)

tutorial này chỉ ra cách làm thế nào để thực hiện multiple backgrounds bằng cách sử dụng CSS3. Hiện nay nó chỉ được hỗ trợ bởi Safari, nhưng hướng dẫn này, bao gồm các thủ thuật làm cho nó hoạt động trong các trình duyệt không được hỗ trợ. Hiện tại, nó không xác thực, nhưng một khi các tiêu chuẩn CSS3 được hoàn thành có nhiều khả năng sẽ làm được điều đó.

CSS3 Multiple Columns

Đây là một tutorial để tạo multi-column layouts với CSS3. CSS khá là đơn giản và dễ hiểu, dễ dàng hơn nhiều so với hầu hết các giải pháp hiện nay để tạo multi-column layouts. Thật không may, tại thời điểm này nó chỉ hoạt động với Firefox, Safari và Chrome.

Smart Columns with CSS and jQuery

tutorial này chỉ ra cách làm thế nào để tạo ra smart columns bên trong các liquid layouts bằng cách sử dụng sự kết hợp giữa CSS và jQuery.

CSS Hack for Chrome, Safari and Internet Explorer

tutorial dẫn này chỉ ra cách làm thế nào để áp dụng style sheets khác nhau dựa trên trình duyệt mà khách truy cập của bạn đang sử dụng (ít nhất là trong IE5-8, Google Chrome, Safari 1-4).

3. Menu and Navigation Customizations

Menu và các dạng navigation thực sự có thể thiết lập trang web của bạn.

Overlap That Menu!

Đã bao giờ bạn muốn tạo ra các menu items chồng lên nhau chưa? This relatively-simple tutorial chỉ ra cho bạn cách làm thế nào để làm điều đó bằng cách sử dụng các classes độc đáo cho menu items của bạn. Hướng dẫn cũng cho biết thêm về cách làm thế nào để sắp xếp lại các navigation items bằng việc sử dụng z-index. Đó là một hiệu ứng đẹp mà không khó khăn để tạo ra

Super Awesome Buttons with CSS3 and RGBA

Với một chút ma thuật CSS3, bạn có thể tạo ra scalable set of sexy buttons với gần một nửa CSS. Đưa nó vào trong dự án tiếp theo của bạn và hãy xem nó như thế nào, nó có thể giúp add độ bóng cho website nếu bạn muốn mà không có một tác động lớn nào lên code của bạn.

Custom Buttons 3.0

This page cho thấy một loạt các button có rounded-corner (góc tròn) (bán kính là 1px) mà không sử dụng hình ảnh (khác hơn so với optional background gradient). Hãy nhìn vào source code (mã nguồn) trong trang web để biết nó đã được làm như thế nào.

Centered Tabs with CSS

This tutorial cung cấp một sự chọn lựa đối với phương pháp sliding doors và việc tạo ra các thanh tab trong CSS cho phép các tab được canh giữa thay vì canh phải hoặc canh trái. Đó là một hướng dẫn gồm nhiều bước nhưng không phức tạp.

Tạo kiểu dáng cho button Element với CSS Sliding Doors

tutorial được cập nhật trên sliding doors buttons. Và bây giờ chúng ta sẽ tạo ra chúng với hình ảnh sprites CSS. Nó cũng được đơn giản hóa để hoạt động với một block duy nhất của CSS trong toàn bộ các trình duyệt chính (bao gồm IE 6-8). markup đơn giản và dễ hiểu và kết quả cuối cùng là hoàn hảo.

Styling Buttons to Look Like Links

Đôi khi bạn phải sử dụng một button (như với các form), nhưng thiết kế của bạn sẽ trông tốt hơn rất nhiều với chỉ một đường link text đơn giản. tutorial này cung cấp một bài tổng quan hoàn chỉnh về cách làm như thế nào để các button của bạn trông như các đường link text bằng việc sử dụng CSS.

CSS Đơn giản, có khả năng mở rộng Dựa trên Breadcrumbs

Breadcrumbs có thể là một bổ sung tuyệt vời cho thanh navigation và thực sự có thể cải thiện tính khả dụng trong thiết kế website của bạn. tutorial này chỉ ra cho bạn cách làm thế nào để tạo breadcrumbs với CSS. Code được sử dụng rất đơn giản (phần HTML chỉ là một danh sách có thứ tự) và chỉ có sáu dạng CSS được xác định.

Tái tạo Button

article này trình bày cách làm thế nào để tạo một button trông rất giống với các button của HTML input thông thường nhưng có thể xử lý nhiều loại tương tác (như Dropdowns hoặc các chức năng bật / tắt). Các button này ban đầu được phát triển ở Google và là skinnable chỉ với một vài dòng (line) của CSS. Các button được tạo ra hoàn toàn dựa trên CSS, gồm gradient background.

Danh sách hơn 10 dạng đường link khả dụng – dễ nhận biết

page này cung cấp một bài tổng quan tốt về các hiệu ứng khác nhau mà bạn có thể sử dụng cho các đường link, bao gồm màu sắc và underline, backgrounds, và hình ảnh động.

Create Vimeo-Like Top Navigation

Đây là tutorial để tạo ra một drop-down top navigation bar tương tự như cái mà Vimeo.com sử dụng. Tất cả được thực hiện với các hình ảnh, CSS và HTML và không có một khó khăn đặc biệt nào, mặc dù nó cũng có một chút phức tạp. Đó là một giải thích thực sự rõ ràng, với hình ảnh minh họa cấu trúc và CSS được viết rất tốt.

Beautifully Horizontal Centered Menus/Tabs/List

tutorial này giải thích làm thế nào để tạo cross-browser tương thích, các menu được căn giữa hoặc các items khác trong CSS mà không có hack và không có JavaScript. Nó cũng thích hợp với các liquid layouts. Nó không chỉ cung cấp code để đạt được hiệu ứng này, mà còn giải thích đầy đủ và chính xác nó hoạt động như thế nào và tại sao nó hoạt động.

4. Typography

Dưới đây là một vài hướng dẫn và thủ thuật để tạo các kiểu dáng typographic tiên tiến bằng cách sử dụng CSS. Có tất cả mọi thứ từ các chức năng line-wrap đến faux anti-aliasing, đến việc add các gradient và shadows.

Wrapping Text Inside Pre Tags

This tutorial này chỉ ra cách làm thế nào để wrap text trong pre html tags. Rất hữu ích để hiển thị code trên trang web của bạn, đặc biệt là khi các line của code khá dài và cuối cùng phá vỡ layout trang web của bạn (đặc biệt là trong IE). Hướng dẫn tương đối đơn giản và có một vài options khác được trình bày.

Make Cool and Clever Text Effects with CSS Text-Shadow

Tạo các hiệu ứng text mà không sử dụng hình ảnh là một lợi thế rất lớn trong các điều kiện về cả kích thước tập tin và thời gian yêu cầu đối với việc bảo trì.tutorial này cho thấy làm thế nào để tận dụng lợi thế của thuộc tính text-shadow trong CSS để tạo phong cách cho text của bạn. Trong khi hiệu ứng này không hoạt động trong IE, nhưng nó lại hoạt động ở hầu hết các trình duyệt khác. Và nó trông cực kỳ cool nếu được thiết kế tốt (Tôi là một fan hâm mộ lớn của “milky text”).

Safari’s Text-Shadowing Anti-Aliasing CSS Hack

tutorial này hướng dẫn cách sử dụng thuộc tính text-shadow CSS để tạo ra hiệu ứng anti-aliasing trên text của bạn. Nó chỉ hoạt động trong các trình duyệt có hỗ trợ text-shadow (trừ IE), nhưng trông khá là awesome. Nó chắc chắn có thể làm cho text dễ đọc hơn, chỉ cần đừng lạm dụng nó hay bạn thực hiện với text bị nhòe.

Safari’s Text-Shadowing Anti-Aliasing CSS Hack Revision

Đây là một phiên bản revised (sửa đổi) của kỹ thuật ở trên để tạo ra một hiệu ứng anti-aliasing hơi khác, đặc biệt khả dụng đối với text sáng trên dark backgrounds. Nó sử dụng một black background vô cùng trong suốt để tạo ảnh hưởng tới Safari làm cho text rõ ràng hơn.

Snazzy Pullquotes for Your Blog

Nếu bạn có một blog hay trang web khác có text dày đặc, hãy sử dụng pull quotes để làm nổi bật các bit quan trọng có thể nhìn thực sự như là awesome trong khi lại làm cho nội dung của bạn có khả năng mở rộng hơn. tutorial này hướng dẫn cách làm thế nào để định dạng các pull quotes với CSS. Hướng dẫn cũng giới thiệu cách để tạo ra các pull quotes được canh chỉnh cả theo lề trái và lề phải, trong khi vẫn giữ được kiểu dáng blockquote đều đặn.

Codename Rainbows

Đây là một technique để tạo gradient hai màu cho text sử dụng kết hợp JavaScript và CSS. Nó cũng hoạt động để apply các shadows và highlights cho text. Các khả năng để sử dụng các kỹ thuật này khá là lớn.

Build Better CSS Font Stacks

article này đưa ra một số nguyên tắc (guidelines) tuyệt vời cho việc tạo CSS font stacks tốt hơn. Hướng dẫn bao gồm các thông tin về font stacks phổ biến nhất hiện đang được sử dụng, tiếp theo là Definitive Font Stacks của Tuck và Better Font Stacks của Ford. Đó là một nguồn tài liệu quan trong với bạn khi bạn đang xác định typography của trang web, với các thông tin đã được trình bày trong một định dạng rất có khả năng mở rộng và tiện lợi.

CSS3 Embedding a Font Face

Đây là một tutorial tuyệt vời về cách làm thế nào để nhúng các phông chữ bằng cách sử dụng CSS3. Trong khi nó vẫn chưa được hỗ trợ rộng rãi, thì với kỹ thuật này sẽ dễ dàng hơn nhiều để nhúng các phông chữ đặc biệt vào một trang web mà không cần phải sử dụng đến hình ảnh.

CSS Gradient Text Effect

Với một chút trick (thủ thuật)này sẽ dễ dàng để tạo gradient text bằng cách apply một gradient PNG 1 pixel cho nó. Đó là một cách nhanh chóng và dễ dàng để tạo gradient text. Thậm chí nó còn phù hợp với việc hoạt động trong IE6.

5. Other Cool Techniques, Tips, and Tricks

Dưới đây là hàng loạt các kỹ thuật và thủ thuật khác mà bạn có thể sử dụng để làm cho CSS của bạn thực sự nổi bật.

3D Cube Using CSS Transformations

Đây có lẽ là một trong những kỹ thuật CSS cool nhất mà tôi từng thấy. This tutorial chỉ ra cách làm thế nào để xây dựng một hình lập phương 3D với text hoặc nội dung khác trên mỗi bên của hình lập phương này. Nó hoàn toàn được thực hiện với CSS; không có canvas, SVG, hình ảnh, hay JavaScript. Thậm chí còn có các hướng dẫn cho việc tạo các hình lập phương nhiều bóng mờ trên một trang duy nhất. Chỉ có một hạn chế thực sự là nó chỉ được hỗ trợ trong WebKit và các trình duyệt Gecko mới nhất.

Nine Ways to Obfuscate E-mail addresses compared

article này đưa ra hai phương pháp khác nhau về obfuscating email addresses với CSS. Một phương pháp bao gồm việc sử dụng màn hình hiển thị: không có một thuộc tính nào, trong khi phương pháp khác lại bao gồm việc không có liên quan đến việc đảo ngược code. Cả hai phương pháp hỗ trợ để cắt giảm số lượng thư rác đã nhận về không.

Forms Markup and CSS – Revisited

Đây là CSS template để tạo kiểu dáng form. markup của form dựa trên Accessible Forms Markup từ Derek Featherstone. Template này chính xác về mặt ngữ nghĩa, linh hoạt và dễ tiếp cận.

iPhone CSS

Một tutorial rất ngắn và đơn giản hướng dẫn về cách làm cho một vài yếu tố CSS của bạn thật khác biệt trên iPhone. Thật đáng ngạc nhiên vì rất đơn giản và rất dễ thực hiện.

Improving Your Process: Faster Front End Development

Trong khi this post cung cấp rất nhiều thông tin về những vấn đề khác hơn là CSS, nhưng nó cũng đưa ra một vài lời khuyên lý tưởng để cải thiện một cách hiệu quả với CSS: chủ yếu, viết CSS của bạn trong các block. Kỹ thuật này thường được thực hiện dần dần khi bạn đã nhận biết được việc sử dụng mã hóa theo cách này. Tuy nhiên các bước thực hiện rất đơn giản, và nó chắc chắn sẽ làm cho thiết kế của bạn trở nên nhanh hơn nhiều.

Image-Free CSS Tooltip Pointers – A Use for Polygonal CSS?

tutorial này giải thích làm thế nào để tạo ra các hình tam giác (để được sử dụng cho con trỏ) bằng cách sử dụng CSS, mà không cần bất kỳ một hình ảnh nào. Kết quả cuối cùng là rất tốt, mặc dù nó chỉ hoạt động với các hình ảnh đơn màu. CSS được sử dụng là cực kỳ đơn giản trong khi vẫn rất là linh hoạt. Bạn có thể tạo ra một tam giác có kích thước bất kỳ bằng cách sử dụng chỉ một div duy nhất.

How I Implemented My Cookie-Based Switcher

Trong khi hoàn toàn không phải là một thủ thuật CSS, nhưng post này chỉ ra cách làm thế nào để tạo ra một công tắc (cookie) dựa trên CSS theo chủ đề switcher cho WordPress. Nó cho phép người dùng lựa chọn sử dụng chủ đề khác nhau khi họ truy cập vào blog và cho phép người dùng mới xem một chủ đề đẹp, đơn giản, dễ đọc.

CSS Swap Hover Effect

technique lý tưởng này sẽ thay đổi bất kỳ hình ảnh nào với một hình ảnh khác khi bạn di chuột qua nó. Hướng dẫn chỉ ra rằng nó đã được áp dụng cho portfolio của trang web, nhưng các khả năng là vô tận. Nó rất bóng và thích họp với cross-browser (nhưng như thường lệ, IE6 đòi hỏi một cách khác).

CSS Stacked Bar Graphs

Đây là một tutorial để tạo các biểu đồ dạng thanh xếp chồng lên nhau bằng cách sử dụng CSS và một vài hình ảnh.

Changing HTML Images on Hover / A Quick CSS Trick

Đây là một technique CSS nhanh và dễ để hoán đổi các hình ảnh khi di chuột. Đó là CSS tinh khiết, không có yêu cầu JavaScript. Vấn đề lớn nhất của kỹ thuật này phải được giải quyết là khi trang được in, hình ảnh cơ bản chỉ có một cái xuất hiện.

10 Properties that Were Impossible to Implement in IE6

collection về các thủ thuật CSS này chỉ ra cách làm thế nào để thực hiện một số kiểu dáng mà không thể được hỗ trợ trong Internet Explorer 6. Bao gồm các thủ thuật đối với opacity (độ mờ đục), các vị trí cố định, và text shadow…

10 Challenging But Awesome CSS Techniques

Bộ sưu tập này bao gồm mười tutorials về các kỹ thuật CSS khác nhau mà chính xác là không phải dễ dàng có được. Các kỹ thuật bao gồm pull quotes, các tham biến năng động,và kiểu dáng thay đổi theo thời gian trong ngày hoặc thậm chí theo thời tiết…