Tạo button đầy màu sắc bằng CSS3 và RGBA
Một trong những điều mà mình thích thú nhất về CSS3 là việc bổ sung cho phép sử dụng các màu RGBA . Hôm nay chúng ta sẽ tạo ra các button đầy màu sắc mà không cần phải dùng bất kỳ hình ảnh hay kỹ thuật photoshop nào. Các bạn có thể xem demo tại đây. Đầu tiên chúng ta cần tạo ra khung sườn các ...
Tạo hiệu ứng động 3D với CSS3
Tạo hiệu ứng động đối với CSS3, có lẽ đối với nhiều người đã không còn quá xa lạ từ khi nó ra đời. Nhưng CSS3 không chỉ dừng lại ở có thế mà nó còn tạo hiệu ứng 3D cực kỳ đẹp mắt không khác gì mấy so với các phần mềm tạo ảnh động chuyên nghiệp. Nếu bạn nào vẫn chưa tin thì có thể xem demo bên dưới ...
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử. Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội. Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác độ ng ...
CSS Transparency trên toàn bộ các trình duyệt
Chúng ta sẽ áp dụng các thuộc tính sau cho một đối tượng HTML nào đó muốn transparent. đoạn code như sau: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity: 0.5; Đây là một thuộc tính rất quan trọng bởi ...
Nắm vững CSS Box Shadow
Hiệu ứng bóng đổ đã được mình giới thiệu trong các bài viết trước, tuy nhiên, trong bài viết này, mình sẽ hướng dẫn cụ thể hơn về thuộc tính bóng đổ, các bạn thử xem sao nhá. Đầu tiên chúng ta thử tìm hiểu đoạn css sau : .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: ...
Cách viết giản lược trong CSS
Nếu bạn là người thực sự muốn tìm hiểu về CSS, thì bạn không thể không tìm hiểu cách viết giản lược(shorthand) trong CSS. Cách viết này thực sự mang lại những lợi ích và tiện lợi khi bạn sử dụng CSS. Trước khi đi vào phân tích những tiện lợi mà nó mang lại, tôi xin lấy một ví dụ đơn giản như sau. ...
Từng bước tạo nút bấm mạng xã hội bằng CSS3
CSS3 giúp các nhà thiết kế web có khả năng tạo ra các nút bấm (buttons) vô cùng đẹp mắt, hôm nay mình sẽ chia sẻ với các bạn 2 thủ thuật trang trí cho các button trong web của bạn trở nên đẹp rạng ngời mà không cần phải dùng đến photoshop. 1 Inset Buttons | xem demo Trước tiên chúng ...
Tạo form tìm kiếm đẹp mắt bằng CSS3
Thanh tìm kiếm là một phần không thể thiếu cho các website hay blog, nó giúp người đọc dễ dàng tìm kiếm những thông tin cần đọc nhanh nhất, vì thế tạo một website với thanh tìm kiếm đẹp mắt cũng là một phần giúp bạn tạo được thiện cảm nơi người dùng và giữ được lượng khách viếng thăm trang của bạn. ...
14 cách giúp bạn tối ưu và giảm dung lượng file css
Tối ưu hóa và giảm dung lượng file css là một kỹ thuật mà các bạn chuyên nghành thiết kế và phát triển web cần nên biết , vì nó làm website của bạn chạy nhanh hơn, và đó là điều kiện cần để giữ 1 lượng độc giả đến với bạn, vì sẽ không ai muốn đọc nội dung ở một trang mà khi load nội dung lại ...
Thiết kế table đẹp mắt bằng CSS3
Bài viết này sẽ giúp bạn thiết kế table đẹp mắt mà không dùng bất kỳ một file hình và cũng không cần phải có kiến thức về photoshop, chỉ với vài đoạn css3 đơn giản. Bạn có thể xem kết quả sau khi thực hiện xong như bên dưới: Đầu tiên chúng ta tạo HTML để làm ví dụ minh họa : ...
14 website tự động sản sinh css hữu ích nhất
Nếu bạn muốn tự tay thiết kế cho mình một trang web nhưng lại không có kiến thức gì về css . Thì bài viết sau sẽ là cực kỳ hữu ích dành cho bạn, vì đây là những trang web tự động sản sinh ra css khi bạn thao tác trên các công cụ, rất phù hợp cho những ai mới bắt đầu làm quen với css và cả ...
Tạo hiệu ứng Image Hover cực đỉnh bằng CSS3
Hiệu ứng hover là hiệu ứng mà khi ta trỏ chuột tới đối tượng thì đối tượng đó sẽ thay đổi, hôm nay chúng ta sẽ tạo ra một hiệu ứng như thế cho những tấm ảnh trong website của mình với hiệu ứng hover hết sức đỉnh. Các bạn có thể xem demo tại đây. Những bước cần làm : – Tạo file index.html ...
Làm đồ trang trí cây giáng sinh bằng CSS3
Trong bài viết này chúng ta sẽ thấy rõ được sức mạnh của CSS3 trong việc vẽ các hình phức tạp. Chỉ việc sử dụng HTML và CSS3 mà không cần dùng bất kì hình ảnh nào. Và chúng ta tạo ra các đồ vật trang trí như sau : Đầu tiên chúng ta sẽ tạo các phần tử HTML, các bạn copy đoạn html sau : ...
7 thuộc tính cơ bản trong CSS3 mà bạn cần phải biết
Sau 13 năm là một phần không thể thiếu trong việc thiết kế web, Cascading Style Sheets (CSS) đã được phát triển thành một công cụ vô cùng mạnh mẽ, cho phép bạn phát triển những trang web với nhiều hiệu ứng và trông đẹp mắt hơn rất nhiều. Bài viết này sẽ chia sẻ với các bạn những kỹ thuật cơ bản ...
Từng bước tạo menu đa màu sắc bằng CSS3
Menu là một phần không thể thiếu cho một website, hôm nay mình xin chia sẻ cho các bạn cách tạo một menu với nhiều màu sắc khác nhau do bạn tự tay chọn trên website của mình chỉ bằng CSS3. Các bạn có thể xem demo bài viết tại đây. Như thường lệ, chúng ta sẽ tạo ra file HTML đầu tiên, nơi ...
CSS3 Dropdown Menu
Hôm nay mình vừa học thêm được một số tính năng trong CSS3 từ việc tạo một Menu cho trang web của mình, và mình nghĩ sẽ thật là ích kỷ nếu không chia sẻ những tính năng tuyệt vời về CSS3 này cho các bạn. Các bạn có thể xem demo để thấy những menu được tạo rất đẹp mắt này. Chúng ta chỉ ...
Thiết kế form đăng nhập bằng CSS3
Để tìm hiểu kỹ hơn về CSS3 chúng ta sẽ làm một ứng dụng đơn giản nhỏ, đó là từng bước thiết kế trang đăng nhập cho website hay blog của bạn. Các bạn có thể xem demo tại đây. Trước tiên chúng ta sẽ tạo cấu trúc HTML cho form đăng nhập này : <div> <h1>FORM ĐĂNG ...
Tạo hiệu ứng loading bằng CSS3
Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo ra hiệu ứng loading trong trang mà không sử dụng bất kỳ hình động nào. Mình nghĩ nó sẽ thật sự gây ấn tượng cho bạn trong việc giảm số lượng hình ảnh trong các trang web hoặc blog của bạn. Để có thêm nhiều sự lựa chọn,mình sẽ giới thiệu với ...
Làm thẻ div có thanh cuộn (scrollbar) giống iFrame
Bài viết dưới đây sẽ giới thiệu với các bạn cách làm cho thẻ <div> có thanh cuộn giống khi ta sử dụng iFrame để load một trang khác. Trước hết chúng ta có ví dụ về đoạn mã HTML như sau: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ ...
14 thủ thuật css cần phải đọc
CSS (Cascading Style Sheet) không khó để học, cái khó là làm sao để đảm bảo css chạy tốt trên các trình duyệt mà không sinh ra lỗi. Mặc dù CSS3 đã ra đời, tuy nhiên để tất cả các trình duyệt đều hỗ trợ thì cũng cần có một thời gian nữa. Sau đây là danh sách các thủ thuật về css mà mình tin sẽ ...
