Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin). Sở dĩ bình thường bạn chẳng thấy cái hộp nào là bởi theo mặc định các giá trị trên được quy định là 0. Chỉ khi bạn gán một giá trị cụ thể cho nó, các đối tượng này mới hiện nguyên dạng. Giả dụ như dòng chữ này, bạn sẽ không thấy gì cả. Nhưng dòng này nó có đường viền, có đệm Và dưới đây là hình ảnh mô phỏng cho mô hình hộp trong …
Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web có nhiều điều hướng – cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích. Hôm nay tôi và bạn sẽ cùng thực hành tạo menu xổ, tiếng Anh là dropdown menu, chúng ta sẽ code hoàn toàn bằng CSS chứ không cần Javascript, ngoài ra cũng chú ý để viết code sao cho đơn giản nhất có thể được mà vẫn tạo ra hiệu quả tương tự. #1. Tạo mã HTML cho menu …
Thuộc tính display trong css quy định cách hiển thị của một thẻ trong tương quan với các thẻ, đối tượng khác xung quanh, có 3 cách hiển thị chính: inline: nghĩa là hiển thị trên cùng một dòng, chúng ta có thể kể tên các thẻ trong HTML là inline, bao gồm: thẻ b, thẻ i, thẻ a, thẻ span… block: hiển thị theo khối tách riêng nhau. Một số thẻ HTML là block như thẻ h1 đến h6, thẻ p, thẻ div… none: không hiển thị thẻ đó. Đoạn code của nó trong HTML mặc dù vẫn còn …
Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không thành thạo position là thiệt thòi lớn, vì ít nhất menu xổ, popup xuất hiện khi hover, hoặc menu cố định đều cần đến position. Chúng ta bắt đầu với nghĩa tiếng Việt của position, nó có nghĩa là vị trí. Dưới đây là các giá trị của nó… Định vị static Đây là giá trị mặc định của các thẻ, theo đó chúng sẽ được sắp xếp theo thứ tự …
Thuộc tính float thường được dùng để điều chỉnh vị trí của ảnh trôi sang trái hoặc phải, khi đó text sẽ bao quanh ảnh. Ngoài ảnh thì float cũng hay được dùng trong bố cục để điều chỉnh layout của trang, ví dụ các cột bên phải được để là float: right để nó trôi về phía phải. Giờ chúng ta sẽ đi vào các ví dụ cụ thể, đầu tiên khi không sử dụng float cho ảnh thì kết quả sẽ như thế này: Bức ảnh ở trên không được float, bạn có thể thấy ảnh và chữ …
Thuộc tính overflow dùng để quy định cách thức hiển thị khi kích thước nội dung lớn hơn kích thước box chứa nội dung đó. Có 4 giá trị hay dùng của overflow. overflow: visible Đây là giá trị mặc định, theo đó nếu nội dung lớn hơn box thì nó sẽ tràn ra ngoài box, dĩ nhiên trông nó rất xấu, và trong thiết kế, đa số trường hợp ta không được phép để như vậy. Dưới đây là minh họa cụ thể khi nội dung tràn ra ngoài: Nội dung này bị tràn ra ngoài do kích thước …
Opacity là thuộc tính mới trong CSS và thuộc phiên bản mới nhất của CSS3, nó quy định độ trong suốt của hình ảnh hoặc nền màu nào đó. Nếu từng biết Photoshop bạn chắc không lạ opacity. Bằng CSS3 chúng ta không cần dùng phần mềm chỉnh sửa ảnh nào nữa, các thành phần sẽ được điều chỉnh độ trong suốt tùy ý. Cùng Kiến càng thử ngay và luôn nhé! Hãy nhìn vào bức ảnh trên, thực tế nó nét hơn nhưng được làm trong suốt chỉ còn 60% so với bức gốc, dưới đây chính là bức …
Đổ bóng cho chữ không còn là độc quyền của Photoshop nữa, giờ chúng ta có thể làm điều đó mà chỉ cần dùng code. CSS3 thực sự là làn gió mát, nó đem lại các hiệu ứng không hề mới nhưng được thực hiện theo cách đơn giản và dễ dàng hơn nhiều. Hãy nhìn dòng chữ dưới đây: Tôi Đổ Bóng Cho Đoạn Văn Bản Này Bạn có thể thấy nó được đổ bóng với màu xanh. Code mẫu: Giải thích code: Giá trị đầu tiên 4px là khoảng cách dịch từ bên trái sang theo phương nằm …
Sử dụng CSS3 bạn sẽ thấy bo tròn ảnh rất dễ dàng, không cần phải dùng Photoshop nữa, chỉ với 3 dòng code bức ảnh đã được bo và chạy tốt trên tất cả các trình duyệt phổ biến, cụ thể thì với IE9+, Firefox 4+, Chrome, Safari 5+ và Opera là OK. Code mẫu như sau, giả sử bạn có bức ảnh với mã như thế này trong HTML: Muốn bo tròn tuyệt đối, bạn sẽ CSS ảnh đó như này: Các tiền tố -moz và -webkit là để tương thích với các trình duyệt khác nhau. Chú ý là …
Zoom ảnh có nhiều cách, trong đó chủ yếu dựa vào CSS3 hoặc Jquery và đôi khi là cả hai. Nếu xài Jquery bạn có các hiệu ứng zoom rất đẹp (thí dụ như Cloud Zoom), xài CSS3 thì hiệu ứng tuy không bằng nhưng bù lại code rất đơn giản – miễn phí và không đòi hỏi tải thư viện khá nặng có thể làm chậm đi tốc độ lướt web. Chúng ta sẽ áp dụng 2 thuộc tính của CSS3: transform: scale(x,y) – theo đó x, y là các giá trị ta muốn phóng lên theo trục x …