Rocking California s “I Voted” – Aufkleber in der CSS-Datei für den Wahltag 2018

0
13

Oh hey, also morgen (morgen!!) ist Wahltag hier in den Vereinigten Staaten. Wir sind nicht in der Wirtschaft, dass die politischen Vermerke oder ähnliches, die auf CSS-Tricks, aber machen wir befürworten, dass jeder Ausübung des Stimmrechts.

Ich habe genau das vor zwei Jahren gepostet und eine CSS-Interpretation von “I Voted” – Aufkleber, die kam mit meinem California mail-in Abstimmung gewählt.

Finden Sie den Stift habe ich Aufkleber von Geoff Graham (@geoffgraham) auf CodePen.

Schneller Vorlauf bis heute, und ich habe einen neuen Aufkleber in der Abstimmung sportlich frischen design:

Credit: Los Angeles-Magazin (Quelle)

Ich habe ein wenig Zeit, also werde ich versuchen, neu erstellen, diese Aufkleber in CSS und Spaziergang durch meine Gedanken wie ich es mache. Fühlen Sie sich frei, zu Folgen, wenn Sie möchten!

Abbau der Elemente

Jederzeit ich ein design jeglicher Art, möchte ich behaupten, dass meine Augen haben die Supermacht von X-ray vision und sehen durch das design, als ob er ein Skelett. Das hilft mir, beginnen zu denken, durch wie viele Elemente die ich verwenden könnte, das in der HTML.

OK, ich denke ich werde mit etwas beginnen, wie diese:

<!– Main-Kreis –>
<div class=”sticker”>
<div class=”Aufkleber__top”>
<!– Verwenden ::before und ::after zu erstellen Hälften –>
<h1>ich habe</h1>
</div>
<div class=”Aufkleber__bottom”>
<!– Die Liste der Sprachen –>
<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>

Ich werde auch werfen in einige Basis-Stile für das <body> so kann ich Sprung rechts in den rest der Aufkleber.

Finden Sie unter dem Stift “I Voted” – Sticker HTML-von Geoff Graham (@geoffgraham) auf CodePen.

OK, nichts besonderes so weit. Wirklich sieht aus wie eine ungeordnete Liste mit einer überschrift mit einigen schrecklichen Kontrast zwischen Inhalt und hintergrund.

Arbeiten auf der main-Aufkleber container

Ich denke, ich werde das einrichten der container, das ist das wichtigste Kreis. Ich werde eine Feste Breite und Höhe, dann verwenden Sie border-radius zu Runden und in die Form eines Kreises.

Oh, und ich sollte aufpassen, dass dunkler text und fügen Sie auch eine Grenze, während ich dabei bin, so kann ich sehen, was ich mache.

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

Finden Sie unter dem Stift “I Voted” – Sticker HTML 2 von Geoff Graham (@geoffgraham) auf CodePen.

Die Ausrichtung ist alles aus. Scheint wie ein guter Ort, um drop-in einigen flexbox. Dies wird mir erlauben, center sind unsere Elemente horizontal. Ich denke, mit einem einspaltigen layout kümmert sich dann um die vertikale Ausrichtung.

.Aufkleber {
display: flex;
flex-flow: column;
align-items: center;
border: 20px solid #fff;
border-radius: 100%;
color: #fff;
height: 400px;
width: 400px;
}

Yep, das hilft.

Finden Sie unter dem Stift “I Voted” – Sticker HTML 3 von Geoff Graham (@geoffgraham) auf CodePen.

Das Letzte, was ich will, zu tun mit dem Aufkleber, denn jetzt ist es aufgeteilt in zwei Hälften — eine oben und eine unten. OK, also ja, ich habe expliziten Elemente für diejenigen, die in HTML (.Aufkleber__top und .Aufkleber__unten). Ich konnte verwenden Sie ” hintergrund-Farbe auf jedes element, um die Obere Hälfte blau und die untere Hälfte rot, aber ich wirklich wie die Idee der Verwendung eines linearen Gradienten statt mit einem harten Anschlag in die Halbzeit.

.Aufkleber {
background-image:
linear-gradient(
nach unten,
#080968,
#080968 50%,
#080968 50%,
#F81616 50%
);
border: 20px solid #fff;
border-radius: 100%;
color: #fff;
display: flex;
flex-flow: column;
align-items: center;
height: 400px;
width: 400px;
}

Hey, jetzt Blick viel schärfer schon!

Finden Sie unter dem Stift “I Voted” – Sticker HTML 4 von Geoff Graham (@geoffgraham) auf CodePen.

Zeit, sich mit der oberen Hälfte

Die oberen und unteren Hälften beide nehmen 50% des Aufklebers ist die Höhe, die, so die Selektoren können kombiniert werden, Sie zu schlagen beide auf einmal. Plus, ich bin mit flexbox, so kann ich einfach mit der flex die Elemente.

