Mehr CSS

HTML alleine ist ein bisschen langweilig, mit CSS wird es schöner. :)

Je nachdem was euch interessiert können wir mit folgenden Dingen weitermachen:

• Wie setzt man Design-Ideen mit CSS um?
• schönere Navigation zwischen Seiten
• “sticky” Elemente (scrollen nicht mit)
• verschiedene Stile von Seiten
  • Blog
  • ein Tumblr-ähnlicher Blog
  • einzelne Artikel
• weitere Anwendungen:
  • Grids
  • Gallerien mit Lightbox
• Wünsche?

CSS Grundlagen

• die Elemente der Seite befinden sich in Rechtecken (“boxes”)
• wichtige Eigenschaften:
  • position
  • margin, padding
  • width, max-width
  • border

Wie setzt man Design-Ideen mit CSS um?

• Elemente können
  • fixiert werden (zB. eine Navigationsleiste ganz oben)
  • an einem Grid ausgerichtet werden
  • nicht mit scrollen
• Beispiel aussuchen (eins von den vorgeschlagenen oder eigene gewählte) und experimentieren
• Tips
  • immer mit Vorlagen/Inspirationen arbeiten (aber natürlich nicht genau kopieren und auf die Arbeit der anderen verweisen)
  • es ist völlig ok und hilfreich sich die Tricks anderer Seiten anzuschauen
  • vorher aufmalen hilft immer
  • mit Größen, Farben, Schriftarten etc. “live” experimentieren

Navigation zwischen Seiten

• feste Leiste mit Navigationselementen am oberen Rand der Seite

(Beispiel anschauen)

• alternativ: Navigationsleiste etwas weiter unterhalb, zB. nach einem Bild (“tumblry” Stil)

Vorgefertigte Stile

• Blog, (Beispiel anschauen)
• Tumblry, (Beispiel anschauen)
• großer Artikel, (Beispiel anschauen)

Grids

• die Platzierung von Elementen nebeneinander ist etwas kompliziert ohne weitere Hilfen
• deswegen: Verwendung von Grids (werden schon lange für nicht-web Design verwendet)
• hier: Gridism

<div class="grid">
    <div class="unit whole red"><pre>groß</pre></div>
</div>

<div class="grid">
    <div class="unit half green"><pre>halb</pre></div>
    <div class="unit half orange"><pre>und halb</pre></div>
</div>

(Beispiel anschauen)

Weiterführende Links

deutsch:

• SelfHTML

englisch:

• Learn CSS Layout, erklärt die Grundlagen sehr gut in aufeinander aufbauenden Schritten
• A Beginner’s Guide to HTML & CSS
• An Advanced Guide to HTML & CSS
• HTML & CSS Kurs bei Codecademy
• Übersicht zu CSS Properties
• CSS Diner- Where we feast on CSS Selectors, ein Spiel zum Verständnis von CSS Selektoren

Tools

• Gridism, einfaches Grid Framework
• Bootstrap, populäres, sehr umfangreiches CSS Framework
• Can I Use, Übersicht für die Browser-Unterstützung von neueren CSS & HTML Elementen
• Font Awesome, viele Icons für Webseitendesign
• kommerziell:
  • Webflow, online Designer für Webseiten (nur in sehr kleinem Rahmen kostenfrei nutzbar, für kleine Projekte eventuell lohneswert wenigstens zum herumspielen)
  • Macaw, ebenfalls ein Design Programm für Webseiten, es gibt eine Ausprobier-Version

Inspiration

• A List Apart
• clairelegrand.tumblr.com
• der Blog von Danielle Sucher
• Die Eskapistin
• Hacker School
• incisive.nu
• jacobian.org
• Holstee Manifesto
• tomayko.com
• Wizard for Mac
• Dash

Weiter geht es mit dem Veröffentlichen