Journal d'un Terrien
Web log de Serge Boisse
On line depuis 1992 !
http://sboisse.free.fr/programmation/languages/HTML/Astuces CSS.php
astuces CSS
Liste d'astuces en CSS
SItes intéressants pour le CSS
CSS scan (page web) Un site avec des exemples de box shadow, boutons, checkboxes, symboles...
width et height relatives au viewport et non à l'élément englobant
Bien sûr on peut mettre dans ces propriétés un nombre de px, em,... ou un pourcentage (ce dernier relatif à l'élement englobant, et non à la taille de la fenêtre !), mais aussi, c'est moins connu, quelque chose comme width: 90vh qui signifie "90% de la hauteur du viewport". idem pour 90vw. Très utile quand on veut qu'une scrollbar apparaisse quand le contenu d'une div dépasse cette valeur...
les "--" au début d'un bloc CSS
Ce sont des propriétés personnalisées(une sorte de préprocesseur C pour les variables)
on les accède par var() et calc()
Exemple :
body .theme-clair{
--fond-par-defaut: #888;
--taille-police: 10px;
}
ma-div {
background : var(--fond-par-defaut);
font-size: calc(var(--taille-police) + 2px);
}
:before et :after, content etc.
désactiver les clics sur un élément
a {
pointer-events:none;
}
font awesome
utilisation : <i class="fa fa-remove"></i>
pré-processeur CSS
SCSS / SASS
SASS utilise 2 syntaxes :
La nouvelle syntaxe principale "SCSS" qui est une amélioration de la syntaxe CSS3. Ce qui veut dire qu'un code CSS3 valide est aussi un SCSS valide. Les fichiers SCSS utilisent l'extension .scss.
La seconde syntaxe un peu plus vieille est la syntax "SASS" ou syntaxe indentée. Inspirée de la syntaxe HAML, elle a pour but de créer un code plus concis mais qui ressemble moins à du CSS. Plutôt que d'utiliser des accolades on utilise l'indentation pour organiser les informations. Ce n'est plus la syntaxe principale mais elle continue d'être supportée. Les fichiers indentés utilisent l'extension .sass.
Joindre des directives CSS qui concernent le même sélecteur
il semble n'y avoir pas de solution sur étagère. --> projet info ?
changer la couleur d'une image SVG
exemple <img src="dotted-arrow.svg" class="filter-green"/>
et dans le CSS on applique un filtre :
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
si votre SVG n'est pas noir l'ajout debrightness(0) saturate(100%)au début de la liste des filtres le rendra d'abord 100% noir, ce qui permettra aux autres filtres de le changer en couleur correcte.
Splash
.splash {
background: url("splash.png");
height: 220px;
width: 250px;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.splash div {
width: 100px;
transform: rotate(24deg);
margin-top: 33px;
text-align: center;
margin-left: 4px;
}
.yes {
font-size: 42px;
font-weight: bold;
}
Commentaires (0) :
Page :Ajouter un commentaire (pas besoin de s'enregistrer)
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.