Một số lạm dụng tuyệt vời nhất / tốt nhất / tồi tệ hơn của CSS là gì?

Ví dụ: những hình dạng này hoặc sử dụng nhiều bóng hộp để tạo ảnh nghệ thuật pixel.

cuộc thi phổ biến kết thúc vào ngày 16/04/14.

Một số anh chàng đã tạo ra một công cụ để chuyển đổi bất kỳ hình ảnh nào sang CSS thuần túy. Điều này vượt xa mục đích ban đầu của CSS.

Dưới đây là một ví dụ (Mona Lisa nổi tiếng): http://codepen.io/jaysalvat/pen/HaqBf

Và đây là công cụ: https://github.com/jaysalvat/image2css

Thay đổi hình ảnh khi đang bay

Tôi sẽ không nhất thiết gọi đó là lạm dụng, nhưng bạn có thể sử dụng CSS để thay thế IMGbằng một cái đã cho SRCđể hiển thị một hình ảnh hoàn toàn khác.

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

Xem: /programming/2182716/how-can-we-specify-src-attribution-of-img-tag-in-css

Có thể rất nhiều niềm vui kết hợp với @mediabộ chọn để hiển thị hình ảnh hoàn toàn khác nhau khi in một trang web. (Tương tự lừa có thể được thực hiện trong PDFbtw. Rất vui được nhìn thấy khuôn mặt của anh chàng đó được in một tài liệu và tất cả các bảng xếp hạng trông nghiêm nghị được thay thế bằng phụ nữ xinh đẹp :))

Yếu tố thay đổi kích thước:

Bạn có thể thêm resize:bothđể cho phép một thành phần được thay đổi kích thước bởi người dùng.
Trên một số trình duyệt, điều này chỉ được hỗ trợ trên <textarea>.

Xem trước CSS thời gian thực:

Đây không phải là một điều css thực tế, nhưng bạn có thể thêm thuộc contenteditabletính, thêm thuộc tính style="display:block;z-index:99;width:500px;height:500px;resizable:both;"và bạn có thể chỉnh sửa CSS của mình.

Hộp kiểm CSS / radiobutton theo kiểu:

Sử dụng đoạn đánh dấu sau đây làm ví dụ:

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

Bạn có thể sử dụng display:nonetrên <input>và, bằng cách sử dụng các bộ chọn CSS3, bạn có thể đặt nền 'sprite' để hiển thị các trạng thái khác nhau của hộp kiểm / radiobutton.

Thứ tự của các yếu tố là quan trọng và việc kết hợp thuộc for=""tính với id=""đầu vào thậm chí còn quan trọng hơn!

Bạn có thể xem một số ví dụ ở đây: http://www.csscheckbox.com/

Trình chọn cụ thể của trình duyệt:

Tất cả chúng ta đã cố gắng sử dụng một số loại hỗn hợp javascript với các lớp css và truy vấn phương tiện ...

Vâng, đây là một vài bộ chọn cụ thể của trình duyệt:

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

Đối với IE, bạn có hàng tấn bộ chọn. Không cần thêm.

Tôi đoán nó phụ thuộc vào ý của bạn khi lạm dụng nhưng điều này sẽ khiến người dùng của bạn bực mình:

Jitters

*:hover{
  zoom:99%;
}

(khi bạn di chuột quanh trang, mọi thứ sẽ khiến bạn lo lắng)

Hiệu ứng trao đổi chuyên gia / trả tiền để xem

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

(làm cho tất cả các văn bản mờ)

"GIF hoạt hình" bằng cách sử dụng các tấm sprite CSS

http://jsfiddle.net/simurai/CGmCe/light/

("The Dude" của Java vẫy tay)