RSSCSS

Giới thiệu CSS3

Sử dụng CSS3 chúng ta có thể tạo ra những thiết kế phong phú, dễ tương tác, và đẹp. CSS3 dành cho những ai đang sử dụng những trình duy

Giới thiệu CSS3

Sử dụng CSS3 chúng ta có thể tạo ra những thiết kế phong phú, dễ tương tác, và đẹp. CSS3 dành cho những ai đang sử dụng những trình duyệt tiên tiến hoặc những ai chuẩn bị sử dụng nó.

Trong bài này, chúng tôi trình bày bao quát về kỹ thuật CSS3, những công cụ và nguồn tài nguyên giúp bạn học cách sử dụng CSS3 trong thiết kế.

CSS3 có thể làm được những gì?

Hãy bắt đầu với xem một số kỹ thuật thiết kế thực sự đáng ghi nhận cho thấy những gì CSS3 có thể làm được với một chút suy luận và sáng tạo.

Pure CSS3 Page Flip Effect
Bằng cách sử dụng CSS3 gradients, transitions, 3d transform và clipping, Roman Cortes giới thiệu một trang web hoàn toàn sử dụng hiệu ứng của CSS3(không dùng javascript). Tuy nhiên nó chỉ hoạt động trong các trình duyệt (safari và Chrome)

Hướng dẫn: Giới Thiệu CSS3

Create a Vibrant Digital Poster Design with CSS3
Trong những năm gần đây, CSS đã có một thời gian phát triể lâu dài. Và với sự hỗ trợ của các trình duyệt mới cho CSS3 , chúng ta có thể bắt đầu thiết kế những hiệu ứng, website mà trước đây chỉ có thể làm được khi áp dụng một số ứng dụng kèm theo. Thiết kế của Circlicious được thực hiện hoàn toàn là bằng HTML và CSS.

Hướng dẫn: Giới Thiệu CSS3

CSS3 Leopard-style Stacks
Hoàn toàn bằng CSS3. Không dùng JavaScript. Một thử nghiệm của Gordon Brander.

Hướng dẫn: Giới Thiệu CSS3

Wicked CSS3 3D Bar Chart
Một ví dụ tạo ra một biểu đồ 3D bằng cách sử dụng CSS3. Ví dụ này chỉ hoạt động trong các phiên bản mới nhất của Firefox, Chrome, Safari và Opera.

Hướng dẫn: Giới Thiệu CSS3

Selectable Headlines with Color Transition (CSS3)
Chuyển đổi màu sắc (color transition ) cho text với CSS3. Chỉ xem được trên Safari va Google Chrome.

Hướng dẫn: Giới Thiệu CSS3

Our Solar System in CSS3
Ví dụ này là giới thiệu về thái dương hệ với những tính năng như border-radius, trans forms và animations

Hướng dẫn: Giới Thiệu CSS3

Fun With CSS Gradients
Những sản phẩm tương tự như vậy có thể được tìm thấy ở album của iPhone, sản phẩm sử dụng radial gradient () như một background.

Hướng dẫn: Giới Thiệu CSS3

CSS3 Bookshelf
Một ý tưởng rất thú vị, tuy nhìn không đẹp, nhưng vẫn đáng để thao khảo.

Hướng dẫn: Giới Thiệu CSS3

Pure CSS Twitter Fail Whale

Hướng dẫn: Giới Thiệu CSS3

CSS World Clocks
Một thử nghiệm khác bằng cách vận dụng CSS3 và một ít kiến thức về PHP để tạo ra một chiếc đồng hồ có thể tương tác.

Hướng dẫn: Giới Thiệu CSS3

3D Text Tower

Hướng dẫn: Giới Thiệu CSS3

Creating a Realistic Looking Button with CSS3

Hướng dẫn: Giới Thiệu CSS3

CSS3 Spotlight
Hiệu ứng bật sáng đèn! Chỉ chạy với Webkit và Firefox.

Hướng dẫn: Giới Thiệu CSS3

Pure CSS3 Animated AT-AT Walker from Star Wars

Hướng dẫn: Giới Thiệu CSS3

Pure CSS Icons

Hướng dẫn: Giới Thiệu CSS3

Create a Content Slider Using Pure CSS

Hướng dẫn: Giới Thiệu CSS3

Sexy Tooltips with Just CSS

Hướng dẫn: Giới Thiệu CSS3

Creating a Polaroid photo viewer with CSS3 and jQuery
Ví dụ này được thực hiện dựa trên CSS3 và Jquery, nó trình diễn sức mạnh của hiệu ứng khi áp dụng cả 2 kỹ thuật này.

Hướng dẫn: Giới Thiệu CSS3

Animated Photoshop selection using CSS3

Hướng dẫn: Giới Thiệu CSS3

Sexy Image Hover Effects using CSS3

Hướng dẫn: Giới Thiệu CSS3

CSS3 Dropdown Menu

Hướng dẫn: Giới Thiệu CSS3

Middle Box Links

Hướng dẫn: Giới Thiệu CSS3

Contextual Slideout Tips With jQuery & CSS3

Hướng dẫn: Giới Thiệu CSS3

CSS3 text-shadow, box-shadow, và border-radius

Theo Vnwordpress

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu