Het tekenen van Afbeeldingen met CSS Gradients

0
21

Wat ik bedoel met “CSS beelden” is een van afbeeldingen die zijn gemaakt met behulp van alleen HTML-elementen en CSS. Ze kijken alsof ze SVGs getekend in Adobe Illustrator, maar ze werden gemaakt in de browser. Sommige technieken die ik heb gebruikt zijn knutselen met border radius, box schaduwen, en soms clip-pad. Je kunt een heleboel van grote voorbeelden als u zoeken dagelijks css-afbeeldingen” op CodePen. Ik trok er zelf een paar, waaronder deze Infinity Gauntlet, maar in een element met alleen achtergrond en minimaal gebruik van andere eigenschappen.

Laten we een kijkje nemen naar hoe kunt u CSS-afbeeldingen die manier jezelf.

De Methode

Inzicht in de steno-achtergrond-syntaxis als hoe CSS gradients werk is nagenoeg alles wat je nodig hebt om te tekenen alles in één element. Als een beoordeling, de argumenten zijn als volgt:

achtergrond: <‘background-color’> || <afbeelding> || <positie> [ / <formaat> ]? || <repeat> || <bijlage> || <herkomst> || <videoclip>;

Ze kan zich in orde, behalve dat er sprake moet zijn van een / tussen de positie en de grootte. We moeten die twee argumenten in die volgorde, anders krijgen we onverwachte resultaten. Niet al deze moeten worden opgenomen, en voor dit doel gebruiken we niet het gebruik van de kleur, herhaal, bijlage, afkomst, of clip argumenten. Dit laat ons met afbeelding, grootte en positie. Sinds achtergronden herhaal standaard, echter, moeten we background-repeat: no-repeat; rechts onder van alles op de achtergrond (als bepaalde achtergronden te moeten herhalen, kunnen we gebruik maken van herhalende-linear-gradient() en herhalen-radiaal verloop()). In dat geval is het skelet CSS zal dit:

.afbeelding {
achtergrond: <beeld> <position> / <formaat>;
background-repeat: no-repeat;
}

We kunnen zelfs gebruik maken van meerdere sets achtergrond argumenten! Daarom kunnen wij stack en scheid ze van elkaar met komma ‘ s, zoals deze:

.afbeelding {
achtergrond:
<image> <position> / <formaat>,
<image> <position> / <formaat>,
<image> <position> / <formaat>;
background-repeat: no-repeat;
}

De structuur is de basis van hoe we er zullen tekenen beelden—één regel per vorm. Houd in gedachten dat de rendering van de bestelling is het tegenovergestelde van hoe het absoluut – of vaste-positie elementen worden besteld. De eerste zal verschijnen op de top, in plaats van aan de onderkant. In andere woorden, de cirkels (radiale verlopen) hieronder zou worden gemaakt van onder naar boven (blauw aan de onderkant, rood aan de bovenkant).

.kringen {
achtergrond:
radiaal verloop(7em 7em bij 35% 35%, rood 50%, transparant 50%),
radiaal verloop(7em 7em op 50% 50%, goud 50%, transparant 50%),
radiaal verloop(7em 7em bij 65% 65%, blauw, 50%, transparant 50%);
background-repeat: no-repeat;
width: 240px;
hoogte: 240px;
}

Tekening

We gebruiken Sass (SCSS) tekenen van deze beelden, zodat we kunnen gebruik maken van variabelen voor een kleurenpalet. Dat zal de code korter, makkelijker te lezen en te wijzigen donkere of lichtere varianten van kleuren. We konden gebruik maken van variabelen in de normale CSS in plaats en vergeet Sass, maar door Internet Explorer is het ontbreken van ondersteuning, let ‘ s stick met Sass. Om uit te leggen hoe dit werkt, zullen we experimenteren met vormen met behulp van lineaire en radiale verlopen.

Het opzetten van een Kleurenpalet

Ons assortiment zal bestaan uit RGB-of HSL-kleuren. Ik zal later uitleggen waarom de kleuren zijn in een van deze formaten. Voor dit voorbeeld zullen we gebruik maken van RGB.

$r: rgb(255,0,0); // hsl(0,100%,50%)
$o: rgb(255,128,0); // hsl(32,100%,50%)

Wat ik leuk vind om te doen om de code kort en makkelijk te lezen is het gebruik van een minimum van een brief voor elke kleur (bijv. $r voor rood). Als het gebruik van donkere of lichtere tinten van één kleur, voeg ik een d voor de base letter of letters voor donkere of een l voor licht. Ik zou gebruik maken van $dr voor donker rood en $lr voor licht rood. Als er een noodzaak voor meer dan twee andere kleuren, dan voeg ik een nummer op het einde aan te geven in de schaduw niveau. Bijvoorbeeld, $dr1 voor donker rood, $dr2 voor een donkerder rood, en $lr1 voor licht rood, $lr2 voor een lichter rood. Een dergelijk palet zou er als volgt uitzien (met donkere eerst, naast de normale, licht en achternaam):

$dr1: rgb(224,0,0);
$dr2: rgb(192,0,0);
$r: rgb(255,0,0);
$lr1: rgb(255,48,48);
$lr2: rgb(255,92,92);
Het instellen van de Schaal en Canvas

We gebruiken em eenheden voor de afmetingen van het beeld zodat het beeld kan gemakkelijk worden aangepast in verhouding. Sinds 1em is gelijk aan het element font grootte, elke eenheid van de afbeelding zal worden aangepast indien gewijzigd. Laten we de grootte van het lettertype van 10px en instellen van de breedte en de hoogte 24em. Eenheden van 10px is het makkelijkst te denken, want als je geestelijk do the math, krijgt u direct 240 × 240px. Dan gewoon om te zien waar de randen van het doek worden, gebruiken we een 1px grijze kader.

