CSS3-teknologi erstatter JavaScript-funksjonalitet

Det er et kjent faktum at JavaScript lar oss webutviklere lage noen fantastiske interaksjoner med nettbrukergrensesnitt, og nå med litt tanke, oppfinnsomhet og kunnskap kan de samme typer effekter skapes med verktøyene og teknologien til CSS3.

Dette innlegget vil belyse flere CSS3-teknikker og opplæringsprogrammer som skyver konvolutten og skaper lignende effekter som tidligere var henvist til bare JavaScript-funksjonalitet. Eksemplene er organisert i tre seksjoner, bilde- og fotogallerier, tekst og typografi, og til slutt navigerings- og rullegardinmenyer. Hvert eksempel vil fremheve CSS3-teknologien, gi en skjermdumping av den demonstrerte bruken og levere et utdrag av CSS3-koden som hjelper deg med å få det hele til å skje. Mange av disse eksemplene er ganske nyttige, mens andre bare uttaler seg om viktigheten av CSS3 og dens plass i fremtiden for nettutvikling.

Bilde- og fotogallerier

Polaroid Photo Gallery av Chris Spooner på Line25 bruker CSS3 -webkit- og -moz-prefikser med transformasjons-, rotasjons-, rammeskygge- og z-indeksegenskaper for å lage dette fantasifulle fotogalleriet, og opplæringen gir ledetrådene bak koden. Demonstrasjonen er tilgjengelig for visning i Firefox, Safari og Chrome.

Dette er et stykke av CSS3-koden som fremhever bruken av transform for å lage en del av det polaroidlignende galleriet:

 ul.gallery li a { 
 stilling: relativ; 
 flyte: venstre; 
 polstring: 10px 10px 25px 10px; 
 bakgrunn: #eee; 
 grense: 1px solid #fff; 
 -moz-box-skygge: 0px 2px 15px # 333; 
 } 
 ul.gallery li a.pic-1 { 
 z-indeks: 1; 
 -webkit-transform: rotere (-10deg); 
 -moz-transform: rotere (-10deg); 
 } 
 ul.gallery li a.pic-2 { 
 z-indeks: 5; 
 -webkit-transform: rotere (-3deg); 
 -moz-transform: rotere (-3deg); 
 } 

Circle Slideshow av Stu Nicholls på CSS Play viser et sett bilder på en karusellmote; et klikk på knappen roterer bildene mot klokken med det øverste bildet som vises i midten. Ved å bruke CSS3-moz, -ms, -o og -webkit-prefikser med overganger, stablede posisjoner med fokus og aktive egenskaper, fungerer det ved å bruke et overlegg av lenker og søskenvelgere for å kontrollere størrelsen, plasseringen og opaciteten til hvert bilde. Forfatteren uttaler at denne funksjonen er effektiv i IE7, IE8, IE9, IE10, Firefox, Opera, Safari og Chrome.

Denne kodebiten belyser bruken av CSS3-overganger for å lage en del av sirkelens lysbildefremvisning:

 .cssplayStack {posisjon: relativ; bredde: 750px; høyde: 700 piksler; margin: 0 auto;} 
 .cssplayStack a {display: block; omriss: 0; stilling: absolutt; venstre: 351px; top: 500px; bredde: 48px; høyde: 48px; bakgrunn: #fff url (rounders / up.png); z-indeks: 25; 
 -moz-overgang: 0s 1, 5s; 
 -ms-overgang: 0s 1, 5s; 
 -overgang: 0s 1, 5s; 
 -webkit-overgang: 0s 1, 5s; 
 overgang: 0s 1, 5s; 
 } 

CSS3 Image Slider er et perfekt eksempel på det som har vært domenet til JavaScript-koden, men er nå tilgjengelig i CSS3. Denne enkle opplæringen bruker prefikser CSS3-o, -moz og -webkit for overganger i denne glidebrytereffekten. HTML-merkingen består av to containere, en for bilder og den andre for glidebrytereffekten, med en svevetone.

Dette CSS3-kodebiten fra CSS3 Image Slider markerer bruken av overganger for å lage glidebrytereffekten:

 # bilder img { 
 bredde: 400px; 
 høyde: 250px; 
 stilling: absolutt; 
 topp: 0; 
 venstre: -400px; 
 z-indeks: 1; 
 uklarhet: 0; 
 overgang: alle lineære 500 ms; 
 -overgang: alle lineære 500 ms; 
 -moz-overgang: alle lineære 500 ms; 
 -webkit-overgang: alle lineære 500 ms; 
 } 
Å lage et bildegalleri med CSS3 bruker CSS3 -moz og -o-prefikser for overgangseiendommer, overgangsvarighet, tekstskygge og transformering for å lage to varianter i denne opplæringen for CSS3-bildegalleriet. Den andre varianten vises i skjermbildet i figur D.

Dette utdraget med CSS3-kode viser hvordan ankerbildet er definert med overgang og brukervalg som brukes til gallerieffekten:

 en img { 
 viser: blokk; 
 bredde: 100%; 
 høyde: 100%; 
 -webkit-overgang-egenskap: bredde, høyde, topp, bunn, venstre, høyre, z-indeks; 
 -webkit-overgang-varighet: 2s; 
 -moz-overgang-egenskap: bredde, høyde, topp, bunn, venstre, høyre, z-indeks; 
 -moz-overgang-varighet: 2s; 
 -o-overgang-egenskap: bredde, høyde, topp, bunn, venstre, høyre, z-indeks; 
 -O-overgang-varighet: 2s; 
 overgangseiendom: bredde, høyde, topp, bunn, venstre, høyre, z-indeks; 
 Overgangen-varighet: 2s; 
 stilling: absolutt; 
 z-indeks: 1; 
 top: 0px; 
 venstre: 0px; 
 markør: pil; 
 -moz-user-select: ingen; 
 -khtml-bruker-velg: ingen; 
 brukervalg: ingen; 
 } 

