Rocking California “jeg Stemte” Klistremerke i CSS for valgdag 2018

0
18

Oh hey, så i morgen (i morgen!) er valgdag her i Usa. Vi er ikke i bransjen for å gjøre politiske anbefalinger eller noe sånt på CSS-Triks, selv om vi gjør sin tilslutning til at alle skal utøve sin rett til å stemme.

Jeg gjorde akkurat som for to år siden og har skrevet en CSS gjengivelse av “jeg Stemte” klistremerke som fulgte med min California post-i stemmeseddelen.

Se den Pennen jeg Stemte Klistremerke av Geoff Graham (@geoffgraham) på CodePen.

Spol frem til i dag, og jeg fikk et nytt klistremerke på stemmeseddelen sportslige en frisk design:

Kreditt: Los Angeles Magazine (kilde)

Jeg har en liten tid, så jeg kommer til å prøve å gjenskape dette klistremerket på CSS og gå gjennom min tankeprosess som jeg gjør det. Føl deg fri til å følge med hvis du vil!

Å bryte ned de elementene

Når som helst jeg gitt en utforming av alle slag, jeg liker å late som at mine øyne har det dukket opp av X-ray vision og kan se gjennom utforming som om det var et skjelett. Dette hjelper meg til å begynne å tenke gjennom hvor mange elementer som jeg kan bruke i HTML.

OK, jeg tror jeg kommer til å starte med noe sånt som dette:

<!– Viktigste Sirkel –>
<div class=”klistremerket”>
<div class=”klistremerke__top”>
<!– Vil bruke ::før og ::etter å opprette halvdeler –>
<h1>jeg Stemte</h1>
</div>
<div class=”klistremerke__bottom”>
<!– Listen over språk –>
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
</div>

Jeg er også tenkt å kaste i noen base stiler på <body> så jeg kan hoppe rett inn i resten av klistremerket.

Se Penn “jeg Stemte” Klistremerke HTML av Geoff Graham (@geoffgraham) på CodePen.

OK, ikke noe fancy så langt. Egentlig bare ser ut som en usortert liste med en overskrift med noen forferdelig kontrast mellom innhold og bakgrunn.

Fungerer på de viktigste klistremerke container

Jeg tror jeg skal sette opp beholderen, som er den viktigste sirkel. Jeg kommer til å bruke en fast bredde og høyde, og deretter bruke border-radius for å runde den ut og inn i form av en sirkel.

Oh, og jeg burde ta vare på som mørk tekst, og også legge til en kantlinje mens jeg er på det, så jeg kan se hva jeg gjør.

.klistremerke {
grensen: 20 piksler solid #fff;
border-radius: 100%;
color: #fff;
høyde: 400px;
bredde: 400px;
}

Se Penn “jeg Stemte” Klistremerke HTML 2 av Geoff Graham (@geoffgraham) på CodePen.

Justeringen er tatt av. Virker som et bra sted å slippe inn noen flexbox. Dette vil tillate meg å center våre elementer horisontalt. Tror jeg kommer med en enkelt kolonne layout vil ta vare på den vertikale justeringen.

.klistremerke {
skjerm: flex;
flex-flow: kolonne;
juster-elementer: center;
grensen: 20 piksler solid #fff;
border-radius: 100%;
color: #fff;
høyde: 400px;
bredde: 400px;
}

Jepp, det hjelper.

Se Penn “jeg Stemte” Klistremerke HTML 3 av Geoff Graham (@geoffgraham) på CodePen.

Det siste jeg ønsker å gjøre med klistremerke for nå er delt det opp i to halvdeler — en topp og en bunn. OK, så ja, jeg har eksplisitte elementer for dem som er i HTML – (.klistremerke__toppen og .klistremerke__nederst). Jeg kunne bruke bakgrunn-farge på hvert element for å gjøre den øverste halvdelen blå og nedre halvdel røde, men jeg faktisk liker ideen om å bruke en lineær gradient i stedet med en hard stopper halvveis.

.klistremerke {
background-image:
linear-gradient(
til bunn,
#080968,
#080968 50%,
#080968 50%,
#F81616 50%
);
grensen: 20 piksler solid #fff;
border-radius: 100%;
color: #fff;
skjerm: flex;
flex-flow: kolonne;
juster-elementer: center;
høyde: 400px;
bredde: 400px;
}

Hei nå, ser mye skarpere allerede!

Se Penn “jeg Stemte” Klistremerke HTML 4 av Geoff Graham (@geoffgraham) på CodePen.

Tid til å beskjeftige seg med den øverste halvdel

Den øverste og nederste halvdel både okkupere 50% av klistremerket høyde, slik at velgere kan kombineres for å treffe dem begge på en gang. Pluss, jeg bruker flexbox, så kan jeg bare flex disse elementene.

.klistremerke__toppen,
.klistremerke-bunn {
flex: 0 50%;
}

Den øverste halvdelen er super merkelig. Slik jeg ser det, er det to rader: én som inneholder stjerner og striper og den andre som ikke inneholder overskriften. Jeg kommer til å slå til flexbox igjen til å tegne som layout.

.klistremerke__toppen {
skjerm: flex;
flex-flow: rad wrap;
position: relative;
}

Det er egentlig ikke kommer til å endre mye i øyeblikket fordi, vel, jeg har ikke gjort noe for å definere elementer for stjerner og striper i HTML. Jeg tenker på å bruke den ::før og ::etter pseudo-elementer på .klistremerke__toppen å gjøre dem. Igjen, de kan kombineres siden de deler noen felles egenskaper og verdier.

.klistremerke__toppen::før,
.klistremerke__toppen::etter {
innhold: “”;
høyde: 45%; /* Hadde til å spille med denne litt */
margin-top: 2em; /* Bevege seg bort fra den øvre kanten av klistremerke */
}

Jeg kommer til å jukse og bruke SVG for stjernene. Jeg mener, jeg antar det er ikke juks, men det sorta føles som et avvik fra en “ren” CSS måte å gjøre ting på. Oh well.

Når det er sagt, striper kan definitivt bli gjort i CSS, igjen, med samme lineær gradient bakgrunn teknikk som brukes til å splitte klistremerke opp i blått og rødt halvdeler.

.klistremerke__toppen::før {
background-image:
url(“/sti/til/star/bilde.svg”);
bakgrunn-size: 35px; /* Magisk tall, avhengig av bildet som brukes. */
}

.klistremerke__toppen::etter {
background-image:
linear-gradient(
til bunn,
#F81616,
#F81616 14%,
gjennomsiktig 14%,
gjennomsiktig 28%,
#F81616 28%,
#F81616 42%,
gjennomsiktig 42%,
gjennomsiktig 56%,
#F81616 56%,
#F81616 70%,
gjennomsiktig 70%,
gjennomsiktig 84%,
#F81616 84%,
#F81616 98%,
gjennomsiktig 100%
);
}

Det er kult, men, dritt, ting er ute av drift.

Se Penn “jeg Stemte” Klistremerke HTML 5 av Geoff Graham (@geoffgraham) på CodePen.

Jeg er så takknemlig for flexbox har en for eiendommen. Jeg kommer til å bestille stjerner, striper og overskriften på 1, 2 og 3, henholdsvis,

.klistremerke__toppen::før {
/* Samme som før… */
rekkefølge: 1;
}

.klistremerke__toppen::etter {
/* Samme som før… */
ordre: 2;
}

.klistremerke__toppen h1 {
rekkefølge: 3;
}

Hvis jeg slutter her, i form av stjerner og striper ville være alle av og overskriften skrift ville være slurvete.

border-radius er fortsatt en god måte å få stjerner og striper til å følge de samme sirkulær bane som klistremerket. Det vanskelige er at bunnen av dem har til å opprettholde en flat kant. Siden border-radius er en forkortelse eiendel, jeg kommer til å slippe border-top-venstre-radius på stjerner og border-top-høyre-radius på striper.

Det er også verdt å merke seg at stripene er litt bredere enn stjerner. Kanskje en 55-45 split? Jeg vet ikke. Jeg vil gå med det, og også bruke relativ posisjonering på striper slik at jeg kan presse dem til å høyre litt for å legge til avstanden mellom dem og stjernene.

.klistremerke__toppen::før {
/* Samme som før… */
flex: 45%;
}

.klistremerke__toppen::etter {
/* Samme som før… */
flex: 55%;
position: relative;
left: 10px;
}

Stjerner og striper bør flex med størrelsen og bredden på overskriften. Jeg måtte spille med skrifttype, skriftstørrelse, brev avstand og tekst forvandle seg til å få noe som ser ganske fin. I tilfelle du lurer, jeg endte opp med å bruke Raleway for skrift. Det er ikke presise, men nær nok… i hvert fall for mitt utrente typografiske øye.

.klistremerke__toppen h1 {
font-family: ‘Raleway’, sans-serif;
font-size: 4em;
brev-avstand: 3px;
line-height: 0;
text-transform: uppercase;
rekkefølge: 3;
}