$r: rgb(255,0,0); // hsl(0,100%,50%)
$o: rgb(255,128,0); // hsl(32,100%,50%)

.afbeelding {
background-repeat: no-repeat;
font-size: 10px;
overzicht: 1px solid #aaa;
breedte: 24em;
hoogte: 24em;
}

Wees bewust over het gebruik van een kleiner lettertype groottes, maar browsers hebben een minimale font grootte instelling (voor toegankelijkheid redenen). Als u een lettergrootte van 4px en het minimum is 6px, het zal gedwongen worden op 6px.

Bovendien kunt u de reactiesnelheid alleen door het gebruik van calc() en viewport eenheden. Misschien kunnen we iets calc(10px + 2vmin) indien gewenst, maar laten we de stok met 10px voor nu.

Het Tekenen Van Vormen

Het leuke gedeelte begint hier. Een vierkant tekenen, dat is 8 × 8em in het centrum, wij maken gebruik van een linear-gradient() met twee dezelfde-gekleurde stopt.

.afbeelding {
achtergrond:
linear-gradient($r, $r) 50% 50% / 8em 8em;

}

Om schimmel in iets meer als een trapezium, een hoek van 60deg. Op hetzelfde moment, laten we toevoegen $T voor een transparante tot ons assortiment en plaats vervolgens zowel de haltes voor $r $T op 63% (vlak voor de hoek rechtsonder wordt afgesneden).

$T: transparent;

.afbeelding {
achtergrond:
linear-gradient(60deg,$r 63%, $T 63%) 50% 50% / 8em 8em;

}

Het instellen van beide stopt bij de dezelfde waarde maakt de schuine zijde zo helder als de anderen. Als u kijken naar het meer, hoewel, het lijkt korrelig:

Om dit te corrigeren we iets aanpassen één van de haltes (door 1% of ongeveer zo), zodat de rand is glad genoeg. Dus, laten we verandering $r 63% naar 62%.

Dit zal een probleem zijn met ronde hoeken tijdens het werken met radiale verlopen, welke we later zullen zien. Als u bekijkt deze in een andere browser dan Safari, alles ziet er geweldig uit, zelfs als de overgang naar een niet-transparante kleur plaats (bijvoorbeeld oranje). Het probleem met de overgang naar transparant in Safari is dat u zult merken een beetje zwarte voering op de schuine zijde.

Dit is omdat de transparante trefwoord in Safari is altijd zwart, transparantie, en we zien zwart als een resultaat. Ik wou dat Apple zou dit oplossen, maar dat zullen ze ook nooit. Voorlopig laten we het toevoegen van een nieuwe $redT variabele voor de rode transparantie onder $r. Schroot de $T we gebruikt voor een transparante, als we deze niet meer gebruiken.

$rT: rgba(255,0,0,0); // hsla(0,100%,50%,0)

Laten we dan vervangen transparant met $redT. Dit zorgt voor onze Safari probleem!

.afbeelding {
achtergrond:
linear-gradient(60deg,$r 62%, $rT 63%) 50% 50% / 8em 8em;

}

Als u zich afvraagt waarom we niet met hex kleuren, Internet Explorer en Rand niet ondersteunen van de #rgba en #rrggbbaa notaties (yep, hex heeft een alpha kanaal sinds eind 2016 als je nooit wist), en we willen dat dit werk als cross-browser mogelijk. Ook willen We consistent blijven met onze keuze van de kleur formaat.

Nu gaan we de vorm van verticaal naar 20% en trek een oranje cirkel van dezelfde afmetingen. Ook het toevoegen van een andere variabele voor de transparante versie. Voor de gladde rand, steek een 1% kloof tussen de vaste en transparante sinaasappels.

$oT: rgba(255,128,0,0); // hsla(32,100%,50%,0)

.afbeelding {
achtergrond:
linear-gradient(60deg,$r 62%, $rT 63%) 50% 20% / 8em 8em,
radiaal verloop(8em 8em op 50% en 80%, $o 49%, $oT 50%);

}

Om consistentie te behouden met onze lijmen, de tweede kleur de stop moet bij 50% in plaats van 100%.

Het Positioneren Van Shapes

De manier verlopen zijn gepositioneerd is gebaseerd op of het apparaat vast of een percentage. Stel we draaien zowel van de gradiënten in vierkanten en probeer ze allemaal de weg over de div horizontaal.

.afbeelding {
achtergrond:
linear-gradient($r, $r) 24em 20% / 8em 8em,
linear-gradient($o $o) 100% 80% / 8em 8em;

}

Het rode plein eindigt volledig van canvas (beschreven), en het recht kant van het oranje vierkant raakt de andere kant. Het gebruik van vaste eenheden, zoals het plaatsen van een absoluut gepositioneerde elementen of het tekenen van vormen in HTML5 canvas. Het is waar in die zin dat het punt van oorsprong is in de linkerbovenhoek. Bij het gebruik van procent en een achtergrond instellen grootte, de div krijgt “nep-vulling” van de helft van de achtergrond grootte. Op hetzelfde moment, de achtergrond van het punt van oorsprong is gecentreerd (niet te verwarren met achtergrond-oorsprong, die betrekking vak hoeken).

Nu, als we draaide deze gradiënten in radiale verlopen als cirkels en toegepast dezelfde x-posities 24em en 100%, zowel aan de andere kant gesneden in de helft. Dit is omdat het punt van oorsprong altijd in het midden als we schrijven de achtergrond:

.afbeelding {
achtergrond:
radiaal verloop(8em 8em op 24em 20%, $r 49%, $rT 50%),
radiaal verloop(8em 8em op 100% 80%, $o 49%, $oT 50%);

}

Als we herschreef de achtergrond, zodat de positie en de grootte van de gradiënt en gebruikt 100% 100% in het midden, zij zal worden geplaatst, zoals de lineaire verlopen. De rode eindigt buiten, en de oranje accenten de rechter rand. De “nep-vulling” komt weer bij oranje.

.afbeelding {
achtergrond:
radiaal verloop(100% 100% in het midden, $r 49%, $rT 50%) 24em 20% / 8em 8em,
radiaal verloop(100% 100% in het midden, $o 49%, $oT 50%) 100% 80% / 8em 8em;

}

Er is niet één juiste manier om een positie te vormen, maar om het te plaatsen als een absoluut of vaste geplaatst HTML-element, gebruik van vaste eenheden. Als de behoefte aan een snelle manier om een vorm (met de positie / grootte parameters) in het dode centrum, 50% is de beste optie als de vorm van de oorsprong van de center. Gebruik 100% als het moet raak de rechter kant.

Sizing Vormen

Sizing in CSS achtergronden werkt zoals we verwachten, maar het is nog steeds beïnvloed door de aard van de eenheid die wordt gebruikt voor positie—vaste of procent. Als we onze pleinen weer en het veranderen van hun breedte en de 10em, de rode breidt uit naar rechts, en de oranje breidt zijwaarts.

.afbeelding {
achtergrond:
linear-gradient($r, $r) 12em 20% / 10em 8em,
linear-gradient($o $o) 50% 80% / 10em 8em;

}

Als we gebruik van em-eenheden op de y-positie, de vorm gaat naar beneden groeien of krimpen naar boven na het wijzigen van de hoogte. Als we een percentage, dan zal uitbreiden, zowel in vertikale richtingen.

