Các Kỹ Thuật CSS trong Thiết Kế Web

Tran Minh Hong 03.08.2009 0
CSS là một trong những block quan trọng nhất đang được xây dựng của thiết kế web hiện đại. Và các tiêu chuẩn đòi hỏi sử dụng CSS để định dạng và tạo kiểu trang.

Và CSS gần như không phải là qua phức tạp, rắc rối như một vài người nghĩ. Dưới đây là các lời khuyên, các kỹ thuật mới để tạo ra các yếu tố thiết kế và tạo kiểu dáng cho nó với CSS.. Không phải tất cả các kỹ thuật này hoàn toàn là CSS, một số bao gồm sự tích hợp với JavaScript hoặc XHTML để mở rộng chức năng trang web của bạn.

1. Các kỹ thuật dành cho Layout và User Interface (giao diện người dùng)

Bây giờ CSS là ngôn ngữ chính được sử dụng để tạo ra các layout của trang trên các web hiện đại. Có vô số khả năng để tạo layout của trang và các user interface với CSS, nhưng dưới đây là một số kỹ thuật thú vị, hấp dẫn hơn nhiều.
The simplest way to horizontally and vertically center a DIV
Bài viết này bao gồm sự hiệu chỉnh DIV, cả theo chiều dọc và chiều ngang, bằng cách sử dụng CSS.
112 in Mastering CSS, Part 1: Styling Design Elements

New CSS Sticky Footer – 2009
Đây là kỹ thuật footer dính, hoàn toàn tương thích với cross-browser (trình duyệt chéo). Nó thậm chí còn hoạt động trong Google Chrome.

Simple Page Peel Effect with jQuery & CSS
Hướng dẫn này kết hợp jQuery và CSS để tạo ra một hiệu ứng vỏ trang (page peel). Hầu hết các trang web có Flash-driven đều sử dụng hiệu ứng này, vì vậy đây là một phương án lựa chọn hay.

60 in Mastering CSS, Part 1: Styling Design Elements

Equal height boxes with CSS
Đây là một ví dụ cơ bản về việc tạo ra equal-height boxes (faux columns) bằng cách sử dụng CSS. Nó hoạt động tương tự như các ô (cell) trong một table, nhưng không phải table bits hỗn hợp.
Adaptable view – how do they do it?
Khi các bề ngoài của trang web có thể cải thiện đáng kể tính khả dụng của nó và có khả năng có thể làm cho users experience có xu hướng tăng lên (và quay lại với trang web nhiều hơn). Hướng dẫn này chỉ ra cho bạn cách làm thế nào để thực hiện các kỹ thuật Adaptable view cho trang web của bạn.

9 in Mastering CSS, Part 1: Styling Design Elements

CSS: The All-Expandable Box
Đây là một hướng dẫn để tạo một box CSS. Nó sẽ có thể mở rộng theo mọi hướng phù hợp với nội dung mà nó chứa đựng, thay vì chỉ theo chiều dọc. Đặc biệt, Nó hoạt động rất tốt nếu người sử dụng tăng size của font chữ, nhưng lại làm cho toàn bộ box rộng hơn, thay vì chỉ dịch chuyển nội dung xung quanh và làm box dài hơn theo chiều dọc.
Four Methods to Create Equal Height Columns
Đây là một hướng dẫn khác để tạo equal-height columns trong CSS, gồm bốn kỹ thuật khác biệt. Các kỹ thuật này hoạt động trong tất cả các trình duyệt chính (ngay cả IE6).

32 in Mastering CSS, Part 1: Styling Design Elements

Vertical Centering With CSS
Bài đăng này giới thiệu một loạt các kỹ thuật tốt nhất để hiệu chỉnh các yếu tố CSS theo chiều dọc trên một trang. Ngoài ra còn trình bày cách làm thế nào để tạo ra một vertically-centered trên trang web một cách đơn giản bằng cách sử dụng các kỹ thuật này.

39 in Mastering CSS, Part 1: Styling Design Elements

CSS vertical center using float and clear
Đây là một hướng dẫn khác để tạo một box CSS theo kiểu vertically-centered , sử dụng đơn giản và dễ hiểu. Nó thậm chí còn hoạt động trong IE5 đối với Mac.

Cross-Browser Inline-Block
Hướng dẫn này trình bày cách làm thế nào để tạo một layout inline-block hoạt đông với các level khác nhau của nội dung mà không làm gián đoạn layout.
20 in Mastering CSS, Part 1: Styling Design Elements

