Chuyển đến nội dung chính

Bài đăng

Đang hiển thị bài đăng từ 2012

Tạo nền chuyển sắc cho web với CSS3 mà không dùng hình

Để tạo nền chuyển sắc cho web bạn có 2 cách thực hiện: Cách 1: Theo phương pháp cổ điển thì các bạn sẽ sử dụng hình vẽ từ photoshop kết hợp với CSS, cách này tuy mất thời gian nhưng hay ở chổ xem được trên mọi trình duyệt. Cách 2: Dùng code CSS3, cách này đở mất thời gian (Copy code > Paste là xong) web duyệt nhanh hơn, tuy nhiên chỉ chạy tốt trên các trình duyệt mới, các trình duyệt cũ bó tay. Với các bạn làm web tôi tin chắc bạn đã biết cách 1 vì vậy hôm nay tôi giới thiệu với các bạn cách tạo nền chuyển sắc cho web mà không cần dùng hình (Cách 2), cách này giúp web của bạn chạy nhanh hơn, làm rất đơn giản (Copy code > paste). Tuy nhiên nó không hỗ trợ các trình duyệt cũ đặc biệt là IE phải từ Version 10.0+, Firefox, Opera, Chrome thì OK. Nào ta bắt đầu nha: Bước 1: Tạo file *.html mới bằng bất cứ phần mềm soạn thảo web nào bạn muốn, tôi dùng Dreamweaver CS5. Ở phần code CSS bạn copy > Paste đoạn code sau vào thẻ <style> … </style> Phần nội dung web bạn tự lo nha...

Bo góc hình trên web với CSS3

Trong thiết kế web, đặc biệt là các trang bán hàng việc trình bày sản phẩm ấn tượng sẽ thu hút khách hàng chọn mua sản phẩm. Các bạn có thể làm nổi bật sản phẩm bằng nhiều cách khác nhau trong đó việc trình bày hình ảnh có bo góc rất hay được chọn lựa, nếu bạn thêm hiệu ứng bóng đổ thì càng ấn tượng hơn. Có 2 cách để bo góc cho ảnh trên web: Cách 1: Sử dụng photoshop để thiết kế hình, cách này hay ở chổ phù hợp cho mọi trình duyệt vì thế được sử dụng phổ biến tính đến thời điểm tôi viết bài viết này (tháng 06/2012). Tuy nhiên cách này sẽ làm mất nhiều thời gian của bạn đấy. Cách 2: Sử dụng hoàn toàn bằng code CSS3, với cách này sẽ tiết kiệm thời gian cho các bạn hơn. Tuy nhiện nó chỉ thể hiện trên các trình duyệt mới (IE 10.0, firefox, Chrome,…), đều này bạn cũng đừng quá bận tâm vì các trình duyệt đang cập nhật liên tục và hoàn toàn miễn phí. Yên tâm sử dụng nha bạn. Trong bài viết này tôi sẽ minh họa với các bạn cách trình bày sản phẩm cho trang web bán hàng (bán hoa tươi) với hình...

Cơ bản Html5 và Css3

Khái niệm Html 5 và CSS3 là version mới được nâng cấp từ html và Css với nhiều tính năng mới và dĩ nhiên nó là công nghệ của tương lai. Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web - đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển Web. TML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight. Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứng hardware-accelerated Flash 10.1 - đang trong phiên bản beta – có thể giúp giải quyết vấn đề này). Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó. Một điều quan trọng cần lưu ý về HTML5 video là nó vẫn còn ...

Phân loại CSS

Có 3 loại CSS CSS Tag CSS Class Css Advance  a. Css Tag: > Quy định thuộc tính cho các thẻ HTML thay cho thuộc tính mặc định Ví dụ: Quy định văn bản và màu nền cho thẻ body (Toàn tài liệu) body {  background-color:#FFFF99;  color:#3333CC; } Để quy định các thẻ h1 và h3 có màu xanh lá thay cho màu mặc định là màu đen thì bạn sử dụng code css như sau: h1, h3 {  color:#00CC33; }  Hoặc bạn muốn quy định mọi hình ảnh đều canh trái img { float:left;} b. Css Class  > Quy định thuộc tính cho các đối tượng có gán tên class="ten" Ví dụ: bạn có code html như sau <h2 class="tieude">Tiêu đề</h2> <p class="tieude">Nội  dung</p> Thì Code Css quy định  cho 2 đối tượng gán class="tieude" là: .tieude {  font-size:18px;  color:#F00; } /* Quy định canh phải và kích thước cho đối tượng có class="hinh"*/ .hinh {  float:right;  width:200px;  height:200px; } c. Css Advance > Là sự kết hợp giữa class + tag để quy đ...