12

Fermé . Cette question a besoin de détails ou de clarté . Il n'accepte pas actuellement les réponses.

Voulez-vous améliorer cette question? Ajoutez des détails et clarifiez le problème en modifiant ce message .

Fermé il y a 2 ans .

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
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

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
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
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
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
source