Positionieren, Media Queries, CSS-Variablen / 2020-11-26 / Matthias Edler-Golla, CC BY-SA 4.0



Themen

  1. Positionieren von Elementen
  2. Media Queries
  3. CSS-Variablen
  4. Grid-Layout „dense“

Abfrage des bisherigen Wissen

Wie schaut die CSS-Anweisung aus, dass nur der Text „hauptsächlich mit Typografie.“ rot wird?

HTML

<body>

    <div class="intro">
        <h1>Meine Website</h1>
        <p>Ich bin Gestalter und <span>will berühmt werden</span></p>
    </div>

    <div class="content">
        <h2>Portfolio</h2>
        <p>In meinen Arbeiten beschäftige ich mich <span>hauptsächlich mit Typografie.</span></p>
    </div>

</body>

CSS

/* welche Zeile ist richtig? */
div p span {color: red;}
.content span {color: red;}
body div p span {color: red;}

Abfrage des bisherigen Wissen 2

Wie erzeugt man ein 5-spaltiges Grid-Layout mit 15px Abstand zwischen den Grid-Columns?

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
</div>

Abfrage des bisherigen Wissen 2 - Lösung

Wie erzeugt man ein 5-spaltiges Grid-Layout mit 15px Abstand zwischen den Grid-Columns?

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
</div>

CSS

.galerie {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
}

Positionieren

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

Es gibt fünf Möglichkeiten, Elemente zu positionieren:

  1. Position: Static (die Default-Einstellung)
  2. Position: Relative
  3. Position: Absolute
  4. Position: Fixed
  5. Position: Sticky

Damit könnt Ihr Elemente völlig frei innerhalb des Browserfensters positionieren!


Koordinaten-System

Der Ursprung (0,0) befindet sich im Web in der linken, oberen Ecke – von dort aus wird jeweils gemessen!

das ist übrigens in praktisch allen Computer-Programmen so …


Position: Static

diese Einstellung haben alle Blockelemente als Default – die Elemente verhalten sich so wie bisher …

HTML

<section class="container">
  <figure class="box-1">Box 1</figure>
  <figure class="box-2">Box 2</figure>
  <figure class="box-3">Box 3</figure>
  <figure class="box-4">Box 4</figure>
</section>

CSS

.container {
  background: #7a7a7a;
}

figure {
  background: #336699;
  border: 1px solid white;
  height: 70px;
  width: 500px;
  margin: 5px;
  /* nächste Zeil muss nicht geschrieben werden, weil dies die Grundeinstellung in allen Browsern ist! */
  position: static;
}

Position: Relativ

durch „Position: relativ" kann man Elemente relativ zu ihrer Default-Position verschieben – die Stelle, an der sich zuvor das Element befand, wird dabei nicht geschlossen!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<section class="container">
  <figure class="box-1">Box 1</figure>
  <figure class="box-2">Box 2</figure>
  <figure class="box-3">Box 3</figure>
  <figure class="box-4">Box 4</figure>
</section>

CSS

.container {
  background: #7a7a7a;
}

figure {
  background: #336699;
  border: 1px solid white;
  height: 70px;
  width: 500px;
  margin: 5px;
}

.box-2 {
    /* box-2 wird um 80px nach rechts und 60px nach oben verschoben */
    position: relative;
    left: 80px;
    top: -60px;
}

.box-4 {
    /* box-4 wird nur um 40px nach rechts verschoben */
    position: relative;
    left: 40px;
}

CodePen

See the Pen position_relative by Matthias Edler-Golla (@megolla) on CodePen.


Position: Absolute

Absolutes Positionieren ist der radikalste Eingriff, den Ihr via CSS in einem HTML-Dokument machen könnt! Die Elemente werden komplett aus ihrem „natürlichen Kontext" genommen.

Absolut positionierte Elemente verhalten sich in etwa so wie Ebenen in Photoshop: Sie haben nichts mehr mit den darunter liegenden Ebenen zu tun.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<section class="container">
  <figure class="box-1">Box 1</figure>
  <figure class="box-2">Box 2</figure>
  <figure class="box-3">Box 3</figure>
  <figure class="box-4">Box 4</figure>
</section>

CSS

.container {
    width: 80%;
    margin: 5% auto;
    background: #7a7a7a;
    height: 400px;
    /*
    ganz wichtig, sonst beziehen sich die
    Positionsangaben auf das Browserfenster!
    */
    position: relative;
}

figure {
  background: rgba(51, 102, 153, 0.8);
  border: 1px solid white;
  height: 70px;
  width: 200px;
  padding: 10px;
  color: white;
}

.box-1 {
    /* Bezug zur linken, oberen Kante von ".container" */
    position: absolute;
    left: 30%;
    top: 86px;
}

.box-2 {
    /* Bezug zur rechten, oberen Kante von ".container" */
    position: absolute;
    right: 20px;
    top: 40px;
}

.box-3 {
    /* Bezug zur rechten, unteren Kante von ".container" */
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.box-4 {
    /* Bezug zur linken, unteren Kante von ".container" */
    position: absolute;
    left: 0px;
    bottom: 0px;
}

Position: Absolute (Browserfenster)

Positioniert man ein Objekt absolute und definiert sonst nichts weiter, bezieht sich dieses Positionieren auf das Browserfenster!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<section class="container">
    <img class="stern" src="stern.svg" alt="stern">
</section>

CSS

.container {
    width: 80%;
    margin: 12% auto;
    background: #ddd;
    height: 150px;
}

.stern {
    width: 8em;
    /* nächsten 3 Zeilen positionieren den Stern */
    position: absolute;
    right: 8px;
    top: 23px;
}

Position: Absolute (Elternelement)

Positioniert man ein Objekt absolute und definiert via „Position: relative“ ein Elternelement, bezieht sich dieses Positionieren auf das Elternelement!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<!-- komplett identisch mit dem vorherigen Beispiel! -->
<section class="container">
    <img class="stern" src="stern.svg" alt="stern">
</section>

CSS

.container {
    width: 80%;
    margin: 12% auto;
    background: #ddd;
    height: 150px;

    /* die nächste Zeile macht ".container" zum Elternelement! */
    position: relative;
}

.stern {
    width: 8em;
    /* nächsten 3 Zeilen positionieren den Stern */
    position: absolute;
    right: 8px;
    top: 23px;
}

CodePen

See the Pen position_absolute by Matthias Edler-Golla (@megolla) on CodePen.


Position Absolute (Z-Index)

Mit Hilfe des z-index kann man festlegen, welches positioniertes Element im Vordergrund dargestellt wird.

… ohne z-index würde „Box-3“ die „Box-2“ überlappen!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<section class="container">
  <figure class="box-1">Box 1</figure>
  <figure class="box-2">Box 2</figure>
  <figure class="box-3">Box 3</figure>
  <figure class="box-4">Box 4</figure>
</section>

CSS

.box-1 {
    position: absolute;
    left: 20px;
    top: 40px;
}

.box-2 {
    background: rgba(217, 48, 48, 0.9);
    position: absolute;
    left: 80px;
    top: 90px;

    /* z-index bringt Element nach vorne */
    z-index: 10;
}

.box-3 {
    position: absolute;
    left: 260px;
    top: 40px;
}

.box-4 {
    position: absolute;
    left: 320px;
    top: 90px;
}

CodePen

See the Pen position_absolute_z_index by Matthias Edler-Golla (@megolla) on CodePen.


Position: Fixed

Fixiertes Positionieren wird sehr häufig verwendet, um z.B. das Navigationsmenü am oberen Rand des Browserfenster zu fixieren.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<nav>
    <ul>
        <li><a href="#top">Startseite</a></li>
        <li><a href="#top">Portfolio</a></li>
        <li><a href="#top">Aktuelles</a></li>
        <li><a href="#top">Über uns</a></li>
        <li><a href="#top">Kontakt</a></li>
    </ul>
</nav>

CSS

nav {
    background: #000;
    width: 100%;

    /* nächste Zeile fixiert nav am oberen Rand des Bildschirms*/
    position: fixed;

    left:0;
    top: 0;
}

ul {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

a, a:visited {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: .5em 1.5em .5em 0;
}

CodePen

See the Pen position_fixed by Matthias Edler-Golla (@megolla) on CodePen.


Position: Sticky

Position: sticky ist relativ neu: Ein wichtiges Zitat kann damit am oberen Rand des Browserfensters fixiert werden, wenn man scrollt…

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<main>
  <h1>Sticky Positioning</h1>
  <p>Lorem ipsum qui ex sale facilis…</p>
  <p>Principes dignissim dissentias quo ea…</p>
  <p>Vel ancillae offendit id…</p>

  <blockquote>Lorem ipsum dolor sit amet…</blockquote>

  <p>Id pro meis patrioque maiestatis…</p>
  <p>Ea vel dicam copiosae pertinacia…</p>
</main>

CSS

blockquote {
    width: 100%;
    …
    …

    position: sticky;
    top: 3em;
}

CodePen

See the Pen position_sticky by Matthias Edler-Golla (@megolla) on CodePen.


Positionieren: Alle Beispiele zum Herunterladen


Media Queries

http://mediaqueri.es/

Media Queries sind das „if, else & then“ im CSS

… damit kann man u.a. die zur Verfügung stehende Breite und Höhe abfragen und entsprechend darauf reagieren.

Beispiel

„Wenn das Browserfenster nur noch sehr schmal ist, soll das Navigationsmenü nicht mehr waagrecht dargestellt werden“


Media Queries: Inspiration

http://mediaqueri.es/

Auf dieser Seite könnt Ihr eine umfangreiche Sammlung an Websites finden, die Media-Queries einsetzen…


Media Query: Breite abfragen

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

/* normale Einstellung */
body {
    background: #fff;
    color: #444;
}

/* wenn Screen breiter als 500px wird: */
@media screen and (min-width: 500px){
    body {
        background: red;
    }
}

/* wenn Screen breiter als 800px wird: */
@media screen and (min-width: 800px){
    body {
        background: orange;
    }
}

CodePen

See the Pen media-query-breite-abfragen by Matthias Edler-Golla (@megolla) on CodePen.


Firefox: Responsive Design Mode

Firefox Inspector

Der Firefox Inspector hat ein Tool, mit dem man bequem testen kann, wie die jeweilige Website auf verschiedenen Smartphones und Tablets aussieht


Media Query: Menü umschalten

Sobald sich das Navigationsmenü nicht mehr waagrecht darstellen lässt, wird es senkrecht dargestellt!

Achtung: Bei diesem Beispiel habe ich nicht die Angabe „min-width“ sonder die alternative „max-width“ verwendet! Damit kann ich zuerst festlegen, wie das Desktop-Layout aussieht und schalte dann auf die SmartPhone-Ansicht um.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

nav ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

nav li {
    border-right: 1px solid #ddd;
}

/* wenn Screen SCHMALER als 480px wird: */

@media screen and (max-width: 480px){
    nav ul {
        /* damit ist es kein Grid mehr! */
        display: block;
    }

    nav li {
        border-bottom: 1px solid #fff;
        border-right: none;
    }
}

CodePen

See the Pen media-query-menue-umschalten by Matthias Edler-Golla (@megolla) on CodePen.


Einbinden von Media Queries

Man kann Media Queries entweder direkt in einem Stylesheet verzweigen oder aber mehrere Stylesheets verwenden.

Media Queries direkt im Stylesheet

das kann schnell unübersichtlich werden …

CSS

/* normale CSS-Anweisung */
main {
    width: 95%;
    margin:2% auto;
}

/* anweisung, wenn das Browserfenster >= 480px ist */
@media screen and (min-width: 480px) {
    main {
        width: 80%;
    }
}

Mehrere Stylesheets

das kann übersichtlicher sein – bedeutet aber bei umfangreichen Website eine leichte Verzögerung beim Laden der Seiten, weil mehrere „Server Request“ durchgeführt werden müssen…

HTML

<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Queries</title>

    <!-- Standard-Stylesheet -->
    <link rel="stylesheet" href="c/style.css" />

    <!-- Stylesheet ab einer Browserbreite von 480px -->
    <link rel="stylesheet" media="screen and (min-width: 480px)" href="c/mittel.css" />

    <!-- Stylesheet ab einer Browserbreite von 768px -->
    <link rel="stylesheet" media="screen and (min-width: 768px)" href="c/breit.css" />

</head>

Achtung

Schreibt in die Stylesheets „mittel.css“ usw. nur die Anweisungen, in denen sich die Seite von den Anweisungen in „style.css“ unterscheiden! Was nicht extra erwähnt wird, vererbt sich vom „style.css“ …


Artikel eindrittel / zweidrittel responsive

eine klassische Aufteilung…

Ich habe bei der Demo 2 Breakpoints eingebaut:

  1. Breakpoint bei 700px;
  2. Breakpoint bei 530px

Beachtet, dass ich keine „@media-Anweisungen“ innerhalb der CSS-Dateien „mittel.css“ und „klein.css“ benötige, wenn ich diese Abfrage schon im <head>-Bereich des HTML-Dokumentes mache!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML (Head-Bereich)

<head>
    […]

    <!-- Default-Stylesheet -->
    <link rel="stylesheet" href="c/style.css" />

    <!-- Stylesheet ab einer Browserbreite kleiner 700px -->
    <link rel="stylesheet" media="screen and (max-width: 700px)" href="c/mittel.css" />

    <!-- Stylesheet ab einer Browserbreite kleiner 530px -->
    <link rel="stylesheet" media="screen and (max-width: 530px)" href="c/klein.css" />

</head>

HTML (Body-Bereich)

<body>
    <main>
        <h1>Gestaltungsraster</h1>
        <article class="raster">
            <section class="intro">
                <h2>Überschrift</h2>
                <p>intro-Text…</p>
            </section>
            <section class="content">
                <h2>Überschrift</h2>
                <p>content-Text…</p>
            </section>
        </article>
    </main>
</body>

CSS (Hauptstylesheet „style.css“)

[…]
.raster {
  /* Blocksatz */
  text-align: justify;

  display: grid;

  /* 3spaltiges Raster */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5em;
}
.content {
  /* fängt bei Raster-Linie 2 an und überspannt 2 Rasterzellen */
  grid-column: 2 / span 2;
}

CSS ( „mittel.css“ für „mittelbreite“ Bildschirme)

.raster {
  /* 2spaltiges Raster */
  grid-template-columns: repeat(2, 1fr);
}

.content {
  grid-column: 2;
}

CSS ( „klein.css“ für „kleine“ Bildschirme)

.raster {
  display: block;
}

CodePen

See the Pen artikel-eindrittel-zweidrittel-responsive by Matthias Edler-Golla (@megolla) on CodePen.

Bei Code-Pen habe ich die „@media“-Anweisungen innerhalb des Stylesheets eingebaut – das geben eben alternativ ebenfalls, ist aber meist unübersichtlicher!


Media Query: Höhe abfragen

Die Höhe von <header> und <footer> verringert sich, wenn die Höhe des Browser-Fensters niedrig wird

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

.rahmen {
    background: black;
    color:#fff;
    font-size: 2.5em;
    /* ganz dünne Schrift */
    font-weight: 100;
    line-height: 1.1;
    text-align: center;
    padding: .4em .15em;
    letter-spacing: .02em;
    width: 100%;
    position: fixed;
    left: 0;
}

.kopfzeile {
    /* am oberen Rand fixiert */
    top: 0;
}

.breakpoints {
    /* am unteren Rand fixiert */
    bottom: 0;
}

/* wenn Screen niedrid ist: */
@media screen and (max-height: 550px){
    .rahmen {
        font-size: 1.3em;
        /* Schrift etwas fetter */
        font-weight: 300;
        padding: .2em .15em;
    }
}

CodePen

See the Pen media-query-hoehe-abfragen by Matthias Edler-Golla (@megolla) on CodePen.


Media Query: Orientation

Damit kann man das Seitenverhältnis abfragen – und somit auch, ob man das SmartPhone/Tablet gerade hoch oder quer benutzt.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Wenn die Breite größer als die Höhe ist, wird die Media-Query „landscape“ aktiv.

CSS

#smartPhone {
    background: #ddd;
    border: 1px solid;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    margin: 20px auto;
    /* Elternelement! */
    position: relative;
}

/* home-Button */
#home {
    border: 1px solid;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    background: rgba(0,0,0,.6);
    left: 35px;
    bottom: 35px;
}

