Hvordan lage visuelle skyggeeffekter Under topper i CSS

Bruke "box-shadow" eiendom i Cascading Style Sheet (CSS) kode, kan du legge til en drop-shadow visuell effekt under overskriften på websiden. Denne teknikken vil legge dybde til Web-design uten å gjøre nettleseren forespørsel og last bildefiler. For å opprette en subtil skygge effekt, bruk en "RGBA" fargekode (rød, grønn, blå og Alpha) i CSS, slik at du kan redusere gjennomsiktigheten skyggen. Offset skyggen fra toppen bare slik at den henger under overskriften.

Bruksanvisning

1 Åpne filen som inneholder koden for overskriften på websiden i Notepad eller en kode editor. Finn par av HTML-koder som starter og ender overskriften:

<Div id = "header">

<H1> Velkommen til min nettside! </ H1>

</ Div>

Over er et enkelt eksempel på en overskrift for en webside. De "<div>" tags starte og avslutte spissen. Les ID-attributtet i startkoden, i dette tilfellet "header". Legg en ID hvis du ikke finner en.

2 Legg til "<style>" tags mellom "<head>" koder på websiden din kode hvis de ikke allerede finnes:

<Style type = "text / css">

</ Style>

Skriv din CSS-kode mellom de ovennevnte koder. Du kan også legge til CSS til en ekstern fil hvis nettsiden bruker en.

3 Skriv dette for å målrette header i CSS:

#header {}

Legg til "box-shadow" eiendom mellom klammeparentes:

#header {

box-shadow:

}

4 Legg verdier til "box-shadow" eiendom for å angi mengden og retningen på skyggen offset, mengden av uskarphet på skyggen og skygge farge. De to første verdiene er mengden utligne fra venstre og toppen av hodet, og den tredje verdien er mengden av uskarphet: "box-shadow: 0px 5px 10px;".

5 Få de røde, grønne og blå verdier av en farge du ønsker og bruke dem til din RGBA fargekode. Bruk en verdi mellom null og én for hvor mye åpenhet du ønsker for fargen: "box-shadow: 0px 5px 10px RGBA (0,0,0,0.5);" Det endelige resultatet av koden ovenfor er en skygge. forskjøvet fra toppen av fem piksler, uklart av en radius på ti piksler, med en svart farge satt til halvparten åpenhet.

Hint

  • Eldre nettlesere kan ikke bruke "box-shadow" eiendom og vil ikke vise en skygge. Hvis du trenger skygge som skal vises i en bestemt nettleser versjon, sjekk om nettleseren kan vise CSS nivå tre (CSS3) effekter.