Étape 3: Décorer avec CSS
À ce stade, le chargeur recherche rien de plus que l’image que nous avons inséré. Maintenant, nous allons ajouter quelque charme à elle en utilisant CSS. Dans les balises de style dans la balise head, on tape dans les déclarations CSS pour la balise div, img et le corps .
Assurez-vous que vous avez débordement : caché tapé. Sinon, la longue chaîne de chiffres de Pi provoquera une scrollbar horizontale doit être créé. débordement : caché revient à dire que tout le contenu supplémentaire qui ne rentre pas dans l’écran va être coupé.
La box-shadow nous permet d’ajouter une ombre à l’élément div . Ici, l’ombre est de 5 pixels de longs et de larges et se fane à une distance de 100 pixels.
La propriété border-radius donne un bord arrondi à notre élément div . Étant donné que la hauteur et la largeur sont égales ici, les frontières forment un cercle parfait.
La propriété de marge-top abaisse la div x 150 pixels. Également ajouter une largeur de pixels de bordure blanche solide 50 au conteneur. Enfin, placez la récipient une unité plus élevée à l’aide de la propriété z-index . (La valeur par défaut est 1.)
Vous devrez peut-être utiliser la propriété margin pour centrer l’image dans le conteneur. J’ai trouvé - 15px et 15px confortable. Cette valeur varie avec l’image que vous utilisez.