Share
Met de komst van ultra high definition schermen (denk aan Retina) zijn er nieuwe ontwerpuitdagingen ontstaan; we moeten manieren vinden om alle apparaten te ontvangen. Neem bijvoorbeeld pictogrammen weer. We kunnen erop leunen dat afbeeldingen worden weergegeven met 200% of met SVG, maar het is ook mogelijk om een verrassende hoeveelheid afbeeldingen te bouwen met alleen CSS. Laten we een uitgebreid pictogram bouwen met slechts één HTML-element.
Het grootste probleem met afzonderlijke elementen ligt in het feit dat we ons beperken tot het aantal "bouwstenen" dat we kunnen gebruiken. Gelukkig zijn er enkele trucjes:
Pseudo-elementen (ook wel gegenereerde inhoud genoemd) bestaan niet in de documentmarkering zelf (de DOM) maar zijn gemaakt door de CSS. Ze bieden u de mogelijkheid om aan uw standaardelement twee andere toe te voegen die (min of meer) dezelfde eigenschappen kunnen gebruiken.
Neem deze markup bijvoorbeeld:
Pas dan de volgende stijlregels toe:
.vierkant positie: relatief; achtergrond: blauw; breedte: 50px; hoogte: 50px; .square :: before position: absolute; links: -50px; inhoud: "; height: 50px; width: 50px; display: block; background: green; .square :: after position: absolute; left: 50px; content:"; hoogte: 50px; breedte: 50px; weergave: blok; achtergrond: rood;
Voor deze oefening gebruiken we pixelwaarden, hoewel het vaak raadzaam is om flexibele meeteenheden zoals ems te gebruiken.
Notitie: De dubbele dubbele punt (::), in tegenstelling tot een enkele dubbele punt, is de CSS3-syntaxis. Het onderscheidt pseudo elementen van pseudo selectors, zoals : hover.
We hebben onszelf nog twee bouwstenen geschonken, maar het is de moeite waard om op te merken dat sommige CSS3-eigenschappen niet werken met gegenereerde inhoud:
Een andere dingen om te weten is dat gegenereerde inhoud bovenaan het standaardelement wordt weergegeven, tenzij ze dat hebben z-index: -1. Browsers interpreteren ze alsof ze zich bevinden binnen het standaardelement. Als we de pseudo-elementen met werkelijke markup zouden representeren, zou de code als volgt zijn:
.vierkant achtergrond: blauw; breedte: 50px; hoogte: 50px; positie: relatief; .square .voor left: -50px; positie: absoluut; inhoud: "; height: 50px; width: 50px; display: block; background: green; .square .after content:"; hoogte: 50px; breedte: 50px; achtergrond: rood; positie: absoluut; links: 50px;
Als alleen pseudo-elementen je niet genoeg 'blokken' geven om je pictogram te bouwen, kun je ook vakschaduwen gebruiken. Met deze techniek kun je zoveel "klonen" maken als je wilt. Laten we een voorbeeld bekijken met een cirkel:
.cirkel positie: relatief; achtergrond: blauw; breedte: 50px; hoogte: 50px; border-radius: 50%; vakschaduw: -110 px 0 0 -20px paars, -60px 0 0 -10px rood, 80px 0 0 10px groen, 180px 0 0 20px oranje;
Zoals u kunt zien, kunt u met de doosschaduwen de oorspronkelijke vorm verkleinen of vergroten en plaatsen waar u maar wilt.
Het pand detail vakschaduw: 80px 5px 1px 10px groen kan als volgt worden opgedeeld:
Notitie: De eerste gedefinieerde schaduw verschijnt altijd boven de volgende schaduwen.
De inzet waarde biedt ook verschillende mogelijkheden:
.bal positie: relatief; achtergrond: blauw; breedte: 50px; hoogte: 50px; grensradius: 50%; vakschaduw: inzet 20px 0 0 -10px geel, inzet -20px 0 0 -10px rood;
Voor diegenen die geïnteresseerd zijn in Internet Explorer, is het vermeldenswaard dat CSS-gradiënten alleen compatibel zijn met IE10. Voor andere browsers onthoudt u de voorvoegsels van de juiste leveranciers.
Net als schaduwen kunnen gradiënten worden gecombineerd en onafhankelijk worden geplaatst. Het gebruik van verlopen om vormen te maken is iets ingewikkelder dan de vorige eigenschappen, dus laten we ons concentreren op een "eenvoudig" voorbeeld.
In dit voorbeeld maken we vier verschillende cirkels met radiale verlopen en distribueren we ze binnen het bovenliggende element.
.achtergrond achtergrond: radiale gradiënt (midden, ellips, rgba (0, 0, 0, 1) 10%, transparant 10%, transparant 100%), radiale gradiënt (midden, ellips, rgba (0, 0, 0, 1) 30%, transparant 32%, transparant 100%), radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 50%, transparant 52%, transparant 100%), radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 60%, transparant 62%, transparant 100%); achtergrondkleur: rood; achtergrondherhaling: geen herhaling; achtergrondpositie: 0px 0px, 50px 0px, 50px 50px, 0px 50px; achtergrondgrootte: 50 px 50 px; breedte: 100 px; hoogte: 100 px; positie: relatief;
Om deze demo te begrijpen, moet je je een raster voorstellen aan het element. Elke cel van het raster zou een ander verloop hebben. In dit geval zijn cellen 50px bij 50px (achtergrondgrootte: 50 px 50 px;). Ik heb ze opzettelijk verspreid in het element, maar houd er rekening mee dat ze ook over elkaar heen kunnen worden geplaatst. Elke cel kan op een afzonderlijke x- en y-as worden geplaatst, met oorsprong in de linkerbovenhoek van het basiselement (achtergrondpositie: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).
De eigenschap Verloop in detail: achtergrond: radiale gradiënt (midden, ellipsdeksel, rgba (0, 0, 0, 1)
Om te helpen bij het maken van CSS-gradiënten, kunt u een generator zoals de Gradient Editor van Collorzilla gebruiken.
Nu we hebben gezien hoe we een maximum aan bouwstenen van één div kunnen maken, laten we oefenen!
Dit is wat we zullen creëren met slechts één div (bonus aan het einde!):
Hier komt de enige HTML-regel van deze tutorial:
Om ons pictogram eenvoudig te vergroten, zullen we flexibele maateenheden gebruiken; em en%. Dankzij dit kunt u het formaat wijzigen naar wens, eenvoudig door de lettergrootte op het element aan te passen. Ik ontwikkel dit in Chrome, ik laat je de prefixen van de leverancier wijzigen, afhankelijk van je browser.
We beginnen met het geven van vorm en kleur aan het lichaam van onze lieveheersbeestje:
.lieveheersbeestje positie: relatief; lettertypegrootte: 60px; breedte: 1,8em; hoogte: 2em; grensradius: 50%; achtergrondkleur: # E11;
Laten we nu de punten op het lichaam toepassen met de eigenschap voor radiale gradiënt.
.lieveheersbeestje positie: relatief; lettertypegrootte: 60px; breedte: 1,8em; hoogte: 2em; grensradius: 50%; achtergrond: -webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 30%, transparant 33%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 50%, transparant 55%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 50%, transparant 55%, transparant 100%) , -webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 40%, transparant 43%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0 , 0, 1) 40%, transparant 43%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 45%, transparant 50%, transparant 100%), -webkit-radiale gradiënt (midden, ellips, rgba (0, 0, 0, 1) 45%, transparant 50%, transparant 100%); achtergrondkleur: # E11; achtergrondherhaling: geen herhaling; achtergrond-positie: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; achtergrondgrootte: 0.5em 0.5em;
Uitstekend werk - we zijn nu klaar met het lichaam.
Dit deel is het snelst. We tekenen een halve cirkel zwart en plaatsen deze bovenop het lichaam. Hiervoor gebruiken we het pseudo-element ::voor.
.lieveheersbeestje :: voor inhoud: "; positie: absoluut; weergave: blok; hoogte: 0.5em; breedte: 1.2em; bovenkant: -0.24em; achtergrond: zwart; links: 0.3em; grensradius: 50%; 50% 0% 0% / 100% 100% 0 0;
Hier zullen we ogen creëren met behulp van het pseudo-element ::na en de eigenschap box shadow. We beginnen met het creëren van onze basiscirkel (de pupil) en dan "klonen" we dit element om het wit van het oog, de omtrek en het andere oog te creëren.
.lieveheersbeestje :: na inhoud: "; positie: absoluut; weergave: blok; hoogte: 0,1em; breedte: 0,1em; achtergrond: zwart; bovenkant: -0,1em; links: 0,5em; randradius: 50%; -schaduw: 0 0 0 0.1em wit, 0em 0 0 0.13em zwart, 0.7em 0 0 0 zwart, 0.7em 0 0 0.1em wit, 0.7em 0 0 0.13em zwart;
Je moet denken "we hebben een overgebleven element". Maak je geen zorgen, we zullen dezelfde doosschaduw gebruiken die voor ogen wordt gebruikt.
.lieveheersbeestje :: na inhoud: "; positie: absoluut; weergave: blok; hoogte: 0,1em; breedte: 0,1em; achtergrond: zwart; bovenkant: -0,1em; links: 0,5em; randradius: 50%; -schaduw: 0 0 0 0.1em wit, 0em 0 0 0.13em zwart, 0.7em 0 0 0 zwart, 0.7em 0 0 0.1em wit, 0.7em 0 0 0.13em zwart, 1.2em 0.5em 0 0.02em zwart, 1.35 em 1.1em 0 0.02em zwart, 1.2em 1.65em 0 0.02em zwart, -0.5em 0.5em 0 0.02em zwart, -0.65em 1.1em 0 0.02em zwart, -0.5em 1.65em 0 0.02em zwart;
Ons lieveheersbeestje is eindelijk klaar!
We zijn eigenlijk niet helemaal klaar. Ik heb je een bonus beloofd en hier is het. Animatie is een voordeel dat CSS heeft boven SVG; laten we ons lieveheersbeestje op mouseover animeren. Hier is de bonus CSS-code:
@ -webkit-keyframes lieveheersbeestje 0% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% achtergrond-positie: 0,66em 0,8em, 0,67em 0,8em, 0,66em 0,8em, 0,67em 0,8em, 0,66em 0,8em, 0,66em 0,8em, 0,66em 0,8em; 100% achtergrond-positie: 0,66em 0,2em, 0,3em 0,6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: ladybug 1s;
We beginnen met het definiëren van enkele keyframes die we noemen lieveheersbeestje. Vervolgens activeren we die keyframes in actie in de hover-status van ons pictogram. De keyframes veranderen elk de achtergrondpositie van de vlekken van onze lieveheersbeestje
Eindelijk, hier is de volledige CSS-code:
.lieveheersbeestje positie: relatief; lettertypegrootte: 60px; breedte: 1,8em; hoogte: 2em; grensradius: 50%; achtergrond: -webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 30%, transparant 33%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 50%, transparant 55%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 50%, transparant 55%, transparant 100%) , -webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 40%, transparant 43%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0 , 0, 1) 40%, transparant 43%, transparant 100%), - webkit-radiaal-gradiënt (midden, ellips, rgba (0, 0, 0, 1) 45%, transparant 50%, transparant 100%), -webkit-radiale gradiënt (midden, ellips, rgba (0, 0, 0, 1) 45%, transparant 50%, transparant 100%); achtergrondkleur: # E11; achtergrondherhaling: geen herhaling; achtergrond-positie: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; achtergrondgrootte: 0.5em 0.5em; .ladybug: before content: "; position: absolute; display: block; height: 0.5em; width: 1.2em; top: -0.24em; background: black; left: 0.3em; border-radius: 50% 50 % 0% 0% / 100% 100% 0 0; .ladybug :: after content: "; positie: absoluut; weergave: blok; hoogte: 0,1em; breedte: 0,1em; achtergrond: zwart; top: -0.1em; links: 0,5em; grensradius: 50%; vakschaduw: 0 0 0 0.1em wit, 0em 0 0 0.13em zwart, 0.7em 0 0 0 zwart, 0.7em 0 0 0.1em wit, 0.7em 0 0 0.13em zwart, 1.2em 0.5em 0 0.02em zwart, 1.35em 1.1em 0 0.02em zwart, 1.2em 1.65em 0 0.02em zwart, -0.5em 0.5em 0 0.02em zwart, -0.65em 1.1em 0 0.02em zwart, -0.5em 1.65em 0 0.02em zwart; @ -webkit-keyframes lieveheersbeestje 0% background-position: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% achtergrond-positie: 0,66em 0,8em, 0,67em 0,8em, 0,66em 0,8em, 0,67em 0,8em, 0,66em 0,8em, 0,66em 0,8em, 0,66em 0,8em; 100% achtergrond-positie: 0,66em 0,2em, 0,3em 0,6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: ladybug 1s;
Via deze tutorial hoop ik dat ik je het potentieel van CSS heb getoond, en wat mogelijk is met een enkel HTML-element. Het is altijd verstandig om browserondersteuning te overwegen voor de CSS-eigenschappen die in deze zelfstudie worden besproken, om ervoor te zorgen dat ze netjes worden afgebroken.
Als u andere pictogrammen wilt zien die met een enkel element zijn gemaakt, nodig ik u uit om mijn website one-div.com te bezoeken. Bedankt voor het lezen!
Accentsconagua