Tạo Lightbox từ CSS3
Hôm nay mình sẽ chia sẻ cho các bạn một hiệu ứng lightbox cực kỳ ấn tượng và rất đẹp mắt chỉ bằng CSS. Ý tưởng ở đây là tạo một ảnh thumbnail và ảnh lớn cùng một lúc (ảnh này sẽ bị ẩn đi). Và khi chúng ta click vào ảnh thumbnail thì ảnh lớn sẽ được xuất hiện cùng với hiệu ứng cực cool nhờ vào các ...
Tạo 3D Animating Sidebar với CSS3
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. Xem Demo | Download HTML ...
Thiết kế hiệu ứng đẹp cho checkbox bằng CSS3 và iconfonts
Việc thiết kế web chẳng hề đơn giản chút nào, nhất là với khi chúng ta đã thiết kế rất nhiều kiểu khác nhau, và dần dần, chúng càng trở nên đơn điệu và không có gì là mới mẻ.Nếu các bạn đã cảm thấy nhàm chán với những hình vuông đơn giản mặc đinh và không có gì đẹp mắt của các ô checkbox. Thì qua ...
CSS3 image slider với định dạng thumbnails
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. Xem Demo | Download Trong bài viết ...
Pure CSS Badges
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. Có rất nhiều các loại badge được thiết kế theo các hình dạng khác nhau, nhưng chúng đều mang ...
Single input 3D form với CSS3 và jQuery
Hôm nay mình sẽ chia sẻ cho các bạn một mẫu form nhập liệu đơn với hiệu ứng 3D đẹp mắt và đầy ấn tượng chỉ với bằng CSS3 và jQuery. Mẫu form này rất thích hợp cho việc tạo các form Subscribe. Xem Demo | Download HTML Đầu tiên chúng ta cần có bộ khung chuẩn html như sau : <div ...
Làm đẹp Select Box (Dropdown Lists) Với 2 màu đen, trắng bằng CSS
Để có thể thiết kế web đẹp, ngoài việc sử dụng những mẫu có sẵn, thì đôi lúc chúng ta cũng cần phải tự tay tùy biến những phần tử html đẹp hơn so với hình ảnh mặc định của nó. Trong bài viết này, mình sẽ chia sẻ cho các bạn 2 định dạng css cho các phần tử select box với 2 màu đen trắng, đơn giản ...
Animated Download Button Với CSS3
Chào các bạn, hôm nay mình 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. ...
Tạo hiệu ứng Fade-in, Fade-out trên chữ với CSS3 Animation
Chào các bạn, hôm nay mình sẽ chỉ cho các bạn cách làm một hiệu ứng fade in và fade out trên chữ với CSS3 Animation. Hiệu ứng này rất đơn giản và dễ thực hiện, chỉ với việc dùng @keyframe cho 7 kí tự với thời gian khác nhau. Qua bài viết này, chắc chắn các bạn sẽ có thêm kinh nghiệm trong ...
Tạo menu theo phong cách thiết kế phẳng (Flat) bằng CSS3
Chắc hẳn các bạn đã đọc qua bài viết 20 mẫu themes Flat design tuyệt vời nhất dành cho WordPress dành riêng cho những bạn đang dùng WordPress. Thì mình đoán là cũng sẽ có nhiều bạn muốn tự tay thiết kế riêng cho mình những giao diện Flat của riêng mình. Với bài viết này,mình sẽ mang đến cho các ...
10 thủ thuật css cần phải biết cho người bắt đầu
Nếu bạn mới bắt đầu tìm hiểu về thiết kế web, thì việc nắm vững CSS là một trong những điều mà bạn cần phải làm. Học CSS không khó, nhưng học như thế nào để có hiệu quả và không tốn quá nhiều thời gian thì không phải dễ chút nào. Nhất là khi có hàng trăm thuộc tính cũng như kỹ thuật mà bạn cần phải ...
Ấn tượng với Pricing Table làm từ CSS3
Pricing Table thường được dùng để giới thiệu những gói dịch vụ mà trong các trang web chuyên về hosting hay sử dụng. Hôm nay mình xin chia sẻ cho các bạn một mẫu pricing table rất đẹp và được làm bằng CSS3 gadient cùng với những thuộc tính khác như box-shadow và transform(scale). Xem Demo ...
Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3
Chắc hẳn bạn đã quá quen thuộc với hiệu ứng loading trên Facebook mỗi khi chúng ta upload hình ảnh, chia sẽ link, video… cho bạn bè và người thân của mình. Trong bài viết này, chúng ta sẽ tạo ra hiệu ứng loading giống như thế, mà không cần phải dùng bất kì file ảnh nào, tất cả đều được tạo ...
Tạo Dropdown Menu đơn giản mà đẹp mắt với CSS3 Transitions
Với sự hỗ trợ của CSS3, thỉnh thoảng chúng ta sẽ không cần đến sự hỗ trợ từ jQuery hay bất kỳ đoạn script nào để tạo hiệu ứng. Như trong bài viết này, mình sẽ chia sẻ cho các bạn một cách tạo drop down menu đơn giản nhưng hiệu ứng thì không thua kém bất kì một đoạn script tạo hiệu ứng nào. ...
Tạo biểu tượng (icons) theo phong cách IOS7 với CSS3
Nếu các bạn đang dùng iPhone hay iPad và đã cập nhật phiên bản IOS 7, chắc hẳn là đã quen thuộc với kiểu thiết kế đẹp và lạ mắt của các biểu tượng (icons) trên màn hình. Kiểu thiết kế này được gọi là Squircles, nó là sự kết hợp giữa hình vuông và hình tròn. Nếu các bạn cũng muốn áp dụng kiểu ...
Colorful Shiny CSS3 Buttons
Hôm nay mình sẽ giới thiệu cho các bạn một loạt các button nhiều mắc sắc và có hiệu ứng cực kỳ cool với chỉ bằng CSS3. Với các buttons này, các bạn có thể áp dụng vào cho chính các mẫu thiết kế web của mình. Có một điều mình nhắc nhở các bạn là các button này xem tốt nhất trên các phiên bản trình ...
Hiệu ứng loading theo kiểu Windows phone với CSS3
Nếu các bạn đã cảm thấy chán với các kiểu hiệu ứng loading cho trang web được làm từ các ảnh với đuôi .gif. Hoặc không còn thích dùng cách mà mình đã giới thiệu là Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3 . Thì hôm nay, trong bài viết này, mình sẽ tiếp tục chia sẻ cho các bạn một ...
Ấn tượng với cách tạo hình từ thuộc tính CSS border
Có lẽ có rất nhiều bạn chỉ sử dụng CSS border dùng để tạo các đường viền cho các đối tượng. Tuy nhiên, ngoài việc tạo đường viền ra, thì chúng ta còn có thể tận dụng css border cho việc tạo các hình thù khác nhau, như hình tam giác, hình vuông, hình mũi tên… Nếu các bạn còn chưa tin, ...
Ấn tượng với hiệu ứng hover ảnh bằng CSS3 hoặc jQuery
Thông thường, để xây dựng ứng dụng ảnh gallery trên website , chúng ta thường áp dụng cách cơ bản là tạo những ảnh thumnail nhỏ. Và khi click vào chúng, thì sẽ xuất hiện những ảnh lớn hơn dưới dạng pop up (sử dụng những scirpt như Fancybox). Sẽ là một ý tưởng hay hơn nếu chúng ta áp dụng thêm hiệu ...
Tập thiết kế logo bằng CSS3 với logo CBS
Chào tất cả các bạn, tối nay mình sẽ tiếp tục giới thiệu cho các bạn một mẫu logo làm bằng CSS3. Có lẽ các bạn sẽ thắc mắc vì sao mình lại post quá nhiều bài viết về logo, thực ra cũng dễ hiểu thôi, bởi vì theo mình, cách học tốt nhất là thực hành. Càng thực hành , càng làm nhiều, thì các bạn mới ...
