Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>Cascading Style Sheets</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>Cascading Style Sheets</h1> </header> <section bg="stadium.jpg" id="css" class="slide cover"><div><h2>CSS</h2> <p>Cascading Style Sheets</p> <p class="note">Quelle: <a href="https://www.flickr.com/photos/125167502@N02/15093234296/in/set-72157646752577418">Markus Spiske</a></p> <footer> <ul> <li>Web ist knapp 35 Jahre alt</li> <li>CSS ungefährt 30</li> <li>Sehen wir uns an, was bisher geschah …</li> </ul> </footer> </div></section> <section class="slide" id="fehlentwicklung-im-web"><div><h2>Fehlentwicklung im Web</h2> <p><img src="baum.svg" alt="Baum" class="right full-height" /></p> <ul> <li>Die Absicht hinter HTML war, Dokumente inhaltlich zu strukturieren</li> <li>Doch neue Elemente wie <code class="language-plaintext highlighter-rouge"><font></code>, <code class="language-plaintext highlighter-rouge"><blink></code> oder <code class="language-plaintext highlighter-rouge"><center></code> und Attribute wie <code class="language-plaintext highlighter-rouge">bgcolor</code> oder <code class="language-plaintext highlighter-rouge">border</code> kamen hinzu</li> </ul> <footer> <ul> <li>Neulinge aus dem Desktop Publishing vermissten Dinge wie <code class="language-plaintext highlighter-rouge"><color></code> und <code class="language-plaintext highlighter-rouge"><font></code></li> <li>Woraufhin sie implementiert wurden</li> <li><q>Du solltest so etwas nicht machen können</q>, protestierten die Akademiker</li> <li>Und Dunkelheit lag auf ihren Gesichtern, denn sie sahen, dass es schlecht war</li> <li>Und wäre es so weiter gegangen, wäre das Web <q>ein gigantisches Faxgerät geworden, über das Bilder von Text verschickt werden</q></li> <li>Was auch furchtbar für blinde Menschen und Suchmaschinen gewesen wäre</li> </ul> </footer> </div></section> <section class="slide" id="nordlicht"><div><h2>Nordlicht</h2> <p><img src="acid-css-test.png" alt="Acid-Css-Test" class="right" /></p> <ul> <li>Oktober 1994 veröffentlichte Håkon Wium Lie: <a href="http://www.w3.org/People/howcome/p/cascade.html">Cascading HTML style sheets – a proposal</a></li> <li>Ziel war Trennung von Darstellung und Inhalt</li> <li>Einige Ideen waren gut, andere wurden verworfen</li> <li>Gut: deklarativ, regelbasiert, vererbend</li> <li><a href="http://www.acidtests.org/">ACID-Test</a> um Standardkonformität zu testen</li> </ul> <p class="note">Quelle: <a href="http://commons.wikimedia.org/wiki/File:Acid-Css-Test.png">Wikipedia</a></p> <footer> <ul> <li>Håkon Wium Lie: damals Mitarbeiter von Tim Berners-Lee am CERN, jetzt CTO von Opera</li> <li>CSS um <q>HTML zu retten</q></li> <li> <p><q>HTML geht es auch so gut, weil CSS</q></p> </li> <li>Viele Vorschläge für Style Sheet Languages</li> <li>Props auch an Microsoft, die die Idee von CSS gut fanden und implementierten (Commitment von Großunternehmen hilfreich…)</li> <li> <p>Allerdings unterschiedlich fehlerhafte Implementierungen von Microsoft und Netscape</p> </li> <li>auch mangels präventiver Tests</li> <li>Der erste Test wurde 1998 von Todd Fahrner veröffentlicht: ACID-Test</li> <li>War kreativ, visuell und Fehler für Entwickler sofort ersichtlich</li> <li>Entwicklung von Acid2 durch <a href="http://web.archive.org/web/20050204082749/https://www.microsoft.com/mscorp/execmail/2005/02-03interoperability.asp">Offenen Brief von Bill Gates</a>, als er sich für Interoperabilität aussprach</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-von-css"><div><h2>Entwicklung von CSS</h2> <ul> <li>CSS Level 2 wurde im Mai 1998 veröffentlicht</li> <li>Bis Anfang 2010 wurde diese Empfehlung allerdings von keinem verbreiteten Webbrowser vollständig umgesetzt</li> <li>CSS Level 2 Revision 1 von 2002 bis 2011</li> <li>CSS Level 3 seit 2000</li> <li>Kein CSS 4, da CSS 3 modular; und nur dessen Module werden weiterentwickelt</li> <li><a href="https://css-tricks.com/look-back-history-css/">kleine Gescichte von CSS</a></li> </ul> </div></section> <section class="slide shout" id="code"><div><h2>Code</h2> </div></section> <section class="slide" id="aufbau"><div><h2>Aufbau</h2> <div class="parts "> <div class="part"> <h3 id="struktur">Struktur</h3> <pre class="highlight language-css" data-lang="css"><code><span class="c">/* Kommentar */</span> <span class="nt">Selektor</span> <span class="p">{</span> <span class="py">Eigenschaft</span><span class="p">:</span> <span class="n">Wert</span><span class="p">;</span> <span class="py">Eigenschaft-2</span><span class="p">:</span> <span class="n">Wert-2</span><span class="p">;</span> <span class="c">/* … */</span> <span class="py">Eigenschaft-n</span><span class="p">:</span> <span class="n">Wert-n</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div><div class="part"> <h3 id="beispiel">Beispiel</h3> <pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">600px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">19px</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.4</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> </div> <ul> <li><a href="http://apps.workflower.fi/vocabs/css/de">CSS-Vokabular</a></li> </ul> <footer> <ul> <li>Kommentar: Einzige Form, keine einzeiligen <small>(<code class="language-plaintext highlighter-rouge">//</code> o.ä.)</small></li> <li>CSS-Anweisung: <q>Für folgenden Selektor gilt folgende Kombination aus Eigenschaften</q></li> <li>Selektor: <q>Für folgende Elemente …</q>, kommagetrennt</li> <li>Eigenschaften: Schlüssel-Wert-Paar, wobei mehrere Werte möglich sind, abgeschlossen durch Semikolon</li> <li>letztes Semikolon muss nicht, sollte aber</li> <li>Leerzeichen nach Gusto</li> </ul> </footer> </div></section> <section class="slide" id="selektoren"><div><h2>Selektoren</h2> <ul> <li>Kombination aus Bedingungen zur Identifikation von Elementen</li> <li>Verschiedene Möglichkeiten: Elementname, Attribute <small>(Klasse, ID etc)</small> oder Position</li> <li>Umfassende Listen: <a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets#Selektoren">Wikipedia</a>, <a href="http://wiki.selfhtml.org/wiki/CSS/Selektoren/einfacher_Selektor">SELFHTML</a></li> </ul> <pre class="highlight language-css" data-lang="css"><code> <span class="o">*</span> <span class="p">{</span><span class="c">/* Universalselektor - jedes Element */</span><span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span><span class="c">/* Typselektor - alle H1-Überschriften */</span><span class="p">}</span> <span class="nc">.active</span> <span class="p">{</span><span class="c">/* Klassenselektor - alle Elemente mit der Klasse "active" */</span><span class="p">}</span> <span class="nf">#wrapper</span> <span class="p">{</span><span class="c">/* ID-Selektor - das Element mit der ID "wrapper" */</span><span class="p">}</span> <span class="nt">img</span><span class="o">[</span><span class="nt">alt</span><span class="o">]</span> <span class="p">{</span><span class="c">/* Attributselektor - alle Bilder mit einem ALT-Attribut */</span><span class="p">}</span> </code></pre> <footer> <ul> <li>Universalselektor: <code class="language-plaintext highlighter-rouge">*</code></li> <li>Typselektor: <code class="language-plaintext highlighter-rouge">element</code></li> <li>Klassenselektor: <code class="language-plaintext highlighter-rouge">.class</code></li> <li>Case Sensitive (darum Konvention: immer klein + Bindestriche)</li> <li>ID-Selektor: <code class="language-plaintext highlighter-rouge">#id</code></li> <li>Attributselektor <ul> <li>Attributpräsenz: <code class="language-plaintext highlighter-rouge">[a]</code></li> <li>Attributwert: <code class="language-plaintext highlighter-rouge">[a=v]</code>, <code class="language-plaintext highlighter-rouge">[a~=v]</code>, <code class="language-plaintext highlighter-rouge">[a|=v]</code></li> <li>Teilübereinstimmung: <code class="language-plaintext highlighter-rouge">[a^=v]</code>, <code class="language-plaintext highlighter-rouge">[a$=v]</code>, <code class="language-plaintext highlighter-rouge">[a*=v]</code></li> </ul> </li> </ul> </footer> </div></section> <section class="slide" id="selektoren--kombinatoren"><div><h2>Selektoren – <a href="http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator">Kombinatoren</a></h2> <pre class="highlight language-css" data-lang="css"><code><span class="c">/* Nachfahren – alle Links in Navigation */</span> <span class="nt">nav</span> <span class="nt">a</span> <span class="p">{</span> <span class="p">}</span> <span class="c">/* Kinder – alle direkten Nachfahren von Nav */</span> <span class="nt">nav</span> <span class="o">></span> <span class="nt">a</span> <span class="p">{</span> <span class="p">}</span> <span class="c">/* Nachbarn – alle Paragraphen, die direkt auf eine H1-Überschrift folgen */</span> <span class="nt">h1</span> <span class="o">+</span> <span class="nt">p</span> <span class="p">{</span> <span class="p">}</span> <span class="c">/* Geschwister – alle Paragraphen, die auf gleicher Ebene auf eine H1-Überschrift folgen */</span> <span class="nt">h1</span> <span class="o">~</span> <span class="nt">p</span> <span class="p">{</span> <span class="p">}</span> </code></pre> </div></section> <section class="slide" id="selektoren--kombinatoren-1"><div><h2>Selektoren – Kombinatoren</h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Eine <span class="nt"><i></span>Überschrift<span class="nt"></i></h1></span> <span class="nt"><p></span>Erster Absatz<span class="nt"></p></span> <span class="nt"><p></span>Zweiter Absatz<span class="nt"></p></span> <span class="nt"><p></span>Mein <span class="nt"><i></span>Kind, <span class="nt"><i></span>Enkel, <span class="nt"><i></span>Urenkel<span class="nt"></i></i></i></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">i</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">gold</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="o">~</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="o">+</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#bada55</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="nt">i</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">hotpink</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="o">></span> <span class="nt">i</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Beispiel: <code class="language-plaintext highlighter-rouge">h1 + p + p { font-weight: bold; }</code></li> </ul> </footer> </div></section> <section class="slide" id="selektoren--pseudoklassen"><div><h2>Selektoren – <a href="http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse">Pseudoklassen</a></h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><p></span>Erstes Kind<span class="nt"></p></span> <span class="nt"><p></span>Zweites Kind<span class="nt"></p></span> <span class="nt"><p></span>Drittes Kind<span class="nt"></p></span> <span class="nt"><p></span>Viertes <span class="nt"><a</span> <span class="na">href=</span><span class="s">"//htw-berlin.de"</span><span class="nt">></span>HTW Berlin<span class="nt"></a></p></span> <span class="nt"><p></p></span> <span class="nt"><p></span>Sechstes Kind<span class="nt"></p></span> <span class="nt"><p></p></span> <span class="nt"><p></span>Achtes Kind<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">a</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span><span class="nd">:visited</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">darkorchid</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">hotpink</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:first-child</span><span class="o">,</span> <span class="nt">p</span><span class="nd">:last-child</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:empty</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="nb">solid</span> <span class="no">gold</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">:nth-child</span><span class="o">(</span><span class="err">2</span><span class="nt">n</span><span class="o">)</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#DEA</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt</li> <li>Erwähnen: <code class="language-plaintext highlighter-rouge">:not()</code></li> <li><a href="http://nth-test.com/">nth-Test</a></li> </ul> </footer> </div></section> <section class="slide" id="selektoren--pseudoelemente"><div><h2>Selektoren – <a href="http://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement">Pseudoelemente</a></h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><br><p></span>Lirum larum <span class="nt"><a</span> <span class="na">data-count=</span><span class="s">"7"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Posteingang<span class="nt"></a></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span><span class="nd">::first-letter</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span><span class="nd">::selection</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="no">gold</span><span class="p">;</span> <span class="p">}</span> <span class="o">[</span><span class="nt">data-count</span><span class="o">]</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="n">attr</span><span class="p">(</span><span class="n">data-count</span><span class="p">);</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">-10px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">3px</span> <span class="m">7px</span> <span class="m">1px</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Liste: <code class="language-plaintext highlighter-rouge">::first-line</code>, <code class="language-plaintext highlighter-rouge">::first-letter</code>, <code class="language-plaintext highlighter-rouge">::before</code>, <code class="language-plaintext highlighter-rouge">::after</code></li> <li><code class="language-plaintext highlighter-rouge">before</code> und <code class="language-plaintext highlighter-rouge">after</code> müssen <code class="language-plaintext highlighter-rouge">content</code> deklariert haben</li> <li>Pseudoelemente erzeugen einen nicht im Elementbaum vorhandenen Abschnitt der formatiert oder mit Inhalt gefüllt werden kann</li> <li>zwei vorangestellte Doppelpunkte, damit Pseudoelemente von Pseudoklassen unterschieden werden können (muss aber nicht)</li> <li>können nur am Ende eines Selektors stehen</li> </ul> </footer> </div></section> <section class="slide" id="selektoren--pseudoelemente-1"><div><h2>Selektoren – Pseudoelemente</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><table></span> <span class="nt"><thead></span> <span class="nt"><tr><th></th><th></span>50y<span class="nt"></th><th></span>55y<span class="nt"></th><th></span>60y<span class="nt"></th><th></span>65y<span class="nt"></th><th></span>70y<span class="nt"></th></tr></span> <span class="nt"></thead></span> <span class="nt"><tbody></span> <span class="nt"><tr><th></span>160cm<span class="nt"></th><td></span>20<span class="nt"></td><td></span>21<span class="nt"></td><td></span>23<span class="nt"></td><td></span>25<span class="nt"></td><td></span>27<span class="nt"></td></tr></span> <span class="nt"><tr><th></span>165cm<span class="nt"></th><td></span>18<span class="nt"></td><td></span>20<span class="nt"></td><td></span>22<span class="nt"></td><td></span>24<span class="nt"></td><td></span>26<span class="nt"></td></tr></span> <span class="nt"><tr><th></span>170cm<span class="nt"></th><td></span>17<span class="nt"></td><td></span>19<span class="nt"></td><td></span>21<span class="nt"></td><td></span>23<span class="nt"></td><td></span>25<span class="nt"></td></tr></span> <span class="nt"><tr><th></span>175cm<span class="nt"></th><td></span>16<span class="nt"></td><td></span>18<span class="nt"></td><td></span>20<span class="nt"></td><td></span>22<span class="nt"></td><td></span>24<span class="nt"></td></tr></span> <span class="nt"><tbody></span> <span class="nt"></table></span> <span class="nt"><br><br></span> <span class="nt"><small></span>Quelle: <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://css-tricks.com/simple-css-row-column-highlighting/"</span><span class="nt">></span>Chris Coyier<span class="nt"></a></small></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">table</span> <span class="p">{</span> <span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span> <span class="p">}</span> <span class="nt">td</span><span class="o">,</span> <span class="nt">th</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="p">}</span> <span class="nt">tbody</span> <span class="nt">tr</span><span class="nd">:hover</span><span class="o">,</span> <span class="nt">td</span><span class="nd">:hover::after</span><span class="o">,</span> <span class="nt">th</span><span class="nd">:hover::after</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#ffa</span><span class="p">;</span> <span class="p">}</span> <span class="nt">td</span><span class="nd">:hover::after</span><span class="o">,</span> <span class="nt">thead</span> <span class="nt">th</span><span class="nd">:not</span><span class="o">(</span><span class="nd">:empty</span><span class="o">)</span><span class="nd">:hover::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s2">''</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">-100vh</span><span class="p">;</span> <span class="nl">bottom</span><span class="p">:</span> <span class="m">-100vh</span><span class="p">;</span> <span class="nl">z-index</span><span class="p">:</span> <span class="m">-1</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="einbindung"><div><h2>Einbindung</h2> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- Externe CSS-Datei --></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">></span> <span class="c"><!-- Internes CSS --></span> <span class="nt"><style></span> <span class="nt">span</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> <span class="c"><!-- Inline Styles --></span> <span class="nt"><span</span> <span class="na">style=</span><span class="s">"color: red;"</span><span class="nt">></span>Hallo<span class="nt"></span></span> </code></pre> <footer> <ul> <li>Bevor wir Spezifität besprechen, schauen wir uns an, wie CSS eingebunden werden kann</li> <li>Extern: Extra-HTTP-Anfrage, kann gecached werden</li> <li>Intern: keine Anfrage, kein Cache</li> <li>Inline: stärkste Form, überschreibt andere Angaben</li> </ul> </footer> </div></section> <section class="slide" id="kaskade"><div><h2>Kaskade</h2> <ul> <li>Vererbung von Eigenschaftswerten an untergeordnete Elemente</li> </ul> <pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="c">/* Erbt Schriftgröße von 18px */</span> <span class="p">}</span> </code></pre> <ul> <li>Sortierung von Eigenschaften <ol> <li>nach Wichtigkeit (<code class="language-plaintext highlighter-rouge">!important</code> und Ursprung)</li> <li>nach Spezifität <small>(Typ, Klasse, ID, Inline)</small></li> <li>und zum Schluss nach Reihenfolge</li> </ol> </li> </ul> <p class="note right"><a href="http://little-boxes.de/artikelansicht/items/die-kaskade-im-schnelldurchgang.html">Quelle</a></p> <footer> <ul> <li>Ein Element hat drei Möglichkeiten: <ol> <li>Keine Deklaration → Schau auf deine Eltern</li> <li>Eine Deklaration → Gut, gilt.</li> <li>Mehrere Deklarationen → Kaskade</li> </ol> </li> </ul> </footer> </div></section> <section class="slide" id="spezifität"><div><h2>Spezifität</h2> <pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">grey</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#wrapper</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.module</span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.module</span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span> <span class="p">}</span> </code></pre> <ul> <li>Regelt die Stärke von Selektoren um letztlich geltende Eigenschaften zu ermitteln</li> <li>Gelten zwei Selektoren für ein Element, gewinnt das spezifischere</li> <li><em>Inline Styles</em> > <em>IDs</em> > <em>Klassen+Attribute</em> > <em>Elemente</em></li> <li>Bei gleicher Stärke gewinnt der letztere</li> </ul> <footer> <ul> <li>Eins der kompliziertesten Konzepte in CSS</li> </ul> </footer> </div></section> <section class="slide" bg="specificitywars-05v2.jpg" style="background-position:right" id="spezi-fität"><div><h2>Spezi-<br />fität</h2> <p class="note">Quelle:<br /><a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">Andy Clarke</a></p> </div></section> <section class="slide" id="spezifität-1"><div><h2>Spezifität</h2> <div class="editor "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><h1></span>Hallo<span class="nt"></h1></span> <span class="nt"><p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Liraum, <span class="nt"><strong></span>larum<span class="nt"></strong></span>, Löffelstiel.<span class="nt"></a></span> <span class="nt"></p></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">a</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">red</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> <span class="nt">section</span> <span class="o">></span> <span class="nt">h1</span> <span class="o">+</span> <span class="nt">p</span> <span class="o">></span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span> <span class="p">}</span> <span class="nt">strong</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span> <span class="p">}</span> <span class="nt">strong</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide shout" id="elemente"><div><h2>Elemente</h2> <footer> <ul> <li>Wie werden Elemente eigentlich dargestellt?</li> </ul> </footer> </div></section> <section class="slide" id="box-model"><div><h2>Box Model</h2> <p><img src="boxmodell.png" alt="Box Model" class="center full-height" style="margin-top:-50px" /></p> <p class="note">Quelle: <a href="https://de.wikipedia.org/wiki/Datei:Boxmodell-detail.png">Wikipedia</a></p> </div></section> <section class="slide" bg="box_model.jpg" id="box-model-1"><div><h2>Box Model</h2> </div></section> <section class="slide" id="display"><div><h2>Display</h2> <div class="parts "> <div class="part"> <h3 id="block">Block</h3> <p>Eigener Absatz im Dokument. Können Block- und Inline-Elemente enthalten.</p> </div><div class="part"> <h3 id="inline">Inline</h3> <p>Stehen im Fluss der anderen Elemente. Können Inline-Elemente enthalten <small>(* und Block)</small></p> </div> </div> <p><br />Kann geändert werden:</p> <pre class="highlight language-css" data-lang="css"><code><span class="nt">div</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span> <span class="err">|</span> <span class="nb">block</span> <span class="err">|</span> <span class="nb">inline</span> <span class="err">|</span> <span class="n">inline-block</span> <span class="err">|</span> <span class="n">flex</span> <span class="err">|</span> <span class="n">table</span> <span class="err">|</span> <span class="err">•••</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>Jedes Element ist eine Box!</li> <li>Inline-Elemente halten sich nur an den horizontalen Margin</li> </ul> </footer> </div></section> <section class="slide" id="display-1"><div><h2>Display</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><section></span> <span class="nt"><h2></span>Kafka<span class="nt"></h2></span> <span class="nt"><p></span>Jemand musste <span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:Josef@kafka.de"</span><span class="nt">></span>Josef K.<span class="nt"></a></span> verleumdet haben, denn ohne dass er etwas <span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Nichts Gutes"</span><span class="nt">></span>Böses<span class="nt"></abbr></span> getan hätte, wurde er eines Morgens verhaftet. <span class="nt"><q></span>Wie ein Hund!<span class="nt"></q></span> sagte er, es war, als sollte die Scham ihn überleben.<span class="nt"></p></span> <span class="nt"><p></span>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.<span class="nt"></p></span> <span class="nt"></section></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">outline</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">blue</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span> <span class="p">{</span> <span class="nl">outline</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#666</span><span class="p">;</span> <span class="p">}</span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#DEA</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span> <span class="p">{</span> <span class="nl">outline</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> <span class="nt">q</span> <span class="p">{</span> <span class="nl">outline</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">green</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Beispiel auf populärer Seite: <code class="language-plaintext highlighter-rouge">for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"</code> (von <a href="https://gist.github.com/addyosmani/fd3999ea7fce242756b1">addyosmani</a>)</li> </ul> </footer> </div></section> <section class="slide" id="box-model-2"><div><h2>Box Model</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-box"</span><span class="nt">></span>A A A A A A<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-box"</span><span class="nt">></span>B B B B B B B B B<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-box"</span><span class="nt">></span>C C C C C C C C C C C C<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-box"</span><span class="nt">></span>D D D D D D D D D D D D D D D D D D<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.custom-box</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">50px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">10px</span> <span class="nb">solid</span> <span class="no">hotpink</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="c">/* box-sizing: border-box; */</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Philosophische Frage: Soll die gegebene Breite nach innen oder außen gelten?</li> <li>IE5: <code class="language-plaintext highlighter-rouge">box-sizing: border-box</code> (gab es damals so nicht, heute schon, zum Glück)</li> <li>Default: <code class="language-plaintext highlighter-rouge">box-sizing: content-box</code>, auch: <code class="language-plaintext highlighter-rouge">box-sizing: padding-box</code></li> <li> <p>Shorthands für: <code class="language-plaintext highlighter-rouge">padding</code>, <code class="language-plaintext highlighter-rouge">margin</code>, <code class="language-plaintext highlighter-rouge">font</code>, <code class="language-plaintext highlighter-rouge">background</code>, <code class="language-plaintext highlighter-rouge">border</code>, <code class="language-plaintext highlighter-rouge">border-radius</code></p> </li> <li>Auch erklären: <code class="language-plaintext highlighter-rouge">min-width</code>, <code class="language-plaintext highlighter-rouge">max-width</code>, <code class="language-plaintext highlighter-rouge">overflow: auto | scroll | hidden</code></li> </ul> </footer> </div></section> <section class="slide" id="floats"><div><h2>Floats</h2> <ul> <li><code class="language-plaintext highlighter-rouge">float</code> hebt ein Element aus dem Fluss und bewegt es an die linke oder rechte Seite</li> <li>Andere Inhalte umfließen es</li> <li>Floatende Elemente = Block-Elemente</li> <li>Clearing: Nachfolgendes Element hat passende <code class="language-plaintext highlighter-rouge">clear</code>-Eigenschaft oder <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix hack</a></li> </ul> <footer> <ul> <li>Gedacht, um Text um Bilder fließen zu lassen</li> <li>Verhalten sich wie Luftballons in einem leicht schrägen Raum</li> <li>Sollten zuerst kommen, um Stufeneffekte zu vermeiden</li> <li>Wenn alle Kinder floaten, hat das Elternelement eine Höhe von 0</li> <li>Alternative zu <code class="language-plaintext highlighter-rouge">clear</code>: <code class="language-plaintext highlighter-rouge">overflow: hidden</code> (Vorsicht!)</li> </ul> </footer> </div></section> <section class="slide" id="floats-1"><div><h2>Floats</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h1></span>Die Leiden des jungen Werthers<span class="nt"></h1></span> <span class="nt"><p></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"werther-lotte.jpg"</span> <span class="na">alt=</span><span class="s">"Werther und Lotte"</span><span class="nt">></span> Ei<span class="ni">&shy;</span>ne wun<span class="ni">&shy;</span>der<span class="ni">&shy;</span>ba<span class="ni">&shy;</span>re Hei<span class="ni">&shy;</span>ter<span class="ni">&shy;</span>keit hat mei<span class="ni">&shy;</span>ne gan<span class="ni">&shy;</span>ze See<span class="ni">&shy;</span>le ein<span class="ni">&shy;</span>ge<span class="ni">&shy;</span>nom<span class="ni">&shy;</span>men, gleich den süßen Frühlings<span class="ni">&shy;</span>mor<span class="ni">&shy;</span>gen, die ich mit gan<span class="ni">&shy;</span>zem Her<span class="ni">&shy;</span>zen ge<span class="ni">&shy;</span>nieße. Ich bin al<span class="ni">&shy;</span>lein und freue mich mei<span class="ni">&shy;</span>nes Le<span class="ni">&shy;</span>bens in die<span class="ni">&shy;</span>ser Ge<span class="ni">&shy;</span>gend, die für sol<span class="ni">&shy;</span>che See<span class="ni">&shy;</span>len ge<span class="ni">&shy;</span>schaf<span class="ni">&shy;</span>fen ist wie die mei<span class="ni">&shy;</span>ne. Ich bin so glück<span class="ni">&shy;</span>lich, mein Bes<span class="ni">&shy;</span>ter, so ganz in dem Gefühle von ru<span class="ni">&shy;</span>hi<span class="ni">&shy;</span>gem Da<span class="ni">&shy;</span>sein ver<span class="ni">&shy;</span>sun<span class="ni">&shy;</span>ken, daß mei<span class="ni">&shy;</span>ne Kunst dar<span class="ni">&shy;</span>un<span class="ni">&shy;</span>ter lei<span class="ni">&shy;</span>det. Ich könn<span class="ni">&shy;</span>te jetzt nicht zeich<span class="ni">&shy;</span>nen, nicht einen Strich, und bin nie ein größer<span class="ni">&shy;</span>er Ma<span class="ni">&shy;</span>ler ge<span class="ni">&shy;</span>we<span class="ni">&shy;</span>sen als in die<span class="ni">&shy;</span>sen Au<span class="ni">&shy;</span>gen<span class="ni">&shy;</span>bli<span class="ni">&shy;</span>cken. <span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span> <span class="p">}</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">50vw</span><span class="p">;</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">.5em</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p class="note">Quelle: <a href="https://de.wikipedia.org/wiki/Datei:Donat_Werther_et_Lotte.jpg">Wikipedia</a></p> <footer> <pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#DEA</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="p">}</span> </code></pre> </footer> </div></section> <section class="slide" id="positionierung"><div><h2>Positionierung</h2> <table> <tbody> <tr> <td><code class="language-plaintext highlighter-rouge">static</code></td> <td>Standardwert</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">relative</code></td> <td>Bleibt in normalem Fluss und wird verschoben</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">fixed</code></td> <td>Relativ zum Viewport des Browsers</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">absolute</code></td> <td>Relativ nächsten Vorfahren mit <code class="language-plaintext highlighter-rouge">position</code> != <code class="language-plaintext highlighter-rouge">static</code></td> </tr> <tr> <td>Eigenschaften</td> <td><code class="language-plaintext highlighter-rouge">top</code>, <code class="language-plaintext highlighter-rouge">bottom</code>, <code class="language-plaintext highlighter-rouge">left</code>, <code class="language-plaintext highlighter-rouge">right</code></td> </tr> </tbody> </table> <footer> <ul> <li>Microsoft hat <code class="language-plaintext highlighter-rouge">absolute</code> vorgeschlagen und – obwohl es unbeliebt war und es Gegenvorschläge gab – implementiert</li> <li><code class="language-plaintext highlighter-rouge">relative</code>: Element verbleibt im normalen Fluss und wird um gegebene Werte verschoben. Andere Items verhalten sich, als wäre nichts passiert.</li> <li><code class="language-plaintext highlighter-rouge">absolute</code>: Element wird aus dem Fluss gehoben und hat Elternelement als einzigen Bezugspunkt</li> <li><code class="language-plaintext highlighter-rouge">fixed</code>: Absolut am Browserfenster* ausgerichtet, behält beim Scrollen Position</li> <li><code class="language-plaintext highlighter-rouge">sticky</code>: Wie <code class="language-plaintext highlighter-rouge">fixed</code>, aber am Elternelement ausgerichtet</li> </ul> </footer> </div></section> <section class="slide" id="positionierung-1"><div><h2>Positionierung</h2> <div class="editor "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"abs o-r u-l"</span><span class="nt">></span> Überall <span class="nt"><span</span> <span class="na">class=</span><span class="s">"abs o-r"</span><span class="nt">></span>oben rechts<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"abs u-l"</span><span class="nt">></span>unten links<span class="nt"></span></span> <span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.abs</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">130</span><span class="p">,</span> <span class="m">209</span><span class="p">,</span> <span class="m">.3</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.o-r</span> <span class="p">{</span> <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">0</span> <span class="p">}</span> <span class="nc">.u-l</span> <span class="p">{</span> <span class="nl">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="einheiten"><div><h2>Einheiten</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code>› Relativ zur Schriftgröße <span class="nt"><div</span> <span class="na">class=</span><span class="s">"em"</span><span class="nt">></span>8 Em<span class="nt"></div></span> › Relativ zur Auflösung <span class="nt"><div</span> <span class="na">class=</span><span class="s">"px"</span><span class="nt">></span>80 Pixel<span class="nt"></div></span> › Relativ zum Container <span class="nt"><div></span>80 Prozent des Containers<span class="nt"></div></span> › Relativ zum Viewport <span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh"</span><span class="nt">></span>80 Hundertstel der Gesamtbreite<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span><span class="o">,</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">80%</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="no">hotpink</span><span class="p">;</span> <span class="p">}</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.em</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">8em</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.px</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">80px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.vh</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">80vw</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">em</code>: The distance <em>horizontally</em> equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt.</li> <li><code class="language-plaintext highlighter-rouge">rem</code> erwähnen</li> <li>Empfehlung: keine Einheit wenn <code class="language-plaintext highlighter-rouge">0</code></li> </ul> </footer> </div></section> <section class="slide" id="farbangaben"><div><h2>Farbangaben</h2> <pre class="highlight language-css" data-lang="css"><code><span class="nt">color</span><span class="o">:</span> <span class="nt">red</span><span class="o">;</span> <span class="c">/* Farbname */</span> <span class="nt">color</span><span class="o">:</span> <span class="nf">#f00</span><span class="o">;</span> <span class="c">/* Hexadezimal RGB */</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">rgb</span><span class="o">(</span><span class="err">255</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">);</span> <span class="c">/* Dezimal RGB */</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">rgb</span><span class="o">(</span><span class="err">100</span><span class="o">%,</span> <span class="err">0</span><span class="o">%,</span> <span class="err">0</span><span class="o">%);</span> <span class="c">/* Prozentual RGB */</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">255</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">1</span><span class="o">);</span> <span class="c">/* RGBa (a = alpha) */</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">hsl</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">100</span><span class="o">%,</span> <span class="err">50</span><span class="o">%);</span> <span class="c">/* HSL (Hue, Saturation, Luminance) */</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">hsla</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">100</span><span class="o">%,</span> <span class="err">50</span><span class="o">%,</span> <span class="err">1</span><span class="o">);</span> <span class="c">/* HSLa */</span> </code></pre> <p class="note">Quelle: <a href="https://developer.mozilla.org/de/docs/Web/CSS/color">MDN</a></p> </div></section> <section class="slide" id="fonts"><div><h2>Fonts</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h2></span>Lorem ipsum dolor sit amet<span class="nt"></h2></span> <span class="nt"><p></span>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="k">@font-face</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s1">"Open Sans"</span><span class="p">;</span> <span class="nl">src</span><span class="p">:</span> <span class="sx">url("/assets/fonts/OpenSans.woff")</span> <span class="n">format</span><span class="p">(</span><span class="s1">"woff"</span><span class="p">);</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s1">"Open Sans"</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p>Viele freie Fonts: <a href="https://fonts.google.com">fonts.google.com</a></p> </div></section> <section class="slide" id="spalten"><div><h2>Spalten</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><h2></span>Lorem ipsum dolor sit amet<span class="nt"></h2></span> <span class="nt"><p></span>Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.<span class="nt"></p></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">p</span> <span class="p">{</span> <span class="nl">column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">column-rule</span><span class="p">:</span> <span class="nb">solid</span> <span class="m">1px</span> <span class="m">#aaa</span><span class="p">;</span> <span class="nl">-moz-column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">-moz-column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">-moz-column-rule</span><span class="p">:</span> <span class="nb">solid</span> <span class="m">1px</span> <span class="m">#aaa</span><span class="p">;</span> <span class="nl">-webkit-column-count</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="nl">-webkit-column-gap</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="nl">-webkit-column-rule</span><span class="p">:</span> <span class="nb">solid</span> <span class="m">1px</span> <span class="m">#aaa</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="media--media-queries"><div><h2>@media / media queries</h2> <ul> <li>Bedingte Wirkung von CSS-Regeln</li> </ul> <pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">19px</span> <span class="p">}</span> <span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="m">700px</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="n">orientation</span><span class="p">:</span> <span class="nb">landscape</span><span class="p">)</span> <span class="p">{</span> <span class="c">/* ... */</span> <span class="p">}</span> <span class="k">@media</span> <span class="n">print</span> <span class="p">{</span> <span class="o">*</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nb">transparent</span> <span class="cp">!important</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#000</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span> <span class="p">}</span> <span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">]</span><span class="nd">:after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">" ("</span> <span class="n">attr</span><span class="p">(</span><span class="n">href</span><span class="p">)</span> <span class="s1">")"</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span> <span class="p">{</span> <span class="nl">page-break-after</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>Media Query: Media Type und mindestens ein einschränkender Ausdruck (Höhe, Breite, Farbe etc)</li> </ul> </footer> </div></section> <section class="slide" id="transitions"><div><h2>Transitions</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><br><br></span> <span class="nt"><span></span>☯<span class="nt"></span></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">span</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">1s</span> <span class="n">ease</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">skyblue</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">span</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">hotpink</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">400%</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="keyframe-animations"><div><h2>Keyframe Animations</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"pulse"</span><span class="nt">></span>⚑<span class="nt"><span></span></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="k">@keyframes</span> <span class="n">pulse</span> <span class="p">{</span> <span class="err">0</span><span class="o">%</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.5</span><span class="p">;</span> <span class="p">}</span> <span class="err">100</span><span class="o">%</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">3</span><span class="p">);</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="nc">.pulse</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.pulse</span> <span class="nt">span</span> <span class="p">{</span> <span class="nl">z-index</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">-10px</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="m">#8f1b1b</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10px</span> <span class="m">5px</span> <span class="m">#ba2323</span><span class="p">;</span> <span class="nl">-webkit-animation</span><span class="p">:</span> <span class="n">pulse</span> <span class="m">2s</span> <span class="n">infinite</span> <span class="n">ease-out</span><span class="p">;</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">pulse</span> <span class="m">2s</span> <span class="n">infinite</span> <span class="n">ease-out</span><span class="p">;</span> <span class="p">}</span> <span class="k">@-webkit-keyframes</span> <span class="n">pulse</span> <span class="p">{</span> <span class="err">0</span><span class="o">%</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">0.3</span><span class="p">);</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.5</span><span class="p">;</span> <span class="p">}</span> <span class="err">100</span><span class="o">%</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">2</span><span class="p">);</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">200%</span><span class="p">;</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">-webkit-radial-gradient</span><span class="p">(</span><span class="m">50%</span> <span class="m">50%</span><span class="p">,</span> <span class="nb">circle</span> <span class="n">cover</span><span class="p">,</span> <span class="m">#FFF</span><span class="p">,</span> <span class="m">#5CB3FF</span> <span class="m">90%</span><span class="p">);</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">-moz-radial-gradient</span><span class="p">(</span><span class="m">50%</span> <span class="m">50%</span><span class="p">,</span> <span class="nb">circle</span> <span class="n">cover</span><span class="p">,</span> <span class="m">#FFF</span><span class="p">,</span> <span class="m">#5CB3FF</span> <span class="m">90%</span><span class="p">);</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">radial-gradient</span><span class="p">(</span><span class="m">50%</span> <span class="m">50%</span><span class="p">,</span> <span class="nb">circle</span> <span class="n">cover</span><span class="p">,</span> <span class="m">#FFF</span><span class="p">,</span> <span class="m">#5CB3FF</span> <span class="m">90%</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>Syntax: <code class="language-plaintext highlighter-rouge">name { from { ... } to { ... } }</code> oder <code class="language-plaintext highlighter-rouge">name { x% { ... } y% { ... } }</code></li> <li>Eigenschaften: <code class="language-plaintext highlighter-rouge">name</code>, <code class="language-plaintext highlighter-rouge">duration</code>, <code class="language-plaintext highlighter-rouge">delay</code>, <code class="language-plaintext highlighter-rouge">direction</code> (normal, reverse, alternate), <code class="language-plaintext highlighter-rouge">animation-iteration-count</code> (1, infinite), <code class="language-plaintext highlighter-rouge">animation-timing-function</code> (ease, linear etc)</li> <li>Mehr unter <a href="http://jeremyckahn.github.io/stylie/">Stylie – A fun CSS animation tool</a></li> </ul> </footer> </div></section> <section class="slide" id="transforms"><div><h2>Transforms</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>Pur<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"a"</span><span class="nt">></span>Rotation<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"b"</span><span class="nt">></span>Verschoben<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span>Klein<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"d"</span><span class="nt">></span>Schräg<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"e"</span><span class="nt">></span>Perspektive<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.a</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.b</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">translateX</span><span class="p">(</span><span class="m">2em</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.c</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">scale</span><span class="p">(</span><span class="m">0.5</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.d</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">skewX</span><span class="p">(</span><span class="m">30deg</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.e</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">perspective</span><span class="p">(</span><span class="m">200px</span><span class="p">)</span> <span class="n">rotateY</span><span class="p">(</span><span class="m">45deg</span><span class="p">);</span> <span class="p">}</span> <span class="c">/* helper styles */</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span> <span class="nl">flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span> <span class="p">}</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">5em</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">.5em</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">.5em</span> <span class="nb">solid</span> <span class="m">#00bd5a</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="wow-so-color-much-pretty"><div><h2>Wow So color Much pretty</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span>Pur<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"a"</span><span class="nt">></span>Transparenz<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"b"</span><span class="nt">></span>Schatten<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"c"</span><span class="nt">></span>Rundungen<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"d"</span><span class="nt">></span>Farbverläufe<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"e"</span><span class="nt">></span>Filter<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.a</span> <span class="p">{</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.5</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.b</span> <span class="p">{</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">10px</span> <span class="m">10px</span> <span class="m">10px</span> <span class="m">#aaa</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.c</span> <span class="p">{</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.d</span> <span class="p">{</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="m">-45deg</span><span class="p">,</span> <span class="m">#0082d1</span> <span class="m">0%</span><span class="p">,</span> <span class="no">yellow</span> <span class="m">100%</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.e</span> <span class="p">{</span> <span class="nl">-webkit-filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">1</span><span class="p">);</span> <span class="p">}</span> <span class="c">/* helper styles */</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="n">space-around</span><span class="p">;</span> <span class="nl">flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span> <span class="p">}</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">5em</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">.5em</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">.5em</span> <span class="nb">solid</span> <span class="m">#00bd5a</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#0082d1</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">4em</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="css-filter"><div><h2>CSS-Filter</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><style></span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> <span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span> <span class="py">grid-gap</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="p">}</span> <span class="nt">img</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span><span class="nt">></div></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span> <span class="na">class=</span><span class="s">"blur"</span><span class="nt">></div></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span> <span class="na">class=</span><span class="s">"grayscale"</span><span class="nt">></div></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span> <span class="na">class=</span><span class="s">"saturate"</span><span class="nt">></div></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span> <span class="na">class=</span><span class="s">"sepia"</span><span class="nt">></div></span> <span class="nt"><div><img</span> <span class="na">src=</span><span class="s">"balham.jpg"</span> <span class="na">class=</span><span class="s">"multi"</span><span class="nt">></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nc">.blur</span> <span class="p">{</span> <span class="nl">filter</span><span class="p">:</span> <span class="n">blur</span><span class="p">(</span><span class="m">5px</span><span class="p">)</span> <span class="p">}</span> <span class="nc">.grayscale</span> <span class="p">{</span> <span class="nl">filter</span><span class="p">:</span> <span class="n">grayscale</span><span class="p">(</span><span class="m">1</span><span class="p">)</span> <span class="p">}</span> <span class="nc">.saturate</span> <span class="p">{</span> <span class="nl">filter</span><span class="p">:</span> <span class="n">saturate</span><span class="p">(</span><span class="m">5</span><span class="p">)</span> <span class="p">}</span> <span class="nc">.sepia</span> <span class="p">{</span> <span class="nl">filter</span><span class="p">:</span> <span class="n">sepia</span><span class="p">(</span><span class="m">1</span><span class="p">)</span> <span class="p">}</span> <span class="nc">.multi</span> <span class="p">{</span> <span class="nl">filter</span><span class="p">:</span> <span class="n">blur</span><span class="p">(</span><span class="m">4px</span><span class="p">)</span> <span class="nb">invert</span><span class="p">(</span><span class="m">1</span><span class="p">)</span> <span class="n">opacity</span><span class="p">(</span><span class="m">0.5</span><span class="p">)</span> <span class="p">}</span> </code></pre></div> <p class="note">Quelle: <a href="https://simpl.info/cssfilters/">simpl.info/cssfilters</a></p> </div></section> <section class="slide" id="css-variablen"><div><h2>CSS-Variablen</h2> <div class="editor hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><div></span>Hallo<span class="nt"></div></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nd">:root</span> <span class="p">{</span> <span class="py">--primary-color</span><span class="p">:</span> <span class="m">#00bd5a</span><span class="p">;</span> <span class="py">--space-md</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="p">}</span> <span class="nt">div</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary-color</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary-color</span><span class="p">);</span> <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--space-md</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <footer> <ul> <li>sind teil der kaskade</li> <li>können überschrieben werden</li> <li><code class="language-plaintext highlighter-rouge">:root</code> ist eine Pseudo-Klasse und ist <code class="language-plaintext highlighter-rouge">html</code>, aber mit höherer Spezifität</li> <li>zweiter Parameter von <code class="language-plaintext highlighter-rouge">var()</code> ist Default-Wert, falls Variable nicht definiert (e.g. <code class="language-plaintext highlighter-rouge">var(--nope, red)</code>)</li> </ul> <pre class="highlight language-css" data-lang="css"><code><span class="nt">body</span> <span class="p">{</span> <span class="py">--primary-color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span> <span class="p">}</span> </code></pre> </footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="http://devdocs.io/">devdocs.io</a><br />Schnelle Dokumentation für HTML, CSS, JavaScript und viele mehr</li> <li><a href="http://caniuse.com/">caniuse.com</a><br />Browser-Unterstützung diverser Features</li> <li><a href="http://mdo.github.io/code-guide/">Code Guide</a><br />Prägnante Best Practices für die Entwicklung von HTML und CSS</li> <li><a href="http://ilyashubin.github.io/FilterBlend/">CSS blend modes and filters playground</a></li> <li><a href="http://fantasai.inkedblade.net/style/talks/best-practices/">CSS Best Practices</a></li> <li><a href="https://blog.cloudflare.com/the-languages-which-almost-became-css/">The Languages Which Almost Became CSS</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>