Home » Archives for 05/21/09
CSS menu liDock - Một dạng menu Dock
19:17 |
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.htmHì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.
4+ Hiệu ứng TEXT đơn giản từ CSS
10:43 |
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.
Menu dọc sổ ngang - Chỉ sử dụng CSS
08:39 |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.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.
Bo 2 cạnh bên với CSS dùng hình ảnh
04:32 |
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>
Tạo ngôi hình ngôi sao với CSS Border
03:45 |
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.htmlHì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.
Top Hot
