Để 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

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*/
}

Bạn có thể xem lại về thuộc tính transition tại đây

Tạo khối với nhiều lớp shadow

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:

text-shadow: 2px 2px 3px #FF8040;

Nhưng với cách viết trên thì độ mở bóng sẽ ở dạng blure có độ tỏa và bị nhòe dần. Để tạo ra một khối đặc có tính 3D thì ta phải khắc phục điều đó. Ở đây, cách khắc phục là tạo ra 3 lớp shadow có độ tỏa là 0px xếp chồng lên nhau, mỗi lớp lệch nhau 1px:

tex-shadow: 1px 1px 0 #FF8040,  2px 2px 0 #FF8040, 3px 3px 0 #FF8040

Kết quả là ta sẽ được một chữ NUTS.COM khi chưa di chuột qua.

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.

-webkit-transition: all 0.12s ease-out;

Các giá trị:

• 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.

Đọc đoạn mã:

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.

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;}

Phần này là chỉ điều chỉnh về màu sắc của chữ và shadow. Shadow trong hover được chia làm 3 lớp màu. Ở đây, mình lấy cứ 4 lớp shadow thì có chung một màu, bạn nào thích thì có thể trộn nhiều màu hơn và tăng số lớp lên cũng được. (xem dòng 13 ở mã CSS trên)

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

#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);
}

Kết hợp Selector với Transition sẽ cho ra một loạt các phần tử có chung thuộc tính chuyển đổi sẽ chuyển động liền mạch hơn, và đoạn CSS sẽ gọn gàng hơn.

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. –webkit-transform cũng là một thuộc tính CSS dành cho chuyển động.

Viết lại theo CSS Tricks