Share
Deze tutorial laat zien hoe je een mooie, eenvoudige navigatiebalk kunt maken met behulp van verschillende gecombineerde CSS3-stijlen. We streven naar een look en feel die in het verleden alleen kon worden gecreëerd door verschillende afbeeldingen, JavaScript en verschillende divs te combineren. Laten we beginnen?
Notitie: alle volgende voorbeelden zijn getest op Mozilla Firefox, Safari en Chrome. Als je iets vergelijkbaars wilt in IE of een andere browser, laat dan een reactie achter en ik help je graag verder.
Een goed ogende en goed ontworpen navigatiebalk is vanaf het allereerste begin van het webontwerp een van de krachtigere elementen om websites georganiseerd en goed gestructureerd te houden. In het verleden was het voor het maken van een mooi ontwerp met schaduwen, verlopen, afgeronde hoeken en zweefeffecten nodig om een reeks trucjes uit te voeren die de code en het aantal afbeeldingen vergrootten.
Voor deze tutorial zullen we ingaan op twee zeer belangrijke CSS3-effecten; Afgeronde hoeken en doosschaduwen, plus zullen we de lineaire gradiënten gebruiken die eerder in de CSS3 versus Photoshop werden getoond - Complexe achtergrond zelfstudie.
Iedereen heeft van hen gehoord, het zal overbodig zijn om te praten over hoe ze te maken, dus in de volgende voorbeelden zal ik me concentreren op de verschillen tussen het creëren van een afgerond hoekeffect met behulp van afbeeldingen en de voor- en nadelen van het gebruik van CSS3 in plaats daarvan.
Het maken van een afgerond hoekeffect is vrij eenvoudig in grafische software, maar in Photoshop hebben we enkele problemen:
Nauwkeurigheid: Zelfs als u de afgeronde hoekradius kunt instellen, voegt Photoshop's ingebouwde anti-aliasing-engine vaak een of twee extra pixels toe aan de afbeelding. De meesten van ons moesten in het verleden handmatig pixels van onnauwkeurige, op afbeeldingen gebaseerde afgeronde hoeken verkleinen om een schone join te maken met bijvoorbeeld gekleurde achtergronden.
Redactie: Dit is een van de grootste problemen bij het maken van een op afbeeldingen gebaseerde afgeronde hoek. Als u een afbeelding voor een 10px radiushoek in Photoshop maakt en om een of andere reden moet u de straal tot 20px vergroten, dan is er geen andere manier om het te doen dan de vorm opnieuw te tekenen, of handmatig alle hoeken te bewerken, tijd en nauwkeurigheid te verliezen. Het formaat wijzigen is een ander enorm probleem. Als u de vorm wilt uitrekken of vergroten, moet u het gereedschap Puntselectie in Photoshop gebruiken, omdat het gebruik van de Transform-besturingselementen ongewenste hoekvervormingen kan veroorzaken. Ik hoef niet eens te vermelden dat het snijden van de hoeken een hoop waardevolle minuten kost.
Vullingen en randen: Het maken van een verloopvulling binnen een op afbeeldingen gebaseerde afgeronde hoekdoos is altijd al een grote klus geweest, wuthout heeft zelfs grenzen afgedekt, chirurgische precisie is vereist om de betrokken afbeeldingen te snijden. U moet voor elk vak minimaal 3 afbeeldingen maken, één voor de bovenste hoeken, één voor de onderste hoeken en de horizontale of verticale helling en vervolgens de code ervoor schrijven. Een ander probleem met het opvullen van afbeeldingen is dat de container vaak zijn hoogte of breedte moet vergroten, waardoor een ongewenst effect met de gradiënt wordt verkregen (zie afbeelding hieronder).
Mix hoekstijlen: In Photoshop duurt het een tijdje om gemengde hoekstijlen te maken, er zijn geen opties om hoekstijlen te combineren. U moet de straal handmatig verminderen / vergroten of vormen combineren? en plak dan elke hoek.
Het gebruik van CSS3 om de klassieke op afbeeldingen gebaseerde afgeronde hoeken te vervangen, is een geweldig idee. Hier zijn een paar voordelen:
Laten we de code bekijken om afgeronde hoeken op een HTML-element te maken:
/ * Afgeronde hoekdozen * / .box background-image: -moz-linear-gradient (top, # FAD502, # E89502); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# FAD502), tot (# E89502), kleurstop (1, # E89502)); .fourcorners -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; grensradius: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-radius-topleft: 20px; grens-bovenkant-linker-straal: 20px; .bottomleft -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; -khtml-border-radius-bottomleft: 20px; border-bottom-left-radius: 20px; .topright -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; border-top-right-radius: 20px; .bottomright -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -khtml-border-radius-bottom rechts: 20px; border-bottom-right-radius: 20px; .asymmetrical1 -webkit-border-top-left-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; grens-bovenkant-linker-straal: 160px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; grens-onder-links radius: 10px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottom rechts: 0px; -moz-border-radius-bottom right: 0px; border-bottom-right-radius: 0px; .asymmetrical2 -webkit-border-top-left-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; grens-bovenkant-linker-straal: 0px; -webkit-border-top-right-radius: 90px; -khtml-border-radius-topright: 90px; -moz-border-radius-topright: 90px; border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 90px; -khtml-border-radius-bottom rechts: 90px; -moz-border-radius-bottomright: 90px; border-bottom-right-radius: 90px; .circle width: 170px; Hoogte: 170px; padding: 15px; font-family: Arial, Helvetica, sans-serif; color: # fff; font-size: 12px; font-weight: bold; float: left; achtergrondafbeelding: -moz-linear-gradient (bovenaan, # FAD502, # E89502); achtergrondafbeelding: -webkit-gradiënt (lineair, 0% 0%, 0% 100%, van (# FAD502), tot (# E89502), kleurstop (1, # E89502)); -webkit-border-top-left-radius: 100 px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; grens-bovenkant-linker-straal: 100px; -webkit-border-top-right-radius: 100 px; -khtml-border-radius-topright: 100px; -moz-border-radius-topright: 100px; border-top-right-radius: 100px; -webkit-border-bottom-left-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; grens-onder-links radius: 100 px; -webkit-border-bottom-right-radius: 100px; -khtml-border-radius-bottom rechts: 100px; -moz-border-radius-bottomright: 100px; border-bottom-right-radius: 100px;
Enkele van de coolste effecten die je met Photoshop kunt bereiken, zijn Drop Shadows en Inner Shadows. Als u ze op de juiste manier gebruikt, kan dit uitmuntende 3D-effecten tot gevolg hebben. Natuurlijk kan het gebruik van een slagschaduw of een innerlijke schaduw op de verkeerde manier snel een goedkoop effect worden.
Hieronder vindt u een paar voorbeelden van goede werkwijzen:
Met CSS3 kunnen we schaduwen maken met slechts een paar regels code, de stijl die de leiding heeft is "doosschaduw".
Om een Photoshop-achtige te creëren Slagschaduw u kunt de volgende syntaxis gebruiken:
box-shadow:
Om een Photoshop-achtige te creëren Innerlijke schaduw u kunt de volgende syntaxis gebruiken:
vakschaduw: inzet
Accentsconagua