Giới thiệu thuộc tính transform - transition trong CSS3
Bài viết này sẽ giới thiệu về 2 bộ thuộc tính rất tuyệt vời của CSS3 là transform và transition đồng thời là một ví dụ gallery nhỏ với sự kết hợp của 2 bộ thuộc tính này.
Transform
Đây là thuộc tính với một số giá trị cung cấp một số chức...
Cách sử dụng CSS Gradients cho IE9
Trong bài trước mình có giới thiệu sử dụng CSS gradient để tạo chuyển sắc thay vì dùng Photoshop và nó làm việc với hầu hết các trình duyệt, đáng tiếc rằng hiện tại nó không được hỗ trợ trên IE9. Trong bài nay mình sẽ giới thiệu việc sử dụng SVG để tạo ảnh...
Sử dụng CSS để chuyển sắc gradient
Trước kia có lẽ mọi thứ màu nền bạn đều cắt từ PS, nhưng trong thiết kế web hiện đại việc tối ưu thiết kế là quan trọng những gì có thể không cần dùng tới hình ảnh thì bạn nên làm, điều này không những làm web của bạn nhẹ, giảm được băng thông mà code của bạn...
Cách viết CSS filter và CSS hacks cho các phiên bản của trình duyệt IE6 và IE7
Với những ai mới làm quen với việc thiết kế website thì việc viết CSS để tương thích không những trên các hãng trình duyệt web khác nhau mà còn phải tương thích trên nhiều phiên bản của hãng đó là một việc khá đau...
Tìm hiểu cách thức làm việc của biểu thức thuộc tính trong CSS
Internet Explorer 5 của Windows đã giới thiệu biểu thức điều kiện trong CSS, một phần mở rộng cho phép chúng ta sử dụng kịch bản Javascript của Microsoft để gán một giá trị động tới giá trị thuộc tính của CSS. Giá trị này có thể...
Lọc trình duyệt IE bằng cách sử dụng bình luận điều kiện
Bình luận điều kiện là một nguồn sở hữu của trình duyệt Internet Explorer cung cấp cơ chế loại các phiên bản trình duyệt đặc biệt. Phần mở rộng này được giới thiệu từ phiên bản IE5. Đã từ rất lâu rồi mình không còn thấy người dùng sử dụng...
Sử dụng white-space để xử lý khoảng trắng dòng trong CSS
Có khi nào bạn tự hỏi tại sao khi bạn gõ một mớ khoảng trắng bằng cách nhấn phím space liên tiếp cho đoạn văn mà bạn soạn ở chế độ html thì khi hiển thị nó cũng chỉ hiển thị là một khoảng trắng, thậm chí khoảng trắng bạn cố tình gõ ở đầu...
Tìm hiểu phần tử Pseudo-elements trong CSS
Pseudo-elements được hiểu như phần tử ảo không thực sự tồn tại rõ ràng trong cây hồ sơ. Pseudo-elements có thể động. Trong CSS1 và CSS2 pseudo-elementss bắt đầu với dấu hai chấm ( : ), trong CSS3 thì có thêm hai dấu hai chấm ( :: ).
:first-letter
Bạn...
Hướng dẫn tạo layout giao diện ba cột cho website
Bài viết này mình sẽ bắt đầu hướng dẫn các bạn layout một giao diện hoàn chỉnh. Ở bài này mình sẽ hướng dẫn layout một giao diện ba cột đơn giản bằng HTML và CSS.
Dưới đây hình ảnh giao diện ba cột sau khi chúng ta tiến hành xong việc layout...
Hướng dẫn tạo menu dọc đơn giản cho website
Trong thiết kế web có hai dạng menu cơ bản là menu ngang và menu dọc. Ở bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML, tiếp bài viết hôm nay mình sẽ hướng dẫn các bạn xây dựng và hoàn thiện dạng menu thứ hai là menu dọc...
Hướng dẫn tạo menu ngang đơn giản cho website
Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn.
Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau...
Sự khác nhau giữa ID và Class trong CSS
Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử dụng chúng một cách hợp lý thì layout sẽ đạt đến trình độ cao và chuyên nghiệp...
Tổng hợp một số lệnh thường gặp trong CSS
Bài viết này sẽ tổng hợp đến các bạn một số lệnh căn bản và thường hay gặp nhất trong CSS và để layout hoàn chỉnh một trang web thì không thể thiếu những lệnh này.
1. Lệnh margin:
Lệnh margin nói một cách để các bạn dễ hiểu và hình dung là nó giúp...
Tìm hiểu cú pháp trong CSS
Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương
h3 {color: blue;}
Do vậy nếu bạn có code HTML như sau
<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>
Về cơ bản cú pháp của CSS bao gồm 2 phần...
Tìm hiểu độ lớn thực sự của Box trong CSS
Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả...
Tìm hiểu kỹ thuật Clear và Float
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ...
Tìm hiểu Position Property trong CSS
Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static...
Tìm hiểu khái niệm Contextual Position
Contextual Positioning là một khái niệm hết sức quan trọng mà bạn cần nắm vững nếu bạn muốn sử dụng CSS để thiết kế giao diện thay cho dùng bảng HTML. Nói nôm na thì Contextual Positioning có nghĩa là khi bạn định vị một thành phần bất kỳ sử dụng 4 giá trị...
Tìm hiểu và cách sử dụng Pseudo Class
Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết. Pseudo Class sẽ tạo ra thay đổi...
Trình bày code CSS hợp lý
Trong bài này chúng ta sẽ không bàn đến những tính năng thông thường của CSS mà trong bài này chúng ta sẽ xem xét đến những cách trình bày code CSS. Có rất nhiều cách bạn có thể chọn để trình bày trong CSS, nhưng chọn ra cách nào phù hợp với mình và luôn sử dụng nó là...