Gunga Kaliforniens “jag Röstade” – Klistermärke i CSS för Valdagen 2018

0
15

Åh hej, så imorgon (imorgon!) är Valdagen här i Usa. Vi är inte i branschen för att tjäna politiska påskrifter eller något liknande som på CSS-Tricks, även om vi stöder att alla utövar sin rätt att rösta.

Jag gjorde exakt som för två år sedan och skrev en CSS-tolkning av “jag Röstade” – klistermärke som kom med min California post-och omröstning.

Se Pennan jag Röstade Klistermärke av Geoff Graham (@geoffgraham) på CodePen.

Snabbspola framåt till idag, och jag fick en ny dekal på valsedeln ståta med en ny design:

Kredit: Los Angeles Magazine (källa)

Jag har en liten tid, så kommer jag att försöka återskapa detta klistermärke i CSS och gå igenom min tankeprocess som jag gör det. Välkommen att följa med om du vill!

Att bryta ner delar

När som helst jag får en design av något slag, jag låtsas att mina ögon har supermakt för röntgensyn och kan se igenom konstruktionen som om det var ett skelett. Detta hjälper mig att börja tänka igenom hur många element som jag kan använda i HTML-koden.

OK, jag tror att jag kommer att börja med något liknande detta:

<!– Största Cirkel –>
<div class=”klistermärke”>
<div class=”klistermärke__top”>
<!– Kommer att använda ::före och ::efter att skapa halverar –>
<h1>jag Röstade</h1>
</div>
<div class=”klistermärke__bottom”>
<!– Listan över språk –>
<ul>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
<li>Objekt</li>
</ul>
</div>
</div>

Jag kommer även att slänga in lite bas stilar på <body> – så jag kan hoppa rätt in i resten av klistermärke.

Se Pennan “jag Röstade” – Klistermärke HTML-av Geoff Graham (@geoffgraham) på CodePen.

OK, inget fancy så långt. Egentligen bara ser ut som en oordnad lista med en rubrik med några hemska kontrasten mellan innehåll och bakgrund.

Att arbeta på de viktigaste klistermärke behållare

Jag tror att jag ska ställa upp behållaren, som är den största cirkel. Jag kommer att använda en fast bredd och höjd, och använd sedan border-radius för att runda det ut och in i form av en cirkel.

Åh, och jag borde ta hand om det där mörk text och även lägga till en gräns när jag är på det, så att jag kan se vad jag gör.

.klistermärke {
gränsen: 20px solid #fff;
border-radius: 100%;
color: #fff;
height: 400px;
width: 400px;
}

Se Pennan “jag Röstade” – Klistermärke HTML-2 av Geoff Graham (@geoffgraham) på CodePen.

Anpassningen är alla av. Verkar som en bra plats att släppa i vissa flexbox. Detta kommer att tillåta mig att centrera våra delar horisontellt. Jag tror på att gå med en enda kolumn layout kommer att ta hand om den vertikala riktningen.

.klistermärke {
display: flex;
flex-flöde: kolumnen.
align-objekt: center;
gränsen: 20px solid #fff;
border-radius: 100%;
color: #fff;
height: 400px;
width: 400px;
}

Japp, det hjälper.

Se Pennan “jag Röstade” – Klistermärke HTML-3 av Geoff Graham (@geoffgraham) på CodePen.

Det sista jag vill göra med dekalen för nu är att dela upp det i två halvor, en topp och en botten. OK, så ja, jag har erotiska inslag för dem i HTML – (.klistermärke__topp och .klistermärke__botten). Jag skulle kunna använda bakgrund-färg på varje element för att göra den övre halvan blå och nedre halvan röd, men jag faktiskt gillar tanken på att använda en linjär gradient i stället med ett hårt stopp på halvvägs till målet.

.klistermärke {
background-image:
linear-gradient(
till botten,
#080968,
#080968 50%,
#080968 50%,
#F81616 50%
);
gränsen: 20px solid #fff;
border-radius: 100%;
color: #fff;
display: flex;
flex-flöde: kolumnen.
align-objekt: center;
height: 400px;
width: 400px;
}

Hej nu ser mycket skarpare redan!