/* Querformat */
@media screen and (orientation: landscape) {
    /* SmartPhone im Querformat */
    #smartPhone {
        width: 260px;
        height: 150px;
    }

    /* Position des Home-Buttons */
    #home {
        left: 10px;
        bottom: 60px;
    }

    /* der richtige Text wird sichtbar gemacht */
    .kein_Smartphone {display:none;}
    .landscape {display:block;}
    .portrait {display:none;}
}



/* Hochformat */
@media screen and (orientation: portrait) {
    /* SmartPhone im Hochformat */
    #smartPhone {
        width: 150px;
        height: 260px;
    }

    /* Position des Home-Buttons */
    #home {
        left: 60px;
        bottom: 10px;
    }

    /* der richtige Text wird sichtbar gemacht */
    .kein_Smartphone {display:none;}
    .landscape {display:none;}
    .portrait {display:block;}
}

CSS-Variablen

Don’t repeat yourself (DRY, englisch für „wiederhole dich nicht“; auch bekannt als once and only once „einmal und nur einmal“) ist ein Prinzip, das besagt, Redundanz zu vermeiden oder zumindest zu reduzieren.

Variablen helfen – auch bei CSS – den Code übersichtlich zu halten und Redundanzen zu vermeiden! Falls Euch das eher verwirrt, müsst Ihr diese nicht einsetzen!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

