CSS total bazar - msnbrest/astuces GitHub Wiki

// flex largeur

justify-content:

flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;



// pre break:

white-space: pre-wrap;



// w kwa

word-break: break-word;



// init table

table{border-spacing:0}



// transformation

.tr8{transition:all 8.2s ease}

.rotate90{transform:rotate(90deg)}

.miror{transform:scaleX(-1)}



// responsive execute

@media(min-width:576px){
}



// print page

page-break-after:always



// inner css

box-shadow:0px 0px 100px rgba(0,0,0,1) inset;

box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1) inset;

box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%)



// contour

text-shadow: 0px 0px 9px #777;



// animation tourner comme une piece :

.tourne_sans_sarreter{animation:lfpfspin 2s linear infinite}

@keyframes lfpfspin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}



// back

background:linear-gradient(70deg,#0093E0,#02A7F4)



// anti
TRUC:not(.show)
tous les TRUC qui n'ont pas aussi de class show



// aveugle

img{
	border:4px solid #f00
}

img[alt]{
	border:none
}



// transform

// Ajoute un flou sur l'image.
filter: blur(5px);

// Rend l'image plus claire ou plus sombre.
filter: brightness(0.4);

// Augmente ou diminue le contraste de l'image.
filter: contrast(4);

// Augmente ou diminue le contraste de l'image.
filter: contrast(200%);

// Applique une ombre portée derrière l'image.
filter: drop-shadow(16px 16px 20px blue);

// Convertit l'image en niveaux de gris.
filter: grayscale(50%);

// Modifie la teinte globale de l'image.
filter: hue-rotate(90deg);

// Inverse totalement les couleurs de l'image.
filter: invert(100%);

// Rend l'image transparente.
filter: opacity(25%);

// Sursature ou désature l'image.
filter: saturate(30%);

// Convertit l'image en sépia.
filter: sepia(60%);