Een moment geleden, hebben we gekeken naar twee manieren om cirkels te tekenen met radiale verlopen. De eerste manier is om de breedte en hoogte tussen het ( en op en dan is de positie na dat:

.afbeelding {
achtergrond:
radiaal verloop(8em 8em op 50% 50%, $r 49%, $rT 50%);

}

De tweede manier is om gebruik 100% 100% in het midden en geef de positie en de grootte:

.afbeelding {
achtergrond:
radiaal verloop(100% 100% 50% 50%, $r 49%, $rT 50%) 50% 50% / 8em 8em;

}

Deze methoden zowel tekenen van cirkels, maar zal resulteren in verschillende uitgangen, omdat:

  1. De eerste manier is gevestigd in de gehele div aangezien er geen echte achtergrond positie of grootte.
  2. Het geven van een echte positie en de grootte van de tweede stelt het een bounding box. Bijgevolg, zal het zich gedragen als een lineair verloop van vorm.

Stel we vervangen $rT met $o. U zult zien dat de oranje zal dekken wat wit was en of vormen onder het (als we toegevoegd) voor de eerste manier. Met de tweede manier, zult u snel merken de bounding box geopenbaard door de sinaasappel.

Bovendien, het doel van 100% 100% in plaats van met behulp van een cirkel of ellips is om de cirkel te bezetten hele bounding box. Het geeft ons volledige controle over de afmetingen. Op die manier, het zal hetzelfde blijven als u de 50% 50% positie in iets anders. Als één van de twee sleutelwoorden, de rand van de cirkel stopt op slechts ongeveer 71% van de wijze als in het midden en wordt steeds verstoord als zijn positie wordt aangepast. Bijvoorbeeld, hier is wat er gebeurt als we de x-positie op 0 voor een cirkel en ellips:

Op de lange termijn, kunt u reimagine de syntaxis als de radiale-gradient(breedte hoogte x y) of radiaal verloop(100% 100% op x-in-bounding-box y-in-bounding-box) x y / breedte hoogte. Als je de tekening gewoon een cirkel of ovaal, kunt u eenvoudiger de code met de eerste manier. Als het tekenen van een deel van een cirkel of een deel van een ring, vervolgens de tweede weg in het spel komt. Er zijn vele toepassingen die in de voorbeelden maken we volgende.

Voorbeelden

Klaar om te tekenen iets voor real nu? We lopen door drie voorbeelden stap voor stap. De eerste twee zullen worden statische—één met veel halve cirkels en de andere te maken met een aantal afgeronde rechthoeken. Het laatste voorbeeld zal kleiner zijn, maar gericht op animatie.

Statische Afbeelding

Deze parasol wordt onze eerste statische afbeelding:

We maken gebruik van een palet met rood ($r $rT), wit ($b en $wT), oranje ($o $oT), en donker oranje ($doen $doT).

$r: rgb(255,40,40);
$rT: rgba(255,40,40,0);

$w: rgb(240,240,240);
$wT: rgba(240,240,240,0);

$o: rgb(255,180,70);
$oT: rgba(255,180,70,0);

$doen: rgb(232,144,0);
$doT: rgba(232,144,0,0);

Laten we ons tekengebied van 30 × 29em.

.parasol {
// op de achtergrond om hier te gaan
background-repeat: no-repeat;
font-size: 10px;
overzicht: 1px solid #aaa;
breedte: 30em;
hoogte: 29em;
}

Boven de achtergrond herhalen, zullen we beginnen met het tekenen van de onderdelen van de parasol. Voeg eerst de hellingen die de paal (aangezien geen van beide elkaar overlappen, de van onder naar boven volgorde maakt niet uit op dit punt):

.parasol {
achtergrond:
// 1
radiaal verloop(200% 200% 100% 100%, $doen 49%, $doT 50%) 14em 0 / 1em 1em,
radiaal verloop(200% 200% 0% 100%, $o 49%, $oT 50%) 15em 0 / 1em 1em,
// 2
linear-gradient(90deg, $do 50%, $o 50%) 14em 1em / 2em 25em,
// 3
radiaal verloop(100% 200% 50% 0, $oT 0.95 em, $o 1em, $o 1.95 em, $doen 2em, $doen 2.95 em, $doT 3em) 14em 26em / 6em 3em,
// 4
radiaal verloop(200% 200% 100% 100%, $o 49%, $oT 50%) 18em 25em / 1em 1em,
radiaal verloop(200% 200% 0% 100%, $doen 49%, $doT 50%) 19em 25em / 1em 1em;

}

  1. Te trekken van elke zijde van de bovenkant van de stang, we gebruikt kwart van een cirkel die 1 × 1em. Om ze te bezetten hun bounding boxes, we gebruikt cirkels die twee keer zo groot (200% 200%) gepositioneerd aan de onderkant rechts en links op de bodem. We kunnen ook gebruik maken trefwoord paren zoals rechts of links onder, maar het is korter gebruik van de procent-equivalenten. Let op de 1% afstanden tussen de stops om te zorgen voor gladheid.
  2. Voor de lange deel, hebben we een lange rechthoek met een abrupte donker oranje tot oranje. Er is geen noodzaak voor een verwaarloosbare kleine kloof omdat we niet werken met een bocht of helling.
  3. Dit deel van de pool is een beetje lastiger te tekenen dan de anderen, want we hebben voor het handhaven van de 2em diameter. Om dit te tekenen arc, maken we gebruik van een doos van 6 × 3em, zodat er een 2em ruimte tussen de doelen die zijn ook 2em. Vervolgens gebruiken we een radiaal verloop in het midden boven, waar de stop treedt op 1em (en verspreid door 0.05 em voor gladheid).
  4. De laatste twee zijn net als de eerste, behalve dat ze zijn geplaatst aan de rechterkant van de boog, zodat ze naadloos passen. Ook de kleuren van plaats te wisselen.

Dan boven de vorige verlopen, voeg de volgende van onder naar boven te trekken van de top van de paraplu zonder de puntige uiteinden:

.parasol {
achtergrond:
radiaal verloop(100% 200% 50% 100%, $r 50%, $rT 50.25%) 50% 1.5 em / 9em 12em,
radiaal verloop(100% 200% 50% 100%, $w 50%, $wT 50.25%) 50% 1.5 em / 21em 12em,
radiaal verloop(100% 200% 50% 100%, $r 50%, $rT 50.25%) 50% 1.5 em / 30em 12em,

}

Voor het tekenen van de halve cirkels die in dit deel, hebben we gebruik gemaakt van een gradiënt grootte van 100% 200%, waardoor elke diameter passen in de achtergrond breedte maar twee keer de hoogte en in het midden aan de onderkant. Door het ordenen van onder naar boven, zodat de grootste onder en de kleinste boven op de top krijgen we de curves die we willen.

Als onze stack van hellingen groeit groter, het zal moeilijk worden na een tijdje om te achterhalen welke achtergrond of groep van achtergronden overeenstemt met welk deel van de afbeelding. Dus om het makkelijker te maken om de pin ze naar beneden, kunnen we splitsen in groepen leiden door een commentaar beschreven wat elke groep is. Nu delen we de stapel om groepen voor de top van de parasol en de paal.

.parasol {
achtergrond:
/* top */
radiaal verloop(100% 200% 50% 100%, $r 50%, $rT 50.25%) 50% 1.5 em / 9em 12em,
radiaal verloop(100% 200% 50% 100%, $w 50%, $wT 50.25%) 50% 1.5 em / 21em 12em,
radiaal verloop(100% 200% 50% 100%, $r 50%, $rT 50.25%) 50% 1.5 em / 30em 12em,

/* paal */
radiaal verloop(200% 200% 100% 100%, $doen 49%, $doT 50%) 14em 0 / 1em 1em,
radiaal verloop(200% 200% 0% 100%, $o 49%, $oT 50%) 15em 0 / 1em 1em,
linear-gradient(90deg, $do 50%, $o 50%) 14em 1em / 2em 25em,
radiaal verloop(100% 200% 50% 0, $oT 0.95 em, $o 1em, $o 1.95 em, $doen 2em, $doen 2.95 em, $doT 3em) 14em 26em / 6em 3em,
radiaal verloop(200% 200% 100% 100%, $o 49%, $oT 50%) 18em 25em / 1em 1em,
radiaal verloop(200% 200% 0% 100%, $doen 49%, $doT 50%) 19em 25em / 1em 1em;

}

Vervolgens, tussen de top en de paal, voegen we het volgende stuk van de achtergrond maken de puntige uiteinden. Voor het bepalen van de breedte van elk segment, moeten we de afstand tussen elk punt waar de rode en witte voldoen. Ze moeten optellen tot 30em.

Te beginnen met de witte en de smalste rode halve cirkels, we trekken de rode en de breedte van 9em van de witte en de breedte van 21em en deelt het resultaat door 2 te krijgen van de breedte van de twee witte segmenten (“b” punt in de figuur). Dus, het resultaat zou zijn 6em b = (21 – 9) / 2 = 6 ). Dan de middelste rode segment zou worden 9em (21 – (6 + 6) = 9). Wat hebben we nu links zijn de buitenste rode segmenten (punt ‘ a ‘ in de figuur). Aftrekken van de som van wat we nu hebben van de breedte van de grotere rode halve cirkel en verdeel die het resultaat door 2. Dat zou de waarde van het punt a: (30em – (6 + 6 + 9)) / 2 = 4.5 em.