The CSS “Ah-ha!” Moment
Đây là một bài nói về “Ah-Ha!”, thời điểm mà hầu hết các nhà thiết kế rất coi trọng trong sự nghiệp của mình. Trong trường hợp này, đó là mối quan hệ của các box CSS trong layout.
Ahha in Mastering CSS, Part 1: Styling Design Elements

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
Bài viết này đưa ra một bài khái quát toàn diện về các layer CSS, vị trí tương đối và tuyệt đối, và các thuộc tính Z-Index.

37 in Mastering CSS, Part 1: Styling Design Elements

The CSS Overflow Property
Đây là một bài tóm tắt hoàn chỉnh về các cách bố trí khác nhau như thế nào đối với CSS overflow property. Bao gồm visible (default), hidden, scroll, and auto, với mỗi một cái đều có các ví dụ minh họa.

51 in Mastering CSS, Part 1: Styling Design Elements

Absolute, Relative, Fixed Positioning: How Do They Differ?
Sự khác biệt giữa các vị trí tuyệt đối, tương đối, và cố định với CSS thỉnh thoảng có thể bị nhầm lẫn. Bài viết này chỉ ra cho thấy sự khác biệt giữa mỗi một vị trí kể trên và khi nào thì thích hợp để sử dụng cái này hay cái kia.
display: inline-block
Đây là một cross-browser – (phần lớn) phương pháp thích hợp với việc tạo ra các inline block trong một loạt các kiểu dáng khác nhau. Tuy nhiên có một vài sự khác biệt giữa việc thể hiện sự căn chỉnh theo chiều dọc giữa các trình duyệt.

93 in Mastering CSS, Part 1: Styling Design Elements

2. Navigation and Menu Techniques

Một thanh navigation tốt là một phần quan trọng của bất kỳ một trang web nào. Một thanh navigation tốt vừa dễ sử dụng vừa bổ sung cho phần còn lại là các yếu tố thiết kế của trang web. Dưới đây là một số kỹ thuật và các mẹo dành cho việc tạo navigation.

Create dropdown menus with CSS only
Một hướng dẫn đầy đủ về dropdown (thả xuống) các menu cũng giống như dropdown các list (danh sách) với CSS. Việc thực hiện phương pháp này rất ngắn và dễ.
108 in Mastering CSS, Part 1: Styling Design Elements

Simple scalable CSS based breadcrumbs
Sử dụng breadcrumbs trên trang web của bạn có thể làm cho khách truy cập của bạn điều hướng một cách dễ dàng hơn. Và hướng dẫn này chỉ ra một phương pháp để tạo các breadcrumbs có khả năng mở rộng bằng cách sử dụng CSS.

109 in Mastering CSS, Part 1: Styling Design Elements

Horizontal Sub-nav with CSS & jQuery
Đây là một hướng dẫn hoàn chỉnh về việc tạo một thanh navigation phụ (một submenu navigation) theo chiều ngang hoàn toàn bằng cách sử dụng CSS. Nếu bạn muốn nó hoạt động trong IE6, bạn cũng sẽ cần phải thực hiện một vài jQuery.

117 in Mastering CSS, Part 1: Styling Design Elements

CSS Step Menu
Tạo một menu có bậc (chia theo tầng) (còn được gọi là như là một “wizard menu”) có thể rất phức tạp, đặc biệt là khi phải thay đổi số lượng các bậc phụ thuộc vào những gì nó đang được sử dụng. Dưới đây là một ví dụ.
92 in Mastering CSS, Part 1: Styling Design Elements

The Tabbed Breadcrumb Navigation
Một hướng dẫn toàn diện về việc tạo breadcrumb navigation định dạng như thanh tab.
69 in Mastering CSS, Part 1: Styling Design Elements

Apple’s Navigation bar using only CSS
Hướng dẫn này hướng dẫn cách làm thế nào để tạo ra một thanh navigation giống như Apple chỉ sử dụng CSS và HTML (không có hình ảnh).
Apple in Mastering CSS, Part 1: Styling Design Elements

Sitemap Celebration
Đây là một dạng sitemap tương thích với cross- browser (thậm chí thích hợp với IE5 cho Mac) và dựa trên các list được lồng vào nhau.
68 in Mastering CSS, Part 1: Styling Design Elements

Nice CSS menu with feed reader icons list
Tạo ra một menu cung cấp các icon reader bằng cách sử dụng CSS. Nó có thể dễ dàng phù hợp với các loại menu khác.
59 in Mastering CSS, Part 1: Styling Design Elements

