Hướng dẫn cho người mới bắt đầu về CSS3
Kể từ khi được công bố vào năm 2005, sự phát triển của Cấp độ 3 của Cascading Style Sheet hay còn gọi là CSS3 đã được nhiều nhà thiết kế và phát triển theo dõi chặt chẽ và theo dõi. Tất cả chúng tôi đều vui mừng khi có được các tính năng mới của CSS3 - bóng văn bản, viền với hình ảnh, độ mờ, nhiều nền, v.v., chỉ để đặt tên cho một vài.
Cho đến ngày hôm nay, không phải tất cả các bộ chọn CSS3 đều được hỗ trợ đầy đủ. Nhưng điều đó không có nghĩa là chúng ta không thể vui vẻ thử nghiệm các công cụ CSS3 mới. Bài đăng này dành riêng cho tất cả các nhà thiết kế và nhà phát triển đã quen thuộc với CSS 2.1 và muốn làm bẩn tay với CSS3.0.
Đây là phần tổng hợp các lần đọc CSS3 hữu ích, mã mẫu, mẹo, hướng dẫn, cheat-sheet và hơn thế nữa. Hãy sử dụng chúng trong các dự án của bạn, chỉ cần đảm bảo rằng nó rơi một cách duyên dáng trên các trình duyệt không tương thích.
Bắt đầu với CSS3
Giới thiệu về CSS3
Giới thiệu chính thức (lộ trình) về CSS và CSS3. Tài liệu này cung cấp cho bạn một ý tưởng tổng thể về sự phát triển của CSS3.
CSS3: Đưa thiết kế lên cấp độ tiếp theo
Ưu điểm của CSS3, với các giải thích và ví dụ về các thuộc tính và bộ chọn CSS3.
Một số thủ thuật với CSS3
Webmonkey mang đến cho bạn thông qua một số thủ thuật cơ bản trong CSS3, bao gồm viền tròn, viền, đổ bóng, thủ thuật hình ảnh và hơn thế nữa.
Phỏng vấn: Sáu câu hỏi với Eric Meyer về CSS3
Mọi người tại Six Revision đã phỏng vấn Eric Meyer với những hiểu biết và câu trả lời có giá trị về CSS3.
CSS3: Tăng cường tiến bộ
Cách bạn có thể sử dụng các kỹ thuật nâng cao duyên dáng (hoặc, tiến bộ) để sử dụng các tính năng CSS3 trong các trình duyệt hỗ trợ chúng, trong khi đảm bảo rằng mã của bạn sẽ vẫn cung cấp trải nghiệm người dùng thỏa đáng trong các trình duyệt cũ chưa hỗ trợ các tính năng đó..
CSS3: Bối cảnh và Biên giới
Đường viền tròn (bán kính biên giới)
Hướng dẫn tạo đường viền tròn với CSS3 bán kính biên giới bất động sản.
Đường viền tròn với hình ảnh (hình ảnh viền)
Cách sử dụng hình ảnh trong viền với hình ảnh viền bất động sản.
CSS3 viền, hình nền và hộp
Giải thích chi tiết với các ví dụ về các thuộc tính CSS3 mới như: clip nền, nguồn gốc, đính kèm nền, bóng hộp, hộp trang trí-phá vỡ, bán kính biên giới và hình ảnh viền.
CSS3: Văn bản
Hiệu ứng chữ
Tạo hiệu ứng chữ đơn giản với CSS3.
Sáu hiệu ứng văn bản sử dụng bóng văn bản
Hiệu ứng văn bản bao gồm: vintage / retro, neon, inet, anaglyphic, fire và board game.
Kiểu chữ đẹp
Cách lấy đánh dấu cơ bản và biến nó thành một thiết kế kiểu chữ đẹp và hấp dẫn thông qua CSS3 thuần túy.
Xoay văn bản
Sử dụng một sprite hình ảnh và rắc CSS để mọi thứ được định vị đúng.
Văn bản phác thảo
Cách thêm một phác thảo hoặc đột quỵ vào văn bản của bạn bằng CSS3 văn bản đột quỵ bất động sản.
Hiệu ứng che dấu văn bản
Hiệu ứng mặt nạ văn bản tương tác bằng cách sử dụng bóng văn bản Thuộc tính CSS.
Liên kết ảnh khỏa thân (hình động) với CSS3
Bỏ Javascript và tạo hiệu ứng nudge hoàn toàn với CSS3.
Tạo kiểu CSS
Thay đổi kiểu chọn văn bản với CSS3.
CSS3: Menu
Nội dung nhiều cột
Sử dụng CSS3 để tạo một tập hợp các cột trên trang web của bạn mà không phải gán các lớp và (hoặc) đoạn riêng lẻ cho mỗi cột.
Chú giải công cụ gợi cảm chỉ với CSS
Cách sử dụng tiêu chuẩn CSS đang phát triển có thể nâng cao một số công cụ trình duyệt chéo đáng yêu.
Thêm chú giải công cụ:
- Chú giải công cụ CSS3 thuần túy
- Chú giải công cụ với CSS3.
Trình đơn thả xuống
Cách tạo menu thả xuống đa cấp giống nhau của Apple.com bằng cách sử dụng bán kính biên giới, bóng hộp, và bóng văn bản.
Khu vực có thẻ chỉ CSS3
Nhấp vào tab, ẩn tất cả các bảng, hiển thị bảng tương ứng với tab vừa nhấp - tất cả đều có CSS.
Ruy băng 3D với CSS3
Tạo các dải băng 3D đẹp mắt chỉ với CSS3.
CSS3: Bóng đổ
Thả bóng trong ảnh
Giới thiệu một số kỹ thuật và một số sự xuất hiện có thể để giảm bóng mà không sử dụng hình ảnh.
Thẻ phát sáng với Hộp bóng
Cách tạo các tab trực quan và đẹp mắt trong CSS3 không có hình ảnh.
CSS3: Nút
Hướng dẫn: Nút đẹp
Cách tạo các nút CSS3 tuân thủ trình duyệt chéo đẹp mắt làm giảm độ duyên dáng.
Bài phát biểu Bong bóng
Các dạng hiệu ứng bong bóng lời nói khác nhau được tạo bằng CSS 2.1 và được cải tiến bằng CSS3.
Nút Github giống nhau
Bộ sưu tập các nút hiển thị những gì có thể sử dụng CSS3 trong khi vẫn duy trì đánh dấu đơn giản nhất có thể.
Biểu tượng quay, làm mờ với CSS3 và MooTools
Cách sử dụng CSS3 và MooTools để tạo các phần tử xoay, xoay.
Lớp phủ hình ảnh
Ứng dụng thực tế của thuộc tính hình ảnh viền CSS3.
Hơn
- CSS3 + Mootool. Một ví dụ về thí nghiệm trong mootools. Điều này thêm các thuộc tính CSS3 vào công việc khung MooTools cốt lõi.
- Logo bùng nổ với CSS3 và MooTools hoặc jQuery. Chụp ảnh tĩnh và biến nó thành hiệu ứng hoạt hình, bùng nổ trên chuột.
- Sức mạnh của HTML 5 & CSS 3. HTML 5 và CSS 3 đang nhanh chóng trở nên phổ biến, Perishable Press có mặt để giải thích cách thức và lý do tại sao.
- Quay Rays với CSS3 Ảnh động & Ví dụ JavaScript. Hiệu ứng quay tia đơn giản và tinh tế ở mặt sau của hình ảnh.
- Thư viện ảnh Polaroid CSS3. Cách tạo một chồng hình ảnh Polaroid thú vị với phong cách CSS thuần túy.
- HTML 5 và CSS 3: Các kỹ thuật bạn sẽ sớm sử dụng. Hướng dẫn xây dựng blog từ nền tảng với HTML5 và CSS3.
Cheatsheets & Tài liệu tham khảo
Bảng cheat CSS3 (PDF)
Áo có thể in với danh sách đầy đủ tất cả các thuộc tính, loại bộ chọn và cho phép các giá trị trong đặc tả CSS3 hiện tại từ W3C.
Hỗ trợ CSS trong Opera 9.5
Danh sách đầy đủ các bộ chọn CSS được hỗ trợ trong Opera 0.5.
Phông chữ có sẵn để nhúng @ phông chữ
Danh sách toàn diện các phông chữ hiện được cấp phép cho @mặt chữ nhúng.
Bộ chọn CSS 3 - Giải thích
Hướng dẫn và tham khảo các bộ chọn CSS3 và các mẫu của nó.
Trình tạo quy tắc CSS3 trình duyệt chéo
Quy tắc CSS3 bạn có thể sao chép và dán vào biểu định kiểu của riêng bạn.
Biểu đồ nhấp CSS3
Nhận các kiểu CSS3 như kích thước hộp, bán kính đường viền, bóng văn bản và hơn thế nữa trong một cú nhấp chuột.
Tương thích nội dung và trình duyệt CSS
Danh sách đầy đủ các bảng chọn của cả CSS và CSS3 với khai báo để kiểm tra tính tương thích của trình duyệt.
