WEB - DESIGN


Peine


für Firmen und private Web Benutzer
Stand: 13.11.2014

HTML 5


Beispiele für html5


Mozillas html5 Web O'Wonder


Windows html5 Schönheit im WEB


Google html5 rockt


Apple html5 Showcase


 

Neue Befehle html


Dokumentationstyp

html 5: <!doctype html>


Boxen

Grouping Elemente

<wrapper> xxx </wrapper> Bereich für Media Befehl

<header>xx</header> Kopfbereich

<navigation>xx</nav> Navigationsbereich

<main>xx</main> Hauptbereich 1mal pro Seite

<footer>xx</footer> Fußbereich


Webseitenbereiche

<article>xx</article> Bereich in dem der Inhalt einer Webseite angezeigt wird

<section>xx</section> Mit diesem Bereich kann der article unterteilt werden

<aside>XXX</aside> Marginaltext

<adress>xxx</adress> Adresse oder mail 



IFRAME


<iframe src="datei.html" frameborder="1" width="640" height="383" scrolling="no" allowtransparency="true"></iframe><br/><a href="http://datei.html" target="_blank" title="blbla">HTML Beispiel</a>


seamless


Überschriften

<h1-6>XXX</h1-6>

<hgroup


Bilder

<img>

<figure>

<figcapture>




Zeileumbruch

<br/> = <BR>

<&shy>  Zeilenumbruch mit Bindestrick

<wbr>    Zeilenumbruch ohne Bindestrich bei Text mit verhindertem Zeilenumbruch


Rendern


Befehle CSS




Browser Zuweisung

-webkit

-o    Opera

-moz    Mozilla

-ms    Microsoft



box-shadow

    box-shadow:0px 0px 10px rgb(72,175,97);

    box-shadow:0px 0px 10px rgb(72,175,97) inset;

    box-shadow:0px 0px 10px rgba(72,175,97,1) ;

1 Angabe: Länge für die horizontale Verschiebung
2 Angabe: Länge für die vertikale Verschiebung
3 Angabe: Angabe für die Weichzeichnung
4 Angabe: Länge des zusätzlichen Schatten
inset: Schlüsselwort für den Schatte innerhalb der Box als erste oder letzte Angabe


Mehrere Schatten werden durch Komma getrennnt
       box-shadow:0px 0px 10px rgb(72,175,97),

                        0px 0px 10px rgb(72,175,97);


rgba(23,23,23,1)  a gibt an wie die Weichzeichnung angezeigt wird als Opacity Wert 0.1-1


wiki.selfhtml.org

ccs generator peterkroener




runde Ecken


halbtransparente Farben

<ocapy>




Transformationen

#verkehrt {-webkit-transform: rotate(180deg);

-o-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg)}


translate(Längeneinheiten x, y) verschiebt ein Element


scale(Faktoren x, y) vergrößert oder verkleinert ein Objekt


skew(Winkel y, y)    Verzerrung von Texten und Bilder



Übergänge animieren


unerschiedliche Ausgabe medien


Media Queries


Seitenanfang Seitenübersicht