CSS

:root {
  --header-footer-HG: rgba(0, 0, 0, 0.8); /* HG-Farbe von Header und Footer */
  --cd-color: rgba(255, 130, 50, 0.9); /* Corporate Design Farbe */
  --ueberschriften-strickstaerke: 400; /* Strichstärke typischer Überschriften */
  --article-HG: rgba(0, 0, 0, 0.05); /* HG-Farbe der Artikel */
}

a:link {
  text-decoration: none;
  color: var(--cd-color);
}

article {
  background-color: var(--article-HG);
}

h1 {
  background: var(--header-footer-HG);
  font-weight: var(--ueberschriften-strickstaerke);
}

h2 {
  font-weight: var(--ueberschriften-strickstaerke);
  color: var(--cd-color);
}

footer {
  background: var(--header-footer-HG);
}

CodePen

See the Pen css-variablen by Matthias Edler-Golla (@megolla) on CodePen.

Online-Tutorial

Zu den CSS-Variablen gibt es ein kostenloses Tutorial, das noch deutlich tiefer auf die neuen Möglichkeiten von Variablen in CSS eingeht!


Responsive Design mit CSS-Variablen

Auch hier helfen CSS-Variablen den Code übersichtlich zu halten und Redundanzen zu vermeiden!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS-Variablen</title>
    <link rel="stylesheet" href="c/style.css">
    <!-- Anweisungen für das Nav-Menue in eigenem CSS - übersichtlicher! -->
    <link rel="stylesheet" href="c/nav.css">
