Hiệu ứng này thực tế sử dụng thuộc tính ‘transition’ của CSS3. Do thích thuộc tính này mới và cũng chưa hiểu lắm nên mình làm một tut để coi như vừa viết vừa đọc luôn.
Để cho rành mạch thì mình sẽ giải thích css cho từng phần một.
1. Tạo Khối 3D và chuyển động mềm mại
Mã CSS
Thông thường ta thường để tạo bóng cho một phần tử có độ mở là 3px ta hường viết:
Chuyển động mềm mại Transition
Khi di chuột qua chữ NTUTS.COM bạn thấy chữ NTUTS.COM chuyển đổi rất mượt mà, đó là nhờ vào thuộc tính 'transition' của CSS3.
Chuyển đổi tất cả các thuộc tính được áp dụng cho chữ NTUTS.COM trong khoảng thời gian là 0.12 giây với hiệu ứng chuyển đổi là ease-out.
2. Tạo nhiều lớp shadow với nhiều màu khác nhau.
Với kiểu tạo lớp này nếu muốn bạn có thể làm được một chiếc "bánh 9 tầng mây" bằng CSS
3. Transition + Selector + Transform
[COLOR=#333333][FONT=Verdana]Ngoài ra, ở phần này tớ dùng transform: -webkit-transform: scale(1.1); để tăng tính linh hoạt cho sự chuyển động của các phần tử. Tạo nên một làn sóng mềm mại và liên tục khi di chuột qua.[URL="http://help.dottoro.com/lcebdggm.php"]–webkit-transform[/URL] cũng là một thuộc tính CSS dành cho chuyển động.
Nguồn sưu tầm từ net
Để cho rành mạch thì mình sẽ giải thích css cho từng phần một.
1. Tạo Khối 3D và chuyển động mềm mại
Mã CSS
- Code:
h1 {
color: #FFF;
text-shadow: 1px 1px #FF8040, 2px 2px #FF8040, 3px 3px #FF8040;
font: Bold 52px Sketch_Block;
-webkit-transition: all 0.12s ease-out;/*chrome & safari*/
-moz-transition:all 0.12s ease-out;/*firefox 3.7*/
-o-tramsition:all 0.12s ease-out /*Opera*/
}
h1:hover {
position:relative; top:-3px; left:-3px;/*lệch lên trên về phía bên trái 3px so với chữ NTUTS.COM cũ*/
text-shadow:1px 1px #FF8040, 2px 2px #FF8040, 3px 3px #FF8040, 4px 4px #FF8040, 5px 5px #FF8040, 6px 6px #FF8040 /*đặtt shadow 6 lớp để tạo hiệu ứng nâng ảnh*/
}
Thông thường ta thường để tạo bóng cho một phần tử có độ mở là 3px ta hường viết:
- Code:
text-shadow: 2px 2px 3px #FF8040;
- Code:
- Code:
tex-shadow: 1px 1px 0 #FF8040, 2px 2px 0 #FF8040, 3px 3px 0 #FF8040
Chuyển động mềm mại Transition
Khi di chuột qua chữ NTUTS.COM bạn thấy chữ NTUTS.COM chuyển đổi rất mượt mà, đó là nhờ vào thuộc tính 'transition' của CSS3.
- Code:
-webkit-transition: all 0.12s ease-out;
- Code:
- All: cho phép bạn chuyển đổi toàn bộ thuộc tính được gán cho chữ NTUTS.COM
- 0.12s : khoảng thời gian chuyển đổi. Số này càng lớn thì sự chuyển đổi diễn ra càng chậm.
- Ease-out: hiệu ứng khi chuyển đổi. Hiệu ứng này được trình bày trên biểu đồ thời gian được tính theo phần trăm khoảng của toàn thời gian chuyển đổi, vạch định tốc độ chuyển biến trong từng khoảng thời gian khác nhau của quá trình chuyển đổi. Ở dây do là chuyển động đơn giản nên bạn lấy các giá trị khác như : ease, ease-in, ease-in-out, linear… cũng không ảnh hưởng nhiều.
Chuyển đổi tất cả các thuộc tính được áp dụng cho chữ NTUTS.COM trong khoảng thời gian là 0.12 giây với hiệu ứng chuyển đổi là ease-out.
2. Tạo nhiều lớp shadow với nhiều màu khác nhau.
- Code:
[LEFT][COLOR=#333333][FONT=Verdana]h3 {
padding: 5px 0;
color: #666;
font: 900 35px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000;
-webkit-transition: all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-tramsition:all 0.2s ease-out
}
h3:hover {
color:#fff;
position:relative; top:-3px; left:-3px;
text-shadow: 1px 1px #409FFF, 2px 2px #409FFF, 3px 3px #409FFF, 4px 4px #409FFF, 5px 5px #FF8080, 6px 6px #FF8080, 7px 7px #FF8080, 8px 8px #FF8080, 9px 9px #F1FB42, 10px 10px #F1FB42, 11px 11px #F1FB42, 12px 12px #F1FB42;}
[/FONT][/COLOR][/LEFT]
Với kiểu tạo lớp này nếu muốn bạn có thể làm được một chiếc "bánh 9 tầng mây" bằng CSS
3. Transition + Selector + Transform
- Code:
[LEFT][COLOR=#333333][FONT=Verdana]#we div {
color: #cdcdcd;
text-transform: uppercase;
font: 100 15px Helvetica, Arial, Sans-Serif;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
}
#we div:nth-child(1) { font-size: 18px; letter-spacing: 1px;}
#we div:nth-child(2) { font-size: 14px; letter-spacing: 0.6px}
#we div:nth-child(3) { font-size: 16px; letter-spacing: 0.2px}
#we div:hover {
text-shadow: 3px 3px 3px #000;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: sacle(1.1);
}
[/FONT][/COLOR][/LEFT]
[COLOR=#333333][FONT=Verdana]Ngoài ra, ở phần này tớ dùng transform: -webkit-transform: scale(1.1); để tăng tính linh hoạt cho sự chuyển động của các phần tử. Tạo nên một làn sóng mềm mại và liên tục khi di chuột qua.[URL="http://help.dottoro.com/lcebdggm.php"]–webkit-transform[/URL] cũng là một thuộc tính CSS dành cho chuyển động.
Nguồn sưu tầm từ net