Kategorie: CSS

Übersicht

1. .box.content
2. .box > .content
3. .box .content
4. .box + .content
5. Teaser Beispiel
6. .box.content:hover
7. .box:hover > .content
8. .box:hover .content
9. .box:hover + .content

.box.content

Bei dieser Kombination, muss das Element beide Klassen besitzen.

.box.content {
  color: #009ee0;
}

<div class="box content"></div>

.box > .content

Das Element mit der Klasse Content, muss ein direkt untergeordnetes Element von Box sein.

.box > .content {
  color: #009ee0;
}

<div class="box">
  <div class="content"></div>
  <div class="content"></div>
</div>

Dabei erhalten beide Div-Elemente, mit der Klasse Content, den Farbwert Schwarz.

<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
</div>

Hier würde kein Element den Color Wert erhalten.

.box .content

Das Element mit der Klasse Content, muss ein untergeordnetes Element von Box sein.

.box .content {
  color: #009ee0;
}

<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

Die beiden Elemente mit der Klasse Content erhalten den Color Wert.

.box + .content

Das Element mit der Klasse Content, muss das nächste anliegende Element von Box sein. Es darf dabei nicht von einem anderem Element unterbrochen werden.

.box + .content {
  color: #009ee0;
}

<div class="box"></div>
<div class="content"></div>

Das anliegende Div-Elemnt mit der klasse Content erhält den Wert.

<div class="box"></div>
<div class="header"></div>
<div class="content"></div>

Hier würde kein Element den Color Wert erhalten.

Teaser Beispiel

2 verschiedene Teaser-Bild-Formate. Die P Tags sollen bei den anliegenden Teaser-Bildern unterschiedliche Formate erhalten.

.teaser {
  width: 100%;
  float: left;
}
.teaser .image{
  width: 75px;
  height: 75px;
  margin: 25px 15px 0 25px;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser .imagebig{
  width: 100px;
  height: 100px;
  margin: 0 15px 0 0;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser p{
  font-size: 16px;
  color: #333333;
}
.teaser .image + h4 + p{
  font-size: 16px;
  color: #666666;
}
.teaser .imagebig + h4 + p{
  font-size: 14px;
  color: #333333;
}

<div class="teaser">
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div><div class="teaser">
  <div class="image">
    225 x 225
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="teaser">
  <div class="imagebig">
    250 x 250
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

Wenn das Element die Klassen Box und Content hat, bekommt es den Farbwert zugewiesen. Beim Hover-Event wird der Farbwert überschrieben.

.box.content {
  color: #009ee0;
}
.box.content:hover {
  color: #000;
}

<div class="box content">Box Content</div>

.box:hover > .content

Bei dem Hover-Event über das Element, mit der Klasse Box, wird das Element, mit der Klasse Content, verbreitert.

.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover > .content {
  width: 150px;
}

<div class="box">
  <div class="content"></div>
</div>

.box:hover .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, werden alle Elemente mit der Klasse Content im Box Element verbreitert.

.box {
  height: 100px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover .content {
  width: 150px;
}

<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

.box:hover + .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, wird das anliegende Elemente mit der Klasse Content verbreitert.

.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover + .content {
  width: 150px;
}

<div class="box">
  <div class="content"></div>
</div>
<div class="content"></div>

CSS Tutorial

Voriger Schritt: CSS Styles definieren

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Flexbox Tutorial

Mit diesem Tutorial lernst du, wie du mit HTML/CSS eine responsive Navigation baust. Zum ein- und ausklappen der mobilen Navigation hast du ein Burger-Icon.

• einfache Navigation bauen
• responsive Navigation Design anpassen
• Burger-Icon einbauen
• Burgermenü interaktiv gestalten
• kompletter Code

Demo

einfache Navigation bauen

Ein nav Element anlegen und eine Liste eintragen

HTML Code

<nav>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS Code

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}

responsive Navigation Design anpassen

Damit auf dem Handy die Navigation gut klickbar ist, machen wir die Einträge auf volle Breite und etwas höher. Des Weiteren entfernen wir die Abstände links und rechts, da sonst die Navigation breiter als der Bildschirm ist.

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}	
}

Burger-Icon einbauen

Jetzt wollen wir noch die Navigation ein- und ausklappbar machen. Dafür benötigen wir ein Bürger-Icon. Ich baue dies selber mit HTML/CSS.

HTML

<div class="burgericon">
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}

Burgermenü nur mobile anzeigen

@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}

Burgermenü interaktiv gestalten

Damit die Seite auch ohne JavaScript funktioniert, habe ich mich für eine unsichtbare Checkbox entschieden. Das Bürger-Icon muss noch mit einem Label umfasst werden.

<input type="checkbox" id="navigation">
<label for="navigation" title="Navigation öffnen">
	<div class="burgericon">
		<div></div>
		<div></div>
		<div></div>
	</div>
</label>

Navigation mobile ausbleneden

Wenn man auf die Seite kommt, soll die Navigation eingeklappt sein, deswegen verstecken wir diese.

@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}

auf Statuswechsel reagieren

Damit die Navigation ein- und ausklappt, muss auf den Status der Checkbox reagiert werden. Des Weiteren blende ich die Checkbox aus.

#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}

Burger zum Kreuz drehen

Jetzt muss noch der Burger zu einem X gedreht werden, bzw. der mittlere Balken ausblenden.

#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

Animation

Wenn du das Burgermenü noch annimieren möchtest, kann ich dir meine Übungsaufgaben empfehlen: CSS Übungsaufgaben [Animation & Verlauf].

kompletter Code

HTML

<nav>
	<input type="checkbox" id="navigation">
	<label for="navigation" title="Navigation öffnen">
		<div class="burgericon">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</label>
	<ul>
		<li><a href="https://wikipedia.org">Link 1</a></li>
		<li><a href="https://wikipedia.org">Link 2</a></li>
		<li><a href="https://wikipedia.org">Link 3</a></li>
		<li><a href="https://wikipedia.org">Link 4</a></li>
		<li><a href="https://wikipedia.org">Link 5</a></li>
	</ul>
</nav>

CSS

* {
	margin: 0;
	padding: 0;
}
nav {
	width: 100%;
	background-color: white;
}
nav ul{
	list-style: none;
	float: left;
	width: 100%;
}
nav ul li{
	float: left;
	padding: 5px 30px;
	text-align: center;
}
@media (max-width: 600px) {
	nav ul li{
		width: 100%;
		padding: 15px 0px;
	}
	nav ul {
		display: none;
	}
}
.burgericon {
	width: 30px;
	height: 30px;
	display: none;
}
.burgericon div {
	width: 90%;
	margin: 7px 5%;
	height: 3px;
	background-color: black;
}
@media (max-width: 600px) {
	.burgericon {
		display: block;
	}
}
#navigation {
	opacity: 0;
}
#navigation:checked ~ ul {
	display: block;
}
#navigation:checked ~ label .burgericon {
	margin-top: 15px;
}
#navigation:checked ~ label .burgericon div:first-of-type{
	rotate: 45deg;
}
#navigation:checked ~ label .burgericon div:last-child{
	rotate: -45deg;
	margin-top: -10px;
}
#navigation:checked ~ label .burgericon div:nth-child(2){
	display: none;
}

CSS Tutorial

Voriger Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Zur Turtorial-Reihe: CSS Tutorial

Tag 2 des Workshops, diesmal setzte ich das Design, mit CSS, pixelgnau um. Des weiteren erkläre ich euch was CSS Variablen sind.

Video

Workshop

• Workshop – Tag 1 – Wie baue ich ein fluides Webdesign
• Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen
• Breakpoints & Navigation
• Flexbox

HTML

<html>
  <head>
    <title>100 Bücher</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <nav>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <ul>
        <li><a href="#">Thriller</a></li>
        <li><a href="#">Roman</a></li>
        <li><a href="#">Fantasy</a></li>
        <li><a href="#">Science Fiction</a></li>
        <li><a href="#">Horror</a></li>
        <li><a href="#">Klassik</a></li>
        <li><a href="#">Reportage</a></li>
        <li><a href="#">Memoire</a></li>
        <li><a href="#">Kinderbuch</a></li>
        <li><a href="#">Fitness</a></li>
      </ul>
    </nav>
    <main>
      <h1>100 Bücher, die du lesen musst, bevor du stirbst</h1>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_thriller.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box roman">
        <h2><a href="#">Roman</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_roman.png" alt="roman bücher top 3" />
        <div>
          <a href="#" class="genre_button">Roman öffnen</a>
        </div>
      </div>
      <div class="genre_box fantasy">
        <h2><a href="#">Fantasy</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_fantasy.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fantasy öffnen</a>
        </div>
      </div>
      <div class="genre_box fiction">
        <h2><a href="#">Science Fiction</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_fiction.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Science Fiction öffnen</a>
        </div>
      </div>
      <div class="genre_box horror">
        <h2><a href="#">Horror</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_horror.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Horror öffnen</a>
        </div>
      </div>
      <div class="genre_box classic">
        <h2><a href="#">Klassik</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_klassik.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Klassik öffnen</a>
        </div>
      </div>
      <div class="genre_box reportage">
        <h2><a href="#">Reportage</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_reportage.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Reportage öffnen</a>
        </div>
      </div>
      <div class="genre_box memoire">
        <h2><a href="#">Memoire</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buercher_memorie.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Memoire öffnen</a>
        </div>
      </div>
      <div class="genre_box kinderbuch">
        <h2><a href="#">Kinderbuch</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_kinderbuch.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Kinderbuch öffnen</a>
        </div>
      </div>
      <div class="genre_box fitness">
        <h2><a href="#">Fitness</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher_fitness.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Fitness öffnen</a>
        </div>
      </div>
    </main>
    <footer>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <div class="footer_nav">
        <a href="#">Startseite</a>
        <a href="#">Impressum</a><br/>
        <span>©  Marc Borkowski</span>
      </div>
    </footer>
  </body>
</html>

CSS

:root {
  --genrefarbe: grey;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  min-width: 960px;
}

nav {
  width: 100%;
  height: 47px;
  background-color: #f3f3f3;
  border-bottom: 1px solid brown;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav img {
  height: 27px;
  width: auto;
  float: left;
  margin: 11px 19px;
}

nav ul {
  list-style: none;
  float: left;
  padding: 0;
}

nav ul li {
  float: left;
  margin: -1px 3px;
}

nav ul li a {
  text-decoration: none;
  color: brown;
  padding: 4px 6px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 11pt;
}

nav ul li a:hover {
  color: white !important;
  background-color: black;
}

main {
  float: left;
  padding: 10px;
}

main h1 {
  font-size: 30px;
  text-align: center;
  margin: 41px auto 34px;
}

main .genre_box {
  width: calc( 25% - 20px);
  margin: 10px;
  border: 1px solid var(--genrefarbe);
  padding: 10px 14px 80px 14px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  float: left;
  position: relative;
  font-size: 13px;
  line-height: 150%;
}

main .genre_box h2{
  text-align: center;
  font-size: 18px;
  margin: 0px 0 20px;
}

main .genre_box h2 a{
  color: brown;
  text-decoration: none;
}

main .genre_box p {
  text-align: left;
}

main .genre_box img {
  position: absolute;
  bottom: -45px;
  margin: 0 auto;
  transition: bottom 1s ease;
  left: calc( 50% - 80px);
}

main .genre_box:hover img {
  bottom: -30px;
}

main .genre_box .genre_button {
  position: absolute;
  bottom: -100px;
  border: 1px solid var(--genrefarbe);
  margin: 0 auto;
  transition: bottom 0.75s ease;
  background-color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  color: brown;
  left: calc( 50% - 64px);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

main .genre_box:hover .genre_button {
  bottom: 20px;
}

footer {
  width: 100%;
  border-top: 1px solid brown;
  padding: 100px 14px;
  background-color: #f3f3f3;
  box-sizing: border-box;
  margin: 150px 0 0 0;
  float: left;
}

footer img{
  width: 250px;
}

footer .footer_nav {
  float: right;
  width: 250px;
}

footer span {
  padding: 20px 0;
  display: inline-block;
}

footer .footer_nav a{
  text-decoration: none;
  color: brown;
}

a {
  color: #a86e22 !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Roboto Slab', serif;
}

.roman {
  --genrefarbe: #9700b8;
}

.fantasy {
  --genrefarbe: #0084ff;
}

.fiction {
  --genrefarbe: #0e8f94;
}

.horror {
  --genrefarbe: black;
}

.classic {
  --genrefarbe: #ffc600;
}

.reportage {
  --genrefarbe: #96ff00;
}

.memoire {
  --genrefarbe: #6600ff;
}

.kinderbuch {
  --genrefarbe: #06a60a;
}

.fitness {
  --genrefarbe: #ff0000;
}

In dieser Programmier-Session zeige ich wie man ein fluides Webdesign umsetzt. Ich zeige es nur grob, nicht wie man ein 1:1 Design baut, da dies zu viel Zeit beanspruchen würde.

Video

Workshop

• Workshop – Tag 1 – Wie baue ich ein fluides Webdesign
• Workshop – Tag 2 – Webdesign pixelgenau und CSS Variablen
• Breakpoints & Navigation
• Flexbox

HTML Code

<html>
  <head>
    <title>100 Bücher</title>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <nav>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li><a href="#">Link 10</a></li>
      </ul>
    </nav>
    <main>
      <h1>100 Bücher</h1>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
      <div class="genre_box">
        <h2><a href="#">Thriller</a></h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <img src="buecher.png" alt="thriller bücher top 3" />
        <div>
          <a href="#" class="genre_button">Thriller öffnen</a>
        </div>
      </div>
    </main>
    <footer>
      <img src="logo.svg" alt="100 Bücher Logo" />
      <div class="footer_nav">
        <a href="#">Startseite</a>
        <a href="#">Impressum</a><br/>
        © Marc Borkowski
      </div>
    </footer>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}
nav {
  width: 100%;
  height: 60px;
  background-color: #f3f3f3;
  border-bottom: 1px solid brown;
  position: sticky;
  top: 0;
  z-index: 100;
}
nav img {
  height: 50px;
  width: auto;
  float: left;
  margin: 5px 10px;
}
nav ul {
  list-style: none;
  float: left;
}
nav ul li {
  float: left;
  margin: 5px;
}
nav ul li a {
  text-decoration: none;
  color: brown;
  padding: 5px 10px;
}
nav ul li a:hover {
  color: white;
  background-color: black;
}
main {
}
main h1 {
  font-size: 35px;
  text-align: center;
  margin: 50px auto;
}
main .genre_box {
  width: calc( 25% - 28px);
  margin: 14px;
  border: 1px solid grey;
  padding: 0 10px 50px 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  float: left;
  position: relative;
}
main .genre_box h2{
  text-align: center;
}
main .genre_box h2 a{
  color: brown;
  text-decoration: none;
}
main .genre_box p {
  text-align: left;
}
main .genre_box img {
  position: absolute;
  bottom: -45px;
  margin: 0 auto;
  transition: bottom 1s ease;
  left: calc( 50% - 80px);
}
main .genre_box:hover img {
  bottom: -30px;
}
main .genre_box .genre_button {
  position: absolute;
  bottom: -100px;
  border: 1px solid grey;
  margin: 0 auto;
  transition: bottom 0.75s ease;
  background-color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  color: brown;
  left: calc( 50% - 64px);
}
main .genre_box:hover .genre_button {
  bottom: 20px;
}
footer {
  width: 100%;
  border-top: 1px solid brown;
  padding: 100px 14px;
  background-color: #f3f3f3;
  box-sizing: border-box;
  clear: both;
}
footer img{
  width: 250px;
}
footer .footer_nav {
  float: right;
  width: 250px;
}
footer .footer_nav a{
  text-decoration: none;
  color: brown;
}

Tabellen sind ein praktisches Werkzeug auf Websites, aber die mobile Ansicht bringt Probleme. Deswegen habe ich ein CSS Workaround für Tabellen gebaut, mit der die Tabellen horizontal Scrollbar werden.

Demo

Tabelle erstellen

Zu erst schreibst du eine normale HTML Tabelle. Darum kommt noch ein DIV als Wrapper.

<div class="tableWrapper">
  <table>
    <tbody>
      <tr>
          <th>Jahr</th>
          <th>Schule</th>
      </tr>
      <tr>
          <td>2020 – 2022</td>
          <td>Medien Colleg Rostock</td>
      </tr>
      <tr>
          <td>2013 – 2015</td>
          <td>HTW Berlin</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

Dem DIV Wrapper sagen wir, dass auf der X Achse gescrollt werden soll. Der Tabelle geben wir das Attribut border-collapse: collapse.

.tableWrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}

Fazit

Jetzt kann man auf mobilen Geräten die Tabelle horizontal scrollen, da auf fast allen mobilen Geräten keine Scrollbar bzw. nur eine dezente vorhanden ist, sieht es auch ganz gut aus.

In diesem Part erkläre ich, wie man mit CSS, den Linktree Clone styled.

erster Style

Um HTML zu stylen benötigt man ein <style> Tag im head Bereich. In eigentlich allen Fällen resetted man erst mal die Browser Einstellungen.

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

Dieser Code muss, wie erwähnt, in den head Bereich in das HTML Gerüst.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marc</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <h1>Willkommen bei Marc's Linkliste</h1>
    <img src="marc.jpg" width="150"/>
    <ul>
        <li><a href="https://boolie.org">mein Blog</a></li>
        <li><a href="https://twitter.com/BoolieMagazin">Twitter</a></li>
        <li><a href="https://www.instagram.com/marc_borkowski/">Instagram</a></li>
        <li><a href="https://www.getrevue.co/profile/booliemagazin">Newsletter</a></li>
    </ul>
  </body>
</html>

Wenn du jetzt die HTML Datei im Browser öffnest, bzw. wenn du die schon offen hast F5 drücken, siehst du, dass die Abstände zum Rand entfernt worden sind.

Erläuterung

* selektiert alle Elemente
margin heißt übersetzt Rand, sprich wir setzen den Rand auf 0
padding kann man mit Polster übersetzen, ist an sich der Rand nach innen, der wird auch auf 0 gesetzt

zentrieren und Breite eingrenzen

Zuerst muss ein div Element um unseren Inhalt gesetzt werden, das Element muss das Attribut class mit dem wert container haben.

  <body>
    <div class="container">
      <h1>Willkommen bei Marc's Linkliste</h1>
      <img src="marc.jpg" width="150"/>
      <ul>
          <li><a href="https://boolie.org">mein Blog</a></li>
          <li><a href="https://twitter.com/BoolieMagazin">Twitter</a></li>
          <li><a href="https://www.instagram.com/marc_borkowski/">Instagram</a></li>
          <li><a href="https://www.getrevue.co/profile/booliemagazin">Newsletter</a></li>
      </ul>
    </div>
  </body>

Durch class=“container“ können wir jetzt mit CSS das div Element ansprechen und stylen.

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 666px;
        margin: auto;
        text-align: center;
        background-color: #333333;
        color: #ffffff;
      }
    </style>

Trage den CSS Code in das style Tag ein und schaue dir das Ergebnis an.

Erläuterung

.container selektiert alle Elemente mit der Klasse container
max-width heißt übersetzt maximale Breite, sprich wir setzen die maximale Breite unseres div Elements auf 666px
margin: auto; sagt das links und rechts der gleiche Abstand sein soll
text-align definiert den Textfluss, bei uns ist es center sprich der Text ist zentiriert
background-color gibt die Hintergrundfarbe an, ich verwende meistens Hexadezimalwerte, du kannst in Visual Studio Code über das farbige Viereck hovern und eine Farbe aussuchen
color gibt die Farbe für den Text an, wieder in Hexadezimal Farbwert

Du wunderst dich warum die Links eine andere Farbe haben? Weil der Browser standartmäßig Links mit blau / lila einfärbt und dies muss händisch geändert werden. Dazu später.

Abstände

Jetzt wollen wir das alles ein wenig weniger klemmend machen (alles zu nah aneinander, dadurch wirkt es alles gequetscht).

h1 {
  padding: 30px 0;
}

Man kann auch direkt HTML Elemente ansprechen, wenn man vorne den Punkt weglässt. Das wird ein Tag angesprochen, in unserem Fall das H1 Element.

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 666px;
        margin: auto;
        text-align: center;
        background-color: #333333;
        color: #ffffff;
      }
      h1 {
        padding: 30px 0;
      }
</style>

Erläuterung

h1 selektiert alle HTML Elemente H1
padding: 30px 0; 30 px gibt den inneren Rahmen oben und unten an, 0 gibt den Rahmen links und rechts an
Es gibt 4 Schreibweisen:
padding: 30px; alle Seiten haben ein Rahmen von 30px
padding: 30px 0px; oben und unten 30px, links und rechts 0px
padding: 30px 0px 15px; oben 30px, links und rechts 0px, unten 15px
padding: 30px 10px 15px 20px; oben 30px, rechts 10px, unten 15px und links 20px

Bild abrunden

Mich stört ein wenig die 150 im img Element, lösch dieses wieder raus, wir machen das mit CSS. Des weiteren gebe dem img noch die Klasse portrait

<img src="marc.jpg" class="portrait"/>

Jetzt kommt CSS zum Einsatz.

.portrait {
  width: 150px;
  height: auto;
  border-radius: 10%;
}

Erläuterung

.portrait selektiert alle Elemente mit der Klasse portrait
width gibt die Breite an (was wir vorher mit with=“150″ gemacht hatten, bloß mit CSS)
height: auto; gibt die Höhe an, auto sagt, es soll die proportionen vom Bild beibehalten
border-radius die Ecken sollen 10% abgerundet werden, wenn du 50% einträgst wirst du ein Oval bzw. Kreis erhalten (mehr als 50% geht nicht, da 2 Ecken jeweils 50% dann 100% ergeben)

Links schick machen

Die Links zu unseren Accounts sehen noch ein wenig, naja scheiße, aus. Das ändern wir jetzt.

      ul li {
        list-style: none;
        margin: 15px 0;
      }
      ul a {
        padding: 12px 0;
        width: 90%;
        margin: auto;
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        background-color: #000000;
      }
      ul a:hover {
        background-color: #333333;
      }

Fühl sich von dem ganzen Code nicht überrollt, das meiste beherrschst du schon.

Erläuterung

ul li selektiert alle li Elemente, die im ul drin sind
list-style entfernt die Punkte von der Liste
border-color gibt die Farbe vom Rahmen an
border-width gibt die Breite vom Rahmen an
border-style: solid; sagt, dass der Rahmen eine durchgezogene Linie sein soll
display: inline-block; gibt das Verhalten von einem Element an, werde dazu später noch ein extra Tutorial schreiben
text-decoration entfernt die unterstreichung bei Links
a:hover damit definiert man ein Event (in diesem Fall, mit der Maus über den Link) einen Style

Allgemeines styling

Jetzt noch die letzten Feinheiten ausbessern.

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 666px;
        margin: auto;
        text-align: center;
        background-color: #333333;
        color: #ffffff;
        padding-bottom: 30px;
        margin-top: 100px;
      }
      h1 {
        padding: 30px 0;
      }
      .portrait {
        width: 150px;
        height: auto;
        border-radius: 10%;
      }
      ul li {
        list-style: none;
        margin: 15px 0;
      }
      ul a {
        padding: 12px 0;
        width: 90%;
        margin: auto;
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        background-color: #000000;
      }
      ul a:hover {
        background-color: #333333;
      }
      body {
        background-image: url("hacker.jpg");
        background-size: cover;
      }
    </style>

Jetzt bist du an einem Punkt, an dem du es lesen können müsstest, wenn du bestimmte Eigenschaften nicht kennst, einfach im web suchen.

Das i-Tüpfelchen: Schriftfamilie ändern

Gehe auf https://fonts.google.com/ und lade dir eine Familie runter, die dir gefällt. Ich habe mich für Antonio entschieden, einmal in der stärke 300 und 700.

Trage in den head Bereich den HTML Code ein.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@300;700&display=swap" rel="stylesheet">

Schreibe in den body die Familie rein (Natürlich den Namen kopieren, der bei Google Font drin steht).

      body {
        background-image: url("hacker.jpg");
        background-size: cover;
        font-family: 'Antonio', sans-serif;
      }

Schrift-Stärken definieren. Trage bei ul a folgendes ein:

font-weight: 300;

und bei h1:

font-weight: 700;

Ergebnis

Code

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marc</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 666px;
        margin: auto;
        text-align: center;
        background-color: #333333;
        color: #ffffff;
        padding-bottom: 30px;
        margin-top: 100px;
      }
      h1 {
        padding: 30px 0;
        font-weight: 700;
      }
      .portrait {
        width: 150px;
        height: auto;
        border-radius: 10%;
      }
      ul li {
        list-style: none;
        margin: 15px 0;
      }
      ul a {
        padding: 12px 0;
        width: 90%;
        margin: auto;
        border-color: #999999;
        border-width: 1px;
        border-style: solid;
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        background-color: #000000;
        font-weight: 300;
      }
      ul a:hover {
        background-color: #333333;
      }
      body {
        background-image: url("hacker.jpg");
        background-size: cover;
        font-family: 'Antonio', sans-serif;
      }
    </style>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Antonio:wght@300;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Willkommen bei Marc's Linkliste</h1>
      <img src="marc.jpg" class="portrait"/>
      <ul>
          <li><a href="https://boolie.org">mein Blog</a></li>
          <li><a href="https://twitter.com/BoolieMagazin">Twitter</a></li>
          <li><a href="https://www.instagram.com/marc_borkowski/">Instagram</a></li>
          <li><a href="https://www.getrevue.co/profile/booliemagazin">Newsletter</a></li>
      </ul>
    </div>
  </body>
