6 Mẹo Thiết Kế với Đường Line

<h1 class="entry-title"> </h1> Hôm nay chúng ta sẽ tìm hiểu một trong những yếu tố thiết kế đơn giản nhất, đó chính là đường line. Chúng ta sẽ cùng xem làm thế nào để vận dụng cũng như những gì nên tránh khi sử dụng đường line.<div class="entry-content"> Thêm một vài đường line đơn giản có thể tạo ra cấu trúc và đồ họa tinh tế và làm giảm bớt sự nhàm chán của thiết kế. Đó là một thủ thuật đơn giản, khi sử dụng hiệu quả, nó có tác dụng như một layout thêm vào giúp hoàn thiện thiết kế của bạn.<br /> <h2> Sử dụng đường gạch chân</h2> Chúng ta sẽ bắt đầu với thủ thuật cơ bản nhất trong typography: gạch chân. Gạch chân headline giúp tiêu đề nổi bật và tách biệt rõ ràng giữa header và nội dung. Hãy nhớ rằng những yếu tố này không phải là yếu tố thiết yếu, có thể có hoặc không nhưng không hề rõ ràng, bạn cần quyết định khi nào nên sử dụng để mang lại hiệu quả cho thiết kế và khi nào nó không mang lại tác dụng, tất cả phụ thuộc vào<a href="http://vnwordpress.com/web-photoshop/chuyen-muc/tai-lieu-tham-khao/" title=" giao diện"> giao diện</a> của bạn.<br /> <img alt="Học: DesignALine 1 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-1.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Lưu ý đường line không chỉ có tác dụng phân biệt hai yếu tố mà còn giúp xác định độ rộng của cột.<br /> Một sai sót nhỏ mà tôi gặp phải khi dùng gạch chân là khi bạn có có những ký tự có phần móc dưới dính vào đường line. Không có quy tắc nào nói rằng không được làm điều này nhưng tôi nhận thấy rằng nó gây mất tập trung và làm lệch hướng sự chú ý của người xem.<br /> <img alt="Học: DesignALine 2 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-2.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Vì vậy làm thế nào để giải quyết vấn đề này? Lựa chọn đơn giản nhất là tránh dùng đường gạch chân cho các ký tự có phần móc dưới. Thay vào đó, những gì tôi thường làm là vẽ đường gạch chân bằng tay (thay vì nhấn vào nút gạch dưới), và tránh vẽ chạm những ký tự có phần móc dưới.<br /> <img alt="Học: DesignALine 3 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-3.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Như bạn có thể thấy trong ví dụ ở trên, nó giúp văn bản trông đẹp hơn ví dụ ban đầu và giúp thiết kế trông trực quan hơn. Nếu bạn không thích làm điều này với chữ “g” cuối cùng, đơn giản là bạn có thể gạch chân như thể chỉ có một ký tự có dấu móc dưới.<br /> <h3> Kéo dài đường line</h3> Hãy nhớ rằng gạch chân không cần rộng bằng phần văn bản. Nhưng đôi khi việc kéo dài đường line đến cuối trang sẽ tạo một chút thú vị cho thiết kế.<br /> <img alt="Học: DesignALine 4 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-4.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Nếu bạn kéo dài đường gạch chân, hãy sáng tạo một chút với khoảng trống. Bạn có thể thêm vào một số đường nét, bẻ cong đường line hay bất cứ điều gì mà bạn muốn.<br /> <img alt="Học: DesignALine 5 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-5.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Designer bên dưới đã mở rộng đường gạch chân và kết thúc bằng một dấu chấm. Nó giúp liên kết với nội dung bên phải và nhưng trông vẫn tinh tế.<br /> <img alt="Học: DesignALine 10 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-10.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h2> Phá vỡ đường line</h2> Không nên quá cứng nhắc trong việc sử dụng đường line. Bạn có thể sử dụng dấu gạch ngang, dấu chấm, hình tam giác, ngôi sao hay bất cứ thứ gì có thể tạo ra đường line mà bạn mong muốn và vẫn đạt được mục đích.<br /> Hãy xem các thiết kế này đã sử dụng những dấu chấm như thế nào để tạo line bên trái và bên phải để có một headline rõ ràng. Mặc dù văn bản ở đây được canh giữa, thiết kế trông có vẻ như được canh đều bởi những đường line bên trái và bên phải của cột.<br /> <img alt="Học: DesignALine 6 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-6.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <img alt="Học: DesignALine 7 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-7.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h2> Line bao quanh chữ</h2> Nếu bạn sử dụng một theme chính thức, việc lặp đi lặp lại gạch chân ở đầu tiêu đề có thể tạo ra cảm giác như phong cách in cũ. Tôi luôn nghĩ đến tiêu đề một tờ báo khi nhìn thấy phong cách này.<br /> <img alt="Học: DesignALine 8 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-8.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Nếu bạn muốn một chút thay đổi, hãy thử tách rời các đường line theo những cách khác nhau. Nó cũng tạo ra hiệu ứng chuyển động cho một trang tĩnh.<br /> <img alt="Học: DesignALine 9 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-9.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h2> Line dọc</h2> Hầu hết chúng ta đều sử dụng line ngang nhưng line dọc có thể được sử dụng nhằm thêm vào một số đồ họa sáng tạo cho thiết kế. Designer bên dưới đã phóng đại các đường thẳng đứng và thiết kế trở nên thật sự thú vi và đẹp hơn, theme gắn liền với các phần còn lại của trang.<br /> <img alt="Học: DesignALine 11 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-11.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Rõ ràng, có một truyền thống trong việc sử dụng line thẳng đứng nhằm tách hai cột nội dung. Nó có thể được sử dụng kết hợp với hình ảnh để bớt những khoảng trống giữa các cột.<br /> <img alt="Học: DesignALine 13 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-13.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h2> Line chéo</h2> Nếu bạn thực sự muốn trang của bạn trông độc đáo hơn, hãy để nghiêng nội dung theo đường chéo. Điều này tạo ra một thiết kế thú vị, trẻ trung và phá vỡ những quy tắc cứng nhắc.<br /> Có thể đặt nghiêng phần nội dung một cách ngẫu nhiên nhưng kéo dài đường line giúp nó trông tự nhiên và hiệu quả hơn. Hãy mạnh dạng sáng tạo để những thiết kế của bạn trông đặc biệt hơn.<br /> <img alt="Học: DesignALine 14 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-14.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Hiệu ứng đường chéo đặc biệt phù hợp với những thiết kế như trên.<br /> <h2> Kết hợp các chi tiết</h2> Tôi sẽ cho bạn thấy nó dễ dàng thực hiện như thế nào. Bạn có thể thêm một hoặc hai line đơn giản cho thiết kế nhưng nó cũng có thể giết chết tính thẩm mỹ của thiết kế nếu không kết hợp đúng cách. Tuy nhiên, sự kết hợp các thủ thuật ở trên có tạo ra một sản phẩm thực sự sắc nét.<br /> Các thiết kế dưới đây của David Fooks sử dụng rất nhiều line. Anh ấy đã kết hợp những đường chấm nét, đường, đường thẳng, đường cong thậm chí là hình kim cương để kết thúc. Nó không nhề gây lộn xộng mà còn khá sang trọng và đẹp.<br /> <img alt="Học: DesignALine 12 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-12.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> Lời khuyên của tôi là bạn chỉ cần một chút thận trọng. Giống rất nhiều yết tố thiết kế, đường line có thể mang lại hiệu quả tích cực hoặc tiêu cực. Sử dụng một cách hợp lý và luôn chắc chắn rằng việc thêm vào sẽ tạo giá trị cho thiết kế của bạn.<br /> <h2> Nguồn cảm hứng</h2> Tham khảo những <a href="http://vnwordpress.com/web-photoshop/chuyen-muc/tac-pham/" title="tác phẩm">tác phẩm</a> sử dụng line trong thiết kế web đế tìm ra ý tưởng hoặc cách kết hợp các đường line cho thiết kế tiếp theo của bạn.<br /> <h3> CarbonAds</h3> <img alt="Học: DesignALine 15 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-15.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> For the Record</h3> <img alt="Học: DesignALine 16 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-16.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> Evan Eckard</h3> <img alt="Học: DesignALine 17 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-17.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> Cool and the Guide</h3> <img alt="Học: DesignALine 18 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-18.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> The Pineapple Thief</h3> <img alt="Học: DesignALine 19 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-19.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> DesignSwap</h3> <img alt="Học: DesignALine 20 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-20.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h3> Caravan</h3> <img alt="Học: DesignALine 21 6 Mẹo Thiết Kế với Đường Line" src="http://designshack.net/wp-content/uploads/DesignALine-21.jpg" title="Học: 6 Mẹo Thiết Kế với Đường Line tai lieu tham khao ky thuat web " width="510" /><br /> <h2> Kết luận</h2> Mục đích của việc thảo luận là khuyến khích bạn có một cái nhìn tổng thể về sử dụng đường line trong thiết kế và cân nhắc một cách cẩn trọng khi sử dụng chúng để tạo ra một thiết kế đẹp hơn.<br /> Nếu bạn có thiết kế nào đó sử dụng hiệu quả các đường line đơn giản, hãy để lại comment bên dưới với đường link để chúng ta có thể cùng xem. Và bạn cũng có thể cho chúng tôi biết bạn nghĩ gì về những ví dụ ở trên.<br /> <br /> <div style="text-align: right;"> Source : http://vnwordpress.com</div> </div>

