Hiển thị các bài đăng có nhãn CSS. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn CSS. Hiển thị tất cả bài đăng

Home » Posts filed under CSS

Một số cách tối ưu hóa CSS giúp tăng tốc blogspot

Người đăng: yeu mai em on Thứ Bảy, 8 tháng 10, 2011

Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.

1. Sử dụng file ngoài, gọp tất cả các file ngoài thành một file chung và đặt trong phần Head (ở đỉnh đầu) của trang:

Sử dụng file ngoài giúp trang load nhanh hơn do các file CSS được công cụ trình duyệt lưu giữ trong bộ nhớ cache. CSS được sắp xếp trong các tài liệu HTML được hạ tải mỗi khi tài liệu HTML được yêu cầu. Sử dụng file ngoài giúp hạn chế số HTTP requests cần thiết, nhưng tăng kích cỡ tài liệu HTML. Mặt khác, nếu CSS nằm trong các file ngoài được công cụ trình duyệt lưu nhớ cache thì kích cỡ tài liệu HTML được hạn chế mà không làm tăng số HTTP requests (Đây là quy tắc số 8 trong cuốn sách High Performance Web Sites của Steve Souders dành cho các nhà phát triển web chuyên nghiệp).

Thông thường đối với blogspot, CSS được đặt trước dòng ]]></b:skin> hoặc trước thẻ </head> như thế này:

  1. <head>
  2. ......
  3. ......
  4. ......
  5. <b:skin><![CDATA[/*
  6. body {
  7.   font-family:verdana;
  8.   margin:0;
  9.   padding:0;
  10. }
  11. a {
  12.   text-decoration:none;
  13.   outline: none;
  14. }
  15. h1 {
  16.   font-weight:700;  
  17.   margin:5px 0;
  18. }  
  19. ......
  20. ......
  21. ......
  22. ]]></b:skin>
  23. <style>
  24. ......
  25. ......
  26. ......
  27. </style>
  28. </head>

Nếu bạn có host thì nên gọp thành file chung (đặt tên default.css) rồi upload lên host, đặt file như thế này:

  1. <head>
  2. ......
  3. <link rel="stylesheet" type="text/css" href="http://www.tenhost.com/css/default.css" />
  4. ......
  5. </head>

Để hạn chế số HTTP requests, người ta còn khuyến cáo gọp các file CSS thành một file chung. Ví dụ nếu bạn có 3 file CSS trên trang web thì trình duyệt sẽ gửi 3 HTTP requests đến server. Như vậy nếu dùng chung 1 file CSS thì thời gian load trang sẽ nhanh hơn rất nhiều.

Nếu bạn có 3 file CSS như thế này:

  1. <link rel="stylesheet" type="text/css" href="content.css" />
  2. <link rel="stylesheet" type="text/css" href="widget.css" />
  3. <link rel="stylesheet" type="text/css" href="comment.css" />

Thì nên gộp thành một file như sau:

  1. <link rel="stylesheet" type="text/css" href="default.css" />

2. Rút gọn CSS:

Việc gộp chung tất cả các thuộc tính giống nhau sẽ giúp hạn chế kích cỡ CSS. Thay vì sử dụng nhiều dòng thuộc tính, tại sao chúng ta không tạo thành một dòng.

Đây là ví dụ đoạn CSS có nhiều thuộc tính giống nhau:

  1. /* MARGIN */
  2. h1 {margin-top:1em;
  3.     margin-right:0;
  4.     margin-bottom:2em;
  5.     margin-left:0.5em;
  6. }
  7. /* BORDER */
  8. h1 {border-width:1px;
  9.     border-style:solid;
  10.     border-color:#000;
  11. }
  12. /* BORDER WIDTH */
  13. h1 {border-top-width:1px;
  14.     border-right-width:2px;
  15.     border-bottom-width:3px;
  16.     border-left-width:4px;
  17. }
  18. /* BACKGROUND */
  19. div {background-color:#f00;
  20.      background-image:url(background.gif);
  21.      background-repeat:no-repeat;
  22.      background-attachment:fixed;
  23.      background-position:0 0;
  24. }
  25. /* FONT */
  26. h1 {font-style:italic;
  27.     font-variant:small-caps;
  28.     font-weight:bold;
  29.     font-size:1em;
  30.     line-height:140%;
  31.     font-family:"Lucida Grande",sans-serif;
  32. }
  33. /* LIST STYLE */
  34. ul {list-style-type:square;
  35.     list-style-position:inside;
  36.     list-style-image:url(image.gif);
  37. }
  38. /* OUTLINE */
  39. h1 {outline-color:#f00;
  40.     outline-style:solid;
  41.     outline-width:2px;
  42. }

Chúng ta nên rút gọn thành như sau:

  1. /* MARGIN */
  2. h1 {margin:1em 0 2em 0.5em;}
  3. /* BORDER */
  4. h1 {border:1px solid #000;}
  5. /* BORDER WIDTH */
  6. h1 {border-width:1px 2px 3px 4px;}
  7. /* BACKGROUND */
  8. div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
  9. /* FONT */
  10. h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
  11. /* LIST STYLE */
  12. ul {list-style:square inside url(image.gif);}
  13. /* OUTLINE */
  14. h1 {outline:#f00 solid 2px;}

Rõ ràng bạn thấy đã giảm kích cỡ rất đáng kể cho CSS.

3. Gộp các định dạng CSS giống nhau:

Đôi khi chúng ta khai báo các định dạng CSS giống nhau mà chúng ta vô tình không nhận ra. Tốt nhất nên xem và phân tích lại. Hãy gộp chúng lại với nhau cho đơn giản hơn.

Ví dụ sau đây là đoạn CSS có các định dạng giống nhau:

  1. h1 {padding:5px 0; font-family:verdana; font-weight:700;}
  2. #box1 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
  3. #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700;}
  4. #nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
  5. #nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
  6. #nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
  7. #nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

Chúng ta nên gộp lại như sau:

  1. h1, #box1 .heading, #box2 .heading  {padding:5px 0; font-family:verdana; font-weight:700}
  2. #nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}
  3. #nav a.home {background:url(home.gif)}
  4. #nav a.portfolio {background:url(portfolio.gif)}
  5. #nav a.contact {background:url(contact.gif)}
  6. #nav a.about {background:url(about.gif)}

4. Nén CSS:

- Hạn chế xuống dòng và bỏ dấu chấm phẩy (;) cuối cùng:

Ví dụ đối với đoạn CSS này:

  1. h2 {
  2.     font-family:verdana;
  3.     padding:0;
  4.     margin:5px 0;
  5.     color:#333;
  6.     text-decoration:underline;
  7. }

Nên nén lại thành một dòng như sau:

  1. h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

- Sử dụng chú thích đơn giản:

Ví dụ đối với một đoạn chú thích phức tạp như thế này:

  1. /************************************/
  2. /*          Content Styles            */
  3. /************************************/

Thì nên đơn giản hóa lại như sau (hoặc có thể bỏ luôn chú thích):

  1. /* content styles */

- Loại bỏ 0px:

Ví dụ đối với đoạn CSS này:

  1. h2 {padding:0px; margin:0px;}

Thì nên sửa lại như sau:

  1. h2 {padding:0; margin:0}

5. Sử dụng mã màu đơn giản:

Đối với một số mã màu như thế này: #FFFFFF, #113344, #AABBCC, #FF0000

Thì chúng ta nên giản lượt lại như sau: #FFF, #134, #ABC, #F00

6. Loại bỏ các đoạn CSS không cần thiết:

Trong quá trình thiết kế webblog, do nhiều khi thay đổi giao diện hoặc tháo các tiện ích, một số lớp/ID đã được tạo trước đây thì nay không còn dùng đến nữa. Chúng ta nên kiểm tra và loại bỏ chúng.

Dust-Me Selector và CSS Roundup là hai Addon của Firefox giúp phân tích trang để tìm ra những phần CSS không được dùng đến. Bạn có thể cài đặt một trong hai tiện ích này để giúp bạn làm thay công việc này (tuy nhiên hai tiện ích này chưa hoạt động được với phiên bản mới nhất của FireFox, chỉ dùng được với các phiên bản từ FF6+ trở về trước).

7. Sử dụng các công cụ tối ưu hóa và nén CSS online để giúp bạn đỡ mệt nhọc hơn:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

8. Sử dụng CSS Sprite:

CSS Sprite là phương pháp tối ưu để hạn chế số lượng HTTP requests về hình ảnh. Kết hợp các ảnh nền thành một ảnh duy nhất và sử dụng các thuộc tính background-image và background-position để hiển thị ảnh theo ý muốn. Phương pháp này rất hữu ích cho các trang có lượng khách truy cập đông. CSS Sprite là một phạm trù kiến thức nâng cao, bạn có thể tham khảo ở một bài viết khác sau này.
More about →
vào lúc 08:56 { Add nhận xét }
Nhãn:

Tạo thumbnail cho ảnh với CSS

Người đăng: yeu mai em on Thứ Hai, 30 tháng 5, 2011

Thông thường khi muốn tạo ảnh thumbnail ta thường dùng cách bóp ảnh lại bằng việc sử dụng các lệnh width, height. Khi bóp ảnh như thế, nếu bóp theo 2 chiều (width và height) thì ảnh thường bị méo dạng (không còn tỉ lệ với ảnh gốc), nếu không muốn gặp hiện tượng này thì chỉ nên bóp theo 1 chiều. Tuy nhiên, ở những phần, ví dụ như tiện ích recent post, các bạn muốn các ảnh thumbnail được đều nhau, và có cùng kích cỡ thì việc bóp ảnh theo 1 chiều không đáp ứng được. Và hôm nay mình sẽ giới thiệu cho các bạn 1 các để lấy ảnh thumbnail từ ảnh gốc mà chỉ cần dùng CSS.

Mình sẽ giải thích sơ về cách thức này. Giả sử ta có 1 tấm ảnh và 1 tờ giấy màu (màu đen chẳng hạn, và kích thước tờ giấy màu sẽ lớn hơn tấm ảnh), sau đó ta cắt 1 cái lỗ hình vuông trên tờ giấy màu, kích cỡ tùy ý (giả sử 200x200px). Rồi ta đặt tờ giấy màu trên tấm ảnh, khi đó ta sẽ nhìn được 1 phần tấm ảnh qua cái lỗ mà ta đã cắt trên tờ giấy màu. Và phần ảnh ta thấy được này sẽ là ảnh thumbnail. Để tùy chỉnh vùng ảnh để hiển thị ảnh thumbnail thì ta chỉ việc dịch chuyển tờ giấu hoặc dịch chuyển ảnh.

Bên dưới là ảnh minh họa

Còn đây là demo

Ảnh gốc

Ảnh thumbnail lấy được:

* Các bước thực hiện:
- đầu tiên các bạn chèn code CSS bên dưới vào trong code template (chèn vào trước dòng code ]]></b:skin> trong code template)
/* CSS thumbnail */

div.thumb{
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
div.thumb {
display:block;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
div.thumb img{
position:absolute;
top:-20px;
left:-50px;
}

/* END CSS thumbnail */
- 1 số lưu ý về code CSS ở trên:
+ các giá trị width, height trong class div.thumb là chiều cao và độ rộng của ảnh thumbnail.
+ Các top, left trong class div.thumb img chính là vị trí góc trái trên của ảnh thumbnail (so với ảnh gốc).
+ Khi muốn hiển thị ảnh thumbnail thì bạn chỉ việc dùng code tương tự như bên dưới
<div class="thumb"><img src="Link ảnh" /></div>
+ Ngoài ra, nếu ảnh lớn quá, mà ta muốn lấy ảnh thumbnail nhỏ thì (vì khi đó ảnh thumbnail sẽ ko thể hiện hết được ảnh gốc) bạn có thể resize ảnh gốc nhỏ lại, ví dụ như bên dưới:
<div class="thumb"><img src="Link ảnh" width="200" /></div>

Chúc các bạn thành công.
More about →
vào lúc 03:41 { Add nhận xét }
Nhãn: , ,

Bố trí text theo chiều dọc như thế nào?

Người đăng: yeu mai em on Thứ Sáu, 25 tháng 3, 2011

Chuyện cười nửa đêm

Đêm khuya, tiếng chuông gọi cửa vang lên, có tiếng hỏi từ trong nhà:

- Ai đấy?

- Mở cửa ra, cảnh sát đây!

- Nhà không có ai cả.

- Ai nói đấy?

- Các anh nghe nhầm đấy thôi.

- Thế sao đèn sáng?

- Tôi tắt đèn ngay bây giờ đây.

4 giờ sáng, Jim nhận đươc cú điện thoại của ông hàng xóm:

- Con chó nhà anh làm sao mà tru tréo sủa suốt đêm như chết cha chết mẹ vậy?

Ngày hôm sau, cũng 4 giờ sáng, Jim phôn lại:

- Con chó nhà tôi không sao cả, vì ban ngày thì nó ngủ.

Ha ha, đọc cười truyện cười một tí nhưng mục tiêu chính vẫn là giúp bạn thực hiện được thủ thuật tạo text nằm dọc như tiêu đề Chuyện cười nửa đêm ở trên. Hiệu ứng này rất đơn giản bằng sự hỗ trợ của CSS là có thể thực hiện được cho blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt CSS sau vào trước dòng ]]></b:skin>.

/* Nếu bố trí bên trái */
.vertext-left{
width:50px; // Chiều rộng cột dọc
margin-right:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:left;
}

Đoạn CSS ở trên dùng cho trường hợp bố trí bên trái, nếu bố trí bên phải thì dùng code như sau.

/* Nếu bố trí bên phải */
.vertext-right{
width:50px;
margin-left:10px;
padding: 0 5px;
border:1px solid #66CCFF;
text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:right;
}

Lưu Template. Nếu bạn muốn màu nền thì thêm tham số background:#mã màu (bạn chọn mã màu để đặt vào).

Bước 2. Thiết lập cấu trúc HTML khi đăng bài viết như sau.

Trường hợp bố trí bên trái:

<div class="vertext-left" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Trường hợp bố trí bên phải:

<div class="vertext-right" >Text&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Lưu ý giữa các chữ phải cách nhau bằng dòng &ensp;

Nếu bạn không áp dụng Bước 1 thì ở Bước 2 cần dùng cấu trúc HTML như sau:

<div style="width:50px;margin-right:10px;padding: 0 5px;border:1px solid #66CCFF;text-align: center;color:#66CCFF;font-size:40px;line-height:45px;float:left;" >Text1&ensp;text2</div>
--- Phần còn lại của bài viết ở đây ---

Hy vọng thủ thuật nhỏ này sẽ hữu ích cho một số blogspot.
More about →
vào lúc 21:06 { Add nhận xét }
Nhãn:

Cách cho hoặc không cho một đoạn CSS hoạt động trên IE

Người đăng: yeu mai em on Thứ Hai, 28 tháng 2, 2011

Trong quá trình thiết kế website hoặc webblog, việc chỉ cho một đoạn CSS nào đó hoạt động trên một hay tất cả các phiên bản Internet Explorer (IE) hoặc ẩn đoạn CSS đó không cho nó hoạt động trên các công cụ trình duyệt khác, đôi khi rất là cần thiết. Bài viết này hướng dẫn cụ thể từng trường hợp mà tác giả nhận thấy rất cần cho các blogger.

1. Trường hợp 1: Nếu bạn muốn ngăn chặn tất cả các phiên bản IE không nhìn thấy một đoạn CSS thì bạn sử dụng code như bên dưới. Trường hợp này xảy ra khi một đoạn thuộc tính CSS nào đó (ví dụ đoạn CSS A) không có tác dụng tốt, tức là nó làm cho một ID hay CLASS liên quan không hiển thị tốt trên các trình duyệt IE mà hiển thị tốt trên trình duyệt khác như Firefox, Chrome…

<!--[if !IE]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

Theo chức năng đoạn code trên thì, các công cụ trình duyệt không phải IE (như Firefox) sẽ bỏ qua nội dung giữa dấu <!-- trên dòng 1 và dấu --> trên dòng 2. Chính dấu --> trên dòng 2 đóng phần chú thích ngay trước đoạn CSS đối với các trình duyệt không phải IE và cho phép các trình duyệt đó nhìn thấy đoạn CSS này. Việc mở lại phần chú thích ngay sau đoạn CSS sẽ ẩn đi phần còn lại của phần chú thích điều kiện đối với các trình duyệt không phải IE.

IE sẽ xử lý tất cả nội dung giữa <!--[if !IE]> trên dòng 1 và <![endif]--> trên dòng 7. Việc đặt dấu chấm than ! trước IE trong phần mở khai báo điều kiện sẽ cho các phiên bản trình duyệt IE biết để bỏ qua nội dung giữa <!--[if !IE]> trên dòng 1 và <![endif]--> trên dòng 7. Nếu lượt bỏ dấu chấm than ! trước IE sẽ cho tất cả các phiên bản IE xử lý nội dung bên trong phần khai báo điều kiện. Khi đó sẽ xảy ra trường hợp 2.

2. Trường hợp 2: Nếu bạn muốn đoạn CSS chỉ hoạt động đối với tất cả các phiên bản IE thì sử dụng cú pháp như sau:

<!--[if IE]>
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<![endif]-->

Trường hợp này hay dùng khi bạn muốn Favicon trên blogspot hiển thị trên IE, bạn sẽ dùng code như thế này.

<!--[if IE]>
<link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<![endif]-->
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>

3. Trường hợp 3: Nếu bạn muốn đoạn CSS không hoạt động trên một phiên bản IE (ví dụ IE6) mà vẫn hoạt động trên tất cả các trình duyệt không phải IE thì sử dụng cú pháp như bên dưới.

<!--[if !IE 6]>
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<![endif]-->

<!--[if !IE]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

Hoặc muốn gọn hơn thì dùng thế này:

<!--[if !IE 6]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

Hy vọng bạn sẽ tìm thấy ít nhiều sự hữu ích từ thủ thuật này. :0)
More about →
vào lúc 07:15 { Add nhận xét }
Nhãn:

Hiệu ứng đàn xếp khung lưới sử dụng CSS kết hợp jQuery

Người đăng: yeu mai em on Chủ Nhật, 7 tháng 11, 2010

Hiệu ứng đàn xếp khung lưới là một kiểu thanh điều hướng đàn xếp cải tiến được xây dựng bằng jQuery.

Nó hoạt động tương tự như các hiệu ứng đàn xếp khác, chỉ một ô được mở ra vào một thời điểm và sẵn sàng hiển thị thông tin chi tiết về các mục bên trong một khung lưới.

Điều quan trọng là cột của ô mở hiện tại mở rộng theo chiều rộng hợp lý. Kỹ thuật này do Chris Coyier tại bang Florida (Mỹ) tạo ra.

Xem Demo.

Nếu bạn thích kỹ thuật này thì thực hiện theo các bước sau đây.

1. Đặt phần code bên dưới vào trước thẻ </head>.
<style type='text/css'>
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(http://css-tricks.com/examples/InfoGrid/images/batman.jpg) center center no-repeat; }
.spiderman { background: url(http://css-tricks.com/examples/InfoGrid/images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(http://css-tricks.com/examples/InfoGrid/images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(http://css-tricks.com/examples/InfoGrid/images/ironman.jpg) center center no-repeat; }
.superman { background: url(http://css-tricks.com/examples/InfoGrid/images/superman.jpg) center center no-repeat; }

dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>
2. Thiết lập cấu trúc HTML như bên dưới.
<div id="page-wrap">
<div class="info-col">
<h2>Tiêu đề lớn 1</h2>
<a class="image superman"></a>
<dl>
<dt>Tiêu đề 1</dt>
<dd>Mô tả chi tiết 1</dd>
<dt>Tiêu đề 2</dt>
<dd>Mô tả chi tiết 2</dd>
<dt>Tiêu đề 3</dt>
<dd>Mô tả chi tiết 3</dd>
<dt>Tiêu đề 4</dt>
<dd>Mô tả chi tiết 4</dd>
<dt>Tiêu đề 5</dt>
<dd>Mô tả chi tiết 5</dd>
<dt>Tiêu đề 6</dt>
<dd>Mô tả chi tiết 6</dd>
</dl>

</div>

<div class="info-col">
<h2>Tiêu đề lớn 2</h2>
<a class="image batman"></a>
<dl>
<dt>Tiêu đề 7</dt>
<dd>Mô tả chi tiết 7</dd>
<dt>Tiêu đề 8</dt>
<dd>Mô tả chi tiết 8</dd>
<dt>Tiêu đề 9</dt>
<dd>Mô tả chi tiết 9</dd>
<dt>Tiêu đề 10</dt>
<dd>Mô tả chi tiết 10</dd>
<dt>Tiêu đề 11</dt>
<dd>Mô tả chi tiết 11</dd>
<dt>Tiêu đề 12</dt>
<dd>Mô tả chi tiết 12</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 3</h2>

<a class="image aquaman"></a>

<dl>
<dt id="starter">Tiêu đề 13</dt>
<dd>Mô tả chi tiết 13</dd>
<dt>Tiêu đề 14</dt>
<dd>Mô tả chi tiết 14</dd>
<dt>Tiêu đề 15</dt>
<dd>Mô tả chi tiết 15</dd>
<dt>Tiêu đề 16</dt>
<dd>Mô tả chi tiết 16</dd>
<dt>Tiêu đề 17</dt>
<dd>Mô tả chi tiết 17</dd>
<dt>Tiêu đề 18</dt>
<dd>Mô tả chi tiết 18</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 4</h2>

<a class="image spiderman"></a>

<dl>
<dt>Tiêu đề 19</dt>
<dd>Mô tả chi tiết 19</dd>
<dt>Tiêu đề 20</dt>
<dd>Mô tả chi tiết 20</dd>
<dt>Tiêu đề 21</dt>
<dd>Mô tả chi tiết 21</dd>
<dt>Tiêu đề 22</dt>
<dd>Mô tả chi tiết 22</dd>
<dt>Tiêu đề 23</dt>
<dd>Mô tả chi tiết 23</dd>
<dt>Tiêu đề 24</dt>
<dd>Mô tả chi tiết 24</dd>
</dl>

</div>
<div class="info-col">
<h2>Tiêu đề lớn 5</h2>

<a class="image ironman"></a>

<dl>
<dt>Tiêu đề 25</dt>
<dd>Mô tả chi tiết 25</dd>
<dt>Tiêu đề 26</dt>
<dd>Mô tả chi tiết 26</dd>
<dt>Tiêu đề 27</dt>
<dd>Mô tả chi tiết 27</dd>
<dt>Tiêu đề 28</dt>
<dd>Mô tả chi tiết 28</dd>
<dt>Tiêu đề 29</dt>
<dd>Mô tả chi tiết 29</dd>
<dt>Tiêu đề 30</dt>
<dd>Tiêu đề 30</dd>
</dl>
</div>
</div>
Điều bạn cần phải làm là đặt tên cho các Tiêu đề lớn, Tiêu đề và Mô tả chi tiết cho các tiêu đề tương ứng.
More about →
vào lúc 22:26 { Add nhận xét }
Nhãn:

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

Người đăng: yeu mai em on Thứ Tư, 29 tháng 7, 2009

[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}


</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>


Kết quả hiển thị:

- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :

top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;

Ta sẽ có kết quả như sau:

- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :

top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, right :

bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, left :

bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;

ta sẽ có kết quả :


Chúc các bạn thành công.
More about →
vào lúc 06:49 { Add nhận xét }
Nhãn: , ,

Kỹ thuật load ảnh trước bằng CSS

Người đăng: yeu mai em on Chủ Nhật, 19 tháng 7, 2009

[FD's BlOg] - Trong code CSS các bạn thường dùng ảnh làm background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong bộ đệm (cache) trên máy ngay từ đầu, mà khi nào sử dụng đến thì nó mới được tải về. Chính vì vậy đôi khi nó sẽ sinh ra độ trễ khi lần đầu tiên các bạn vào blog. Bài viết này mình sẽ hướng dẫn các bạn khắc phục điều này.

Việc này cũng xảy ra ở blog của mình, và vấn đề này bạn Ngân (blogtruyen.com) trước kia đã có hỏi mình, nhưng mình chưa trả lời được, nay mới tìm ra cách giải quyết nó.

Mình sẽ lấy ngay ví dụ trong blog của mình. Các bạn để ý là nút Readmore ở mỗi bài viết của mình, nó được sử dụng 2 ảnh, 1 ảnh là hiển thị ngay từ ban đầu, còn ảnh thứ 2 là khi ta rê chuột nó mới hiển thị (hover). Khi bạn vào blog của mình, lúc đang load dữ liệu của blog, nếu các bạn rê chuột và nút Readmore, thì nó sẽ không hiển thị gì hết, tức là khi rê chuột vào ta có cảm giác ảnh 1 bị biến mất. Thực ra là do ảnh thứ 2 chưa được load, vì thế nó sẽ không hiển thị gì cả khi ta rê chuột vào. Đợi khoảng vài giây sau (không nhất thiết phải load hết blog) thì ta rê chuột vào mới thấy được ảnh thứ 2. Và thời gian này nhanh hay chậm tùy thuộc vào tốc độ đường truyền của bạn.

Bên dưới là ảnh mình họa cho các bạn thấy điều này:
Khi blog load chưa xong:

Khi blog đã load gần xong

Để khắc phục điều đó chúng ta có một thủ thuật nhỏ như sau, đó là cho phép các ảnh này được load trước, khi đó sẽ không xuất độ trễ giữa 2 ảnh 1 và 2 (như ví dụ đưa ở trên).
☼ Để thực hiện các bước như bên dưới :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. và chèn đoạn code CSS bên dưới vào sau dòng <head> hoặc trước dòng </head>

<style type="text/css">
#preLoadImages {
width: 0px;
height: 0px;
background: url(Link ảnh 1.gif);
background: url(Link anh 2.gif);
background: url(Link anh 3.gif);
}
</style>

- Với các link ảnh 1, link ảnh 2, link ảnh 3, ... là các ảnh sẽ được load trước. Và bạn có thể thêm bao nhiêu vào tùy bạn.

4. Tiếp tục xuống dưới, tìm tới thẻ <body> , và chèn đoạn code màu đỏ vào ngay sau nó, như bên dưới:

<body>
<div id="preLoadImages"></div>

Với việc thêm đoạn thẻ <div id="prLoadImages"> trên vào ngay dưới thẻ <body> của blog của bạn. Khi trình duyệt đọc tới thẻ <div> này, nó sẽ load trước toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt. Như thế vấn đề của chúng ta được khắc phục.

5. Save template.

Theo CSSYeah

Chúc các bạn thành công.
More about →
vào lúc 06:07 { Add nhận xét }
Nhãn: , ,

CSS menu liDock - Một dạng menu Dock

Người đăng: yeu mai em on Thứ Năm, 21 tháng 5, 2009

CSS menu liDock
[FD's BlOg] - Lại một bài viết về thủ thuật tạo các thanh menu cho blog, lần này mình giới thiệu một menu nằm ngang, không có sổ dọc. Với hiệu ứng tương tự menu Dock, nhưng ko có dùng ảnh. Thủ thuật sử dụng sử dụng trực tiếp hiệu ứng vào thẻ <li> nên có tên là liDock.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/dock-menu.htm

Hình minh họa:


Do việc sử dụng hiệu ứng lên các thẻ <li> nên các menu đều đồng nhất với nhau, tức là có kích thước bằng nhau. Vì vậy muốn hiển thị cho đẹp, các bạn nên cân chỉnh kích thước của các menu cho phù hợp.

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}

ul#navlist li {
float: left;
width: 60px;
height:24px;
}

ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}

ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}

- Lưu ý :

+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào


5. Save template.
6. Tạo một widget HTML/Javascript, rồi chèn code HTML bên dưới vào.

<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>

</ul>


7. Save widget.

Chúc các bạn thành công.
More about →
vào lúc 19:17 { Add nhận xét }
Nhãn: ,

4+ Hiệu ứng TEXT đơn giản từ CSS

Người đăng: yeu mai em

Element Hover Effect
[FD's BlOg] - Bài viết giới thiệu 4 hiệu ứng khi rê chuột vào các TEXT hoặc các liên kết, tạo cho blog bạn một hiệu ứng đẹp chỉ với các lệnh đơn giản.




Hình minh họa các ví dụ về thủ thuật:



Các bạn vào đây để xem trực tiếp demo và code của các thủ thuật : http://fandung.110mb.com/test/hover-CSS.html

Chúc các bạn thành công.
More about →
vào lúc 10:43 { Add nhận xét }
Nhãn: ,

Menu dọc sổ ngang - Chỉ sử dụng CSS

Người đăng: yeu mai em

CSS Menu Without Javascript
[FD's BlOg] - Thông thường các các menu có hiệu ứng sổ ngang(hoặc dọc) thường luôn luôn đi với 1 file javascript để tạo hiệu ứng. Hôm nay mình sẽ giới thiệu một dạng menu nữa, nhưng không sử dụng javascript.
Xem demo trực tiếp ở đây : http://data.fandung.com/css/cssmenu.html


Hình ảnh minh họa:

Đầu tiên ta sẽ chèn code CSS vào trong code template.
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS vào sau dòng code <head>

<link href='http://data.fandung.com/css/flyout_h.css' media='all' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="http://data.fandung.com/css/flyout_h_ie.css" />
<![endif]-->

- Bạn có thể download file CSS về và sửa theo ý mình rồi up lên host để lấy link. (xài host 110mb.com như của mình cũng được). Sở dĩ phải làm vậy là để thủ thuật có thể chạy trên IE. Mình đã test trường hợp thay các link CSS trên bằng code CSS trực tiếp, nhưng thủ thuật không chạy (ngay cả trên firefox), nếu bạn chèn thẳng code CSS vào mà không có dòng <!--[if lte IE 6]> {code CSS cho IE} <![endif]--> thì thủ thuật vẫn chạy được trên firefox, nhưng IE thì không. Vì thế tốt nhất nên xài link CSS gián tiếp kiểu này thì tốt hơn.

5. Save template.
6. Tạo 1 widget HTML/Javascript rồi dán code HTML bên dưới vào:

<div class="container">
<div class="menu">

<ul>
<li><a class="hide" href="#">Menu1</a>

<!--[if lte IE 6]>
<a href="#">Menu1
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#" >Submenu1.1</a></li>
<li><a href="#" >Submenu1.2</a></li>
<li><a href="#" >Submenu1.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu2</a>

<!--[if lte IE 6]>
<a href="#">Menu2
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu2.1</a></li>
<li><a href="#">SubMenu2.2</a></li>
<li><a href="#">SubMenu2.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu3</a>

<!--[if lte IE 6]>
<a href="#">Menu3
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu3.1</a></li>
<li><a href="#">SubMenu3.2</a></li>
<li><a href="#">SubMenu3.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu4</a>

<!--[if lte IE 6]>
<a href="#">Menu4
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu4.1</a></li>
<li><a href="#">SubMenu4.2</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

</ul>

</div>
</div>

- Thay kí tự "#" bằng liên kết của bạn.

Như vậy đã xong, chúc các bạn thành công.
More about →
vào lúc 08:39 { Add nhận xét }
Nhãn: ,

Bo 2 cạnh bên với CSS dùng hình ảnh

Người đăng: yeu mai em

Side Border Images
[FD's BlOg] - Một thủ thuật để làm đẹp layout cho blog của bạn. Với 1 chút code css là bạn có thể tạo đường viền 2 bên của khung nội dung bằng hình ảnh.



Hình ảnh minh họa kết quả:


Để thực hiện việc này, bạn cần phải có ảnh có tính chất tương tự, tức là có thể lập đi lặp lại được, và cụ thể ở đây là lặp theo chiều dọc (trục y)

Có thể xem hình mẫu này :

☼ragged-right.gif


☼ragged-right.gif


Và đây là code CSS của thủ thuật này. và để áp dụng cho blog, bạn chỉ việc thêm đọan code CSS này vào trước dòng ]]></b:skin> trong code template của blog.
☼Code CSS:

.outerx{
width:50%;
margin-left:25%;
border:1px solid #000;
background:#fff url(ragged-right.gif) repeat-y left top;
}

.innerx{
background:transparent url(ragged-left.gif) repeat-y right top;
width:100%;
padding:1em 0;
}
.outerx p{
padding:0 20px;
margin:0 0 1em 0
}

- Thay link ảnh (code màu xanh) thành link của bạn,hoặc có thể sử dụng hình mẫu.
- Chú ý: dòng lệnh padding:0 20px; đây là lênh để căn trái và phải cho khung nội dung. và độ rộng của việc căn lề này bằng độ rộng của ảnh (có thể lớn hơn, tùy bạn, nhưng không nên để nhỏ hơn)

☼ code HTML:

<div class="outerx">
<div class="innerx">
<p>
{Nội dung của bạn}
</p>
</div>
</div>

Chúc các bạn thành công.
More about →
vào lúc 04:32 { Add nhận xét }
Nhãn: ,

Tạo ngôi hình ngôi sao với CSS Border

Người đăng: yeu mai em

Create a Scalable Star using using CSS border
[FD's BlOg] - Đây là một thủ thuật nâng cao của lệnh border trong CSS, thủ thuật cho phép bạn tạo một hình ngôi sao dễ dang với các lệnh border và kết hợp với việc sử dụng z-index.
Xem demo trực tiếp ở đây: http://fandung.110mb.com/test/star.html

Hình ảnh minh họa

Bây giờ là code của thủ thuật:

1. Code CSS:

/*** Star styles ***/

#star{
width: 15em;
height: 14.27em;
position: relative;
/* Useful for absolute positioned elements */
}

#star span,
#star{
display: block;
}

#top{
/* Create a big triangle */
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center{
/* Add two 'points' to the triangle */
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom{
/* Hide a small portion below the triangle */
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span{
margin-top: -2em;
color: #000;
background-color: transparent;
font-weight: bold;
/* this is customizable for the text */
}

a#star:hover #center span{
/* hovered text color */
color: #fff;
background-color: transparent;
}

/* Hyperlink colors */
a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}



2. Code HTML

<a href="#" id="star">
<span id="top"></span>
<span id="center"><span>Star</span></span>
<span id="bottom"></span>
</a>


Chúc các bạn thành công.
More about →
vào lúc 03:45 { Add nhận xét }
Nhãn:

18 đọan code CSS ngắn - Rất có ích cho việc chỉnh sửa code CSS của template

Người đăng: yeu mai em on Thứ Ba, 12 tháng 5, 2009

18 CSS Short Hands
[FD's BlOg] - Bài viết sẽ giới thiệu cho các bạn 18 lệnh cơ bản của CSS, giúp bạn dễ dàng hơn trong việc thiết kế và chỉnh sửa blog(web) của mình.




1. Lệnh Margin:
- ta sẽ bắt đầu với lệnh căn lề margins.
a. Căn lề cho cả 4 cạnh:

#yourtab {
margin:20px;
}

b. Căn lề dùng lệnh auto:

#yourtab {
margin:20px auto;
}

- với lệnh trên, lề trái và phải sẽ tự động được căn giữa, còn lề trên và dưới sẽ được căn lề là 20px.
c. lệnh Margins với 3 giá trị:

#yourtab {
margin:20px auto 50px;
}

- với lệnh này lề trên căn lề 20px, lề trái & phải sẽ được tự động căn giữa, lề dưới căn lề 50px.

2. Lệnh Padding:
- Các lệnh căn lề với padding:

#yourtab {
padding-top:10px; // căn lề trên
padding-right:20px; // căn lề phải
padding-bottom:30px; // căn lề dưới
padding-left:40px; // căn lề trái
}

- Để dễ dàng hơn ta có thể viết:

#yourtab {
padding:10px 20px 30px 40px;
}

- Như vậy cấu trúc lênh sẽ là : padding : top right bottom left;

☼ Ta thấy 2 lệnh trên đều là căn lề, vậy chúng có gì khác nhau, chúng ta sẽ nói thêm về điều này:

+ margin : khi dùng lệnh này để căn lề thì kích thước của khung nội dung của bạn sẽ được giữ nguyên.
+ padding: với việc căn lề bằng lệnh padding thì kích thước của khung nội dung sẽ bị thay đổi. Lấy ví dụ: khung nội dung của bạn có độ rộng 100px, khi dùng lệnh căn lề trái padding-left:30px; thì khung sẽ bị dịch sang phải 30px, và khi đó độ rộng của khung sẽ được cộng thêm vào là 30px, tức là 130px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.


3. Background
- các thuộc tính cơ bản của lệnh như bên dưới:

#yourtab {
background-color: transparent; // làm trong nền trong suốt
background-image: url('image.jpg'); // ảnh nền
background-repeat: no-repeat; // thuộc tính lặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
}

- ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, ta sẽ có lệnh như bên dưới:

#yourtab {background: transparent url('image.jpg') no-repeat top right scroll;
}


