Share
Denne opplæringen vil vise hvordan du lager en fin, enkel navigasjonslinje med flere kombinert CSS3-stiler. Vi satser på en utseende og følelse som tidligere kunne bare opprettes ved å kombinere flere bilder, JavaScript og flere divs. La oss få det i gang?
Merk: alle følgende eksempler ble testet på Mozilla Firefox, Safari og Chrome. Hvis du vil få noe lignende i IE eller en annen nettleser, legg igjen en kommentar, og jeg vil gjerne hjelpe deg.
Et godt utseende og godt utformet navigasjonslinje har fra begynnelsen av webdesign vært et av de kraftigste elementene for å holde nettsteder organisert og godt strukturert. Tidligere å skape en fin design ved hjelp av skygger, gradienter, avrundede hjørner og sveveeffekter krevde en serie triks som økte størrelsen på vår kode og antall bilder.
For denne opplæringen vil vi grave inn i to svært viktige CSS3-effekter; Avrundede hjørner og bokseskygger, pluss vi vil bruke de lineære gradienter som tidligere er vist i CSS3 vs Photoshop - Komplekse bakgrunnsopplæring.
Alle har hørt om dem, det vil være overflødig å snakke om hvordan man lager dem, så i de følgende eksemplene vil jeg fokusere på forskjellene i å lage en rundet hjørneeffekt ved hjelp av bilder og fordelene og ulempene ved å bruke CSS3 i stedet.
Å lage en avrundet hjørneeffekt er ganske enkel i en hvilken som helst grafisk programvare, men i Photoshop har vi noen problemer:
nøyaktighet: Selv om du kan angi den avrundede hjørneradiusen, legger Photoshops innebygde anti-aliasing-motor ofte til ett eller to ekstra piksler i grafikken. De fleste av oss i det siste måtte manuelt redusere piksler av inaktive bildebaserte avrundede hjørner for å skape et rent sammenheng med for eksempel farger bakgrunner.
Redigerer: Dette er et av de største problemene med å skape et bildebasert avrundet hjørne. Hvis du lager en grafikk for et 10px radius hjørne i Photoshop, og av en eller annen grunn må du øke radiusen til 20px, det er ingen annen måte å gjøre det enn å omforme formen, eller manuelt redigere alle hjørner, taper tid og nøyaktighet. Omforming er et annet stort problem, hvis du vil strekke eller forstørre formen du må bruke Point Selection Tool i Photoshop, fordi bruk av Transform Controls kan forårsake uønskede forvrengninger i hjørneformen. Jeg trenger ikke engang nevne at skiver hjørnene tar en haug med verdifulle minutter.
Fyll og grenser: Å lage en gradientfylling inne i et bildebasert avrundet hjørneboks har alltid vært en stor oppgave, selv om de dekker grenser, er det nødvendig med kirurgisk presisjon å skille bildene involvert. Du må opprette minst 3 bilder for hver boks, en for de øverste hjørner, en annen for de nederste hjørner og den horisontale eller vertikale gradienten og deretter skrive koden for den. Et annet problem med bildefylling er at beholderen ofte må øke sin høyde eller bredde, og oppnå en uønsket effekt med gradienten (se skjermbilde nedenfor).
Mix hjørne stiler: I Photoshop er det en stund å lage blandede hjørneformater, det er ingen muligheter for å kombinere hjørneformater. Du må manuelt redusere / øke radius eller kombinere figurer? og deretter skjære hvert hjørne.
Å bruke CSS3 til å erstatte de klassiske bildebaserte avrundede hjørner er en god idé. Her er et par fordeler:
La oss se koden for å lage avrundede hjørner på et HTML-element:
/ * Avrundet hjørnebokser * / .boks bakgrunnsbilde: -moz-lineær-gradient (topp, # FAD502, # E89502); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# FAD502), til (# E89502), fargestopp (1, # E89502)); .fourcorners -moz-border-radius: 20px; -webkit-grense-radius: 20px; -khtml-grense-radius: 20px; border-radius: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-grense-topp-venstre radius: 20px; -khtml-border-radius-topleft: 20px; Grense-topp-venstre radius: 20px; .bottomleft -moz-border-radius-bottomleft: 20px; -webkit-grense-bunn-venstre-radius: 20px; -khtml-grense-radius-bottomleft: 20px; Grense bunn-venstre-radius: 20px; . øverst -moz-border-radius-topright: 20px; -webkit-grense-topp-høyre-radius: 20px; -khtml-grense-radius-oppreist: 20px; Grense-topp-høyre-radius: 20px; .bottomright -moz-border-radius-bottomright: 20px; -webkit-grense-bunn-høyre-radius: 20px; -khtml-grense-radius-bottomright: 20px; Grense-bunn-høyre-radius: 20px; .asymmetrisk1 -webkit-grense-topp-venstre-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; Grensen øverst til venstre: 160px; -webkit-grense-topp-høyre-radius: 20px; -khtml-grense-radius-oppreist: 20px; -moz-border-radius-topright: 20px; Grense-topp-høyre-radius: 20px; -webkit-grense-bunn-venstre-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; Grense-bunn-venstre-radius: 10px; -webkit-grense-bunn-høyre-radius: 0px; -khtml-grense-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; grense bunn-høyre-radius: 0px; .asymmetrisk2 -webkit-grense-topp-venstre-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; Grense øverst til venstre: 0px; -webkit-grense-topp-høyre-radius: 90px; -khtml-grense-radius-oppreist: 90px; -moz-border-radius-topright: 90px; Grense-topp-høyre-radius: 90px; -webkit-grense-bunn-venstre-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; Grense nederst-venstre-radius: 0px; -webkit-grense-bunn-høyre-radius: 90px; -khtml-grense-radius-bottomright: 90px; -moz-border-radius-bottomright: 90px; grense bunn-høyre-radius: 90px; .circle width: 170px; høyde: 170 piksler; padding: 15px; font-familie: Arial, Helvetica, sans-serif; farge: #fff; font-size: 12 piksler; font-vekt: bold; float: venstre; bakgrunnsbilde: -moz-lineær-gradient (topp, # FAD502, # E89502); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# FAD502), til (# E89502), fargestopp (1, # E89502)); -webkit-grense-topp-venstre-radius: 100px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; Grense øverst-venstre-radius: 100px; -webkit-grense-topp-høyre-radius: 100px; -khtml-grense-radius-oppreist: 100px; -moz-border-radius-topright: 100px; Grense-topp-høyre-radius: 100px; -webkit-grense-bunn-venstre-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; Grense nederst-venstre-radius: 100px; -webkit-grense-bunn-høyre-radius: 100px; -khtml-border-radius-bottomright: 100px; -moz-border-radius-bottomright: 100px; grense bunn-høyre-radius: 100px;
Noen av de kuleste effektene du kan oppnå med Photoshop, er gjennom Drop Shadows og Inner Shadows. Å bruke dem på riktig måte kan resultere i fremragende 3D-effekter. Selvfølgelig kan en dråpeformet skygge eller en indre skygge på feil måte raskt bli en osteaktig effekt.
Nedenfor finner du et par eksempler på god praksis:
CSS3 tillater oss å skape skygger med bare et par linjer med kode, stilen er ansvarlig for "bokseskygge".
Å lage en Photoshop-lignende Drop Shadow Du kan bruke følgende syntaks:
box-shadow:
Å lage en Photoshop-lignende Indre skygge Du kan bruke følgende syntaks:
boks-skygge: innspill
Accentsconagua