Het schommelen van Californië “ik heb Gestemd” Sticker in CSS voor de verkiezingsdag 2018

0
18

Oh hey, dus morgen (morgen!) is de verkiezingsdag in de Verenigde Staten. We zitten niet in de business van het maken van politieke pamfletten of iets dergelijks op CSS-Tricks, maar we onderschrijven dat iedereen gebruik maken van hun recht om te stemmen.

Ik deed precies dat twee jaar geleden geplaatst en een CSS-vertolking van de “ik heb Gestemd” sticker die bij mijn Californië mail-in stemming.

Zie de Pen ik heb Gestemd Sticker door Geoff Graham (@geoffgraham) op CodePen.

Fast forward naar vandaag, en ik kreeg een nieuwe sticker in de stemming met een fris design:

Credit: Los Angeles Magazine (bron)

Ik heb weinig tijd, dus ik ga proberen om opnieuw aan te maken deze sticker in CSS en lopen door mijn denkproces als ik dat doe. Voel je vrij om langs te volgen als je wilt!

Het afbreken van de elementen

Telkens ik gegeven een ontwerp van welke aard ook, ik doe graag alsof mijn ogen hebben de supermacht van X-ray vision en kan zien door het ontwerp als het ware een skelet. Dit helpt me om door te denken over hoe veel elementen die ik zou kunnen gebruiken in de HTML.

OK, ik denk dat ik ga beginnen met iets als dit:

<!– Belangrijkste Cirkel –>
<div class=”sticker”>
<div class=”sticker__top”>
<!– Zal gebruik maken van ::before en ::na het maken helften –>
<h1>ik heb Gestemd</h1>
</div>
<div class=”sticker__bottom”>
<!– De lijst van talen –>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>

Ik ben ook van plan om te gooien in een aantal basis van stijlen op de <body> dus ik kan meteen aan de rest van de sticker.

Zie de Pen “ik heb Gestemd” Sticker HTML door Geoff Graham (@geoffgraham) op CodePen.

OK, niets bijzonders tot dusver. Echt ziet er net als een ongeordende lijst met een titel, met een verschrikkelijk contrast tussen de inhoud en achtergrond.

Het werken op de belangrijkste sticker container

Ik denk dat ik het opzetten van de container, dat is de belangrijkste cirkel. Ik ga gebruik maken van een vaste breedte en hoogte, dan gebruik border-radius te ronden en in de vorm van een cirkel.

Oh, en ik moet zorgen dat donkere tekst en ook een rand toevoegen terwijl ik toch bezig ben, zodat ik kan zien wat ik aan het doen ben.

.sticker {
grens: 20px solid #fff;
border-radius: 100%;
color: #fff;
height: 400px;
width: 400px;
}

Zie de Pen “ik heb Gestemd” Sticker HTML-2 door Geoff Graham (@geoffgraham) op CodePen.

De uitlijning is al uit. Lijkt me een goede plek te laten vallen in sommige flexbox. Dit me zal toestaan om het centrum van onze elementen horizontaal. Ik denk dat je met een single-kolom lay-out verzorgen van de verticale uitlijning.

.sticker {
display: flex;
flex-flow: kolom;
lijn-items: center;
grens: 20px solid #fff;
border-radius: 100%;
color: #fff;
height: 400px;
width: 400px;
}

Yep, dat helpt.

Zie de Pen “ik heb Gestemd” Sticker HTML-3 van Geoff Graham (@geoffgraham) op CodePen.

Het laatste wat ik wil doen met de sticker voor nu is het opgesplitst in twee delen, een boven en een onderkant. OK, dus ja, ik heb expliciete elementen voor die in de HTML – (.sticker__boven-en .sticker__bodem). Ik kon gebruik maken van de achtergrond-kleur van elk element maak de bovenste helft blauw en de onderste helft rood, maar ik heb eigenlijk het idee van een lineair verloop in de plaats met een harde stop aan het halverwege mark.

.sticker {
background-image:
linear-gradient(
naar beneden,
#080968,
#080968 50%,
#080968 50%,
#F81616 50%
);
grens: 20px solid #fff;
border-radius: 100%;
color: #fff;
display: flex;
flex-flow: kolom;
lijn-items: center;
height: 400px;
width: 400px;
}

Hé, zoek veel scherper!

Zie de Pen “ik heb Gestemd” Sticker HTML-4 door Geoff Graham (@geoffgraham) op CodePen.

Tijd om te gaan met de bovenste helft

De bovenste en onderste helften beide bezetten 50% van de sticker de hoogte te zijn, zodat de kiezers kunnen worden gecombineerd raken ze allebei tegelijk. Plus, ik ben met behulp van flexbox, dus ik kan gewoon flex die items.