Tekst og typografi

Letterpress Effect, en annen fra Chris Spooner på Line25, dette eksemplet bruker tekstskyggeegenskapen CSS3 for å lage denne teksteffekten uten bruk av noen bildebytte teknikker, og med nylig støtte for teksttransformering blir effekten gitt direkte i nettlesere som Safari, Chrome og Firefox (3.1+).

Utdraget av CSS3-koden nedenfor gjør hele forskjellen:

 h2 { 
 font: 70px Tahoma, Helvetica, Arial, Sans-Serif; 
 tekstjustering: sentrum; 
 farge: # 222; 
 tekstskygge: 0px 2px 3px # 555; 
 } 

I denne veiledningen til Design Shack er syv eksempler på CSS3-prosjekter gitt, inkludert denne imponerende "sydd" påsydde illusjonseffekten som bruker CSS3-disposisjon, disposisjons-offset og boks-skygge.

CSS3-kodebiten nedenfor viser stylingegenskapene som er brukt:

 #container { 
 / * Søm * / 
 disposisjon: 1px stiplet # 98abb9; 
 disposisjon-offset: -5px; 
 bakgrunnsfarge: # 556068; 
 høyde: 200px; 
 bredde: 400px; 
 margin: 100px auto; 
 /*skygge*/ 
 -webkit-box-skygge: 2px 2px 2px # 000; 
 -moz-box-skygge: 2px 2px 2px # 000; 
 boksskygge: 2px 2px 2px # 000; 
 } 

Text Rotation er en flott opplæring av Jonathan Snook der han bruker CSS3 transformasjons- og rotasjonsegenskapene for å lage eksemplet ved bruk av dag, måned og år. Jonathan har også et IE-filter for å rotere ethvert element som har utforming definert.

Dette er kodebiten av CSS3-koden som angir styling for dato og måned:

 kropp { 
 font-familie: Arial, Helvetica, sans-serif; 
 } 
 .eksempel-dato { 
 background-color: # 987; 
 float: right; 
 stilling: i forhold; 
 polstring: 45px 5px 0px; 
 margin-left: 10px; 
 } 
 .eksempel-dato .eksempel-måned { 
 tekst-transform: store bokstaver; 
 font-size: 25px; 
 } 
 .eksempel-dato .eksempel-dag { 
 font-size: 45 px; 
 linje-høyde: 45 px; 
 stilling: absolutt; venstre: 5px; top: 0px; 
 } 
 .eksempel-dato .eksempel-år { 
 viser: blokk; 
 stilling: absolutt; høyre: -5px; top: 15px; 
 -webkit-transform: rotere (-90deg); 
 -moz-transform: rotere (-90deg); 
 } 

Navigerings- og nedtrekksmenyer

CSS3 Dropdown Menu fra Web Designer Wall demonstrerer bruken av CSS3 i denne opplæringen, og fremhever bruken av CSS3 grensradius, boksskygge, lineær gradient og gradient.

Et utdrag av CSS3-koden viser stylingen som er brukt på nivå 2-listen, nav ul:

 #nav ul { 
 bakgrunn: #ddd; / * for nettlesere som ikke er css3 * / 
 filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# cfcfcf'); / * for IE * / 
 bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (#fff), til (#cfcfcf)); / * for nettkitlesere * / 
 bakgrunn: -moz-lineær gradient (topp, #fff, #cfcfcf); / * for firefox 3.6+ * / 
 skjerm: ingen; 
 margin: 0; 
 polstring: 0; 
 bredde: 185px; 
 stilling: absolutt; 
 topp: 35px; 
 venstre: 0; 
 kant: solid 1px # b4b4b4; 
 -webkit-border-radius: 10px; 
 -moz-border-radius: 10px; 
 border-radius: 10px; 
 -webkit-box-skygge: 0 1px 3px rgba (0, 0, 0, .3); 
 -moz-box-skygge: 0 1px 3px rgba (0, 0, 0, .3); 
 boksskygge: 0 1px 3px rgba (0, 0, 0, .3); 
 } 

Animert navigasjonsmeny av nettdesigners skrivebord bruker kantradius, boksskygge, lineær gradient og webkitgradient for bakgrunnsbilde, tekstskygge, animasjonsnavn og animasjonsvarighet.

Et utdrag av CSS3-koden nedenfor fremhever menodemonstrasjonen ul styling:

 # menu-demo1 ul { 
 bredde: 500 piksler; 
 høyde: 50 piksler; 
 bakgrunnsfarge: RGB (48, 161, 171); 
 flow: hidden; 
 / * CSS3 Border radius * / 
 -moz-border-radius: 5 px; 
 -webkit-border-radius: 5 px; 
 border-radius: 5 px; 
 / * CSS3 Box Shadow * / 
 -moz-box-skygge: 1px 2px 4px # 666; 
 -webkit-box-skygge: 1px 2px 4px # 666; 
 boksskygge: 1px 2px 4px # 666; 
 / * CSS3 Gradient Property for menu * / 
 bakgrunnsbilde: -moz-lineær gradient (rgb (48, 161, 171), rgb (56, 192, 207)); 
 bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, 
 fra (rgb (48, 161, 171)), til (rgb (56, 192, 207))); 
 } 

Dette er bare noen få eksempler på bruk av lærebok CSS3-teknologi, som viser at funksjonalitet som tidligere er relegert til JavaScript nå kan oppnås med CSS.

© Copyright 2021 | mobilegn.com