RSSCSS

5 Phương thức để thay thế hình ảnh bằng CSS3

Mỗi nhà thiết kế và phát triển web cần phải biết rằng tất cả các đặc tính tuyệt vời mới của CSS 3 làm cho việc thiết kế web được đơn giản hơn bao giờ hết.Ví dụ, rất nhiều nhà phát triển web vẫn còn phụ thuộc rất nhiều vào hình ảnh để thực hiện web. Bởi vì việc thực hiện nhánh chóng, đơn giản và theo thói quen của chính họ. Phương thức này làm cho website có rất rất nhiều hình ảnh trong đó, làm nặng hơn w

Dan web - CSS3

Mỗi nhà thiết kế và phát triển web cần phải biết rằng tất cả các đặc tính tuyệt vời mới của CSS 3 làm cho việc thiết kế web được đơn giản hơn bao giờ hết.

Ví dụ, rất nhiều nhà phát triển web vẫn còn phụ thuộc rất nhiều vào hình ảnh để thực hiện web. Bởi vì việc thực hiện nhánh chóng, đơn giản và theo thói quen của chính họ. Phương thức này làm cho website có rất rất nhiều hình ảnh trong đó, làm nặng hơn website của họ.

Nhưng hiện nay, việc chuyển sang CSS3 để hiển thị thay hình ảnh là một phương thức cần được áp dụng. Ví dụ: giảm thời gian tải trang, khả năng mở rộng tốt hơn, và linh hoạt hơn trong việc điều chỉnh kích thước và các thuộc tính mà không cần phải mở một chương trình chỉnh sửa hình ảnh.

Trình duyệt tương thích với CSS3 được liên tục cải thiện, và càng có nhiều người cũng bắt đầu chấp nhận rằng nếu người dùng có trình duyệt cũ, họ nên thay đổi trình duyệt mới hơn. 

1. Buttons

Buttons có lẽ là phổ biến nhất của tất cả các phần của trang web, và họ thường bao gồm một hình chữ nhật, với thuộc tính phổ biến là bo góc tròn và có tô màu chuyển sắc.

Dưới đây là một ví dụ về làm thế nào chúng ta có thể sử dụng CSS3 để tạo ra một nút bấm đơn giản:

image002

background-image:linear-gradient(90deg,rgb(0,163,217) 0%,rgb(63,187,240) 100%);  width:250px;  height:60px;  border-radius:9px;  box-shadow:inset 0px 1px 4px rgba(11,110,166,0.65);

2. Badges (icon tròn nổi bật)

An element that is very rarely created using CSS is the badge. Badges are usually used to attract your visitors attention to some sort of offer or deal, and they became very popular during the dreaded ‘Web 2.0’ phase. If used tastefully though, the badge can be a useful element to have on your page, and can be quite easily without the use of images.

Một yếu tố rất hiếm khi tạo ra bằng cách sử dụng CSS là các icon nổi bật (như hình), thường được sử dụng để thu hút sự chú ý của khách truy cập vào một số sản phẩm, nội dung mới. Nếu sử dụng linh hoạt, các icon này có thể là một yếu tố hữu ích cho web, và có thể được khá dễ dàng mà không cần sử dụng hình ảnh

image003
Code của icon:

background-image:linear-gradient(90deg,rgb(84,169,13) 0%,rgb(179,235,102) 100%); width:125px; height:125px; border-color:rgb(64,143,0); border-width:2px; border-radius:62px; border-style:solid; box-shadow:0px 1px 10px rgba(0,0,0,0.25) ,inset 0px 0px 4px rgba(223,255,191,0.65);

Code định dạng font chữ:

font-family:"Helvetica Neue"; font-size:32px; font-weight:bold; color: #ffffff; text-align:center; text-shadow:0px -1px 1px rgb(64,143,0);

3. Content Boxes (hộp nội dung)

Content boxes có thể được tạo ra dễ dàng bởi css3

image004

background-image:linear-gradient(90deg,rgb(227,227,227) 0%,rgb(252,252,252) 100%); width:280px; height:150px; border-radius:5px; box-shadow:0px 1px 2px rgba(0,0,0,0.5) ,inset 0px 1px 1px rgb(255,255,255);

4. Form

Cấu trúc Form được tạo ra rất đơn giản khi sử dụng css3.

image005
Code của trạng thái mặc định:

background-color: #ffffff; border-color:rgb(182,182,182); border-width:1px; border-style:solid; box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);


Code trạng thái active:

background-color: #ffffff; border-color:rgb(38,147,255); border-width:1px; border-style:solid; box-shadow:0px 0px 5px 0px rgba(77,210,255,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 4px 0px rgba(0,0,0,0.4);

5. Loading Bars

Sử dụng CSS3 sẽ tạo ra các thanh tiến trình linh hoạt hơn nhiều hơn so với các hình ảnh, và việc cập nhật các tiến độ là một đơn giản bằng cách thay đổi các thuộc tính chiều rộng.image006

Code của khung :

background-image:linear-gradient(90deg,rgb(255,255,255) 0%,rgb(231,231,231) 50%,rgb(255,255,255) 50%,rgb(255,255,255) 99%,rgb(255,255,255) 100%); width:500px; height:15px; box-shadow:0px 1px 3px rgba(0,0,0,0.4);

Và code của thanh tiến trình:

background-image:linear-gradient(-90deg,rgb(Infinity,Infinity,Infinity) 0%,rgb(157,184,207) 50%,rgb(109,134,160) 50%,rgb(-Infinity,-Infinity,-Infinity) 100%); width:370px; height:15px; box-shadow:inset 0px 0px 2px rgb(46,50,61);

Đây chỉ là một vài ví dụ về những gì có thể đạt được với CSS3. Khả năng ứng dụng CSS3 trên web là bất tận. Vì vậy, tại sao không thử một số kỹ thuật hoặc tạo của riêng bạn và sử dụng chúng trong dự án tiếp theo của bạn. Nó sẽ cắt giảm thời gian tải trang, và làm cho thiết kế của bạn linh hoạt hơn nhiều

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu