Heute werden wir gemeinsam wieder an unseren CSS Skills arbeiten und gemeinsam ein Namensschild programmieren. So ein Namensschild sieht man bei Events immer wieder in allen Formen und Farben und selbst im Internet, auf euren Webseiten könnt ihr die Einsetzen um euch vorzustellen. Und selbst wenn man das nicht selbst brauchen kann, so kann man aus dem Code wieder viel selbst lernen.
Video
HTML
1 2 3 4 5 6 7 | <div class="container">
<div class="namensschild">
<strong>Hallo</strong>
<br />
Ich heisse
</div>
</div> |
CSS
Der Container ist eigentlich nur dazu da – das Namensschild auf der Seite einzumitten.
1 2 3 4 5 6 | .container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
} |
enkt daran eure Schrit korrekt einzubauen – ich habe sie hier jetzt verlinkt. Ja wer im DSGVO Raum sitzt sollte sie vielleicht direkt herunterladen und einbauen – sonst könntet ihr eine Abmahnung kassieren (Grüsse an meine Leser aus Deutschland dem Land der Abmahnfanatiker)
1 | @import url("https://fonts.googleapis.com/css?family=Dekko|Lato:900|Rock+Salt"); |
Hier geht dann der CSS ganz los – ihr seht nämlich der Name wird über CSS eingebaut und nicht über HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .namensschild {
margin-bottom: 2rem;
padding: 1rem 7.5rem 11rem;
border-radius: 30px;
font-size: 2rem;
color: #fff;
background: #f8012d;
text-align: center;
font-family: "Lato", sans-serif;
box-shadow: 0 1px 15px -7.5px #000000;
position: relative;
}
.namensschild strong {
text-transform: uppercase;
font-size: 3.5rem;
}
.namensschild:before {
content: "";
position: absolute;
top: 9rem;
left: 2%;
width: 96%;
height: 9rem;
background: #fff;
border-radius: 0 0 30px 30px;
}
/* with the :after pseudo element add the name of the character */
.namensschild:after {
content: "Eric Mächler";
position: absolute;
top: 11.25rem;
left: 0;
width: 100%;
text-align: center;
font-family: "Rock Salt", cursive;
font-size: 2rem;
letter-spacing: 0.25rem;
font-weight: 300;
font-weight: bold;
color: #000;
} |
0 Kommentare