.sticker__top,
.sticker-bottom {
flex: 0 50%;
}

De bovenste helft is super raar. De manier waarop ik het zie, zijn er twee rijen: één met de sterren en strepen en de andere met de post. Ik ga naar flexbox opnieuw in te stellen dat de lay-out.

.sticker__top {
display: flex;
flex-flow: rij-wrap;
position: relative;
}

Dat is niet echt veel veranderen op het moment, omdat, nou, ik heb niets gedaan te definiëren elementen voor de stars en stripes in de HTML. Ik ben het denken van het gebruik van de ::before en ::after pseudo-elementen op .sticker__top te maken. Nogmaals, ze kunnen gecombineerd worden, omdat ze delen een aantal gemeenschappelijke eigenschappen en waarden.

.sticker__top::voor,
.sticker__top::after {
inhoud: “”;
hoogte: 45%; /* Had om te spelen met deze een beetje */
margin-top: 2em; /* verder weg van de bovenzijde van de sticker */
}

Ik ben van plan om vals te spelen en gebruik SVG-voor de sterren. Ik bedoel, ik denk dat dat niet bedriegen, maar het zo ‘ n beetje voelt als een afwijking van een “zuiver” CSS manier van doen. Oh goed.

Dat gezegd hebbende, de strepen kan zeker worden gemaakt in CSS, opnieuw, met dezelfde lineaire gradient achtergrond techniek die wordt gebruikt voor het opsplitsen van de sticker in blauw en rood helften.

.sticker__top::before {
background-image:
url(“/pad/naar/star/afbeelding.svg -“);
background-size: 35px; /* Magisch getal, hangt af van de gebruikte afbeelding. */
}

.sticker__top::after {
background-image:
linear-gradient(
naar beneden,
#F81616,
#F81616 14%,
transparante 14%,
transparante 28%,
#F81616 28%,
#F81616 42%,
transparante 42%,
transparante 56%,
#F81616 56%,
#F81616 70%,
transparante 70%,
transparante 84%,
#F81616 84%,
#F81616 98%,
transparant 100%
);
}

Dat is cool maar onzin, dingen zijn.

Zie de Pen “ik heb Gestemd” Sticker HTML 5 door Geoff Graham (@geoffgraham) op CodePen.

Ik ben zo dankbaar flexbox heeft een order eigendom. Ik ga om de sterren, strepen en omschrijving op 1, 2 en 3, respectievelijk,

.sticker__top::before {
/* Hetzelfde als voorheen… */
volgorde: 1;
}

.sticker__top::after {
/* Hetzelfde als voorheen… */
bestelling: 2;
}

.sticker__top h1 {
volgorde: 3;
}

Als ik stop hier, de vorm van de sterren en strepen, zou helemaal uit, de richting lettertype zou slordig zijn.

border-radius is nog steeds een goede manier om de sterren en strepen te volgen hetzelfde pad als de sticker. Het probleem is dat de bodem van hen hebben bij het handhaven van een platte rand. Sinds border-radius is een afgekorte eigenschap, ik ben van plan om drop border-top-links-radius op de sterren en border-top-recht-radius op de strepen.

Het is ook vermeldenswaard dat de strepen zijn een beetje breder dan de sterren. Misschien een 55-45 splitsen? Ik weet het niet. Ik ga met dat en ook u relatieve positionering gebruiken op de strepen zo kan ik duw ze aan de rechterkant een beetje toe te voegen scheiding tussen hen en de sterren.

.sticker__top::before {
/* Hetzelfde als voorheen… */
flex: 45%;
}

.sticker__top::after {
/* Hetzelfde als voorheen… */
flex: 55%;
position: relative;
left: 10px;
}

De sterren en strepen moeten flex met de grootte en de breedte van de kop. Ik moest spelen met het lettertype, de tekengrootte, tekenafstand, en tekst transformatie om iets te krijgen dat ziet er best leuk uit. In het geval u zich afvraagt, ik wond met Raleway voor het lettertype. Het is niet precies, maar dicht genoeg… althans naar mijn ongetrainde typografische oog.

.sticker__top h1 {
font-family: ‘Raleway’, sans-serif;
font-size: 4em;
letter-spacing: 3px;
line-height: 0;
text-transform: uppercase;
volgorde: 3;
}

Zie de Pen “ik heb Gestemd” Sticker HTML-6 door Geoff Graham (@geoffgraham) op CodePen.

Oke, dus nu de onderste helft is het maken van mijn huid kruipen. Moet pakken.

De stijl van de onderste helft