</html>

Bonus

Wenn du die Hintergrundfarbe vom container transparent haben möchtest, musst du als background-color rgba benutzen.

background-color: rgba(60,60,60,0.6);

Voriger Schritt: Linktree nachbauen (HTML)

Zur Turtorial-Reihe: Website Kurs – Linktree nachbauen

Nächster Schritt: Website ins Internet laden (Hoster: Manitu)

In diesem Beitrag zeige ich, wie man Checkboxen selektiert und stylen kann. Ich werde die System-Schaltflächen ausblenden und mit CSS selbst gestaltete hinzufügen.

• HTML Code
• Selektor und ausblenden
• einfaches Viereck erstellen
• Statuswechsel anzeigen
• erweitertes Styling
• checked mit Bildern
• Checkbox wie ein Switch

HTML Code

Vorab erstmal den HTML Code für eine Checkbox und das Label

<input id="confirm" type="checkbox" /><label for="confirm">Label content</label>

einfaches Viereck erstellen

Zum einfügen des Vierecks verwende ich das ::before Statement, es fügt vor dem ausgewählten HTML Objekt ein Element hinzu.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  background-color: #000;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}

Subscribe to newsletter?

Statuswechsel anzeigen

Damit für den Benutzer die Änderung sichtbar wird, soll die Farbe auf Rot wechseln, wenn die Checkbox angeklickt wird.

input[type="checkbox"]:checked+label::before {
  background-color: #c72f2f;
}

Subscribe to newsletter?

erweitertes Styling

Mit ein par weiteren CSS Eigenschaften kann man mit CSS sich schöne Buttons erstellen.

[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #8cad2d;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #8cad2d;
}

Subscribe to newsletter?

checked mit Bildern

Es ist auch möglich ein Bild zu verwenden, das Bild als background-image setzen und schon wird es verwendet.

[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label::before {
  width: 22px;
  height: 18px;
  background-image: url("unchecked.png");
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  background-image: url("checked.png");
}

Subscribe to newsletter?

Checkbox wie ein Switch

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS Tutorial

Voriger Schritt: CSS mehrere Transition versetzt starten

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Übungsaufgaben [Animation & Verlauf]

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen.

Animiertes Burger Menü

Aufgabe: Es soll ein animiertes Burger Menü-Icon erstellt werden. In diesem Beispiel bei einem hover Event ausgelöst werden.
Hamburger Menü Animation Lösung

Wiederholung Menu Animation

Aufgabe: Ein Burger Menu, soll zu einem Pfeil transformieren.
CSS Burger Arrow Menu Lösung

Animiertes Input-Text-Feld mit Validation

E-Mail

Aufgabe: Es soll ein Inputfeld erstellt werden, wenn man drauf klickt, soll das Label nach oben sliden und die Farbe bei der Validierung ändern.
Textinput Animation Lösung

Text mit Verlauf

The quick brown fox jumps over the lazy dog

Aufgabe: Es soll ein Text mit einem Verlauf gefüllt werden.
CSS Verlauf im Text Lösung

Warnsignal Animation

Aufgabe: Animiere ein Farb- Transparent- Verlauf so, dass es wie ein Alarm aussieht.
CSS animieter Alarm Lösung

Kombination aus den letzten beiden Übungen

The quick brown fox jumps over the lazy dog

Aufgabe: Animiere einen Text so, dass es so aussieht, als ob ein Scan durchgeführt wird.
CSS Scan-Text Animation Lösung

SVG Animation

Dem zu animierenden Objekt im SVG eine ID geben und diese mit CSS animieren.

<path id="cat_head" d="M244.4,0l-21.2,12.2l-10.9,6.3c-3.8-1.2-7.8-1.9-12-1.9c-5.3,0-10.3,1-14.8,2.9l-8.3-4.8L156,2.5l3.9,24.1l3.9,23.8
           c0.1,18.5,16.4,33.4,36.5,33.4c20.2,0,36.5-15.1,36.5-33.6c0-1-0.1-1.9-0.1-2.9l3.8-23.2L244.4,0z M183,48c-5.3,0-9.5-3.2-9.5-7.1
           c0-3.9,4.3-7.1,9.5-7.1s9.5,3.2,9.5,7.1C192.5,44.8,188.3,48,183,48z M216,46.9c-5.3,0-9.5-3.2-9.5-7.1s4.3-7.1,9.5-7.1
           s9.5,3.2,9.5,7.1S221.3,46.9,216,46.9z"/>

#cat_head{
  animation: headbang 2s ease infinite alternate;
}
@keyframes headbang {
  0% {
    transform: rotate(5deg);
    transform-origin: 90% 30%;
  }
  100% {
    transform: rotate(-5deg);
    transform-origin: 70% 30%;
  }
}