</head>

CSS

/* ================= Grundeinstellungen ================== */
:root {
  --schrift-groesse: 21px; /* Schriftgröße */
  --main-breite: 80%; /* Breite von "main" */
  --columns: 1fr 2fr; /* Raster innerhalb des Artikels ".raster" */
}

/* ================= Media-Queries mit Variablen ================== */

/* Einstellungen für mittelgroße Screens zwischen 530px und 700px */
@media screen and (max-width: 700px) {
  :root {
    --schrift-groesse: 18px; /* Schriftgröße hier etwas kleiner */
    --main-breite: 90%;
    --columns: 1fr 1fr; /* zweispaltiges Layout */
  }
}

/* Einstellungen für kleine Screens bis 530px; */
@media screen and (max-width: 530px) {
  :root {
    --schrift-groesse: 16px; /* Schriftgröße hier etwas kleiner */
    --main-breite: 96%;
    --columns: 1fr; /* einspaltiges Layout */
  }
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: var(--schrift-groesse);
  line-height: 1.5;
}

main {
  width: var(--main-breite);
  max-width: 1024px;
  margin: 2% auto;
}

/* das Raster-erzeugende Element */
.raster {
  display: grid;
  grid-template-columns: var(--columns);
  grid-gap: 1.5em;
}

Achtung: CSS ist nicht vollständig – nur hier relevantes dargestellt!

