Frontal | 20 conseils CSS couramment utilisés

image en noir et blanc

Ce code fera vos photos couleur en photos noir et blanc montrent, est-ce pas cool?

imgdesaturate {     filtre : échelle de gris (100% :) ;     Filtre-webkit : échelle de gris (100% :) ;     Filtre-MOZ : échelle de gris (100% :) ;     Filtre-ms : échelle de gris (100% :) ;     Filtre - o : échelle de gris (100% :) ;}

2, l'utilisation: non () appliquer / annuler les applications frontières dans le menu

Donnez à chaque élément de menu pour ajouter une bordure

/ * Border add * / 
.nav li { 
    border-right : 1px solid # 666 ; 
}

Et puis en enlevant le dernier élément

// Supprimer la bordure / 
.nav li: last-child { 
    border-right : aucun ; 
}

Il peut être utilisé directement: Non () pour appliquer des éléments pseudo-classe:

.nav li: non (: last-child) { 
    border-right : 1px solid # 666 ; 
}

Ce code est propre, facile à lire et facile à comprendre.

Bien sûr, si vous êtes de nouveaux éléments ont frères et sœurs, vous pouvez également utiliser le sélecteur de frères et soeurs générique (~):

.nav li: first-child ~ li { 
    gauche frontière : 1px solid # 666 ; 
}

3, le haut de l'ombre page

Voici simple fragment de code CSS en haut de la page avec un bel effet d'ombre:

corps: avant {     contenu : "" ;     Position : fixe ;     haut : -10px ;     gauche : 0 ;     largeur : 100% ;     hauteur : 10px ;     -webkit-box-shadow : 0px 0px 10px rgba (0, 0, 0, 0,8) ;     -moz-box-shadow : 0px 0px 10px rgba (0, 0, 0, 0,8) ;     box-shadow : 0px 0px 10px rgba (0, 0, 0, 0,8) ;     z-index : 100 ;}

4, l'utilisation de l'icône SVG

Nous n'avons aucune raison de ne pas utiliser des icônes SVG:

logo { 
    fond : url ( "Fouillez") ; 
}

SVG a une bonne évolutivité pour tous les types de résolution, et prend en charge tous les navigateurs reviennent à IE9. Cela évitera .png, .jpg ou .gif.

5, en utilisant la hauteur max curseur pur CSS

Utilisez max hauteur et trop-plein CSS caché pour atteindre uniquement le curseur:

curseur ul { 
    max-height : 0 ; 
    débordement : caché ; 
} 

Curseur: hover ul { 
    max-height : 1000px ; 
    transition : .3s facilité ; 
}

Cet article est seulement transmis à apprendre à utiliser, si la violation de vos droits, s'il vous plaît me contacter immédiatement supprimé!

Lien original: http: //www.phpxs.com/code/1009945/