CSS Tutorial

Voriger Schritt: CSS: Checkbox styling

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: responsive Navigation mit Burgermenü

In dieser Tutorial-Reihe erkläre ich dir, das Basiswissen von CSS. Von Typografie bis zum Layout bekommst du hier, das Basiswissen, vermittelt.

Was ist CSS?

CSS ist eine Gastaltungs und Formatierungssprache, mit dieser Sprache kann man HTML Elemente stylen. Mit CSS kannst du Schrift, Farbe und Form einer Website definieren. CSS wird von allen Browser unterstützt und ist somit ein Web-Standart, den Standart definiert die World Wide Web Consortium. Der große Vorteil von CSS ist, es kann der Inhalt vom gestalterischen getrennt werden. Dadurch gewinnt man bei einer Website eine übersichtlichkeit und kann eine klare Struktur aufbauen.

CSS Tutorials

Styles definieren

Übersicht, wie du Styles auf HTML-Elemente anwendest. Von der Klasse bis zum hover Effekt. CSS Styles definieren

Kombinationsmöglichkeiten in CSS

Anleitung, wie du verschiedene Selektoren miteinander verknüpfst. Des weiteren eine Übung, wie du ein Teaser-Element baust. CSS Klassen kombinieren.

das Flexbox System

Mit Flexbox kannst du die Website designen und gestalten. Mit diesem System ist es möglich ein dynamisches Design zu erstellen, sprich es passt sich der Bildschirmgröße an. CSS Flexbox Tutorial.

Transitions versetzt starten

Mit transitions kannst du einfache Animationen, mit CSS, erstellen. In diesem Tutorial, zeige ich dir, wie du diese verketten kannst und mehrere Effekte aneinander reihst CSS mehrere Transition versetzt starten.

Checkbox stylen

Formelemente mit CSS zu stylen ist nicht gerade einfach, da dies Systemschaltflächen sind. Deswegen am Beispiel der Schwersten Schaltfläche ein Tutorial, wie du das Design änderst CSS: Checkbox styling.

responsive Tabelle

Simpler Hack wie man mit CSS und einem Wrapper eine Tabelle responsive macht (auf mobilen ‚Geräten horizontal scroll). CSS: responsive Tabellen

Übungsaufgaben

Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen. CSS Übungsaufgaben [Animation & Verlauf]

responsive Navigation mit Burgermenü

Mit diesem Tutorial lernst du, wie du mit HTML/CSS eine responsive Navigation baust. Zum ein- und ausklappen der mobilen Navigation hast du ein Burger-Icon. responsive Navigation mit Burgermenü

geplante Tutorials 2021

• CSS in HTML einbinden
• das Grid Stystem
• Animationen mit CSS
• Formelemente stylen
• Pseudoklassen
• Typografie/Schrift definieren
• Farben und Verläufe
• CSS Debuggen

Flexbox ist der moderne Weg eine Seite zu layouten. Anhand von Beispielen zeige ich dir, wie du dynamische Element-Größen erstellst. Die Idee hinter Flexbox ist das dynamische Ändern von Größen der Unterelemente, damit die beste Größe benutzt wird. Der Flex Container passt sich dem verfügbaren Platz an und vergrößert bzw. verkleinert die Unterelemente.

Ich zeige dir Anhand von Design, Produktübersicht und Gallery wie du mit Flexbox arbeiten kannst. Des weiteren erhälst du noch eine Übersicht aller Flexbox Eigenschaften und den Beschreibungen.

Übersicht

1. Basics
2. Produktübersicht Beispiel
3. Eigenschaften Container
   1. flex
   2. flex-direction
   3. flex-wrap
   4. justify-content
   5. align-items

Basics

Flex setzt sich aus einem Container und den Elementen zusammen. Dabei ist zu beachten, dass der Flex-Container nur eine Ebene unter sich selbst wirksam ist. Wenn du ein Container hast, werden nur die direkten Unterelemente davon etwas mitbekommen, die Elemente die in den Elementen sind bekommen nichts von Flex mit.

<div class="flex-container">
  <div class="flex-element"></div>
  <div class="flex-element"></div>
  <div class="flex-element"></div>
</div>

Produktübersicht Beispiel

In diesem Beispiel sollen 10 Produkte angezeigt werden. Die Kacheln sollen alle gleich Groß sein und den selben Abstand zwischen den Kacheln und dem Rand haben.

Schritt 1 – die HTML Struktur