Multi-level Menus with jQuery and CSS
Đây là một bộ sưu tập các kỹ thuật để tạo ra multi-level menu hoàn toàn trong CSS và CSS / JS. Ngoài các kỹ thuật cơ bản, còn có nhiều ví dụ tiên tiến và sáng tạo.

41 in Mastering CSS, Part 1: Styling Design Elements

3. Image Styles and Galleries

Tạo kiểu dáng cho các hình ảnh một yếu tố oft-overlooked của trang thiết kế. Các kỹ thuật và lời khuyên đặc sắc dưới đây sẽ giúp bạn khắc phục tình trạng này trên bất kỳ trang web nào mà bạn đã thiết kế.

Centering images with CSS
Một số thông tin cơ bản về việc hiểu chỉnh các hình ảnh bằng cách sử dụng CSS thay vì HTML.

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
Một bài tóm tắt hoàn chỉnh về cách làm thế nào để tạo ra một loạt các kiểu dáng border xung quanh các hình ảnh trên blog của bạn bằng cách sử dụng cả JavaScript và CSS.
116 in Mastering CSS, Part 1: Styling Design Elements

Sexy Music Album Overlays
Một hướng dẫn tuyệt vời về việc thêm một chút phong cách cho bất kỳ phòng trưng bày hình ảnh (image gallery) nào, kể cả việc sử dụng một album bao trùm lên gallery như ví dụ dưới.
94 in Mastering CSS, Part 1: Styling Design Elements

Create CSS pin balloons with ease
Đây là một kỹ thuật tuyệt vời cho việc add pin balloons hoặc speech bubbles cho hình ảnh hoặc bản đồ mở rộng trên rollover từ một điểm đã định (anchor point).
70 in Mastering CSS, Part 1: Styling Design Elements

Create an Image Rotator with Description (CSS/jQuery)
AMột hướng dẫn tuyệt vời về cách làm thế nào để tạo ra một image rotator / gallery bằng cách sử dụng CSS và jQuery. Nó tạo ra một UI rõ ràng để hiển thị một portfolio hoặc image gallery tổng hợp.
66 in Mastering CSS, Part 1: Styling Design Elements

5 Popular CSS Speech Bubbles
Một bộ sưu tập của năm kỹ thuật khác biệt để tạo ra speech bubbles bằng cách sử dụng CSS (một số trong đó chỉ sử dụng CSS).

16 in Mastering CSS, Part 1: Styling Design Elements

How to Make a Threadless Style T-Shirt Gallery
Hướng dẫn để tạo ra một image gallery tương tự như trên trang web Threadless , với caption hoặc overlay trên đầu một hình ảnh hoặc hình ảnh thu nhỏ, giữa những tính năng khác.

46 in Mastering CSS, Part 1: Styling Design Elements

CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
Đây là một phương pháp đối với việc hoán đổi các hình ảnh được in (print) đặc biệt và được tối ưu hóa trên màn hình vào các trang trên web của bạn tùy thuộc vào kiểu dáng đang được sử dụng.
23 in Mastering CSS, Part 1: Styling Design Elements

Beautiful new CSS: box-shadow (bằng tiếng Đức)

78 in Mastering CSS, Part 1: Styling Design Elements

4. Các Kỹ thuật về typography

CSS thực sự vượt trội ở cách tạo kiểu dáng cho typography. Tất cả mọi thứ từ các font chữ đến độ đậm nhạt, đến màu sắc bằng cách sử dụng CSS. Dưới đây là một số hướng dẫn để giúp bạn tạo typography web tốt hơn.

Truetype, Font Variants and Antialiasing
Một bài viết tuyệt vời chỉ ra một số vấn đề với việc sử dụng phông chữ TrueType và đôi khi như thế nào đó chúng không được hiển thị (show up) như bạn đã hy vọng.
113 in Mastering CSS, Part 1: Styling Design Elements

Styling Ordered Lists with CSS
Hướng dẫn để tạo một danh sách rất lôi cuốn, theo thứ tự với CSS.
48 in Mastering CSS, Part 1: Styling Design Elements

Beautiful fonts with @font-face
Những điều cơ bản của việc sử dụng @ font đối với việc chèn các Font truetype trong thiết kế của bạn.

Fontf in Mastering CSS, Part 1: Styling Design Elements

Forgotten possibilities of :first-letter in CSS (bằng tiếng Nga)

33 in Mastering CSS, Part 1: Styling Design Elements

8 Definitive Web Font Stacks
Một bộ sưu tập gồm tám CSS font stacks dựa trên định dạng font chữ chính xác, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), and generic. Đây là những nhóm phụ thuộc vào những ấn tượng mà chúng có khả năng mang lại cho khách truy cập.
38 in Mastering CSS, Part 1: Styling Design Elements

