Cập nhật: [ Css ]

Hôm nay Laptrinhweb 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 transform: rotate(xdeg) của CSS3.

Forrst logo bằng CSS3

Cập nhật: [ Css ]

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 viết ngày hôm nay sẽ rất hữu ích cho các bạn.

Tạo cây gia phả (Family Tree ) bằng CSS3

Cập nhật: [ Css ]

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ề những logo hay các hình thù khác nhau.

Tạo logo Apple bằng CSS3

Cập nhật: [ Css ]

Hôm nay , Laptrinhweb 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 bạn.

CSS3 border transition effects

Cập nhật: [ Css ]

Tất cả chúng ta đều biết Windows Metro UI rất được các web developers sử dụng bởi giao diện đẹp và rất thân thiện với người dùng, với những màu sắc và hiệu ứng động  bắt mắt. Hôm nay mình sẽ chia sẻ cho các bạn một đoạn CSS3 giúp các bạn có thể thiết kế cho chính trang web hay blog của mình theo phong cách Metro. Điều đặc biệt là nó có khả năng responsive nữa.

Tạo giao diện Windows Metro Style Boxes với CSS3

Cập nhật: [ Css ]

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).

Icon Hover Effects với CSS3

Cập nhật: [ Css ]

Hôm nay, tình cờ ghé thăm một blog nước ngoài và mình bị ấn tượng ngay với một hiệu ứng động trên sidebar của blog đó. Và ngay lập tức mình nghĩ ngay tới việc chia sẻ nó cho các bạn, với hiệu ứng này các bạn có thể áp dụng vào ngay cho website hay blog của mình.

Tạo 3D Animating Sidebar với CSS3

Cập nhật: [ Css ]

Image Slider luôn luôn là một trong những chức năng cần có trong một website. Ngoài việc làm cho giao diện web đẹp và sinh động hơn, thì những hình ảnh sẽ là cách tuyệt vời nhất trong việc chuyển tải thông điệp của website đến cho khách viếng thăm.

CSS3 image slider với định dạng thumbnails

Cập nhật: [ Css ]

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ể.

CSS3 Shapes : Tổng hợp những hình dạng được làm từ CSS3

Cập nhật: [ Css ]

Badge là một trong thành phần gần như không thể thiếu trong bất kỳ một Website thiết kế theo phong cách 2.0 nào. Cho dù kích thước của nó có to hay nhỏ nhưng chúng đều tạo ra một phong cách khá riêng biệt.

Pure CSS Badges

Cập nhật: [ Css ]

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.

Tạo Button Tooltips bằng CSS3

Cập nhật: [ Css ]

Chào các bạn, hôm nay Laptrinhweb sẽ chia sẻ cho các bạn một button cực kỳ thú vị với những hiệu ứng mà có lẽ các bạn có thể không bao giờ nghĩ là nó lại được làm chỉ bằng CSS3. Button của chúng ta sẽ sử dụng những thuộc tính như  border-radius, box-shadow, linear-gradients, z-index và transitions.

Animated Download Button Với CSS3

Cập nhật: [ Css ]

Skill Bar thường được dùng để đo lường mức độ của một đánh giá nào đó. Thường thì các chủ trang web dùng chúng để thu thập mức độ yêu thích của khách viếng thăm trang web của họ với những chủ đề khác nhau.

Amimated Skill Bar với jQuery và CSS3

Cập nhật: [ Css ]

Nếu các bạn đang hoặc đã dùng WordPress thì có lẽ đã quá quen thuộc với form login khi đăng nhập vào trang Admin. Khi chúng ta nhập sai username hoặc password thì nó sẽ thông báo lỗi đăng nhập cùng với hiệu ứng rung chuyển form. Hôm nay mình sẽ bày cho cho các bạn cách làm ra hiệu ứng tương tự như vậy cho chính website hay blog mà các bạn đang sở hữu.

Tạo Login Form giống WordPress Admin với CSS3 và jQuery

Cập nhật: [ Css ]

Ngày hôm nay Laptrinhweb 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 không nên bỏ qua.

Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions