Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows
Hiệu ứng bóng đổ là một trong những tính năng hay mà CSS3 mang lại cho chúng ta, hôm nay mình sẽ chia sẻ cho các bạn nhiều cách tạo ra các hiệu ứng bóng đổ khác nhau, giúp các bạn có nhiều lựa chọn hơn cho website của mình. Xem Demo | Download Trước hết chúng ta cùng tìm hiểu xem hiện ...
Cách tạo Corner Ribbons bằng CSS
Corner ribbons thường được dùng rất nhiều cho các trang bán hàng, nó giúp người dùng chú ý đến những sản phẩm hơn. Trước đây, chúng ta thường sử dụng hình ảnh để làm các ribbons, nhưng giờ đây, chúng ta đã có thể dùng CSS để tạo bất kì một Corner ribbons nào. Các bạn có thể xem hình ảnh hoặc demo ...
Tự tay tạo logo Gmail với CSS3
Trước đây mình đã giới thiệu tới các bạn bài viết Từng bước tạo RSS Feed Logo bằng CSS3 , hôm nay chúng ta lại tiếp tục tạo logo Gmail bằng CSS3 với chỉ vài bước đơn giản. Qua bài viết này, các bạn sẽ có thêm kiến thức cũng như kinh nghiệm sử dụng CSS3. Xem Demo | Download Bước 1 : ...
Tùy chỉnh giao diện Checkboxes và Radio Buttons với CSS3
Với CSS3 các bạn có thể tùy biến giao diện thành bất kỳ thứ gì mà bạn muốn. Trong bài viết này, mình sẽ chia sẻ cho các bạn cách tùy chỉnh giao diện hiển thị của checkbox và radio input. HTML Markup Đầu tiên , chúng ta sẽ cần bộ khung html như sau : Radio input <div ...
Tạo Marquee nâng cao với CSS3 Animation
Thông thường hiệu ứng Marquee mang lại cho chúng ta cảm giác khá nhàm chán, với dòng chữ chạy từ phải sang trái hoặc ngược lại. Còn nữa , khi chạy thường thì rất khó đọc chữ mà còn hay bị giật. Hôm nay mình sẽ chia sẻ với các bạn cách nâng cao cho hiệu ứng marquee vốn dĩ nhàm chán này trở nên ...
Tìm hiểu sơ lược về lựa chọn CSS3:First-Of-Type
Một trong những điều làm mình thích nhất về CSS3 đó là thêm tính năng lựa chọn (selector), cho phép chúng ta chỉ định ngay phần tử mong muốn mà không cần phải phụ thuộc vào các class hay id. Và hôm nay chúng ta sẽ tìm hiểu sơ lược về lựa chọn :first-of-type . Với lựa chọn :first-of-type , ...
Tạo chức năng mở rộng Form tìm kiếm với CSS
Trên màn hình hiển thị trên các thiết bị di động như mobile, thì mỗi một pixel là một khoảng trống đáng quý để bạn hiển thị thông tin website của mình cho khách viếng thăm. Do đó việc rút gọn được cái gì sẽ giúp bạn giảm thiểu tối đa diện tích. Bài viết mà mình chia sẻ với các bạn trong ngày hôm ...
Thiết kế các thẻ tags ấn tượng bằng CSS3
Tags là một tính năng rất thân thuộc với các website, đặc biệt là với các trang blogs. Chính vì thế mà mình quyết định chia sẻ cho các bạn cách thiết kế từng bước cho các thẻ tags. Qua bài viết này , các bạn có thể tạo riêng cho website hay blog của mình với những thẻ tags đầy ấn tượng chỉ bằng ...
Tạo nút download với hiệu ứng động bằng CSS3
Hôm trước mình đã giới thiệu tới các bạn bài viết Từng bước tạo nút bấm động với CSS3 , và nối tiếp những phần cơ bản về hiệu ứng động trong CSS3 . Mình sẽ tiếp tục chia sẻ với các bạn cách tạo nút bấm động với hiệu ứng cũng cực cool , và lần này là dùng cho nút download, vốn dĩ được sử dụng rất ...
Từng bước tạo nút bấm động với CSS3
Tạo ra các hiệu ứng động là một bước cải tiến rất lớn mà CSS3 mang lại cho chúng ta, nếu nắm vững, thì chúng ta hoàn toàn có thể làm những hiệu ứng đẹp cho các website hay blog của mình. Hôm nay mình sẽ chia sẻ với các bạn cách tạo hiệu ứng động cho các nút nhấn. Qua bài viết này, các bạn sẽ nắm ...
5 mẫu CSS về liệt kê danh sách (List Styles) bạn nên tham khảo
Hầu hết trong các mẫu thiết kế web, chúng ta thường xuyên phải sử dụng danh sách (list) để liệt kê nội dung. Hôm nay mình sẽ chia sẻ với các bạn 5 cách định dạng css khác nhau , từ các danh sách đơn giản, đến các danh sách có hình ảnh thumnails, số thứ tự…Bài viết này sẽ rất hữu ích cho ...
Tạo ảnh phản chiếu (Image Reflection) với CSS3
Trong các bài viết trước, chúng ta đã nói rất nhiều về những thuộc tính mới mà CSS3 mang lại. Tuy nhiên, cũng có một vài thuộc tính mà chúng ta vẫn chưa tìm hiểu mặc dù nó cũng rất thú vị. Một trong số đó là thuộc tính box-reflect , với chức năng chính là tạo ảnh phản chiếu cho một đối tượng. ...
Tạo Drop Down Menu với Form tìm kiếm bằng CSS3 và HTML
Nhằm mang lại nhiều bài viết hơn cho các bạn mới bước vào việc học web, mình xin chia sẻ cho các bạn một bài viết tạo menu đơn giản với HTML và CSS3, qua bài viết này, các bạn sẽ biết phải làm gì để có một menu xổ xuống ( Drop down menu ) cũng như định dạng css cho thanh tìm kiếm. HTML ...
CSS3 @font-face và phương án dự phòng
Mặc dầu CSS3 @font-face được hỗ trợ trên nhiều trình duyệt chính, nhưng không phải là tất cả, những trình duyệt IE cũ luôn luôn là nỗi đau đầu của những người thiết kế web. Khi trình duyệt không nhận dạng được font được sử dụng trên web, nó sẽ lấy các font khác thay thế và điều này có thể dẫn đến ...
Chunky 3D Web Buttons Với CSS3
Hôm nay mình sẽ tiếp tục chia sẻ các đoạn css giúp các bạn tạo ra các nút bấm (button) dưới định dạng 3D đầy màu sắc và đẹp mắt. Qua bài viết này, các bạn sẽ có thêm nhiều lựa chọn hơn cho việc thiết kế các nút bấm cho web hay blog của mình. Xem Demo | Download Bước 1 : HTML Markup ...
5 bước tạo miếng dán màn hình với HTML5 và CSS3
Chắc hẳn là các bạn đã quá quen thuộc với những miếng dán ghi chú được gắn trên các tường , hộc tủ, tủ lạnh nhà bạn , khi bạn cần phải nhắn nhủ điều gì đó cho bản thân hay người thân trong nhà. Hôm nay , chúng ta sẽ tạo ra những miếng dán này ngay trên website của mình, với những hiệu ứng đẹp mắt ...
Tạo Form đẹp mắt với HTML5 và CSS3 Transitions
Với sự có mặt của CSS3 transition thì giao diện web đã được cải tiến đáng kể với những hiệu ứng động mà không cần phải dùng đến JavaScript. Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn một cách làm form đẹp mắt bằng các thẻ input của HTML5 và sử dụng CSS3 :valid pseudo class để làm hiệu ứng đẹp ...
CSS3 Linear Gradients và những điều cần biết
Gradient là một tính năng pha trộn màu sắc mà chúng ta rất đỗi quen thuộc khi làm việc với Photoshop hay các phần mềm tạo ảnh khác.Với màu gradient, chúng ta có thể tạo ra nhiều ảnh nền đẹp mắt từ những màu sắc khác nhau. Và giờ đây , với CSS3 , các bạn đã có thể tạo ảnh nền màu gradient cho bất ...
Tạo cây thông noel với tuyết rơi bằng CSS3
Nhằm tăng thêm không khí cho ngày lễ Giáng Sinh sắp tới, hôm nay mình xin tiếp tục chia sẻ cho các bạn cách tạo cây thông giáng sinh đầy màu sắc với hiệu ứng tuyết rơi cực đẹp, và đặc biệt hợn nữa là chỉ với CSS3 mà không cần phải dùng bất kì đoạn script nào cả. Xem Demo | Download ...
Ấn tượng với CSS3 animated loading bar
Đôi lúc khi chúng ta xem các trang web có dung lượng lớn, đặc biệt là những trang chứa nhiều hình ảnh, chúng ta thường bắt gặp hiệu ứng tải trang trước khi các nội dung này được tải xuống. Điều này sẽ giúp cho khách viếng thăm web nhận biết là trang đang được load vào máy. Để hiểu rõ hơn về hiệu ...