.parasol {
achtergrond:

/* puntige uiteinden */
radiaal verloop() 0 13.5 em / 4.5 em 3em,
radiaal verloop() 4.5 em 13.5 em / 6em 3em,
radiaal verloop() 50% 13.5 em / 9em 3em,
radiaal verloop() 19.5 em 13.5 em / 6em 3em,
radiaal verloop() 25.5 em 13.5 em / 4.5 em 3em,

}

Voor het tekenen van de halve cirkels die vergelijkbaar is met hoe wij trok het bovenste deel beginnen we met de transparante tegenhanger van de kleur voor elke vorm van zodat ze lijken op de arc bruggen. We zullen ook het toevoegen van een extra 5% op elke verloop breedte (niet de achtergrond breedte van het vak), zodat elk punt wordt gevormd door de aangrenzende achtergronden niet al te scherp en dun.

.parasol {
achtergrond:

/* puntige uiteinden */
radiaal verloop(105% 200% 50% 100%, $rT 49%, $r 50%) 0 13.5 em / 4.5 em 3em,
radiaal verloop(105% 200% 50% 100%, $wT 49%, $w 50%) 4.5 em 13.5 em / 6em 3em,
radiaal verloop(105% 200% 50% 100%, $rT 49%, $r 50%) 50% 13.5 em / 9em 3em,
radiaal verloop(105% 200% 50% 100%, $wT 49%, $w 50%) 19.5 em 13.5 em / 6em 3em,
radiaal verloop(105% 200% 50% 100%, $rT 49%, $r 50%) 25.5 em 13.5 em / 4.5 em 3em,

}

Ten slotte, zult u niet langer nodig dat 1px solid #aaa overzicht. Onze parasol is compleet!

Zie de Pen Parasol door Jon Kantner (@jkantner) op CodePen.

Iets Met Afgeronde Rechthoeken

In dit volgende voorbeeld wordt een oude iPhone-model, waarbij er meer details dan de nieuwere modellen. Het ding over dit is een van de twee rechthoeken met ronde hoeken, die de buitenkant en het midden van de home-knop.

Het palet bestaat uit een zwart ($bk en $bkT) voor de home-knop van de rand, donker grijs ($dg en$dgT) voor het lichaam, grijs ($g $gT) voor de camera en speaker, licht grijs ($lg en $lgT) voor de buiten rand, blauw ($bl en $bst) voor de lens van de camera, en een heel donker paars ($p en $pT) voor het scherm.

$bk: rgb(10,10,10);
$bkT: rgba(10,10,10,0);

$dg: rgb(50,50,50);
$dgT: rgba(50,50,50,0);

$g: rgb(70,70,70);
$gT: rgba(70,70,70,0);

$lg: rgb(120,120,120);
$lgT: rgba(120,120,120,0);

$bl: rgb(20,20,120);
$bst: rgba(20,20,120,0);

$p: rgb(25,20,25);
$pT: rgba(25,20,25,0);

Laten we stellen ons op canvas 20 × 40em en gebruik hetzelfde lettertype hebben we gebruikt voor de parasol, 10px:

.iphone {
// op de achtergrond gaat hier
background-repeat: no-repeat;
font-size: 10px;
overzicht: 1px solid #aaa;
breedte: 20em;
hoogte: 40em;
}

Voordat we beginnen met het tekenen van onze eerste afgeronde rechthoek, we moeten nadenken over onze grens straal, die zal worden 2em. Ook, we willen vertrekken van wat ruimte aan de linkerkant voor de lock-schakelaar en volume toetsen, die zal worden 0.25 em. Om deze reden, de rechthoek 19.75 × 40em. Gezien de 2em border radius, moeten we twee lineaire verlopen kruisende elkaar. Men moet over een breedte van 15,75 em (19.75 em – 2 × 2), en de andere moet een hoogte hebben van 36em (40em – 2 × 2). De positie van de eerste 2.25 em van de linker-en dan de tweede 0.25 em van de linker-en 2em van de top.

.iphone {
achtergrond:
/* lichaam */
linear-gradient() 2.25 em 0 / 15.75 em 40em,
linear-gradient() 0.25 em 2em / 19.75 em 36em;

}

Sinds de licht grijze rand van 0,5 em dik, laten we elk kleurverloop onmiddellijk over te schakelen van licht grijs ($lg) naar donker grijs ($dg) en vice versa bij 0,5 em en 0,5 em voor het einde (40em – 0.5 = 39.5 em voor de eerste helling, 19.75 em – 0.5 = 19.25 em voor de tweede). Een hoek van 90deg voor de tweede te maken gaat horizontaal.

.iphone {
achtergrond:
/* lichaam */
linear-gradient($lg 0.5 em, $dg 0.5 em, $dg 39.5 em, $lg 39.5 em) 2.25 em 0 / 15.75 em 40em,
linear-gradient(90deg, $lg 0.5 em, $dg 0.5 em, $dg 19.25 em, $lg 19.25 em) 0.25 em 2em / 19.75 em 36em;

}

In elk vierkant hoek, zoals aangegeven door de oranje doos in de figuur, plaatsen wij de afgeronde randen. Om het maken van die vormen, we maken gebruik van radiale verlopen, dat twee keer de grootte van hun bounding boxes en in iedere hoek. Plaats ze boven het lichaam achtergronden.