Se Penn “jeg Stemte” Klistremerke HTML 6 av Geoff Graham (@geoffgraham) på CodePen.

Ok, så nå er den nederste halvdelen gjør huden min gjennomgang. Må takle det.

Stil opp den nederste halvdel

Så mye har allerede blitt gjort. Elementet på nedre halvdel er det allerede i HTML og er dimensjonert og plassert slik det skal være. Jeg tror stripping ut punktene på listen elementer og ta av til venstre polstring fra den sorterte listen vil rydde ting opp mye.

.klistremerke__bunnen ul {
list-style: none;
padding: 0;
bredde: 100%; /* Må ta opp alle de nederste halvdel */
}

Men, det er ikke kommer til å kutte det helt. Jeg vil at listen for å kjøre horisontalt, pakk linjer, og til å tillate listen elementer for å okkupere åpen plass. Jepp, det høres ut som flexbox igjen.

.klistremerke__bunnen ul {
skjerm: flex;
flex-flow: rad wrap;
juster-elementer: flex-start;
rettferdiggjøre-innhold: flex-start;
/* samme som før… */
}

.klistremerke__bunnen li {
flex: auto; /* Flex så mye som du trenger, folkens */
margin: .75em; /* En liiiiitle pusterom mellom elementer */
}

Se Penn “jeg Stemte” Klistremerke HTML-7 av Geoff Graham (@geoffgraham) på CodePen.

Nå må jeg gjøre noen endringer .klistremerke__bunnen. Spesielt, jeg kommer til å gjøre det litt smalere (80% av full klistremerke bredde) for å få det ut kanten av klistremerke og deretter rundt kantene… men det kan faktisk ikke trenger avrundede hjørner siden innholdet ikke kommer til å renne over.

.klistremerke__bunnen {
border-bottom-høyre-radius: 100%;
grensen-bunn-venstre-radius: 100%;
bredde: 80%;
}

Og, nå center teksten. Jeg antar at det kan gå på foreldrene .klistremerke element siden ingenting på klistremerket er teknisk venstre-berettiget.

.klistremerke {
/* samme som før… */
text-align: center;
}

Til slutt, jeg kommer til å gjøre mitt beste for å erstatte dummy innhold med “jeg Stemte” oversettelser. La meg gå og se dem opp.

(Hoder over til Google Translate.)

Meh, jeg kunne ikke finne alt jeg trengte. Jeg er sikker på at det er min mangel på tålmodighet, men jeg endte opp med noen alternativer:

<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>

Jeg er nødt til å spille rundt med skriftstørrelse og for å få den samme typen av stilling som IRL klistremerke, som har rader av: 4 elementer 3 elementer 3 elementer 1 element 1 element.

Her er der jeg landet:

.klistremerke__bunnen ul {
skjerm: flex;
flex-flow: rad wrap;
font-size: .75em;
juster-elementer: flex-start;
rettferdiggjøre-innhold: flex-start;
list-style: none;
padding: 0;
bredde: 100%;
}

For å få de to siste elementene av den samme linjen, kommer jeg til å skille ut den nest siste en bruker :siste-barn – () slik at begge av dem alltid flex 100%:

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

Se Penn “jeg Stemte” Klistremerke HTML-8 av Geoff Graham (@geoffgraham) på CodePen.

Ding, klar!

Jeg kommer til å kalle dette en bakt. Jeg vet, jeg vet. Jeg skal kryss-nettleser test. Det ville også være lurt å finne grasiøs fallbacks for eldre nettlesere som ikke støtter flexbox. Og, noen respons ville være fint å ha. Kanskje noen har lyst til å ta dem opp og dele. 😉

Er dette den beste måten å gjøre klistremerke? Sannsynligvis ikke. For eksempel, jeg vedder på at det er noen interessante ting som kan gjøres med klipp-bane i stedet for på den måten jeg famlet gjennom bakgrunnen graderinger. Og, hvis jeg måtte gjøre det igjen, jeg kan selv vurdere å gå med en CSS-Grid layout på foreldrene fordi det er helt klart muligheter til å arbeide i to retninger i stedet for én.

Men det er det fine med CSS. Det er mer enn én måte å oppnå noe.

Glad valgdagen, venner. 🇺🇸

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men den sosiale deling av koblinger ovenfor, sikkerhet og backup, Markdown-støtte, søk nettstedet, kommentar skjemaet, positing til sosiale nettverk-tilkoblinger, og mer!