Thiết kế web HTML5: các hiệu ứng CSS3 thú vị | SEOWEB24H

Thiết kế web HTML5: các hiệu ứng CSS3 thú vị | SEOWEB24H
Hiện nay, HTML5 đang dần trở nên phổ biến nhờ những hiệu ứng rất thú vị và đặc biệt. Ngoài những hiệu ứng bo góc, gadient màu, bóng đổ … Css3 còn một số hiệu ứng khác rất dễ thương, có thể sử dụng để hover chuột. Bài viết này sẽ chỉ dẫn cách thực hiện 3 loại hiệu ứng từ CSS3.

Thiết kế web HTML5 - Hiệu ứng đối tượng xoay – rotate

Trước đây, để có hiệu ứng này thì chỉ còn cách cắt chữ thành hình hoặc nhúng java vào, còn giờ thì thật đơn giản.

Code:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-o-transform: rotate(30deg) ;

*30deg = 30 độ.

Seoweb24h.com

Thiết kế web HTML5 - Hiệu ứng méo – skew:

Hiệu ứng bẻ đoạn nội dung hình chữ nhật thành hình bình hành bằng việc bẻ nghiêng chiều ngang hoặc chiều dọc hoặc cả 2.

Code:

-moz-transform: skew(45deg);

-webkit-transform: skew(45deg);

-o-transform: skew(45deg);

Seoweb24h.com

 -moz-transform: skew(-45deg,10deg);

-webkit-transform: skew(-45deg,10deg);

-o-transform: skew(-45deg,10deg);

Seoweb24h.com

*Chỉ số bên trái: skew chiều ngang.

* Chỉ số bên phải: skew chiều dọc.

* Nếu chỉ viết 1 chỉ số, trình duyệt sẽ tự hiểu skew theo chiều ngang.

Thiết kế web HTML5 - Hiệu ứng phóng to hay thu nhỏ lên x (y) lần – scale:

Hiệu ứng cho phép đối tượng phóng to lên x (y) lần so với kích thước chuẩn mà không ảnh hưởng đến các đối tượng khác.

Code:

-webkit-transform: scale(x,y);

-moz-transform: scale(x,y);

-o-transform: scale(x,y);

*x: scale chiều ngang.

* y: scale chiều dọc.

* Nếu chỉ viết 1 chỉ số, trình duyệt sẽ tự hiểu scale cả 2 chiều.

x(hoặc y)=1: đối tượng mới bằng đối tượng cũ

Seoweb24h.com

x(hoặc y)>1: phóng to đối tượng mới

Seoweb24h.com

0<x(hoặc y)<1: thu nhỏ đối tượng mới

Seoweb24h.com

x(hoặc y)<0: làm lớn nhỏ và đảo chiều đối tượng

Seoweb24h.com

 Các lưu ý:

• Để sử dụng, các bạn hãy bỏ đoạn code trên vào css, hoặc cho trực tiếp vào thuộc tính style của tag chưa nội dung.
• Các hiệu ứng trên chỉ sử dụng được bằng các trình duyệt có hỗ trợ html5 - css3 (IE9, chrome, Firefox, Opera ...)
• Khi thay đổi các chỉ số thì hãy thay đổi cả 3 chỉ số của chuẩn web: –webkit-, -moz- và –o-.
• Các chỉ số trên đều có thể là số âm hoặc dương

Các hiệu ứng của CSS3 rất dễ thực hiện nhưng làm cho website bắt mắt và chuyên nghiệp hơn. Các nhà thiết kế web HTML5 cần quan tâm để tối ưu cho website, tăng tốc độ duyệt web.