.iphone {
achtergrond:
/* hoeken */
radiaal verloop(200% 200% 100% 100%, $dg 1.45 em, $lg 1.5 em, $lg 50%, $lgT 51%) 0.25 em 0 / 2em 2em,
radiaal verloop(200% 200% 0% 100%, $dg 1.45 em, $lg 1.5 em, $lg 50%, $lgT 51%) 18em 0 / 2em 2em,
radiaal verloop(200% 200% 100% 0%, $dg 1.45 em, $lg 1.5 em, $lg 50%, $lgT 51%) 0.25 em 38em / 2em 2em,
radiaal verloop(200% 200% 0% 0%, $dg 1.45 em, $lg 1.5 em, $lg 50%, $lgT 51%) 18em 38em / 2em 2em,

}

Om de 0,5 em-dikke lichtgrijze eindigt, na te denken over waar het kleurverloop begint en dan doen de wiskunde. Omdat de licht-grijs is op het einde, we aftrekken met 0,5 em van 2em goed eerste stop. Voor de gladheid, we nemen een klein beetje van de eerste 1.5 em en het toevoegen van 1% tot de tweede 50%, zodat de ronde randen in combinatie met de platte randen.

Als wij nu het vergroot de afbeelding door het veranderen van de grootte van het lettertype te 40px of meer, merken we naden tussen de ronde en platte randen (omcirkeld in het oranje):

Omdat ze zo klein zijn, kunnen we gemakkelijk patch ze door terug te gaan naar het lichaam achtergronden en licht de wijziging van de gradiënt stopt zolang alles ziet er nog steeds recht bij het veranderen van de grootte van het lettertype terug naar 10px.

.iphone {
achtergrond:
/* lichaam */
linear-gradient($lg 0.5 em, $dg 0.55 em, $dg 39.5 em, $lg 39.55 em) 2.25 em 0 / 15.75 em 40em,
linear-gradient(90deg, $lg 0.5 em, $dg 0.55 em, $dg 19.175 em, $lg 19.25 em) 0.25 em 2em / 19.75 em 36em;

}

Dan in een lineair verloop, voegen we de lock-schakelaar en volume toetsen in te vullen van de 0.25 em ruimte aan de linkerkant. Als een 1px ruimte gaat gebeuren tussen de knoppen en het lichaam, kunnen we een kleine bloeden van 0,05 em naar de achtergrond breedte (0.3 em) zodat het niet blijft hangen in het donker grijs.

.iphone {
achtergrond:
/* volume-knoppen */
linear-gradient($lgT 5em, $lg 5em, $lg 7.5 em, $lgT 7.5 em, $lgT 9.5 em, $lg 9.5 em, $lg 11em, $lgT 11em, $lgT 13em, $lg 13em, $lg 14.5 em, $lgT 14.5 em) 0 0 / 0.3 em 100%,

}

Het lijkt erop dat we zelf drie licht grijs-licht grijs verlopen, maar aangezien het mogelijk was, maar één nodig was. Het is gewoon heel veel van plotselinge overgangen tussen de transparante en dekkende licht grijs uitgevoerd naar beneden.

Laten we vervolgens voegen aan de rand van de home-knop, net als de platte randen van het plein binnen. Nu het plein binnen home-knop zal worden 1.5 × 1.5 em en volgen in principe dezelfde procedure als die van het lichaam: twee kruisende lineaire verlopen en radialen in te vullen de hoeken. Om ze horizontaal in het midden, calc() van pas komt. 50% + 0.125 em, zal de uitdrukking; als we ons alleen richten op de telefoon lichaam, zal er 0.125 em velden aan elke zijde. Daarom gaan we het 0.125 em meer naar rechts. Dezelfde x-positionering van toepassing is op de bovenste twee achtergronden.

.iphone {
achtergrond:
/* home */
linear-gradient() calc(50% + 0.125 em) 36.5 em / 0.5 em 1.5 em,
linear-gradient() calc(50% + 0.125 em) 37em / 1.5 em 0.5 em,
radiaal verloop(3em 3em in calc(50% + 0.125 em) 37.25 em, $bkT 1.25 em, $bk 1.3 em, $bk 49%, $bkT 50%),

}

Vergelijkbaar met hoe we de schaduw van de lineaire gradiënt van het delen van de telefoon, het stopt zal beginnen en eindigen met licht grijs, maar met een doorzichtig in het midden. Merken we links 0.05 em kloof tussen elke grijs-naar-transparante overgang (en omgekeerd). Net als de hoeken van het lichaam, dit is om ervoor te zorgen dat de mix tussen een ronde hoek en een flatscreen-end binnen.

.iphone {
achtergrond:
/* home */
linear-gradient($lg 0.15 em, $lgT 0.2 em, $lgT 1.35 em, $lg 1.35 em) calc(50% + 0.125 em) 36.5 em / 0.5 em 1.5 em,
linear-gradient(90deg, $lg 0.15 em, $lgT 0.2 em, $lgT 1.3 em, $lg 1.35 em) calc(50% + 0.125 em) 37em / 1.5 em 0.5 em,
radiaal verloop(3em 3em in calc(50% + 0.125 em) 37.25 em, $bkT 1.25 em, $bk 1.3 em, $bk 49%, $bkT 50%),

}

Door de manier, omdat de contouren worden zo klein als u al eerder zagen, kunnen we beter zien wat we aan het doen bent door het verhogen van de grootte van het lettertype aan ten minste 20 px. Het is net als met de zoomfunctie in software voor beeldbewerking.

