Pire abus de CSS? [fermé]

12

Quels sont certains des abus les plus cool / meilleurs / pires de CSS?

Par exemple, ces formes ou l'utilisation de plusieurs ombres en boîte pour créer du pixel art.

concours de popularité se terminant le 16/04/14.

popularity-contest css 930913
la source
14
L'utiliser en ligne dans les styleattributs et les ajouter !importantà chacun.
user80551
Comment définissez-vous un abus ? Je suis hors sujet mais merci pour le lien avec des formes inspirantes.
AL
@ n.1 Quelque chose qui n'était clairement pas prévu lorsque les spécifications ont été établies.
930913
Cette question n'est pas conforme aux règles .
AL
Internet ...
TwoLe

Réponses:

13

Un mec a créé un outil pour convertir n'importe quelle image en CSS pur. Cela va bien au-delà de l'intention initiale de CSS.

Voici un exemple (La célèbre Joconde): http://codepen.io/jaysalvat/pen/HaqBf

Et voici l'outil: https://github.com/jaysalvat/image2css

almathie
la source
Sainte vierge mère de dieu! C'est un très bon outil lorsque vous créez un fond dégradé et que vous (pour une raison quelconque) n'avez pas le code près de chez vous et vous en avez besoin.
Ismael Miguel
13

Changer les images à la volée

Je ne l'appellerai pas nécessairement abusif, mais vous pouvez utiliser CSS pour remplacer un IMGpar un donné SRCpour afficher une image complètement différente.

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

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

Peut être très amusant combiné avec des @mediasélecteurs pour afficher des images complètement différentes lors de l'impression d'une page Web. (La même astuce peut être faite en PDFbtw. Ravi de voir le visage du gars qui imprime un document et tous les graphiques sérieux sont remplacés par de belles femmes :))

RobAu
la source
+1 Pour des moyens cruels mais ingénieux de rembourser ses collègues ... Pas que je le ferais bien sûr ...
WallyWest
la meilleure utilisation que j'ai vue avec img {background-image} était d'incorporer un gif animé avec un arrière
albert
1

Éléments redimensionnables:

Vous pouvez ajouter resize:bothpour permettre à un élément d'être redimensionné par l'utilisateur.
Sur certains navigateurs, cela n'est pris en charge que sur <textarea>.

Aperçu CSS en temps réel:

Ce n'est pas une chose CSS réelle, mais vous pouvez ajouter la contenteditablepropriété, ajouter la propriété style="display:block;z-index:99;width:500px;height:500px;resizable:both;"et vous pouvez modifier votre CSS.

Cases à cocher / boutons radio stylisés CSS:

En utilisant l'exemple de balisage suivant:

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

Vous pouvez utiliser display:nonesur le <input>et, à l'aide des sélecteurs CSS3, vous pouvez définir un arrière-plan 'sprite' pour afficher les différents états de la case à cocher / du bouton radio.

L'ordre des éléments est important et faire correspondre la for=""propriété avec id=""l'entrée est encore plus important!

Vous pouvez voir quelques exemples ici: http://www.csscheckbox.com/

Sélecteurs spécifiques au navigateur:

Nous avons tous essayé d'utiliser une sorte de mix javascript avec les classes CSS et les requêtes de médias ...

Eh bien, voici quelques sélecteurs spécifiques au navigateur:

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

Pour IE, vous avez des tonnes de sélecteurs. Pas besoin de plus.

Ismael Miguel
la source
0

Je suppose que cela dépend de ce que vous entendez par abus, mais cela rendrait vos utilisateurs fous:

Frousse

*:hover{
  zoom:99%;
}

(lorsque vous passez la souris sur la page, tout vous tremble)

Experts-Exchange / Effet Pay-To-View

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

(rend tout le texte flou)

"GIF animés" à l'aide de feuilles de sprites CSS

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

("The Dude" de Java agitant sa main)

scunliffe
la source