Share
Noen gang lurt på hvordan en bestemt effekt ble oppnådd i et webdesign, og etter å ha zoomet inn i flere klikk, fant du ut at forfatteren har lagt til flere subtile skygger, grenser, gradienter, etc? Tidligere ble dette oppnådd ved å skære ut et bilde, og sette det som en bakgrunn av noe element. Heldigvis, med CSS3, kan vi få mye mer fleksibilitet. Nå, mens koden for en så enkel effekt kan være litt kjedelig, er det vel verdt det, og det er det vi skal se gjennom i dagens skriftlige og video-raske tips!
Se heller på denne skjermbildet på Screenr.com?
Det er utrolig at noe dette enkle krever så mye kode, men det er ikke for grovt, og kan enkelt bli abstrakt bort til en brikke for fremtidig bruk.
For å gjøre prosjektet så kutt og lim som mulig, jobber vi bare med en tom div. Opprett en ny index.html-fil, og lim inn følgende:
Deretter legger vi til noen grunnleggende styling for kroppselementet. Dette er bare for presentasjonen, og kan enkelt fjernes. Innenfor stilkoder i overskriften, legg til:
/ * Ikke noe spesielt her. Bare lerretet. * / kropp bredde: 500px; margin: 60px auto 0; bakgrunn: # 666;
Nå lager vi vår boks, og gir bredde og høyde.
#box / * Bare en boks * / bredde: 500px; høyde: 500px;
Vi burde alle vite om CSS avrundede hjørner nå. La oss gå videre og implementere det.
/ * Avrundede hjørner * / -moz-grense-radius: 3px; -webkit-grense-radius: 3px; border-radius: 3px;
Legg merke til at vi også leverer den endelige spesifikasjonen, av "grense-radius", i tillegg til Mozilla og Webkit's versjoner.
Mozilla tilbyr en praktisk eiendom, kalt "-moz-grense - * - farger." Dette gjør at vi kan angi et uendelig antall farger for en kantlinje. For å oppnå en subtil "dobbeltgrense" -virkning, la oss implementere denne egenskapen.
/ * Angi en grense grense og farge * / grense: 2px solid hvit; / * Flere grensefarger i Gecko * / -moz-grense-topp-farger: # 292929 hvit; -moz-grense-høyre-farger: # 292929 hvit; -moz-grense-bunn-farger: # 292929 hvit; -moz-grense-venstre-farger: # 292929 hvit;
Legg merke til hvor mange farger vi leverer, er de samme som grensebredden vi satt i begynnelsen (2px). Legg heller ikke kommater etter hver hex-verdi; Jeg gjorde den feilen først!
I beste fall vet jeg at webkit ikke støtter grensefargene, selv om det er mulig at jeg tar feil. Hvis jeg er, vennligst legg igjen en kommentar og gi meg beskjed! Uansett, for å etterligne denne effekten så godt som mulig i Safari og Chrome, bruker vi bokseskygge.
/ * Kompensere for Webkit. Ikke så fint, men fungerer. * / -webkit-boks-skygge: 0 -1px 2px # 292929;
Vær oppmerksom på at de angitte verdiene refererer til henholdsvis X offset, Y offset, sløret og skyggefarge. Ved å sende -1px som Y-offset, kan vi skyve skyggen oppover.
Det siste trinnet er å levere en subtil bakgrunnsgradient for boksen vår. Imidlertid må vi være sikre på å gi en fastback-farge for nettleserne som ikke støtter CSS-gradienter.
/ * Bakgrunnsferdig gradient, med fallback til solid farge * / bakgrunn: # e3e3e3; bakgrunn: -moz-lineær-gradient (topp, # a4a4a4, # e3e3e3); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# a4a4a4), til (# e3e3e3));
Dessverre er Mozilla og Webkit ikke helt enige om syntaksen for gradienter, noe som gjør prosessen ekstra irriterende. Hvis det er for forvirrende, kan du bruke en ny tjeneste kalt CSS3. Vennligst å generere hver nettleser syntaks; det er veldig kult!
Det er fantastisk; ser over vårt siste bilde, er det vanskelig å fortelle hva vi egentlig gjorde! Men dette er en god ting; subtilitet er nøkkelen i alle aspekter av design. Takk for lesing / visning!
/ * Ikke noe spesielt her. Bare lerretet. * / kropp bredde: 500px; margin: 60px auto 0; bakgrunn: # 666; #box / * Bare en boks * / bredde: 500px; høyde: 500px; / * Avrundede hjørner * / -moz-grense-radius: 3px; -webkit-grense-radius: 3px; border-radius: 3px; border: 2px solid hvit; / * Flere grensefarger i Gecko * / -moz-grense-topp-farger: # 292929 hvit; -moz-grense-høyre-farger: # 292929 hvit; -moz-grense-bunn-farger: # 292929 hvit; -moz-grense-venstre-farger: # 292929 hvit; / * Kompensere for Webkit. Ikke så fint, men fungerer. * / -webkit-boks-skygge: 0 -1px 2px # 292929; / * Bakgrunnsferdig gradient, med fallback til solid farge * / bakgrunn: # e3e3e3; bakgrunn: -moz-lineær-gradient (topp, # a4a4a4, # e3e3e3); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# a4a4a4), til (# e3e3e3));
Accentsconagua