Se Pennan “jag Röstade” – Klistermärke HTML-4 av Geoff Graham (@geoffgraham) på CodePen.

Dags att ta itu med den övre halvan

Den övre och nedre halvor både uppta 50% av klistermärke höjd, så att väljare kan kombineras för att träffa dem båda på en gång. Plus, jag använder flexbox, så jag kan helt enkelt flex dessa poster.

.klistermärke__toppen,
.klistermärke-botten {
flex: 0 50 procent.
}

Den övre halvan är super konstigt. Så som jag ser det, det är två rader: en som innehåller stjärnor och ränder och annat som innehåller rubrik. Jag kommer att vända sig till flexbox igen för att rita layout.

.klistermärke__toppen {
display: flex;
flex-flöde: rad wrap;
position: relative;
}

Det är egentligen inte kommer att förändras mycket just nu, eftersom, tja, jag har inte gjort något för att definiera element för stjärnor och ränder i HTML-koden. Jag funderar på att med hjälp av ::före och ::after pseudo-element på .klistermärke__toppen att göra dem. Igen, de kan kombineras eftersom de har vissa gemensamma egenskaper och värderingar.

.klistermärke__top::före,
.klistermärke__top::efter {
innehåll: “”;
höjd: 45%; /* Hade att spela med en bit */
margin-top: 2em; /* Flytta dig bort från den övre kanten av etiketten */
}

Jag kommer att fuska och använda SVG för stjärnorna. Jag menar, jag antar att det är inte fusk men det sorta känns som en avvikelse från en “ren” CSS sätt att göra saker. Nåja.

Som sagt, ränder kan definitivt göras i CSS, igen, med samma linjär gradient bakgrund teknik som används för att dela sticker upp i blått och rött halvor.

.klistermärke__top: innan {
background-image:
url(“/sökväg/till/star/bild.svg-filen”);
bakgrund-storlek: 35px; /* Magiska nummer, beror på hur bilden används. */
}

.klistermärke__top::efter {
background-image:
linear-gradient(
till botten,
#F81616,
#F81616 14%,
öppet 14%,
öppet 28%,
#F81616 28%,
#F81616 42%,
transparent 42%,
transparent 56%,
#F81616 56%,
#F81616 70%,
transparent 70%,
öppet 84%,
#F81616 84%,
#F81616 98%,
transparent 100%
);
}

Det är coolt men, skit, saker och ting är i ordning.

Se Pennan “jag Röstade” – Klistermärke HTML 5 av Geoff Graham (@geoffgraham) på CodePen.

Jag är så tacksam flexbox har en för fastigheten. Jag kommer att beställa stjärnor, ränder och rubriken på 1, 2 respektive 3,

.klistermärke__top: innan {
/* Samma som innan… */
ordning: 1;
}

.klistermärke__top::efter {
/* Samma som innan… */
för: 2;
}

.klistermärke__toppen h1 {
syfte: 3;
}

Om jag stannar här, i form av stjärnor och ränder skulle bli allt mindre och rubriken typsnitt skulle vara slarvig.

border-radius är fortfarande ett bra sätt att få stars and stripes för att följa samma cirkelbåge som klistermärke. Rub är att den bottnar av dem har för att behålla en platt kant. Sedan border-radius är en förkortning egendom, kommer jag att släppa border-top-left-radius på stjärnorna och border-top-right-radius på ränderna.

Det är också värt att notera att ränderna är lite bredare än stjärnorna. Kanske en 55-45 split? Jag vet inte. Jag ska gå med det och även använda relativ positionering på ränder så att jag kan driva dem till höger en bit för att lägga till avståndet mellan dem och stjärnor.

.klistermärke__top: innan {
/* Samma som innan… */
flex: 45%;
}

.klistermärke__top::efter {
/* Samma som innan… */
flex: 55%;
position: relative;
left: 10px;
}

Stars and stripes bör flex storlek och bredd av rubriken. Jag var tvungen att spela med teckensnitt, teckenstorlek teckenavstånd, och text-transform för att få något som ser ganska trevligt. I fall du undrar, jag avslutade med Raleway för teckensnittet. Det är inte exakt, men nära nog… åtminstone för mina otränade typografiska ögat.

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

