Share
CSS3 is een van de coolste nieuwe webtechnologieën die nu beschikbaar zijn voor webontwikkelaars. Met een aantal van de vele functies is het mogelijk om de effecten die je eerder in Photoshop hebt gedaan te reproduceren, met CSS-code die beter onderhouden kan worden, sneller kan worden geladen en hip met de nieuwste trends. Lees verder om meer te weten te komen over de elektrische gereedschappen die voor u beschikbaar zijn en hoe u ze kunt combineren om de ultieme grafische effecten te produceren.
CSS3 heeft veel functies, maar sommige zijn absoluut noodzakelijk om te leren als je Photoshop-achtige effecten gaat reproduceren. Ik noem dit mijn 'elektrische gereedschappen'. Ze omvatten het volgende:
Elk van deze functies kan helpen bij het vervangen van enkele afbeeldingen die u in het verleden in Photostop hebt gemaakt. Door dit te doen, maakt u uw website beter onderhoudbaar, omdat u een eigenschap kunt wijzigen door uw CSS-bestand te wijzigen in plaats van een afbeelding in Photoshop te bewerken. U laadt ook uw website sneller omdat afbeeldingen veel bandbreedte gebruiken. Laten we deze functies één voor één verkennen.
Browserondersteuning:
Inmiddels heb je waarschijnlijk een miljoen keer gehoord over grensradius. Het is super gemakkelijk te gebruiken en wordt ondersteund in alle moderne browsers. Als je dat nog niet weet, is grensradius een manier om afgeronde hoeken te maken met CSS-geen afbeeldingen nodig! Laten we de syntaxis bekijken.
-webkit-border-radius: grootte; -moz-border-radius: grootte; grensradius: grootte;
Er zijn drie syntaxes die u moet gebruiken. De eerste is voor Webkit-gebaseerde browsers, zoals Safari en Chrome; de tweede is voor Mozilla-gebaseerde browsers, zoals Firefox; en de laatste is de un-prefixversie, voor browsers die dit ondersteunen, inclusief IE9, Opera en Safari 5.
Als u een randstraal van 10 pixels op een div toepast, wordt het volgende effect gemaakt:
OK, makkelijk! Laten we verder gaan met het volgende elektrische gereedschap.
Browserondersteuning:
Boxschaduwen zijn een andere goed ondersteunde functie. Hun syntaxis ziet er als volgt uit:
-webkit-box-shadow: offset_x offset_y blur_radius kleur; -moz-box-shadow: offset_x offset_y blur_radius kleur; box-shadow: offset_x offset_y blur_radius kleur;
Nogmaals, we moeten de prefixen van de leveranciers gebruiken voor Webkit en Mozilla. De eerste en tweede parameters van de eigenschap vakschaduw zijn de verschuivingsposities van de linker en bovenste coördinaten van het element. Door een positieve waarde voor deze eigenschappen in te stellen, verplaatst u de schaduw naar rechts en omlaag van het element, en als u een negatieve waarde instelt, verplaatst u de schaduw naar links en omhoog van het element. De blur_radius is de hoeveelheid vervaging die u aan uw schaduw wilt toevoegen (hoe hard of donzig u deze wilt hebben). Ten slotte is de laatste parameter de kleur die u wilt dat de schaduw is. Het toevoegen van een schaduw aan onze eerder gebruikte afgeronde div zal een leuk uitziend effect creëren.
-webkit-box-shadow: 5px 5px 10px # 555; -moz-box-shadow: 5px 5px 10px # 555; vakschaduw: 5px 5px 10px # 555;
Een ander leuk kenmerk van CSS-vakschaduwen is het inset-sleutelwoord. Wanneer het inset-sleutelwoord aanwezig is, wordt de schaduw in het vak weergegeven in plaats van buiten. Dit kan een mooie depressieve look creëren, vooral voor knoppen. Dit is hoe onze div eruit zou zien met een inzetschaduw.
-webkit-box-shadow: 0 0 20px # 333 inzet; -moz-box-shadow: 0 0 20px # 333 inzet; box-shadow: 0 0 20px # 333 inzet;
Het laatste kenmerk van doosschaduwen dat het vermelden waard is, is de mogelijkheid om meerdere schaduwen op hetzelfde element te hebben. Dit is erg handig en kan voorkomen dat er extra opmaak in je HTML staat om een extra schaduw toe te passen. Het enige wat u hoeft te doen om meerdere schaduwen te maken, scheidt ze van elkaar met komma's. Hier is een voorbeeld:
-webkit-vak-schaduw: 0 0 20px # 333 inzet, 20px 15px 30px geel, -20px 15px 30px limoen, -20px -15px 30px blauw, 20px -15px 30px rood; -moz-doos-schaduw: 0 0 20px # 333 inzet, 20px 15px 30px geel, -20px 15px 30px limoen, -20px -15px 30px blauw, 20px -15px 30px rood; vakschaduw: 0 0 20px # 333 inzet, 20px 15px 30px geel, -20px 15px 30px limoen, -20px -15px 30px blauw, 20px -15px 30px rood;
Browserondersteuning:
Tekstschaduwen lijken op doosschaduwen, behalve dat ze schaduwen zijn voor tekst in plaats van het hele element. Gelukkig is er geen leveranciersprefix nodig voor tekstschaduw.
text-shadow: offset_x offset_y blur_radius kleur;
De opties voor tekstschaduw zijn hetzelfde als voor vakschaduw, behalve dat er geen inzetschaduwondersteuning is. Hier is een demo die anderszins onzichtbare tekst van de pagina laat komen.
kleur: #fff / * tekstkleur naar wit * / tekst-schaduw: 0 0 50px # 333;
Dit creëert het volgende effect:
Net als bij doosschaduwen, is het mogelijk om meerdere tekstschaduwen te hebben door ze te scheiden met komma's. Hier is een voorbeeld dat een vlammend teksteffect creëert.
tekstschaduw: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Tekstschaduwen kunnen geweldige effecten creëren en kunnen andere effecten heel goed aanvullen.
Browserondersteuning:
Verlopen zijn een van de krachtigste functies die voor u beschikbaar zijn als u deze geweldige effecten wilt maken. Hoewel de volledige browserondersteuning nog steeds niet helemaal aanwezig is, kunt u back-uptypen altijd zonder ondersteuning opgeven voor browsers. Let op: websites hoeven niet in elke browser hetzelfde te zijn. Er zijn twee soorten gradiënten die u kunt maken: lineaire gradiënten en radiale verlopen. Zoals je zou verwachten, bewegen lineaire gradiënten langs een rechte lijn en radiale verlopen gaan rond in een cirkel. Verlopen kunnen overal worden gebruikt waar je in het verleden misschien een afbeelding hebt gebruikt, zoals voor de achtergrond, grensafbeelding of lijstkogels.
Helaas zijn er voor webontwikkelaars twee verschillende syntaxis: één voor Mozilla en één voor Webkit.
Safari en Chrome gebruiken beide de Webkit-renderingengine, dus gebruiken ze altijd dezelfde syntaxis. Hun gradiëntsyntaxis is vrij eenvoudig:
-webkit-gradiënt (, [, ]?, [, ]? [, ] *)
Webkit gebruikt dezelfde syntaxis voor zowel lineaire als radiale verlopen. Verander gewoon de type parameter om tussen ze te schakelen.
Firefox gebruikt afzonderlijke syntaxis voor lineaire en radiale verlopen, die beide sterk verschillen van hun Webkit-tegenhangers.
-moz-linear-gradient ([|| ,]? , [, ] *) -moz-radial-gradient ([ || ,]? [ || ,]? , [, ] *)
Laten we deze syntaxen afzonderlijk bekijken.
Voor de eenvoud is hier de syntaxis van een Webkit alleen voor lineaire gradiënten.
-webkit-verloop (lineair, start_x start_y, end_x end_y, stop, stop ...)
De syntaxis van Firefox ziet er als volgt uit.
-moz-linear-gradient (hoek start_x start_y, stop, stop ...)
In de Webkit-syntaxis geven de parameters start_x en start_y de beginpositie van het verloop en end_x en end_y de eindpositie van het verloop op. U kunt elk van de standaard CSS-dimensiewaarden gebruiken, inclusief percentages, evenals de zoekwoorden links, boven, onder, rechts en midden als waarden voor deze positieparameters. Met tussenstops kunt u specifieke kleuren opgeven die op specifieke punten langs het verloop moeten worden gebruikt. U kunt zoveel kleurstops maken als u wilt, maar u moet er ten minste twee hebben: een begin- en eindkleur. Voor extra kleurstops kunt u de functie color-stop () gebruiken met een positie als een percentage of een decimaal tussen 0 en 1, evenals een kleur. Bijvoorbeeld: kleurstop (50%, zwart) zou halverwege het verloop een zwarte kleurstop maken. In plaats van 0% en 100% te schrijven voor de begin- en eindkleuren, bestaan de handige functies van () en tot (). Het enige dat u hieraan hoeft te geven, is de kleur.
De syntaxis van Firefox is veel minder rechttoe rechtaan en heeft vele manieren om hetzelfde doel te bereiken. Het enige dat statisch is aan de syntaxis zijn de kleurstops, die slechts een kleur zijn, gevolgd door een positie als een percentage. Voor de begin- en eindposities kunt u 0% en 100% weglaten en als u de positie van een van de andere kleurstops verlaat, worden ze gelijkmatig over het verloop verdeeld. Anders dan de Webkit-syntaxis, heeft de syntaxis van Firefox geen eindpositie, alleen een beginpositie en een hoek. Het verloop loopt uit vanaf de startpositie bij de opgegeven hoek. Als je de hoek verlaat, loopt deze loodrecht vanaf dat punt uit. Als u het startpunt helemaal weglaat, loopt het verloop van boven naar beneden. Deze syntaxis is nogal verwarrend en een beetje minder flexibel dan de eenvoudige syntaxis van Webkit, dus het is het beste om het voorbeeld te leren.
Hier is een eenvoudig voorbeeld van CSS-gradiënten in actie. Dit verloop gaat van de linkerbovenhoek naar de linkerbenedenhoek (met andere woorden, van boven naar beneden) en van rood naar wit.
-webkit-gradiënt (lineair, links boven, links onderaan, van (rood), naar (wit)); -moz-lineair verloop (rood, wit)
Als dit wordt ingesteld als de achtergrondeigenschap van een div, krijgen we het volgende resultaat:
Door een kleurstop toe te voegen en de hoek van het verloop te wijzigen, kunnen we een ander effect krijgen.
-webkit-gradiënt (lineair, links boven, rechts onderaan, vanaf (rood), kleur-stop (50%, wit), naar (rood)); -moz-lineair verloop (links boven, rood, wit, rood);
Hier is de syntaxis voor radiale verlopen in Webkit.
-webkit-gradient (radiaal, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x outer_circle_center_y, outer_circle_radius, stop, stop ...)
De syntaxis van Firefox ziet er als volgt uit.
-moz-radial-gradient (center_x center_y, shape size, stop, stop ...)
De syntaxis van Webkit is iets gecompliceerder dan de syntaxis van de lineaire gradiënt, maar dezelfde principes zijn nog steeds van toepassing. Radiale verlopen in Webkit hebben twee cirkels: een startcirkel en een eindcirkel. U specificeert de middelste X- en Y-posities voor elk van deze cirkels samen met hun stralen. Tot slot geeft u op hoe de kleur stopt op dezelfde manier als voor lineaire hellingen.
De Firefox-syntaxis voor radiale verlopen is vergelijkbaar met de syntaxis voor lineaire verlopen omdat alle onderdelen behalve de kleurstops kunnen worden weggelaten. U kunt de middelste X- en Y-posities van het verloop opgeven, net zoals de coördinaten van de binnenste cirkel in de Webkit-syntaxis, maar er is geen buitenste cirkel in Firefox. In plaats daarvan kunt u een vorm en grootte van het verloop opgeven. De vorm kan een cirkel of een ellips zijn, waarvan de laatste momenteel niet in Webkit kan worden gemaakt. De grootte accepteert veel verschillende trefwoorden, maar geen pixelgrootte zoals u misschien had verwacht. Je kunt lezen wat elk van deze constanten doet in het Mozilla Developer Center. Voor deze zelfstudie gebruiken we alleen de standaardwaarden. Nogmaals, als je het middelpunt X en Y uitzet, worden ze verondersteld het middelpunt te zijn van het object dat je met een verloop vult. Als u de vorm en grootte weglaat, wordt ervan uitgegaan dat het verloop een cirkel is die de hele doos vult.
-webkit-gradiënt (radiaal, midden midden, 0, midden midden, 50, van (wit), tot (rood)); -moz-radiale gradiënt (wit, rood)
Als we dit verloop toepassen op de achtergrond van een div, is dit wat we zullen krijgen.
Browserondersteuning:
Met meerdere achtergronden kunt u eenvoudig complexe effecten in CSS maken zonder dat u extra markeringen in uw HTML hoeft te maken. Ondersteuning hiervoor betekent dat elementen meerdere gradiënten en afbeeldingsachtergronden kunnen hebben, samen met de standaard achtergrondkleur. Er is geen verschil in de syntaxis van meerdere achtergronden van afzonderlijke achtergronden - alleen een komma scheidt ze en u bent klaar!
Hier is een voorbeeld van een div met een gradient-achtergrond en een mooi gestructureerd effect met behulp van een afbeelding:
achtergrond: url (noise.png), -webkit-gradiënt (lineair, linker boven, links onder, van (# 999), tot (# 333)); achtergrond: url (noise.png), -moz-linear-gradient (# 999, # 333);
We moeten het twee keer declareren omdat, zoals we hebben geleerd, er een andere gradiëntsyntaxis is voor elke browser. Dit creëert het volgende effect:
Nu we vijf geweldige elektrische gereedschappen tot onze beschikking hebben, laten we ze combineren om een nog geweldig effect te produceren.
Er zijn zoveel verschillende soorten knoppen die u kunt kiezen om te ontwerpen. Om simpel te zijn, laten we iets emuleren dat al bestaat - de Mac OS X-knopstijl.
We beginnen met onze HTML-code voor deze demo. Het is echt heel simpel, slechts twee DIV's en wat tekst.
Knop
Nu beginnen we met onze standaard CSS. Laten we eerst het paneel stijlen.
.paneel background: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (#bbbcbb), naar (# 959695)); achtergrond: -moz-linear-gradient (#bbbcbb, # 959695); achtergrondkleur: # b7b9b7; breedte: 100 px;
Het paneel is gewoon een mooie container voor onze knop. Het heeft een verloop van boven naar beneden tussen twee mooie grijze kleuren. Voor browsers die geen gradiënten ondersteunen, wordt een fallback-achtergrondkleur gegeven.
Laten we nu naar de CSS voor de knop zelf kijken.
.knop display: inline-block; marge: 20px; opvulling: 3px 6px; font-family: 'Lucida Grande', Arial, sans-serif; lettergrootte: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; grens: 1px vast rgba (0, 0, 0, 0,6); achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (#fbfcfb), tot (# 9d9e9d)); achtergrond: -moz-linear-gradient (#fbfcfb, # 9d9e9d); achtergrondkleur: # c0c2c0; text-shadow: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -webkit-user-select: geen; -moz-user-select: none; cursor: standaard;
Er is hier een behoorlijke hoeveelheid code, die alle elektrische gereedschappen gebruikt die ik hierboven heb beschreven, behalve voor meerdere achtergronden. Deze code bevat verschillende delen, die we een voor een zullen volgen. De eerste twee regels zijn slechts enkele eenvoudige lay-outinformatie. De knop instellen om weer te geven: inline-blok zorgt ervoor dat het automatisch wordt uitgebreid tot de inhoud, ongeacht de tekst die u in de knop plaatst. Het volgende gedeelte geeft wat lettertype-informatie aan de knop. Eindelijk, in het derde deel kunnen we ons eerste elektrische gereedschap gebruiken: grensradius. In het geval van onze mooie knop geven we het een mooie straal van 3px. Vervolgens geven we de knop een rand. Merk op dat we hier rgba als een kleur gebruiken. Hierdoor kunnen we de kleur gedeeltelijk transparant maken zoals we hier doen, waardoor een mooie grijsachtige kleur ontstaat. In het volgende gedeelte van de code stellen we de achtergrond van de knop in. We geven het een gradient-achtergrond en een effen kleur voor fallback in browsers die nog geen gradiënten ondersteunen. Vervolgens gebruiken we tekstschaduw om de tekst enigszins in de knop gegraveerd te laten lijken. Opnieuw gebruiken we hier rgba om de tekstschaduw een gedeeltelijk transparant wit te geven. Het pen-ultieme gedeelte van code creëert een vakschaduw. Nu ziet dit er niet echt uit als een schaduw, het ziet er eigenlijk als een tweede rand uit, maar het geeft een mooi hoogtepunt aan de onderkant van de knop om het er in de achtergrond uit te laten zien en complimenteert de randkleur. Dit is een handige truc om te weten of je ooit wilt dat iets eruit ziet alsof het meerdere randen heeft - ik gebruik het veel. Ten slotte is de laatste sectie CSS-code een leuke truc die tekstselectie voorkomt in Webkit-gebaseerde browsers en Firefox, en de cursor instelt op de standaardpijl in plaats van de cursor voor tekstselectie.
Tot nu toe laat deze code onze knop er zo uitzien:
OK, dus nog niet zo erg! Laten we verder gaan met de depressieve blik van de knop.
.knop: actief achtergrond: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, zwart 0px 1px 3px inzet, rgba (0, 0, 0, 0.4) 0px -5px 12px inzet; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, zwart 0px 1px 3px inzet, rgba (0, 0, 0, 0.4) 0px -5px 12px inzet; box-shadow: rgba (255, 255, 255, 0.4) 0 1px, zwart 0px 1px 3px inzet, rgba (0, 0, 0, 0.4) 0px -5px 12px inzet; text-shadow: rgba (255, 255, 255, 0.3) 0px 1px;
Wanneer de knop wordt ingedrukt, veranderen we een aantal dingen. Eerst stellen we de achtergrond in op een effen kleur en verwijderen we het verloop dat we hadden ingesteld als ijsschotje. Dit komt omdat we de depressieve look met een doosschaduw zullen creëren in plaats van een verloop. Het volgende dat we doen, is die schaduw - of liever meerdere schaduwen. De eerste schaduw in de lijst is dezelfde die we in de normale staat hadden: de markering onderaan de knop. De tweede en derde schaduw zijn degenen die ervoor zorgen dat onze knop ingedrukt blijft. De eerste hiervan is een zwarte inzetschaduw die is neergezet vanaf de top 1 pixel en 3 pixels vervaging heeft - een vrij donkere schaduw. De laatste schaduw is ook zwart maar een enigszins transparant zwart dat is ingesteld vanaf de onderste 5 pixels met 12 pixels vervaging. Dit zorgt voor de donkere weergave aan de onderkant van de knop wanneer deze wordt ingedrukt. Het laatste wat we moeten doen als deze knop wordt ingedrukt, vermindert gewoon de dekking van de tekstschaduw met één inkeping, zodat deze niet opvalt als een pijnlijke duim.
Dat is het! Onze knop is voltooid. Dit is wat de ingedrukte versie eruitziet:
Het vervangen van afbeeldingen met CSS3 heeft veel voordelen. Het maakt uw taak als webontwikkelaar eenvoudiger omdat u Photoshop niet hoeft te openen telkens wanneer u uw gebruikersinterface moet wijzigen. Het zorgt ervoor dat uw website of webapplicatie sneller wordt geladen omdat het niet zo veel zware afbeeldingen hoeft te downloaden. En het stelt u in staat een meer rijke, interactieve en wenselijke ervaring voor gebruikers te creëren, zodat ze steeds weer terugkomen voor meer.
Ik zal je verlaten met een beetje inspiratie van dingen die je zou kunnen doen met CSS3. Dit zijn niet noodzakelijkerwijs de meest echte voorbeelden, maar laten zien wat mogelijk is met een beetje werk.
De eerste demo, gemaakt door Jeff Batterton, is een iPhone gemaakt met pure CSS3 - geen afbeeldingen gebruikt. Het is zeer indrukwekkend, gebruikmakend van CSS-gradiënten, tekstschaduwen, doosschaduwen, overgangen en transformaties. Helaas ziet het er momenteel alleen correct uit in Webkit-gebaseerde browsers zoals Safari en Chrome. Het kan uw taak zijn om de demo in Firefox te laten werken!
Een andere demo, misschien nog verbazingwekkender, is geschreven door Louis Harboe. Het is een reproductie van enkele van de iOS-iconen in pure CSS, en zeer realistische recreaties daarbij! Deze demo werkt ook alleen in Webkit-gebaseerde browsers. Als je meer wilt weten over hoe sommige van deze iconen werden gereproduceerd, kun je naar het blog van Louis Harboe gaan, waar hij het proces beschrijft.
Ik hoop dat je dit artikel leuk vond! Voel je vrij om me bij te praten op Twitter of laat je gedachten achter in de reacties!
Accentsconagua