Nu naar de hoeken van het grijze vierkant precies waar ze moeten zijn, laten we ons concentreren op de x-positie van de eerste. We beginnen met calc(50% + 0.125 em), dan kunnen we toevoegen of aftrekken van de breedte van elk stuk, of moet ik zeggen het plein border radius. Deze achtergronden zal gaan boven de laatste drie.

.iphone {
achtergrond:
/* home */
radiaal verloop(200% 200% 100% 100%, $lgT 0.3 em, $lg 0.35 em, $lg 0.48 em, $lgT 0.5 em) calc(50% + 0.125 em – 0.5 em) 36.5 em / 0.5 em 0.5 em,
radiaal verloop(200% 200% 0% 100%, $lgT 0.3 em, $lg 0.35 em, $lg 0.48 em, $lgT 0.5 em) calc(50% + 0.125 em + 0.5 em) 36.5 em / 0.5 em 0.5 em,
radiaal verloop(200% 200% 100% 0%, $lgT 0.3 em, $lg 0.35 em, $lg 0.48 em, $lgT 0.5 em) calc(50% + 0.125 em – 0.5 em) 37.5 em / 0.5 em 0.5 em,
radiaal verloop(200% 200% 0% 0%, $lgT 0.3 em, $lg 0.35 em, $lg 0.48 em, $lgT 0.5 em) calc(50% + 0.125 em + 0.5 em) 37.5 em / 0.5 em 0.5 em,

}

Vervolgens zal het scherm een 17.25 × 30em rechthoek. Net als delen van de home-knop, we horizontaal centreren met behulp van calc(50% + 0.125 em). Vanaf de top, het zal 5em.

.iphone {
achtergrond:
/ * * /
linear-gradient($p, $p), calc(50% + 0.125 em) 5em / 17.25 em 30em,

}

Ten slotte voegen we de camera en de speaker. De camera is een eenvoudige 1 × 1 blauw-grijs radiale met geen moeilijke berekeningen. De pure-grijs speaker al een beetje meer betrokken. Het zal een 5 × 1em rechthoek en een 0,5 em border radius. Tekenen dat we de eerste tekenen van een rechthoek met de eerste 4ems van de breedte en het centrum met calc(50% + 0.125 em). Vervolgens gebruiken we 0.5 × 1em halve cirkels waarin het verloop posities zijn 100% 50% 0% 50%. De beste manier om de positie van deze links en rechts van de rechthoek is het gebruik van een nieuwe calc () – expressies. Voor de links, trekken we de helft van de rechthoek met de breedte en de helft van de halve cirkel breedte van het lichaam centrum (50% + 0.125 em – 2em – 0.25 em). De rechter zal volgen hetzelfde patroon, maar met de toevoeging, dus 50% + 0.125 em + 2em + 0.25 em.

.iphone {
achtergrond:
/* camera */
radiaal verloop(1em 1em op 6.25 em 2.5 em, $bl van 0,2 em, $g 0.21 em, $g 49%, $gT 50%),
/* speaker */
radiaal verloop(200% 100% 100% 50%, $g 49%, $gT 50%) calc(50% + 0.125 em – 2em – 0.25 em) 2em / 0.5 em 1em,
radiaal verloop(200% 100% 0% 50%, $g 49%, $gT 50%) calc(50% + 0.125 em + 2em + 0.25 em) 2em / 0.5 em 1em,
linear-gradient($g, $g), calc(50% + 0.125 em) 2em / 4em 1em,

}

Verwijder het grijze kader rond de div en de iPhone is compleet!

Zie de Pen iPhone door Jon Kantner (@jkantner) op CodePen.

Bewegende Afbeeldingen

Je zou denken dat je zou kunnen gebruiken background-position te animeren van dit soort beelden, maar je kan alleen niet zo veel. Bijvoorbeeld, het is onmogelijk om te animeren van de rotatie van een individuele achtergrond, door zelf. In feite, background-position animaties meestal niet zo goed presteren als een transformatie animaties, dus hoef ik het niet aanraden.

Animeren een deel van een afbeelding welke manier we willen, kunnen we het :vóór of :after pseudo-elementen worden die verantwoordelijk is voor dat onderdeel. Als we meer selecties, dan kunnen we terugkeren naar meerdere onderliggende divs, nog niet nodig, één voor elk klein detail. Voor onze geanimeerde afbeelding voorbeeld maken we deze geanimeerde radar:

We tekenen de statische eerste deel, dat is alles behalve het grijze frame en draaiende hand. Voordat het zover is, laten we leveren onze palet (let op: het hoeft niet een $dgnT voor $dgn) en de basis code.

$gn: rgb(0,192,0);
$gnT: rgba(0,192,0,0);
$dgn: rgb(0,48,0);
$gy: rgb(128,128,128);
$gyT: rgba(128,128,128,0);
$bk: rgb(0,0,0);
$bkT: rgba(0,0,0,0);

.radar {
background-repeat: no-repeat;
font-size: 10px;
overzicht: 1px solid #aaa;
breedte: 20em;
hoogte: 20em;
}

Sinds dit beeld gaat helemaal rond is, kunnen we veilig toepassen van een border radius van 50%. Dan kunnen we het herhalen van een radiaal verloop te trekken van de ringen—ongeveer 1/3 weg van elkaar.

.radar {
achtergrond:
/* ringen */
herhalen-radiaal verloop($dgn, $dgn 2.96 em, $gn-3em, $gn 3.26 em, $dgn 3.3 em);
background-repeat: no-repeat;
border-radius: 50%;

}