.Aufkleber__top,
.Aufkleber-bottom {
flex: 0 50%;
}

Die Obere Hälfte ist super komisch. So wie ich das sehe, gibt es zwei Reihen: eine, die enthält die Sterne und Streifen, und die andere enthält die überschrift. Ich werde zu drehen, um flexbox wieder zu ziehen, das layout.

.Aufkleber__top {
display: flex;
flex-flow: row wrap;
position: relative;
}

Das ist nicht wirklich viel ändern, da im moment, gut, ich habe nichts getan, um zu definieren, Elemente für die Sterne und Streifen in den HTML-Code. Ich denke mit den ::before und ::after pseudo-Elemente auf .Aufkleber__top zu machen. Wieder, Sie können kombiniert werden, da Sie einige gemeinsame Eigenschaften und Werte.

.Aufkleber__oben::vorher
.Aufkleber__top::after {
content: “”;
Höhe: 45%; /* War, um mit zu spielen ein bisschen */
margin-top: 2em; /* Bewegt sich Weg von der oberen Kante des Aufklebers */
}

Ich werde zu betrügen und verwenden Sie SVG nach den Sternen. Ich meine, ich denke, das ist nicht gemogelt, aber es fühlt sich sorta wie eine Abweichung von einer “reinen” CSS Weg, Dinge zu tun. Naja.

Das heißt, der Streifen kann auf jeden Fall gemacht werden, in CSS, wieder mit der gleichen linearen Farbverlauf-hintergrund-Technik, die verwendet wird, teilen Sie die Aufkleber in rot und blau halbiert.

.Aufkleber__oben::vorher {
background-image:
url(“/Pfad/zu/Stern/Bild.svg”);
background-size: 35px; /* Magic number, hängt das Bild. */
}

.Aufkleber__top::after {
background-image:
linear-gradient(
nach unten,
#F81616,
#F81616 14%,
transparent 14%,
transparente 28%,
#F81616 28%,
#F81616 42%,
transparent 42%,
transparente 56%,
#F81616 56%,
#F81616 70%,
transparent, 70%,
transparent, 84%,
#F81616 84%,
#F81616 98%,
transparent 100%
);
}

Das ist cool, aber, Mist, die Dinge sind nicht in Ordnung.

Finden Sie unter dem Stift “I Voted” – Sticker HTML 5 von Geoff Graham (@geoffgraham) auf CodePen.

Ich bin so dankbar, dass flexbox hat eine order-Eigenschaft. Ich werde um die Sterne, Streifen und überschrift 1, 2 und 3, bzw.

.Aufkleber__oben::vorher {
/* Das gleiche wie vorher auch… */
Reihenfolge: 1;
}

.Aufkleber__top::after {
/* Das gleiche wie vorher auch… */
Bestellung: 2;
}

.Aufkleber__top h1 {
Bestellung: 3;
}

Wenn ich hier aufhören, die Form der stars and stripes wären alle Weg, und die überschrift-schriftart wäre schlampig.

border-radius ist immer noch ein guter Weg, um die Sterne und Streifen nach dem gleichen Kreisbahn wie die Aufkleber. Der Haken ist, dass die Böden von Ihnen erhalten haben einen flachen Rand. Da border-radius ist eine Kurzschrift-Eigenschaft, ich werde drop-border-top-left-radius auf die Sterne und border-top-right-radius auf den Streifen.

Es ist auch erwähnenswert, dass die Streifen etwas breiter als die Sterne. Vielleicht 55-45 split? Ich weiß es nicht. Ich gehe mit, und auch die relative Positionierung verwenden, die auf die Streifen, so kann ich schieben Sie Sie nach rechts ein wenig hinzufügen, um die Trennung zwischen Ihnen und den Sternen.

.Aufkleber__oben::vorher {
/* Das gleiche wie vorher auch… */
flex: 45%;
}

.Aufkleber__top::after {
/* Das gleiche wie vorher auch… */
flex: 55%;
position: relative;
left: 10px;
}

Die Sterne und Streifen sollten mit dem flex Größe und Breite der überschrift. Ich hatte zu spielen mit der font-family, font-size, letter-spacing, text-transform, um etwas zu bekommen, dass sieht ziemlich nett. Falls Sie sich Wundern, ich aufgewickelt mit Raleway für die schriftart. Es ist nicht genau, aber nahe genug… zumindest für meine ungeübten typografische Auge.

.Aufkleber__top h1 {
font-family: ‘Raleway’, sans-serif;
font-size: 4em;
letter-spacing: 3px;
line-height: 0;
text-transform: Großbuchstaben;
Bestellung: 3;
}