Dus er is al veel gedaan. Het element in de onderste helft is er al in de HTML-code en grootte en geplaatst op de manier zoals het zou moeten zijn. Ik denk dat het verwijderen van de kogel punten van de lijst van items en het verwijderen van de opvulling links van de ongeordende lijst zal dingen schoon te veel.

.sticker__bodem ul {
list-style: none;
padding: 0;
breedte: 100%; /* Moet nemen van de onderste helft */
}

Maar, dat gaat niet om het volledig af te kappen. Ik wil die lijst te lopen horizontaal, regels en toestaan dat de items in de lijst te bezetten open ruimte. Yep, dat klinkt als flexbox weer.

.sticker__bodem ul {
display: flex;
flex-flow: rij-wrap;
lijn-items: flex-start;
rechtvaardiging-inhoud: flex-start;
/* hetzelfde als voorheen… */
}

.sticker__bodem li {
flex: auto; /* Flex zo veel als je nodig hebt, jongens */
marge: .75em; /* Een liiiiitle ademruimte tussen items */
}

Zie de Pen “ik heb Gestemd” Sticker HTML-7 door Geoff Graham (@geoffgraham) op CodePen.

Nu heb ik een paar tweaks .sticker__bodem. Specifiek, ik ben van plan om het een beetje smaller (80% van de volledige sticker breedte) om het te krijgen uit de rand van de sticker en dan rond de randen… al is het misschien niet nodig hebben afgeronde hoeken aangezien de inhoud is niet van plan om te overstromen.

.sticker__onderkant {
border-bottom-recht-radius: 100%;
border-bottom-links-radius: 100%;
breedte: 80%;
}

En, nu midden in de tekst. Ik denk dat dat kan gaan over de ouder .sticker element, aangezien er niets op de sticker is technisch links uitgelijnd.

.sticker {
/* hetzelfde als voorheen… */
text-align: center;
}

Eindelijk, ik ga mijn best doen om het vervangen van de dummy content met de “ik heb Gestemd” vertalingen. Laat mij gaan kijken die omhoog.

(Gaat naar Google Translate.)

Meh, ik kon niet alles vinden wat ik nodig had. Ik weet zeker dat het mijn gebrek aan geduld, maar ik wond met enkele alternatieven:

<ul>
<li>Yo voté</li>
<li>我投票</li>
<li>나는 투표했다</li>
<li>Bumoto ako</li>
<li>Я проголосував</li>
<li>मैने मतदान किया</li>
<li>أنا صوتت</li>
<li>Ik stemde</li>
<li>Szavaztam</li>
<li>ฉันโหวตแล้ว</li>
<li>Anigu waxaan codsaday</li>
<li>Tôi đã bầu chọn</li>
</ul>

Ik ga te hebben om rond te spelen met de grootte van het lettertype en dezelfde soort uitlijning als de IRL sticker, die rijen: 4 items 3 items 3 items 1 item 1 item.

Hier is waar ik landde:

.sticker__bodem ul {
display: flex;
flex-flow: rij-wrap;
font-size: .75em;
lijn-items: flex-start;
rechtvaardiging-inhoud: flex-start;
list-style: none;
padding: 0;
breedte: 100%;
}

Om de laatste twee items uit dezelfde lijn, ik ga enkel uit van de tweede naar de laatste behulp van :last-child() zodat ze beide altijd flex 100%:

.sticker__bodem li:nth-child(11) {
flex: 100%;
}

Zie de Pen “ik heb Gestemd” Sticker HTML-8 van Geoff Graham (@geoffgraham) op CodePen.

Ding, klaar!

Ik ben gaan noemen dit een gebakken. Ik weet het, ik weet het. Ik moet cross-browser testen. Het zou ook verstandig zijn te vinden sierlijke uitwijkmogelijkheden voor oudere browsers die het niet ondersteunen van flexbox. En, wat responsiviteit zou leuk zijn om te hebben. Misschien dat iemand zou willen nemen die omhoog en delen. 😉

Is dit de beste manier om de sticker? Waarschijnlijk niet. Bijvoorbeeld, ik wed er zijn een aantal interessante dingen die gedaan kunnen worden met clip-pad in plaats van de manier waarop ik grabbelde door achtergrond verlopen. En, als moest ik het opnieuw doen, ik zou zelfs overwegen te gaan met een CSS Grid lay-out op het hoofd, want er zijn duidelijk mogelijkheden om te werken in twee richtingen in plaats van één.

Maar dat is de schoonheid van CSS. Er is meer dan één manier om iets te bereiken.

Gelukkig Verkiezing Dag, vrienden. 🇺🇸

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