Hvordan å style et bilde til Polaroid Med CSS3

Cascading Style Sheet nivå 3 koden legger til mange nye egenskaper som lar webutviklere lage interessante visuelle effekter uten å åpne en grafikk redigering program. Lekenhet noen utviklere har ført til en rekke triks og tutorials utstillingsvindu kraften i CSS3-kode, slik som gradienter som blir pledd og lysbildeserier som ikke krever Javascript. Styling et bilde for å se ut som en Polaroid er en av disse effektene.

Bruksanvisning

1 Åpne filen som inneholder koden for websiden og finn "<link>" koder i hodet av HTML-koden. Finn navnet på CSS filen i "<link>" tag hvis den finnes:

<Link rel = "stylesheet" href = "sti / til / style.css" type = "text / css" />

I koden ovenfor, "style.css" er filen du må åpne for å redigere CSS. Legg til "<style>" koder i hodet av HTML-koden hvis ingen kobling til en ekstern CSS-fil finnes:

<Style type = "text / css">

</ Style>

2 Finn "<img>" tag som inneholder bildet du ønsker å style som en Polaroid. Her er et eksempel på kode:

<Img alt = "My Pic" />

Legg en "klasse" attributt til koden, noe som gir bildet en klasse navn som "polaroid" som du kan arbeide med senere:

<Img alt = "My Pic" class = "polaroid" />

3 Skriv din CSS-kode nederst i CSS-filen eller mellom "<style>" koder du har lagt til websiden. Start med velger som vil "velg" bildet ditt:

.polaroid {

}

Plassere alle CSS-kode for din Polaroid bilde mellom krøllparenteser.

4 Legg polstring rundt bildet ved hjelp av stenografi "padding" eiendom, som vil gi bildet en uniform polstring rundt. Angi bunn padding med "padding-bottom" med en høyere verdi:

padding: 10px;

padding-bottom: 40px;

5 Sett "background-color" eiendom til hvitt. Bruk fargenavn "hvite" eller stenografi heksadesimale koden "#fff", basert på dine preferanser:

background-color: #fff;

6 Gi bildet en skygge ved hjelp av "box-shadow" eiendom CSS. Gi skyggen en forskyvning på omtrent tre til fem piksler fra toppen og venstre, en blur radius på ca 10 piksler og en RGBA - rød, grønn, blå og Alpha - fargeverdi for svart med en lav opasitet verdi som 40 prosent:

box-shadow: 3px 3px 10px RGBA (0,0,0,0.4);

7 Legg en liten stigning til den hvite bakgrunnen for å gjøre bildet føles mer tredimensjonalt. Bruke en lys grå til bunnen av gradienten og holde den øverste hvite. Du må erklære "bakgrunnsbilde" egenskapen tre ganger for å ta høyde for leser variasjoner:

background-image: -webkit-lineær-gradient (topp, #fff 85%, #eee);

background-image: -moz-lineær-gradient (topp, #fff 85%, #eee);

background-image: lineær-gradient (topp, #fff 85%, #eee);

8 Roter Polaroid bilde bare litt for å gi den som "bare falt på skrivebordet" utseende. Bruk flere versjoner av "transformere" eiendom, som du gjorde med den lineære gradient:

-webkit-transform: rotate (-3deg);

-moz-transform: rotere (-3deg);

transform: rotere (-3deg);

Hint

  • Effekter som krever CSS3 ikke vil fungere på nøyaktig samme måte i alle nettlesere, og noen nettlesere fortsatt ikke støtter CSS3. Når det gjelder sistnevnte, vil bildet fortsatt vise den hvite bakgrunnen og polstring, men ikke skygge, bilde tilt eller bakgrunn gradient.
  • Bilder stylet for å ligne Polaroids ser best når den plasseres på annet enn ren hvit, bakgrunn grunn av problemer med kontrast.