9 thủ thuật với CSS

updated on 2023-03-31

Có rất nhiều thú vị khi bạn thực hành CSS. Dưới đây là một số thủ thuật với CSS giúp bạn tạo ra những hiệu ứng thật bất ngờ trên website. Các thủ thuật này được sưu tầm bởi Halloween Mart.

1. Hoverbox Image Gallery – Đây thực sự là một cách tạo hiệu ứng tuyệt diệu cho photo gallary với chức năng roll-over nó sử dụng hoàn toàn công cụ CSS không hề có một chút JavaScript nào. Xem demo hiệu ứng ở đây.

2. CSS Vertical Menus – Còn đây là một loạt các hiệu ứng menu thả xuống rất đẹp mà bạn có thể khai thác theo nhiều cách khác nhau. Bạn cũng có thẻ download miễn phí các menu này và sử dụng trong website của bạn. Xem thêm.

3. Listamatic – Đây không phải chỉ là một ví dụ mà là hàng trăm kiểu mẫu CSS khác nhau đối với list và tất cả đều được xây dựng bằng CSS. Bạn có thể tham khảo các list này và nó sẽ giúp bạn tiết kiệm rất nhiều thời gian khi thiết kế web.

4. Floatutorial – Tương tự như listamatic, đây cũng là một loạt các ví dụ về kỹ thuật rolling. Floatutorial mang đến cho bạn các trải nghiệm cơ bản về các phần tử floating chẳng hạn như các ảnh, các thủ thuật drop caps, các nút next và back, image galleries, inline list ....

5. Rounded Corners – Có vô số cách để tạo ra đường viền góc bo tròn với CSS. Tuy nhiên công cụ của rounded corners lại thú vị ở chỗ không dùng một tí nào hình ảnh và java script. Nếu không dùng hình ảnh bạn sẽ làm cho tốc độ tải trang nhanh hơn nhiều lần. Những công cụ ở đây sử dụng rất đơn giản, chỉ cần cho biết mầu sắc bạn mong muốn và tên của class, và trang web này sẽ generate ra CSS code cho bạn

6. 40 CSS Layouts –  Đây là một bộ sưu tập khác về CSS. Nó gồm 40 giao diện cơ bản với CSS có thể dùng luôn được mà không cần hack hoặc tinh chỉnh. Tuy nhiên bạn đừng nên download code ở đây mà hãy đọc kỹ code rồi tái tạo nó. Điều đó tuy hơi mất thời gian nhưng sẽ mang lại cho bạn kỹ năng code CSS tuyệt vời.

7. CSS Photo Gallery –  Đây là một tập hợp các ví dụ về việc xây dựng các trang gallery cho hình ảnh. Tư tưởng của bộ sưu tập này hơi khác một chút đó là các gallery nhiều trang. Và tất nhiên nó cũng hoàn toàn dùng CSS, không có java script. Nó cũng tương thích với IE và phần lớn các trình duyệt

8. CSS Drop Shadows – Đây là một mẫu thiết kế CSS rất hay, nó sẽ cho bạn thấy cách làm một hiệu ứng bóng mờ thả xuống cho các hình ảnh trên webstie. Sử dụng hoàn toàn CSS.

9. Style Sheet Switcher – Đã bao giờ bạn tự hỏi là tại sao một số website có thể cung cấp cho bạn các lựa chọn khác nhau về bố cục và mầu sắc (theme)? Bạn không cần phải tò mò nữa, Những ví dụ này cho bạn các kỹ thuật để giúp thay đổi giao diện của website dựa trên các yếu tố cơ bản là font chữ, mầu sắc, bố cục và định hướng.