4. Lệnh font:

#yourtab {
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:1.4em;
font-family:Georgia, serif;
}

5. Lệnh cho list (ul)

ul {
list-style-type:decimal-leading-zero;
list-style-position:inside;
list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url('link ảnh')
}

- để đơn giản ta gộp các thuộc tính chung lại, như bên dưới:

ul {
list-style:decimal-leading-zero inside url('image.jpg');
}


6. lệnh Border (tạo đừơng viền - đường bao)

#yourtab {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}

- đơn giản có thể viết

#yourtab {
border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng rgb(64, 150, 238)
}

7. Outline (tương tự lệnh border)
- ví dụ bên dưới là tạo đương viền cho ảnh

img {
outline-width: 5px;
outline-style:solid;
outline-color: #000000;
}


- đơn giản có thể viết

img {
border: outline: 5px solid #000000;
}


8. Lệnh màu :
- có thể sử dụng 1 trong các cách dưới đều được

#yourtab {
color: #FFFFFF;
}
#yourtab {
color: #FFF;
}
#yourtab {
color: #fff;
}
#yourtab {
color: rgb(255, 255, 255);
}


9. dùng dấu "," để gộp chung các class khi có cùng thuộc tính, ví dụ như bên dưới:

h1, h2, h3, h4, h5, h6 {
font-family:Helvetica, Verdana, sans-serif;
}