Mike’s Experiments – CSS: Perspective Text
Một ví dụ thú vị của việc tạo ra text với một hiệu ứng phối cảnh (để phần bottom của một block của text trông gần hơn trên top).
91 in Mastering CSS, Part 1: Styling Design Elements

Fonts for web design: a primer
Một tài liệu hướng dẫn tuyệt vời về typography, và đặc biệt giành cho các nhà thiết kế web. Bài hướng dẫn bao gồm một bài tổng quát về các loại phông chữ, việc sử dụng chúng một cách thích hợp và, sự sử dụng các typefece đặc biệt cho thiết kế web.

104 in Mastering CSS, Part 1: Styling Design Elements

CSS text-shadow Fun: Realtime Lighting Demo
Một ví dụ thực sự rõ ràng đối với việc sử dụng các text-shadow (văn bản bóng) kết hợp với JavaScript để tạo ra lighting demo.

77 in Mastering CSS, Part 1: Styling Design Elements

Rendering Quotes With CSS
Hướng dẫn sử dụng dấu ngoặc kép trong CSS, bao gồm làm thế nào để tạo các quote tiêu chuẩn trong những lĩnh vực khác nhau

100 in Mastering CSS, Part 1: Styling Design Elements

Six Ways to Style Blockquotes
Một hướng dẫn về các phương pháp khác nhau để tạo kiểu dáng blockquote XHTML tag với CSS.

25 in Mastering CSS, Part 1: Styling Design Elements

Make OL list start from number different than 1 using CSS
Một hướng dẫn đơn giản để bắt đầu tạo một list được sắp xếp với bất kỳ một con số nào mà bạn muốn.
31 in Mastering CSS, Part 1: Styling Design Elements

Use CSS to Override Default Text Selection Color
Chọn bất kỳ màu sắc nào mà bạn muốn và làm cho màu sắc của text nổi bật trên các trang web của bạn với phương pháp này.
CSS Drop Cap Effect
Một drop cap có thể cài đặt trên trang ngoài, đặc biệt nếu đó là một tạp chí hay book website (hoặc không, thì cỏ thể là những cái liên quan đến lĩnh vực văn học). Đây là phương pháp tạo ra chúng với CSS.

5. Icons, Buttons and Links

Icons, buttons and links là những yếu tố không được chú ý tới trên nhiều trang web. Nhưng chúng cũng có thể tạo nên một tác động rất lớn với toàn bộ thiết kế của bạn. Dưới đây là một ít tài liệu trình bày cách để tạo kiểu dáng cho chúng tốt hơn.

Add Progressive Icons to Your Site Using :after pseudo-element
Hướng dẫn này chỉ ra cách làm thế nào để sử các icon mô tả cho các đường link của bạn, chủ yếu là chỉ ra dạng file đang được liên kết (như PDF hoặc ZIP).
118 in Mastering CSS, Part 1: Styling Design Elements

Super Awesome Buttons with CSS3 and RGBA
Hướng dẫn để tạo các button tuyệt vời bằng cách sử dụng CSS3 và các kỹ thuật pha trộn cơ bản (alpha-blending ).
56 in Mastering CSS, Part 1: Styling Design Elements

Scalable CSS Buttons Using PNG and Background Colors
Hướng dẫn cho việc tạo các button có khả năng mở rộng cả theo chiều ngang và chiều dọc bằng cách sử dụng các hình ảnh PNG. Kỹ thuật này làm giảm tính trang nhã, do đó, ngay cả người dùng trong IE6 vẫn sẽ nhìn thấy button (chỉ không có PNG).
101 in Mastering CSS, Part 1: Styling Design Elements

Add File Type Icons next to your links with CSS
Một hướng dẫn khác để thêm file type icons cho các đường link của bạn.
75 in Mastering CSS, Part 1: Styling Design Elements

22 CSS Button Styling Tutorials and Techniques
Đây là danh sách tài liệu hoàn chỉnh bao gồm hơn 20 kỹ thuật để tạo các button đối với toàn bộ shape và size với CSS.
CSS Tricks’ Link Nudge
Hướng dẫn để tạo ra các đường link nhích sang bên khi chúng dịch chuyển.
36 in Mastering CSS, Part 1: Styling Design Elements

Sanscons
Đây là một bộ icon có thể được recolored bằng cách chỉ sử dụng CSS.

98 in Mastering CSS, Part 1: Styling Design Elements

Dịch và biên tập từ: SmashingMagazine

Xem bài viết gốc

Bình Luận »