SYTEME DE DESIGN
Aperçu
Introduction
Principes
Styles
Couleurs
Typographie
Boutons
Iconographie
Images
Animation
Composantes
Fiches
Carrousel
Formulaires
Messages
Décoration
Script
Code CSS
Javascript
PHP
Wordpress
Design
Code
Usage
CSS :
Générateur CSS
Flex and Grid
CSS et SASS
GENERATEUR CSS
Un site, une image, une identité
STYLE CSS :
color: transparent; // Couleur de texte border: 1px solid #000; // Bordure sur une boite (block) background-color: #fff; // Arrière plan sur une boite (block) // Dégradé sur le texte background: -webkit-gradient(linear, left top, right top, from(#000), to(#045FB4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; // Ombre sur une boite (block) box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75); // Ombre sur du texte text-shadow: 5px 5px 7px rgba(0, 0, 0, 0.75); // Ombre sur une image transparent (PNG/GIF) filter: drop-shadow(5px 5px 4px #4444dd); // Arrière plan dégradé radial sur une boite (block) background: radial-gradient(rgba(255,255,255,1) 0%, rgba(244,244,244,1) 47%, #fbff00 100%); // Boite (block) en flou gaussien -webkit-filter: blur(5px); filter: blur(5px);
TEXTE :
Couleur
Dégradé
de Gauche en Haut
de Droite en Haut
de Gauche en bas
de Droite en bas
à Gauche en Haut
à Droite en Haut
à Gauche en bas
à Droite en bas
Ombre :
X
Y
F
IMAGE :
Ombre :
X
Y
F
BOITE :
Couleur
Dégradé linéaire
Dégradé radial
de Gauche en Haut
de Droite en Haut
de Gauche en bas
de Droite en bas
à Gauche en Haut
à Droite en Haut
à Gauche en bas
à Droite en bas
Ombre :
X
Y
F
P
Niveaux de gris
Sépia
Saturation
Rotation de la teinte
Inverser
Opacité
Luminosité
Contraste
Flouter
multiple filtres
Teinte
Encrier
px
Bordure :
px
Pointillé
Tirets
Double
Solide
Rainurée
Relief
Relief int.
Relief ext.