CodePen

See the Pen responsive design mit css-variablen by Matthias Edler-Golla (@megolla) on CodePen.

Online-Tutorial

Auch dazu gibt es ein gutes, kostenloses Online-Tutorial von Per Harald Borgen!


Grid-Layout „dense“

Bild von https://picsum.photos/

Durch die Anweisung „“ könnt Ihr den Browser zwingen, die Lücken im Raster zu schließen – allerdings kann sich dadurch die Reihenfolge ändern!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

In der Demo gibt es den Button „Toggle »grid-auto-flow«“, damit könnt Ihr sehen, was passiert, wenn diese Grid-Eigenschaft aus/an-geschaltet wird…

CSS

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap: 4px 4px;

  /* damit wird das Layout dichter, aber Reihenfolge kann sich ändern! */
  grid-auto-flow: dense;
}

Platzhalter-Bilder

Diese Demo verwendet Platzhalter-Bilder, das ist manchmal sehr praktisch, wenn man schnell Bildmaterial benötigt…

Die Verwendung ist sehr einfach:

// Bild in der Größe 600x400px
<img src="https://picsum.photos/600/400">

// Quadratisches Bild in der Größe 500px
<img src="https://picsum.photos/500">

// bewußt unscharf gemachtes Bild (0 bis 10)
<img src="https://picsum.photos/900/450/?blur=4">

// Graustufen-Bild
<img src="https://picsum.photos/800/600?grayscale">

Demo (https://picsum.photos)

Bild in der Größe 600x400px

Quadratisches Bild in der Größe 500px

bewußt unscharf gemachtes Bild (0 bis 10)

Graustufen-Bild

Katzenbilder als Alternative (https://placekitten.com/)

// Bild in der Größe 600x400px
<img src="https://placekitten.com/600/400">

// Quadratisches Bild in der Größe 500px
<img src="https://placekitten.com/500">

// Graustufen-Bild
<img src="https://placekitten.com/g/400/300">

Demo

Bild in der Größe 600x400px

Quadratisches Bild in der Größe 500px

Graustufen-Bild


Hausaufgabe/Übung


Freiwillige Übung: Raster mit Media Queries

Fotos von placekitten.com

Diese freiwillige Übung soll Euch das Arbeiten mit Media-Queries verständlicher machen…

Online-Demo

Schaut Euch die Desktop-Version an, ladet Euch das Übungspaket herunter und tragt in das Stylesheet c/klein.css die notwenigen Anweisungen so ein, dass die Website auf einem Smartphone so wie die Vorlage aussieht.

Responsive Design Text-Editor

Macht die verschiedenen Stylesheets nebeneinander im Brackets auf – dann könnt Ihr besser den Überblick behalten!


Venedig-Website für Smartphone und Tablet optimieren

Verwendet die Übung „Venedig Fotos“ und passt diese so an, dass sie sich via Media-Query auf Tablet und Smartphone anpassen.

Schaut Euch die Vorlagen an – es gibt drei unterschiedliche Darstellungen der Website für unterschiedliche Bildschirmbreiten!

Bei der Desktop- und Tablet-Darstellung habe ich dort auch jeweils eine Darstellung des verwendeten Rasters eingefügt…

Benutzt dazu 3 Stylesheets, die in den HTML-Dokumenten (index.html, kontakt.html, venedig.html) eingebunden sind:

HTML

<!-- Hauptstylesheet -->
<link rel="stylesheet" href="c/style.css">

<!-- Stylesheet ab einer Browserbreite von 730px -->
<link rel="stylesheet" media="screen and (max-width: 730px)" href="c/mittel.css" />

<!-- Stylesheet ab einer Browserbreite von 480px -->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="c/klein.css" />

Achtung: Das Hauptstylesheet „style.css“ enthält die meisten Informationen.

In den anderen Stylesheets müsst Ihr nur das reinschreiben, was sich tatsächlich ändert – diese sind also deutlich kürzer!

Responsive Design Text-Editor

Macht die verschiedenen Stylesheets nebeneinander im Brackets auf – dann könnt Ihr besser den Überblick behalten!


Danke!

Alle Scripte durchsuchen

Weitere Vorträge: