Google Doodle animation bằng CSS3
Hẳn là các bạn đã từng quen với các hiệu ứng động mà Google thường mang đến cho chúng ta ngay trên trang chủ của họ, được gọi với cái tên là Google Doodle. Hôm nay chúng ta sẽ bắt chước làm một kiểu đơn giản của họ, điều đặc biệt trong hiệu ứng này là tất cả đều được làm bằng html và CSS3, không sử ...
Tạo Image Content Slider với chỉ CSS3
Image Content Slider là một chức năng trình diễn ảnh, rất thích hợp cho việc tạo các trang web Gallery vốn dĩ hiển thị hình ảnh nhiều. Có rất nhiều plugin cũng như đoạn code giúp chúng ta tạo chức năng này. Nhưng trong bài viết ngày hôm nay, mình và các bạn sẽ chỉ cần dùng CSS3 để tạo chức năng ...
Ấn tượng với mẫu skewed menu thiết kế bằng CSS
Khi còn ở công ty thiết kế web, điều mình đau đầu nhất là làm sao thiết kế những trang web với những layout hay menu khác nhau, để tạo ấn tượng tốt cho khách hàng của mình. Mình nghĩ , nếu các bạn chưa rành về thiết kế thì cũng sẽ gặp vấn đề tương tự như mình. Chính vì lý do này mà mình xin giới ...
CSS3 Logo : Khéo léo với logo Magento
Nếu các bạn đã từng xây dựng trang bán hàng thương mại điện tử bằng Magento, thì ắt hẳn là đã quá quen thuộc với logo của hãng này. Hôm nay, qua bài viết này, mình sẽ chia sẻ cho các bạn cách thiết kế logo này để ứng dụng vào trong các trang bán hàng của mình, mà không cần phải dùng bất kì một hình ...
Tạo cây gia phả (Family Tree ) bằng CSS3
Chào tất cả các bạn, hôm nay chúng ta tiếp tục tìm hiểu sâu hơn về CSS3 bằng cách làm một ví dụ đơn giản về cây gia phả (Family Tree). Với chỉ các phần tử danh sách (list) chúng ta sẽ kết nối lại với nhau dựa trên các phần tử Pseudo cùng với hiệu ứng hover tuyệt đẹp. Mình bảo đảm với các bạn, bài ...
Sexy CSS3 menu
Một trong những phần quan trọng nhất trong trang web đó chính là menu navigation. Việc có một menu đẹp và ấn tượng với khách viếng thăm trang web của các bạn, sẽ giúp tăng lượng truy cập cũng như khả năng quay lại trang web rất cao. Xem demo | Download Hôm nay, trong bài viết này, mình ...
Tạo hiệu ứng Hover bằng CSS3 đơn giản với Hover.css
Hover.css là một tập hợp những hiệu ứng hover bằng CSS3 được viết sẵn, và bạn có thể dễ dàng áp dụng cho những phần tử trong website như hình ảnh, nút bấm, chữ, logo… Chỉ với việc chèn vào các class tương ứng. Xem Demo | Download Có tất cả 40 hiệu ứng để cho các bạn lựa chọn , ...
Cách sử dụng CSS3 Border Radius cho IE8 trở xuống
Như các bạn đã biết, CSS3 cho chúng ta khả năng tạo bo góc với thuộc tính border-radius . Nhưng thuộc tính này lại không được hỗ trợ từ các phiên bản IE8 trở về trước. Vì thế mà khi chúng ta áp dụng thuộc tính CSS3 Border Radius cho một phần tử HTML thì vẫn không có xuất hiện bo góc cho phần tử ...
Icon Hover Effects với CSS3
CSS3 luôn luôn mang lại những cảm hứng và điều bất ngờ cho những ai lần đầu sử dụng nó. Hôm nay, mình tiếp tục chia sẻ cho các bạn một bộ sưu tập những hiệu ứng tuyệt đẹp dành cho các icon. Những hiệu ứng này rất thích hợp cho các trang được thiết kế theo dạng phẳng (flat design). Xem Demo | ...
Tạo HTML5 Logo với CSS3
Nếu các bạn đang tìm hiểu về các cách khai báo phần tử :before và :after, hoặc các thuộc tính CSS3 opacity và transform , CSS borders để vẽ các hình dạng nhất định thì bài viết mà mình giới thiệu hôm nay sẽ giúp các bạn hiểu rõ hơn về những thuộc tính này. Trong bài viết này, chúng ta sẽ vẽ ...
6 hiệu ứng chữ đẹp mắt với CSS3
Trong bài viết ngày hôm nay, mình xin chia sẻ cho các bạn 6 hiệu ứng chữ đẹp mắt được làm từ CSS3. Các bạn có thể sử dụng những hiệu ứng này cho chính website hay blog của mình. Tuy nhiên, để có thể nhìn hết những hiệu ứng này một cách tốt nhất, các bạn nên sử dụng các trình duyệt Webkit, Chrome ...
CSS3 Shapes : Tổng hợp những hình dạng được làm từ CSS3
Hôm nay mình sẽ chia sẻ cho các bạn những đoạn css giúp các bạn tạo nên những hình vuông, hình tròn, hình tam giác… và qua bài viết này, chắc chắn một điều là các bạn sẽ nâng cao kinh nghiệm cũng như trình độ về CSS3 của bạn nên đáng kể. Square #square { awidth: 140px; ...
Tạo Button Tooltips bằng CSS3
Hôm nay mình sẽ chia sẻ cho các bạn một dạng nút bấm (button) rất đẹp với hiệu ứng tooltips cực cool. Chúng ta sẻ chỉ sử dụng CSS3 mà không cần phải dùng bất kì đoạn script hay bất cứ một ảnh động nào. Xem Demo | Download HTML Sau đây là bộ khung html mà chúng ta cần có để tạo ...
CSS3 Logo : Colorvivo
Hôm nay tâm trạng mình thật sự là phấn kích sau khi nhận được thư mời phỏng vấn từ lãnh sự quán Hoa Kỳ . Trong tâm trang đó, mình xin chia sẻ cho các bạn một logo đầy màu sắc được làm từ CSS3, đó là logo Colorvivo. Qua bài viết này, các bạn sẽ có thể tận dụng thuộc tính transform để sắp xếp các ...
Tạo CSS Animations với Move.js
Hiện nay, CSS3 transitions và animations là những cách tạo hiệu ứng nhẹ mà đẹp được dùng nhiều nhất . Tuy nhiên, không phải ai cũng có thể hiểu rõ và sử dụng chúng thật hiệu quả. Nếu các bạn cũng đang gặp rắc rối với cách sử dụng chúng thì mình xin giới thiệu cho các bạn một giải pháp thay thế , đó ...
Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions
Ngày hôm nay mình sẽ chia sẻ cho các bạn những hiệu ứng vòng tròn (Circle Hover Effects) với CSS transitions và 3D rotations. Bảo đảm là với những hiệu ứng này, các bạn có thể áp dụng vào chính trang web hay blog của mình, và nếu các bạn muốn nâng cao hơn về khả năng sử dụng CSS3 thì bài viết này ...
Forrst logo bằng CSS3
Hôm nay mình sẽ cùng với các bạn tạo logo forrst chỉ bằng CSS3 thuần (không sử dụng hình ảnh). Chìa khóa chính cho việc tạo logo này đó là các hình tam giác và hiệu ứng bóng đổ đều sử dụng thuộc tính borders. Và qua bài viết này mình chắc chắn là các bạn sẽ có thể hiểu và sử dụng tốt thuộc tính ...
Ấn tượng với CSS3 border transition effects
Hôm nay , mình sẽ chia sẻ cho các bạn một vài hiệu ứng tuyệt đẹp với Border Transitions. Qua bài viết này, các bạn có thể học hỏi thêm một vài kinh nghiệm trong việc sử dụng những thuộc tính căn bản của CSS3 và hơn hết là có thể áp dụng những hiệu ứng này vào trong các trang web hay blog của các ...
Thiết kế hình đám mây đơn giản bằng CSS3
Có lẽ khi đọc tiêu đề, sẽ có nhiều bạn lầm tưởng mình đã post lộn chủ đề. Bởi vì từ trước đến nay việc thiết kế những hình ảnh như thế này chỉ dành cho những phần mềm tạo ảnh chuyên nghiệp như Photoshop hay những phần mềm tạo ảnh khác, chứ định dạng bằng CSS thì làm sao có thể được. Xem ...
Tỉ mỉ với logo Apple được làm từ CSS3
Với logo Apple thì có lẽ là chúng ta đã quá quen thuộc rồi, và sẽ rất đơn giản nếu như chúng ta dùng các phầm mềm như Photoshop để tạo logo này. Thế còn CSS3 thì sao ? Có lẽ đến bây giờ thì mình có thể quả quyết là với các thuộc tính CSS3 mang lại, chúng ta có thể vẽ nhiều hơn chúng ta tưởng về ...