Zuerst brauchen wir die HTML Struktur, die ein Container aufweist und 10 Produkt Kacheln.

  <div class="flex-container">
    <div class="product-tile">
      <img src="zucker.jpg" alt="Karotten">
      <h2>Zucker</h2>
      <span>1,10 €</span>
    </div>
    <div class="product-tile">
      <img src="milch.jpg" alt="Karotten">
      <h2>Milch</h2>
      <span>1,00 €</span>
    </div>
    <div class="product-tile">
      <img src="mandeln.jpg" alt="Karotten">
      <h2>Mandeln</h2>
      <span>4,00 €</span>
    </div>
    <div class="product-tile">
      <img src="käse.jpg" alt="Karotten">
      <h2>Käse</h2>
      <span>2,50 €</span>
    </div>
    <div class="product-tile">
      <img src="karotten.jpg" alt="Karotten">
      <h2>Karotten</h2>
      <span>2,00 €</span>
    </div>
    <div class="product-tile">
      <img src="fleisch.jpg" alt="Karotten">
      <h2>Fleisch</h2>
      <span>6,00 €</span>
    </div>
    <div class="product-tile">
      <img src="erdbeeren.jpg" alt="Karotten">
      <h2>Erdbeeren</h2>
      <span>3,10 €</span>
    </div>
    <div class="product-tile">
      <img src="eier.jpg" alt="Karotten">
      <h2>Eier</h2>
      <span>1,80 €</span>
    </div>
    <div class="product-tile">
      <img src="brot.jpg" alt="Karotten">
      <h2>Brot</h2>
      <span>2,40 €</span>
    </div>
  </div>

Das sieht dann im Browser wie folgt aus:

Schritt 2 – CSS Magic

Jetzt stylen wir die Kacheln und den Container so, dass er nach einer ordentlichen Produktübersicht aussieht.

    .flex-container {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      align-content: stretch;
      align-items: stretch;
    }
    .product-tile {
      border: 2px solid black;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 150px;
      margin: 0 12px 24px;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    img {
      width: 100%;
    }

Nach dem übertragen der CSS Attribute sieht dann unsere Produktübersicht wie folgt aus:

Schritt 3 – leere Kacheln

Das ist aber noch nicht das Ergebnis das wir haben wollen, es sollen alle Kacheln gleich groß sein und sollen den gleichen Abstand zu einander haben. Dafür werden leere Kacheln benötigt, am besten so viele wie Kacheln selbst vorhanden sind, aber ich rechne immer mit 2000px / Kachelbreite (Flex Basis). Sprich unsere Kachelbasis ist 150px deswegen brauchen wir jetzt 2000/150 = 13,3 Kacheln… sicher ist sicher also lieber 14.

    <div class="product-tile">
      <img src="brot.jpg" alt="Karotten">
      <h2>Brot</h2>
      <span>2,40 €</span>
    </div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>
    <div class="product-tile"></div>

Jetzt müssen die leeren Kacheln noch unsichtbar werden.

.product-tile:empty {
  order: 999999999999999999999;
  height: 0;
  border: 0;
}

Demo öffnen

Eigenschaften Container

Display Flex

Definiert den Container als Flex

.container {
  display: flex;
}

Alternativ kann auch flex-inline verwendet werden. Wenn es als Layout verwendet werden soll, nimmt man flex. Wenn es z.B. in einem Artikel oder Navigation verwendet wird, nimmt man flex-inline.

.container {
  display: flex-inline;
}

flex-direction

Mit flex-direction gibt man die Flußweise an, z.B bei row fließen die Elmente von links nach rechts, bei row-reverse von rechts nach links, bei column von oben nach unten und bei column-reverse von unten nach oben.

flex-direction: row

    .flex-container {
      display: flex;
      flex-direction: row;
    }

flex-direction: row-reverse

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction: column

.flex-container {
  display: flex;
  flex-direction: column;
}

flex-direction: column-reverse

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap

Flex Wrap gibt ann wie die Elemente umbrechen. Sprich bei nowrap werden alle Elemente in einer Zeile angezeigt und werden gequetscht. Bei wrap werden die Elemente umgebrochen, wenn sie die Breite erreicht haben fängt eine neue Zeile an. wrap-reverse macht das gleiche wie wrap, bloß die Elemente werden invertiert, sprich das letzte Element wird als erstes Angezeigt und die Zeilen werden von unten nach oben aufgefüllt.

flex-wrap: nowrap

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap: wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

justify-content

Justify Content definiert den Platz zwischen den Elementen. Sprich es berechnet die dynamischen Abstände zwischen den Elementen wenn diese an der Hauptachse ausgerichtet sind.

justify-content: flex-start

.flex-container {
  display: flex;
  justify-content: flex-start;
}

justify-content: flex-end

.flex-container {
  display: flex;
  justify-content: flex-end;
}

justify-content: center

.flex-container {
  display: flex;
  justify-content: center;
}

justify-content: space-between

.flex-container {
  display: flex;
  justify-content: space-between;
}

justify-content: space-around

.flex-container {
  display: flex;
  justify-content: space-around;
}

justify-content: space-evenly

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

align-items

Align-Items ist die horizontale Version von Justify Content, es richtted die Elemente an der Horizontalen Line aus.

align-items: stretch

.flex-container {
  display: flex;
  align-items: strech;
}

align-items: flex-start

.flex-container {
  display: flex;
  align-items: flex-start;
}

align-items: flex-end

.flex-container {
  display: flex;
  align-items: flex-end;
}

align-items: center

.flex-container {
  display: flex;
  align-items: center;
}

align-items: baseline

.flex-container {
  display: flex;
  align-items: baseline;
}

CSS Tutorial

Voriger Schritt: CSS Klassen kombinieren

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS mehrere Transition versetzt starten