การละเมิด CSS ที่ยอดเยี่ยม / ดีที่สุด / แย่ลงคืออะไร

ตัวอย่างเช่นรูปร่างเหล่านี้หรือใช้เงาหลายกล่องเพื่อสร้างภาพพิกเซล

การประกวดความนิยมสิ้นสุดในวันที่ 16/04/14

เพื่อนบางคนสร้างเครื่องมือในการแปลงภาพเป็น CSS บริสุทธิ์ สิ่งนี้เหนือกว่าความตั้งใจดั้งเดิมของ CSS

นี่คือตัวอย่าง (Mona Lisa ที่มีชื่อเสียง): http://codepen.io/jaysalvat/pen/HaqBf

และนี่คือเครื่องมือ: https://github.com/jaysalvat/image2css

เปลี่ยนภาพได้ทันที

ฉันไม่จำเป็นต้องเรียกมันว่าการละเมิด แต่คุณสามารถใช้ CSS เพื่อแทนที่IMGด้วยการให้SRCเพื่อแสดงภาพที่แตกต่างอย่างสิ้นเชิง

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

ดู: /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

สามารถรวมกับ@mediaตัวเลือกเพื่อแสดงภาพที่แตกต่างอย่างสิ้นเชิงเมื่อพิมพ์เว็บเพจ (เคล็ดลับเดียวกันสามารถทำได้ในPDFbtw. ดีที่ได้เห็นใบหน้าของผู้ชายที่กำลังพิมพ์เอกสารและแผนภูมิดูจริงจังทั้งหมดจะถูกแทนที่ด้วยผู้หญิงสวย :))

องค์ประกอบที่ปรับขนาดได้:

คุณสามารถเพิ่มresize:bothเพื่ออนุญาตให้องค์ประกอบถูกปรับขนาดโดยผู้ใช้
ในบางเบราว์เซอร์จะรองรับเฉพาะ<textarea>ของ

ตัวอย่าง CSS แบบเรียลไทม์:

นี่ไม่ใช่สิ่ง css จริง แต่คุณสามารถเพิ่มcontenteditableคุณสมบัติเพิ่มคุณสมบัติstyle="display:block;z-index:99;width:500px;height:500px;resizable:both;"และคุณสามารถแก้ไข CSS ของคุณ

ช่องทำเครื่องหมาย CSS สไตล์ / radiobuttons:

ใช้มาร์กอัพชิ้นส่วนต่อไปนี้เป็นตัวอย่าง:

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

คุณสามารถใช้display:noneบน<input>และโดยใช้ตัวเลือก CSS3 คุณสามารถตั้งค่าพื้นหลัง 'sprite' เพื่อแสดงสถานะต่าง ๆ ของช่องทำเครื่องหมาย / radiobutton

ลำดับขององค์ประกอบมีความสำคัญและการจับคู่for=""คุณสมบัติกับid=""ในอินพุตนั้นสำคัญยิ่งกว่า!

คุณสามารถดูตัวอย่างได้ที่นี่: http://www.csscheckbox.com/

ตัวเลือกเฉพาะของเบราว์เซอร์:

เราทุกคนได้ลองใช้ javascript mix กับ css classes และ media-query บางอย่าง ...

ดีที่นี่มีไม่กี่ตัวเลือกเบราว์เซอร์ที่เฉพาะเจาะจง:

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

สำหรับ IE คุณมีตัวเลือกจำนวนมาก ไม่จำเป็นต้องเพิ่มเติม

ฉันคิดว่ามันขึ้นอยู่กับสิ่งที่คุณหมายถึงว่าเป็นการละเมิด แต่สิ่งนี้จะทำให้ผู้ใช้ของคุณบ้าคลั่ง:

กระวนกระวายใจ

*:hover{
  zoom:99%;
}

(ในขณะที่คุณเลื่อนไปรอบ ๆ หน้าทุกสิ่งที่คุณกระวนกระวายใจ)

ผู้เชี่ยวชาญแลกเปลี่ยน / จ่ายเงินเพื่อดูผล

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

(ทำให้ข้อความทั้งหมดพร่ามัว)

"Animated GIF's" โดยใช้ CSS sprite ชีต

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

(Java ของ "The Dude" โบกมือของเขา)