Share
Heeft u zich ooit afgevraagd hoe een bepaald effect werd bereikt in een webontwerp en na het zoomen in verschillende klikken, ontdekte u dat de auteur verschillende subtiele schaduwen, randen, verlopen, enzovoort heeft toegevoegd? In het verleden werd dit eenvoudig bereikt door een afbeelding uit te snijden en in te stellen als achtergrond van een element. Gelukkig kunnen we met CSS3 veel meer flexibiliteit bieden. Hoewel de code voor zo'n simpel effect misschien een beetje vervelend is, is het de moeite waard, en dat is wat we zullen bespreken in de geschreven en video snelle tip van vandaag!
Bekijk deze screencast liever op Screenr.com?
Het is verbazingwekkend dat zoiets eenvoudig vereist dat veel code, maar het is niet te ruw, en kan gemakkelijk worden weggevat tot een fragment voor toekomstig gebruik.
Om ons project zo knip-en-plak als mogelijk te maken, werken we alleen met een lege div. Maak een nieuw index.html-bestand en plak het volgende in:
Vervolgens voegen we wat basisstyling toe voor het body-element. Dit is alleen voor de presentatie en kan eenvoudig worden verwijderd. Voeg binnen stijltags in uw koptekst toe:
/ * Niets bijzonders hier. Alleen het canvas. * / body width: 500px; marge: 60px auto 0; achtergrond: # 666;
Nu maken we onze box met een breedte en hoogte.
#box / * Slechts een vak * / width: 500px; hoogte: 500 px;
We moeten nu allemaal wel weten hoe CSS nu afgeronde hoeken is. Laten we doorgaan en implementeren.
/ * Afgeronde hoeken * / -moz-border-radius: 3px; -webkit-border-radius: 3px; grensradius: 3px;
Merk op dat we naast de versies van Mozilla en Webkit ook de laatste specificatie leveren, van 'grensradius'.
Mozilla biedt een handige eigenschap, genaamd "-moz-border - * - colors." Hiermee kunnen we een oneindig aantal kleuren instellen voor een rand. Om een subtiel "dubbelgrens" effect te bereiken, laten we deze eigenschap implementeren.
/ * Een basisrand en kleur instellen * / border: 2px effen wit; / * Meerdere randen in Gecko * / -moz-border-top-kleuren: # 292929 wit; -moz-border-right-colors: # 292929 wit; -moz-border-bottom-colors: # 292929 wit; -moz-border-left-colors: # 292929 wit;
Merk op hoe het aantal kleuren dat we leveren dezelfde is als de randbreedte die we aan het begin hebben ingesteld (2px). Plaats ook geen komma's na elke hexadecimale waarde; Ik heb die fout in het begin gemaakt!
Voor zover ik weet ondersteunt webkit momenteel geen border-kleuren, hoewel het mogelijk is dat ik ongelijk heb. Als dat zo is, laat dan een reactie achter en laat het me weten! Hoe dan ook, om dit effect zo goed mogelijk na te bootsen in Safari en Chrome, gebruiken we doosschaduw.
/ * Compenseer voor Webkit. Niet zo mooi, maar werkt. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Merk op dat de opgegeven waarden verwijzen naar respectievelijk de X-verschuiving, Y-verschuiving, vervaging en schaduwkleur. Door -1px als de Y-offset door te laten, kunnen we de schaduw omhoog duwen.
De laatste stap is om een subtiel achtergrondverloop voor onze doos te leveren. We moeten er echter zeker van zijn om een fallback-effen kleur te bieden voor de browsers die geen CSS-gradiënten ondersteunen.
/ * Subtiele achtergrondverloop, met fallback naar effen kleur * / achtergrond: # e3e3e3; achtergrond: -moz-linear-gradient (bovenaan, # a4a4a4, # e3e3e3); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, van (# a4a4a4), tot (# e3e3e3));
Helaas zijn Mozilla en Webkit het niet helemaal eens over de syntaxis voor gradiënten, wat het proces extra irritant maakt. Als het te verwarrend is, kunt u een nieuwe service gebruiken genaamd CSS3. Gelieve de syntaxis van elke browser automatisch te genereren; het is erg cool!
Het is geweldig; kijkend naar ons uiteindelijke beeld, het is moeilijk te zeggen wat we feitelijk hebben gedaan! Maar dit is een goede zaak; subtiliteit staat centraal in alle aspecten van design. Bedankt voor het lezen / bekijken!
/ * Niets bijzonders hier. Alleen het canvas. * / body width: 500px; marge: 60px auto 0; achtergrond: # 666; #box / * Slechts een vakje * / width: 500px; hoogte: 500 px; / * Afgeronde hoeken * / -moz-border-radius: 3px; -webkit-border-radius: 3px; grensradius: 3px; rand: 2px effen wit; / * Meerdere randen in Gecko * / -moz-border-top-kleuren: # 292929 wit; -moz-border-right-colors: # 292929 wit; -moz-border-bottom-colors: # 292929 wit; -moz-border-left-colors: # 292929 wit; / * Compenseer voor Webkit. Niet zo mooi, maar werkt. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Subtiele achtergrondverloop, met fallback naar effen kleur * / achtergrond: # e3e3e3; achtergrond: -moz-linear-gradient (bovenaan, # a4a4a4, # e3e3e3); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, van (# a4a4a4), tot (# e3e3e3));
Accentsconagua