Att göra en Pi tema lastning skärmen (3 / 7 steg)
Steg 3: Dekorera med CSS
Vid denna punkt, ser lastaren ingenting mer än bara bilden vi införas. Nu, vi kommer att lägga till några charm det med CSS. Inom den stiltaggar i huvudet taggen skriver vi in i CSS deklarationer för taggen div, img och kropp .
kroppen {
font-family: sans-serif;
bakgrundsfärg: #ededed;
overflow: hidden;
}
div {
Box-shadow: 5px 5px 100px svart;
border-radius: 360px;
bredd: 250px;
höjd: 250px;
bakgrundsfärg: vit;
position: släkting;
marginal-top: 150px;
gränsen: 50px fast vitt;
z-index: 2;
}
IMG {
marginal till vänster:-15px;
marginal-top: 15px;
}
Kontrollera att du har overflow: dolda skrivit i. Annars, en lång sträng av siffror av Pi kommer att orsaka en vågrät rullningslist skapas. overflow: dolda i princip innebär att alla det extra innehållet som inte passar in i skärmen kommer att klippas bort.
Box-shadow kan vi lägga till en skugga i div -elementet. Här, skuggan är 5 pixlar lång och bred och bleknar på ett avstånd av 100 pixlar.
Egenskapen gräns-radie ger en rundad kant till våra div -elementet. Eftersom höjden och bredden är lika här, bildar gränsar en perfekt cirkel.
Egenskapen marginal-top sänker div x 150 bildpunkter. Också lägga till en solid vit kant 50 pixlar bred till behållaren. Slutligen, placera behållaren en enhet högre med egenskapen z-index . (Standardvärdet är 1.)
Du kan behöva använda egenskapen marginal för att centrera bilden i behållaren. Jag hittade - 15px och 15px bekväma. Detta värde varierar med bilden du använder.