12

CSS'nin en havalı / en iyi / daha kötü istismarlarından bazıları nelerdir?

Örneğin, bu şekiller veya piksel resmi yapmak için birden çok kutu gölgesi kullanma.

16/04/14 tarihinde sona eren popülerlik yarışması .

popularity-contest css

— 930913
kaynak

14

styleÖzniteliklerde satır içi kullanma ve!important her birine ekleme .

— user80551

Kötüye kullanımı nasıl tanımlarsınız ? Konu dışıyım ama ilham veren şekillerle bağlantı için teşekkürler.

— AL

@ n.1 Spesifikasyonlar yapılırken açıkça tasarlanmamış bir şey.

— 930913

Bu soru kurallara uymuyor .

— AL

İnternet ...

— İki10

13

Bazı ahbap herhangi bir görüntüyü saf CSS'ye dönüştürmek için bir araç yarattı. Bu, CSS'nin orijinal amacının çok ötesine geçer.

İşte bir örnek (Ünlü Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

Ve işte araç: https://github.com/jaysalvat/image2css

— almathie
kaynak

Tanrının kutsal bakire annesi! Degrade bir arka plan yaptığınızda oldukça iyi bir araçtır ve (bazı nedenlerden dolayı) size yakın bir kod yoksa ve ihtiyacınız vardır.

— Ismael Miguel

13

Anında görüntüleri değiştirme

Mutlaka kötüye kullanım olarak adlandırmayacağım, ancak tamamen farklı bir görüntü göstermek için IMGverilen ile bir CSS kullanabilirsiniz SRC.

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

Bkz. Https://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

@mediaBir web sayfasını yazdırırken tamamen farklı görüntüler görüntülemek için seçicilerle birlikte çok eğlenceli olabilir . (Aynı hile PDFbtw'de yapılabilir . Bir belgeyi basan adamın yüzünü görmek güzel ve tüm ciddi görünümlü grafikler güzel bayanlar tarafından değiştirildi :))

— RobAu
kaynak

+1 İş arkadaşlarına geri ödemenin acımasız ama ustaca yolları için ... Tabii ki yapacağımdan değil ...

— WallyWest

img ile gördüğüm en iyi kullanım {background-image} jpg kökenli animasyonlu bir gif katıştırıyordu

— albert

1

Yeniden boyutlandırılabilir öğeler:

resize:bothBir öğenin kullanıcı tarafından yeniden boyutlandırılmasına izin vermek için ekleyebilirsiniz .
Bazı tarayıcılarda bu, yalnızca tarayıcılarda desteklenmektedir <textarea>.

Gerçek zamanlı CSS önizlemesi:

Bu gerçek bir css şey değildir, ancak contenteditableözelliği ekleyebilir, özelliği ekleyebilir style="display:block;z-index:99;width:500px;height:500px;resizable:both;"ve CSS'nizi düzenleyebilirsiniz.

Stilli CSS Onay Kutuları / radyo düğmeleri:

Aşağıdaki işaretleme örneğini örnek olarak kullanarak:

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

Sen kullanabilirsiniz display:noneüzerinde <input>CSS3 seçicileri kullanarak ve, araçlar bölümündeki / radiobutton farklı durumlarını göstermek için bir 'peri' arka plan ayarlayabilirsiniz.

Elemanların sırası önemlidir ve for=""özelliği id=""girdideki ile eşleştirmek daha da önemlidir!

Bazı örnekleri burada görebilirsiniz: http://www.csscheckbox.com/

Tarayıcıya özgü seçiciler:

Hepimiz css sınıfları ve medya sorguları ile bir çeşit javascript karışımı kullanmaya çalıştık ...

İşte tarayıcıya özgü birkaç seçici:

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

IE için tonlarca seçiciniz var. Daha fazlasına gerek yok.

— Ismael Miguel
kaynak

0

Sanırım kötüye kullanımla ne demek istediğinize bağlı, ancak bu kullanıcılarınızı batty yönlendirir:

Sinirlilik

*:hover{
  zoom:99%;
}

(sayfanın etrafında fare gibi her şey üzerinizde titriyor)

Uzmanlar-Borsa / Görüntüleme Payı Etkisi

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

(tüm metni bulanık yapar)

CSS sprite sayfalarını kullanarak "Animasyonlu GIF'ler"

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

(Java'nın elini tutan "Dostum")

— scunliffe
kaynak