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ữ …
Thẻ blockquote dùng để trích dẫn nội dung từ nguồn khác. Câu hỏi đầu tiên, nếu bạn không sử dụng blockquote khi trích dẫn thì có sao không? Câu trả lời là nếu bạn làm thế, bạn vẫn có thể giúp người đọc hiểu là bạn lấy tin từ nguồn khác nhưng trình duyệt và các công cụ tìm kiếm không biết là bạn trích dẫn. Câu hỏi số hai, trích dẫn khác copy như thế nào? Trả lời: trích dẫn bao giờ cũng chỉ lấy một đoạn thông tin nhỏ, cùng lắm là vài chục dòng, ngược lại copy …
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 …
Hiệu ứng Zoom vào chi tiết ảnh hay dùng với các trang web bán hàng. Khi đó, chúng ta có hình ảnh sản phẩm ở kích cỡ vừa phải, nhưng rõ ràng người dùng muốn mua thường thích nhìn kỹ càng hơn, lúc đó khi họ di chuột vào bức ảnh, hiệu ứng giống như kính lúp soi vào sẽ xuất hiện, cho phép thấy kích thước lớn. Trường hợp chỉ cần phóng to đơn giản bạn dùng CSS3 để Zoom ảnh là đủ rồi. Tuy nhiên nếu muốn hiệu ứng đẹp hơn, tốt hơn chúng ta cần xài Jquery. Plugin Cloud Zoom …
Với đa số trang web, văn bản là thành phần quan trọng hàng đầu. Việc tác động tới cách trình bày của văn bản thông qua CSS là cách thức phổ biến để tạo ra hiệu ứng thẩm mỹ cũng như ấn tượng với người đọc. Hôm nay Kiến càng sẽ giới thiệu với bạn 8 thuộc tính như thế. Danh sách các thuộc tính văn bản trong CSS mà chúng ta sẽ xem xét trong bài này bao gồm: text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-align Giờ chúng ta sẽ bắt đầu đi vào các thuộc tính cụ …
Làm form bằng HTML và chỉnh sửa lại giao diện cho đẹp với CSS không khó, bạn chỉ cần nhớ mấy cái input type là OK. Vấn đề nằm ở Validate, tức là chuẩn hóa dữ liệu nhập vào và một số yêu cầu khác nữa. HTML5 làm form cũng rất tốt, nhưng có hạn chế là chưa được hỗ trợ rộng rãi và thống nhất giữa các trình duyệt, do vậy chúng ta vẫn phải cậy nhờ khá nhiều vào Javascript. Về sau bạn sẽ biết ngoài việc bắt lỗi dữ liệu tại máy khách thì chúng ta còn …