Từng bước tạo hiệu ứng Tabs với CSS3
Content tabs rất đỗi quen thuộc và chúng ta sẽ dễ dàng bắt gặp nó mỗi khi duyệt web trên internet. Có rất nhiều cách để tạo ra dạng tab cho nội dung web. Trong bài viết trước mình đã giới thiệu cho các bạn Tạo tab content với plugin jQuery Tabulous . Hôm nay chúng ta sẽ không sử dụng bất kì đoạn ...
Từng bước tạo banner động bằng CSS3 và jQuery
Nếu các bạn đã từng xem qua bài viết Tạo web banner động với CSS3 , trong bài viết đó , chúng ta đã làm quen với tính năng animation có trong CSS3. Hôm nay mình sẽ giới thiệu thêm cho các bạn cách tạo banner động với thuộc tính transform và transition có trong CSS3, cùng với sự giúp đỡ nho ...
Từng bước tạo Responsive Menu với CSS và jQuery
Một trong những phần cần phải làm cho một trang web có khả năng Responsive chính là phần Menu. Với một menu có khả năng hiển thị tốt trên nhiều kích thước màn hình khác nhau, sẽ giúp người dùng dễ dàng lựa chọn đến những trang mà họ muốn khi dùng các thiết bị duyệt web khác nhau. Hiện nay có rất ...
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 ...
