Trang chủ » Thiết kế web » Hướng dẫn cho người mới bắt đầu về CSS3

    Hướng dẫn cho người mới bắt đầu về CSS3

    Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

    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ớihì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.