10. Cross browser transparency
- thiết lập cho từng trình duyệt

#yourtab {
filter:alpha(opacity=50); // trình duyệt IE
-moz-opacity:0.5; // trình duyệt mozilla
-khtml-opacity: 0.5; // trình duyệt Safari
opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.
}


11. First-child selectors
- ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên của footer (nằm trong thẻ <em>)(lệnh này mình không rành lắm)

.footer em:first-child {
color:#ccc;
}


12. First-letter (kí tự đầu tiên)

p:first-letter{
color:#ff0000;
font-size:60px;
}

- ví dụ ta có code sau :

<p>This is an example usage of the first-letter property</p>

- kết quả :



13. First-line
- thiết lập thuộn tính cho dòng đầu tiên

#p:first-line {
color:#ff0000;
font-weight:bold;
}

- ví dụ: ta có code

<p>This is an example usage of the first-line property. This is an example usage of the first-line property.</p>

- kết quả :

This is an example usage of the first-line property. This is an example usage of the first-line property.


14. Độ cao tối thiểu

#your_div {
min-height:200px;
}

- code trên không hỗ trợ cho IE, để hiển thị trên IE, bạn tham khảo code bên dưới:

#your_div{
min-height:200px;
height:auto !important;
height:200px;
}


15. Thuộc tính clip (hiển thị một phần)
- ví dụ ta có code bên dưới:
img {
clip:rect(50px 218px 155px 82px);
}


với code này, ảnh sẽ được clip phía trên 50px, bottom là 218px (tính từ trên xuống), right là 155px (tính từ trái qua), left là 82px (cũng tính từ trái qua). xem ví dụ bên dưới để rõ:

hình gốc:


hình miêu tả việc clip


☼ Bên dưới là 3 lệnh code CSS3 (lưu ý. CSS3 chỉ hỗ trợ trên Firefox, safariand, và Chrome)

16. Bo góc:

.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}

ảnh minh họa:


17. Drop shadow (tạo bóng đổ)

.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}

ảnh minh họa:


18. Resize

.resize{
min-width:200px;
min-height:200px;
max-width:500px;
max-height:400px;
resize:both;
background-color:#ccc;
border:2px solid #666;
overflow:auto;
}

ảnh minh họa:


nguồn : webhostingsearch

Chúc các bạn thành công.
More about →
vào lúc 20:18 { Add nhận xét }
Nhãn: ,