Finden Sie unter dem Stift “I Voted” – Sticker HTML 6 von Geoff Graham (@geoffgraham) auf CodePen.

Alright, so jetzt die untere Hälfte macht meine Haut zu kriechen. Muss das anpacken.

Stil-up der unteren Hälfte

So viel ist bereits getan worden. Das element für die untere Hälfte ist schon da in den HTML-Code und ist so bemessen und positioniert, wie es sein sollte. Ich denke, entfernen Sie die Aufzählungszeichen der Listenelemente und entfernen Sie die linke Polsterung aus der ungeordneten Liste reinigen Sie die Dinge ein Menge.

.Aufkleber__unten ul {
list-style: none;
padding: 0;
width: 100%; /* Musst dauern, bis die alle von der unteren Hälfte */
}

Aber, das geht nicht, schneiden Sie es vollständig. Ich möchte, dass die Liste horizontal, umbrechen von Zeilen, und damit die Elemente der Liste zu besetzen, offenen Raum. Yep, das klingt wie flexbox wieder.

.Aufkleber__unten ul {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
/* das gleiche wie vorher auch… */
}

.Aufkleber__unten li {
flex: auto; /* Flex als viel wie Sie brauchen, Jungs */
Marge: .75em; /* Ein liiiiitle Raum zum atmen zwischen den Elementen */
}

Finden Sie unter dem Stift “I Voted” – Aufkleber-HTML 7 von Geoff Graham (@geoffgraham) auf CodePen.

Jetzt muss ich mir ein paar Veränderungen an .Aufkleber__Boden. Speziell, ich werde es etwas schmaler (80% des vollen Aufkleber Breite), um es aus der Rand des Aufklebers und Runde dann die Kanten… wenn Sie vielleicht nicht wirklich brauchen, abgerundete Ecken, da Inhalte nicht zu überlaufen.

.Aufkleber__unten {
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
width: 80%;
}

Und jetzt zentrieren Sie den text. Ich denke, das kann gehen auf die Muttergesellschaft .Aufkleber-element, da nichts auf dem Aufkleber ist technisch Linksbündig.

.Aufkleber {
/* das gleiche wie vorher auch… */
text-align: center;
}

Schließlich, ich werde mein bestes tun, ersetzen Sie den dummy-Inhalt mit dem “I Voted” – übersetzungen. Lassen Sie mich gehen, schauen jene auf.

(Köpfe über Google Übersetzen.)

Meh, ich konnte nicht finden, alles, was ich brauchte. Ich bin sicher, es ist mein Mangel an Geduld, aber schlussendlich hab ich mit einigen alternativen:

<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 den</li>
</ul>

Ich bin zu haben, um spielen, um mit dem font-size und bekommen die gleiche Art von Ausrichtung wie die IRL Aufkleber, die Zeilen aus: 4 Elemente, 3 Elemente, 3 Elemente, 1 Element, 1 Element.

Hier, wo ich gelandet:

.Aufkleber__unten ul {
display: flex;
flex-flow: row wrap;
font-size: .75em;
align-items: flex-start;
justify-content: flex-start;
list-style: none;
padding: 0;
width: 100%;
}

Um die letzten beiden Artikel aus der gleichen Linie, ich werde, um herauszufinden, die zweite-to-Letzte Nutzung :last-child (), so dass beide immer flex 100%:

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

Finden Sie unter dem Stift “I Voted” – Sticker HTML 8 von Geoff Graham (@geoffgraham) auf CodePen.

Ding, fertig!

Ich nenne dies eine gebacken. Ich weiß, ich weiß. Ich sollte cross-browser-test. Es wäre auch klug sein, zu finden, anmutig fallbacks für ältere Browser, die nicht unterstützen flexbox. Und, eine gewisse Reaktion wäre schön zu haben. Vielleicht möchte jemand mit zu nehmen und teilen. 😉

Ist dies der beste Weg, um die Aufkleber? Wahrscheinlich nicht. Zum Beispiel, ich Wette, es gibt einige interessante Dinge, die getan werden kann mit der clip-Pfad anstelle der Art, wie ich kramte in hintergrund-Gradienten. Und, wenn ich es wieder tun, könnte ich noch prüfen, geht mit einem CSS-Grid-layout-auf die Muttergesellschaft, da gibt es eindeutig Möglichkeiten, um die Arbeit in zwei Richtungen statt.

Aber das ist die Schönheit des CSS. Es gibt mehr als einen Weg etwas zu erreichen.

Zufrieden Wahl Tag, Freunde. 🇺🇸

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die social sharing links oben, der Sicherheit und des backups, Markdown-support, site-Suche, das Kommentar-Formular, postulieren soziale Netzwerk-verbindungen und vieles mehr!