Se Pennan “jag Röstade” – Klistermärke HTML-6 av Geoff Graham (@geoffgraham) på CodePen.

Okej, så nu är den nedre halvan gör min hud krypa. Måste ta itu med det.

Style upp den nedre halvan

Så mycket har redan gjorts. Elementet för nedre hälften är redan det i HTML-koden och är dimensionerade och placerade så det ska vara. Jag tror att man utelämnar de punkter i de objekt i en lista och ta bort vänster utfyllnad från den onumrerade listan kommer att rensa upp saker och ting en hel del.

.klistermärke__botten ul {
list-style: none;
padding: 0;
width: 100%; /* Måste ta upp hela den nedre halvan */
}

Men, det kommer inte att klippa det helt. Jag vill ha den där listan att springa horisontellt, radbyte, och för att möjliggöra en lista med objekt att ockupera open space. Japp, det låter som flexbox igen.

.klistermärke__botten ul {
display: flex;
flex-flöde: rad wrap;
align-objekt: flex-start;
motivera-innehåll: flex-start;
/* samma som innan… */
}

.klistermärke__botten li {
flex: auto; /* Flex så mycket som du behöver, killar */
marginal: .75em; /* En liiiiitle andrum mellan objekt */
}

Se Pennan “jag Röstade” – Klistermärke HTML-7 av Geoff Graham (@geoffgraham) på CodePen.

Nu har jag att göra några förändringar .klistermärke__botten. Specifikt, jag kommer att göra det en lite smalare (80% av fullt klistermärke bredd) för att få bort kanten av etiketten och sedan runt dess kanter… även om det kanske inte egentligen behöver rundade hörn eftersom innehållet inte kommer att svämma över.

.klistermärke__botten {
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
bredd: 80%;
}

Och, nu centrera texten. Jag antar att det kan gå på den överordnade .klistermärke element eftersom ingenting på dekalen är tekniskt vänster motiverade.

.klistermärke {
/* samma som innan… */
text-align: center;
}

Slutligen, jag ska göra mitt bästa för att ersätta dummy innehållet med: “jag Röstade” översättningar. Låt mig leta upp dem.

(Huvuden över till Google Translate.)

Meh, jag kunde inte hitta allt jag behövde. Jag är säker på att det är min brist på tålamod, men jag avslutade med några alternativ:

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

Jag kommer att ha att leka med teckensnitt och storlek för att få samma typ av anpassning som IRL klistermärke, som har rader av: 4 poster, 3 st, 3 objekt 1 objekt 1 objekt.

Här är där jag landat:

.klistermärke__botten ul {
display: flex;
flex-flöde: rad wrap;
font-size: .75em;
align-objekt: flex-start;
motivera-innehåll: flex-start;
list-style: none;
padding: 0;
width: 100%;
}

För att få de senaste två objekt av samma linje, jag kommer att peka ut det näst sista med hjälp av :last-child() så att båda alltid flex 100%:

.klistermärke__botten li:nth-child(11) {
flex: 100%;
}

Se Pennan “jag Röstade” – Klistermärke HTML-8 av Geoff Graham (@geoffgraham) på CodePen.

Ding, klar!

Jag kommer att kalla detta en bakad. Jag vet, jag vet. Jag ska webbläsar-test. Det skulle också vara klokt att ta graciösa fallbacks för äldre webbläsare som inte stöder flexbox. Och, i viss lyhördhet skulle vara trevligt att ha. Kanske någon skulle vilja ta upp dem och dela. 😉

Är detta det bästa sättet att göra klistermärke? Förmodligen inte. Till exempel, jag slår vad om att det finns en del intressanta saker som kan göras med clip-bana i stället för på det sätt jag fumlade genom bakgrund gradienter. Och, om jag var tvungen att göra det igen, jag kan även överväga att gå med en CSS-Grid layout på den överordnade eftersom det finns helt klart möjligheter att arbeta i två riktningar istället för en.

Men det är skönheten i CSS. Det finns mer än ett sätt att åstadkomma något.

Glad Valdagen, vänner. 🇺🇸

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men den sociala dela länkar ovan, säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sättande till sociala nätverk, och mycket mer!