Let ook op de extra $dgn aan de start. Voor herhaling verlopen aan het begin, einde, en loop zoals verwacht, moeten we opgeven het startpunt kleur op 0 (of zonder 0).

In tegenstelling tot het vorige voorbeeld, we zijn niet met calc() naar het midden van de lijnen omdat Internet Explorer zal maken de hele zaak onhandig wanneer we gebruik van een pseudo-element later. Te trekken van vier 0.4 em lijnen die elkaar kruisen elkaar in het midden, weet dat de helft van de lijn zou de helft van de div op de 10em. Zo dan, we trekken en voeg de helft van 0,4 (0.4 / 2 = 0.2) aan elke kant. In andere woorden, de linkerkant van de green moet worden 9.8 em, en het recht moet 10.2 em. Voor de 45deg diagonalen hoewel, we moeten vermenigvuldigen 10em door de vierkantswortel van 2 tot en krijgen hun centrum (10 × √2 ≈ 14.14). Het is de lengte van de langste kant van een 10em rechthoekige driehoek. Als een resultaat, de zijden van elke diagonaal zou ongeveer op 13.94 en 14.34 em.

.radar {
achtergrond:
/* regels */
linear-gradient($gnT 9.8 em, $gn 9.8 em, $gn 10.2 em, $gnT 10.2 em),
linear-gradient(45deg,$gnT 13.94 em, $gn 13.98 em, $gn 14.3 em, $gnT 14.34 em),
linear-gradient(90deg,$gnT 9.8 em, $gn 9.8 em, $gn 10.2 em, $gnT 10.2 em),
linear-gradient(-45deg,$gnT 13.94 em, $gn 13.98 em, $gn 14.3 em, $gnT 14.34 em),

}

Om te voorkomen dat de pixelation van de diagonalen, we links een kleine 0.04 em kloof tussen groen en transparant groen. Dan, het creëren van een zekere verlichting, voeg deze transparant-zwart radiaal verloop:

.radar {
achtergrond:
/* verlichting */
radiaal verloop(100% 100%, $bkT, $bk 9.9 em,$bkT 10em),

}

Dat completeert het statische deel van de radar. Nu tekenen we de grijs frame en met de hand in een andere achtergrond stapel onder :voor en voeg de animatie. Er is een reden waarom we niet het frame te nemen hier. Omdat de hand container moet passen bij de gehele div.,, we willen het niet te overlappen met het frame.

Deze pseudo-element zal de ruimte vullen, en om te zorgen blijft er, laten we absoluut positioneren. Gebruiken We dezelfde border radius, dus dat blijft het rond terwijl een animatie in Safari.

.radar {

position: relative;
en:before {
background-repeat: no-repeat;
border-radius: 50%;
inhoud: “”;
position: absolute;
breedte: 100%;
height: 100%;
}
}

Vervolgens trekken de hand, wij maken het voor de helft van de grootte van de container en bewaar het in de linkerbovenhoek. Tot slot, op de top van dat, we trekken het frame.

.radar {

en:before {
animatie: scan 5s lineaire oneindig;
achtergrond:
/* frame */
radiaal verloop($gyT 9.20 em, $gy 9.25 em, $gy 10em, $gyT 10.05 em),
/ * * /
linear-gradient(45deg, $gnT 6em, $gn) 0 0 / 50% 50%;

}
}

@keyframes-scannen {
van {
transform: rotate(0);
}
{
transform: rotate(1turn);
}
}

Nu onze kleine gadget is compleet!

Zie de Pen Radar door Jon Kantner (@jkantner) op CodePen.

Voordelen (Plus een Nadeel)

Deze benadering van het tekenen van CSS beelden heeft diverse voordelen. Ten eerste, de HTML-zal zeer lichtgewicht in vergelijking met een gerasterde afbeelding bestand. Ten tweede, het is geweldig voor de aanpak van de beelden die zijn onmogelijk te trekken en zonder het gebruik van experimentele eigenschappen en Api ‘ s die niet kunnen worden breed ondersteund.

Het is niet om te zeggen dat deze methode is beter dan het gebruik van een bovenliggend element geneste met kinderen voor de vormen. Er is een nadeel echter. U moet stoppen met het kunnen markeren van individuele vormen met behulp van de browser-dev-tools. Je nodig hebt om commentaar en opmerkingen van een achtergrond om vast te stellen welke het is. Zolang je groep en een label voor elke segment van de achtergronden kunt u vinden dat bepaalde achtergrond sneller.

Conclusie

In een notendop, de methode voor het tekenen van CSS beelden die we hebben behandeld in dit bericht stelt ons in staat om:

  1. Het opzetten van een palet gemaakt van de variabelen voor de kleuren.
  2. Uitschakelen van de achtergrond herhalen, zet een schaal met lettertype-grootte, en een canvas breedte en hoogte in de em-eenheden voor het doel element.
  3. Gebruik een tijdelijke overzicht te zien van de randen als we werken.
  4. Draw elke vorm van onder naar boven omdat de achtergronden zijn weergegeven in die volgorde. De achtergrond syntaxis voor elke vorm volgt afbeelding positie / grootte (met of zonder de positie en grootte).

Er is veel van het denken buiten de doos te gaan en te experimenteren om het gewenste resultaat te krijgen. De drie voorbeelden die we gemaakt waren net genoeg om aan te tonen van het concept. We hebben gekeken hoe we om elke achtergrond, tekening delen van cirkels, rechthoeken met ronde hoeken, en een beetje aanpassen verloop stopt voor gladde randen. Om meer te leren, voel je vrij om ze te analyseren en bestuderen andere voorbeelden die ik heb gemaakt in deze CodePen collectie!

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!