6 Mẹo Thiết Kế với Đường Line

Hôm nay chúng ta sẽ tìm hiểu một trong những yếu tố thiết kế đơn giản nhất, đó chính là đường line. Chúng ta sẽ cùng xem làm thế nào để...

Đọc thêm »

Kỹ Thuật CSS– Bạn Không Thể Thiếu

<time class="updated" datetime="2010-01-19T11:18:15+00:00" pubdate=""></time>CSS rất quan trọng. Và nó đang được sử ngày càng thường xuyên hơn.<br /> <div class="vnwordpress-post"> <div class="ind-post"> Trong một vài năm qua, các nhà phát triển web đã viết nhiều bài viết về CSS và phát triển nhiều<a href="http://vnwordpress.com/web-photoshop/chuyen-muc/tai-lieu-tham-khao/" title=" kỹ thuật"> kỹ thuật</a> khả dụng, có thể giúp bạn tiết kiệm rất nhiều thời gian – tất nhiên, là do bạn có thể tìm thấy chúng nhanh hay chậm thôi. Dưới đây bạn sẽ tìm thấy danh sách các kỹ thuật mà chúng tôi, những nhà thiết kế web, thực sự không thể sống mà không có nó. Chúng rất thiết yếu,quan trọng và quả thật chúng làm cho cuộc sống của chúng tôi dễ dàng hơn. Chúng ta hãy cùng xem <b>53 kỹ thuật CSS cơ bản mà bạn luôn phải sẵn sàng nắm giữ nếu bạn muốn phát triển web-site.</b>. <i>Links checked: June/11 2008.</i><br /> Bạn có thể xem thêm bài: <a href="http://vnwordpress.com/web-photoshop/tai-lieu-tong-hop/gioi-thieu-css3/">Giới thiệu CSS3</a></div> <div class="ind-post"> 1. <a href="http://www.nundroo.com/navigation/">CSS Based Navigation</a><br /> <a href="http://www.nundroo.com/navigation/"><img alt="Học: css techniques0000 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0000.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 2. <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/">Navigation Matrix Reloaded</a><br /> <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/"><img alt="Học: css techniques0001 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0001.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 3. <a href="http://exploding-boy.com/images/cssmenus/menus.html">CSS Tabs</a><br /> <a href="http://exploding-boy.com/images/cssmenus/menus.html"><img alt="Học: css techniques0002 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0002.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 4. <a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55">CSS For Bar Graphs</a><br /> <a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55"><img alt="Học: css techniques0003 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0003.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 5. <a href="http://icant.co.uk/sandbox/footercollapsetables/">Collapsing Tables: An Example</a><br /> <a href="http://icant.co.uk/sandbox/footercollapsetables/"><img alt="Học: css techniques0004 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0004.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 6. <a href="http://www.flog.co.nz/lab/ARC/ARC.htm">Adam’s Radio & Checkbox Customisation Method</a><br /> <a href="http://www.flog.co.nz/lab/ARC/ARC.htm"><img alt="Học: css techniques0005 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0005.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 7. <a href="http://www.mezzoblue.com/tests/revised-image-replacement/">CSS Image Replacement</a><br /> <a href="http://www.mezzoblue.com/tests/revised-image-replacement/"><img alt="Học: css techniques0006 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0006.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 8. CSS Shadows (CSS Shadows Roundup)<br /> <img alt="Học: css techniques0007 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0007.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></div> <div class="ind-post"> 9. <a href="http://www.smileycat.com/miaow/archives/000044.php#nojavascript">CSS Rounded Corners Roundup</a> (<a href="http://www.smileycat.com/miaow/archives/000044.php#nojavascript">Nifty Corners</a>)<br /> <a href="http://www.smileycat.com/miaow/archives/000044.php#nojavascript"><img alt="Học: css techniques0008 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0008.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 12. <a href="http://www.smileycat.com/miaow/archives/000230.php">How to Create a Block Hover Effect for a List of Links</a><br /> <a href="http://www.smileycat.com/miaow/archives/000230.php"><img alt="Học: css techniques0011 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0011.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 13. <a href="http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/">Pullquotes with CSS</a> (<a href="http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/">Automatic Pullquotes with JavaScript and CSS</a><br /> <a href="http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/"><img alt="Học: css techniques0012 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0012.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 15. <a href="http://storage.couchfort.net/cssCurves/">CSS Curves</a><br /> <a href="http://storage.couchfort.net/cssCurves/"><img alt="Học: css techniques0014 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0014.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 16. <a href="http://www.themaninblue.com/experiment/footerStickAlt/">Footer Stick</a> chú ý tới footer của Web cho xuất hiện hoặc là ở dưới cùng của cửa sổ trình duyệt hoặc dưới cùng của nội dung trang- cái nào nhìn nhỏ nhất?<br /> <a href="http://www.themaninblue.com/experiment/footerStickAlt/"><img alt="Học: css techniques0015 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0015.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 17. <a href="http://www.frankmanno.com/ideas/css-imagemap/">CSS Image Map</a><br /> <a href="http://www.frankmanno.com/ideas/css-imagemap/"><img alt="Học: css techniques0016 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0016.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 18. CSS Image Pop-Up<br /> <img alt="Học: css techniques0017 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0017.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></div> <div class="ind-post"> 19. <a href="http://snipplr.com/view/2122/css-image-preloader/">CSS Image Preloader</a><br /> <a href="http://snipplr.com/view/2122/css-image-preloader/"><br /> <img alt="Học: css techniques0018 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0018.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 20. <a href="http://www.ampsoft.net/webdesign-l/image-button.html">CSS Image Replacement for Buttons</a><br /> <a href="http://www.ampsoft.net/webdesign-l/image-button.html"><img alt="Học: css techniques0019 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0019.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 21. <a href="http://lab.arc90.com/2006/07/link_thumbnail.php">Link Thumbnail</a><br /> <a href="http://lab.arc90.com/2006/07/link_thumbnail.php"><img alt="Học: css techniques0020 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0020.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 22. <a href="http://mikecherim.com/experiments/css_map_pop.php">CSS Map Pop</a><br /> <a href="http://mikecherim.com/experiments/css_map_pop.php"><img alt="Học: css techniques0021 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0021.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 23. <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=12">PHP-based CSS Style Switcher</a><br /> <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=12"><img alt="Học: css techniques0022 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0022.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 24. <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=0">CSS Unordered List Calender</a> (<a href="http://veerle.duoh.com/blog/comments/a_css_styled_calendar/">CSS Styled Calender</a>)<br /> <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=0"><img alt="Học: css techniques0023 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0023.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 25. <a href="http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/">CSS-Based Forms: Techniques</a><br /> <a href="http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/"><img alt="Học: css techniques0024 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0024.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 26. <a href="http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/">CSS-Based Tables: Techniques</a><br /> <a href="http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/"><img alt="Học: css techniques0025 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0025.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 27. <a href="http://css-discuss.incutio.com/?page=PrintStylesheets">Printing Web-Documents and CSS</a><br /> <a href="http://css-discuss.incutio.com/?page=PrintStylesheets"><img alt="Học: css techniques0027 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0027.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 28. <a href="http://www.alistapart.com/articles/improvingprint/">Improved Links-Display for Print-Layouts with CSS</a><br /> <a href="http://www.alistapart.com/articles/improvingprint/"><img alt="Học: css techniques0026 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0026.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 30. <a href="http://www.456bereastreet.com/lab/teaser/">CSS Teaser Box</a><br /> <a href="http://www.456bereastreet.com/lab/teaser/"><img alt="Học: css techniques0029 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0029.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 31. <a href="http://www.macworld.com/2005/12/secrets/januarycreate/index.php">CSS Tricks for Custom Bullets</a><br /> <a href="http://www.macworld.com/2005/12/secrets/januarycreate/index.php"><img alt="Học: css techniques0030 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0030.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 32. <a href="http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded">Ticked Off Links Reloaded</a><br /> <a href="http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded"><img alt="Học: css techniques0031 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0031.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 33. <a href="http://www.deltatangobravo.com/images/zoom/">CSS Zooming</a><br /> <a href="http://www.deltatangobravo.com/images/zoom/"><img alt="Học: css techniques0032 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0032.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 34. <a href="http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/">Creating a Star Rater using CSS</a><br /> <a href="http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/"><img alt="Học: css techniques0033 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0033.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 35. <a href="http://webdesign.maratz.com/lab/visited_links_styling/">The ways to style visited Links</a><br /> <a href="http://webdesign.maratz.com/lab/visited_links_styling/"><img alt="Học: css techniques0034 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0034.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 36. <a href="http://webdesign.maratz.com/lab/pdf_links_labeling/">PDF, ZIP, DOC Links Labeling</a><br /> <a href="http://webdesign.maratz.com/lab/pdf_links_labeling/"><img alt="Học: css techniques0035 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0035.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 37. <a href="http://www.barenakedapp.com/the-design/displaying-percentages">Displaying Percentages with CSS</a><br /> <a href="http://www.barenakedapp.com/the-design/displaying-percentages"><br /> <img alt="Học: css techniques0036 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0036.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 38. <a href="http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/">Image Floats without the Text Wrap</a><br /> <a href="http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/"><img alt="Học: css techniques0037 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0037.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 39. <a href="http://webdesign.maratz.com/lab/new_window_link/">Let visitors decide, whether or not will they open link in a new window</a><br /> <a href="http://webdesign.maratz.com/lab/new_window_link/"><img alt="Học: css techniques0038 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0038.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 40. <a href="http://www.maxdesign.com.au/presentation/external/">Simple accessible external links</a><br /> <a href="http://www.maxdesign.com.au/presentation/external/"><img alt="Học: css techniques0039 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0039.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 41. <a href="http://24ways.org/2005/splintered-striper">Zebra Table with JavaScript and CSS</a><br /> <a href="http://24ways.org/2005/splintered-striper"><img alt="Học: css techniques0040 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0040.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 42. <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">Vertical Centering with CSS</a> (<a href="http://www.456bereastreet.com/lab/centered/both/">Horizontal and Vertical Centering with CSS</a><br /> <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html"><img alt="Học: css techniques0041 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0041.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 43. <a href="http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php">Unobtrusive Sidenotes</a><br /> <a href="http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php"><img alt="Học: css techniques0042 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0042.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 44. <a href="http://lab.arc90.com/2006/07/image_caption_1.php">Image Caption with CSS</a> (<a href="http://boagworld.com/technology/styled-images-with-caption">Styled Images with Caption</a>)<br /> <a href="http://lab.arc90.com/2006/07/image_caption_1.php"><img alt="Học: css techniques0043 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0043.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 45. <a href="http://petewilliamsagency.com/css/examples/pie/">Dynamic Piechart with CSS</a><br /> <a href="http://petewilliamsagency.com/css/examples/pie/"><img alt="Học: css techniques0044 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0044.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 46. <a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html">Format Footnotes with CSS</a><br /> <a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html"><img alt="Học: css techniques0045 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0045.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 47. <a href="http://www.alexandersperl.de/2006/03/hierarchical-sitemap-with-dashed-lines/">Hierarchical Sitemap with CSS</a><br /> <a href="http://www.alexandersperl.de/2006/03/hierarchical-sitemap-with-dashed-lines/"><img alt="Học: css techniques0046 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0046.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 48. <a href="http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/">Snook’s Resizable Underlines</a><br /> <a href="http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/"><img alt="Học: css techniques0047 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0047.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 49. <a href="http://www.alistapart.com/articles/switchymclayout">Switchy McLayout: An Adaptive Layout Technique</a><br /> <a href="http://www.alistapart.com/articles/switchymclayout"><img alt="Học: css techniques0048 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0048.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 50. StyleMap: CSS+HTML Visual Sitemap<br /> <img alt="Học: css techniques0049 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0049.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></div> <div class="ind-post"> 51. <a href="http://www.devlounge.net/articles/custom-reading-width-beta">Custom Reading Width</a><br /> <a href="http://www.devlounge.net/articles/custom-reading-width-beta"><img alt="Học: css techniques0050 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0050.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 52. <a href="http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/">CSS Alert Message</a><br /> <a href="http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/"><img alt="Học: css techniques0051 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0051.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /></a></div> <div class="ind-post"> 53. <a href="http://24ways.org/2006/css-production-notes">CSS Production Notes</a><br /> <br /> <br /> <a href="http://24ways.org/2006/css-production-notes"><img alt="Học: css techniques0052 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu" height="170" src="http://media.smashingmagazine.com/cdn_smash/images/css/css-techniques0052.gif" title="Học: 53 Kỹ Thuật CSS– Bạn Không Thể Thiếu tai lieu tham khao ky thuat web " width="485" /> </a><br /> <br /> <div style="text-align: right;"> Source : http://vnwordpress.com </div> </div> </div>

Kỹ Thuật CSS– Bạn Không Thể Thiếu

CSS rất quan trọng. Và nó đang được sử ngày càng thường xuyên hơn. Trong một vài năm qua, các nhà phát triển web đã viết nhiều bài viết v...

Đọc thêm »