2017-09-05 2 views
0

Je me demandais comment obtenir l'effet suivant (page de démarrage de Mozilla) où les icônes semblent «enfoncées» dans la page. Est-ce quelque chose qui peut être accompli avec CSS ou est-ce purement une manoeuvre de photoshop et et la couleur de fond est juste assortie?Image pressée dans l'effet - CSS

enter image description here

+0

Comment allez-vous les icônes affichés en ce moment? Images transparentes ou non transparentes? SVG, police d'icône? ... – showdev

Répondre

1

Cela devrait faire l'affaire, ne hésitez pas à jouer avec la couleur comme bon vous semble:

div { 
    box-shadow: 0 1px 1px 0 #C7C7C7 inset; 
    background: none repeat scroll 0 0 #E9E9E9; 
} 
+0

Possible de donner un exemple? Je ne suis pas sûr comment cela va fonctionner pour ces icônes, en supposant qu'ils sont des images. – showdev

+0

Je suggère qu'il utilise une bibliothèque d'icônes 'i' et applique le style à l'icône, plutôt que d'utiliser des images. Ces sprites sont des icônes assez communes – EGxo

+0

S'il utilise une police d'icône alors il peut le faire avec «texte-ombre» plutôt que «boîte-ombre» – EGxo