CSS3-Styles in HTML5

(1)

Entwicklung multimedialer Anwendungen

Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm

Hochschule Harz

FB Automatisierung und Informatik

mwilhelm@hs-harz.de

http://www.miwilhelm.de

Raum 2.202

(2)

Inhalt

1. Einleitung

2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)

4. CSS3 (Design) 5. SVG / Canvas

6. Tablet Ansteuerung (jQuery) 7. Geolocation

(3)

CSS3-Styles in HTML5

^Übergänge ^Schatten ^Drehungen

Transformationen

Neue Farbdefinition

Verlaufsfarben

Befreiung vom Box-Modell

Animationen

(4)

Beispiele in CSS3-Styles

Pseudo-Klassen

• ^:link

• ^:visited

• ^:hover

• :focus

• :active

• ^:visited <video controls="controls" class="box" >

</video>

(5)

Beispiele in CSS3-Styles: hover

(6)

Beispiele in CSS3-Styles: transition

Übergänge ohne Javasript

Eigenschaften des Selectors „transition“

• transition-property

• Eigenschaft, die verändert werden soll

• transition-duration

• Dauer in Sekunden

• transition-timing-function

• Berechnet die Geschwindigkeit des Übergangs

• linear, ease, etc.

• transition-delay

• Wann beginnt der Übergang

(7)

Beispiele in CSS3-Styles: transition

transition-timing-function

• ^linear

• ^ease

• Start langsam, Ende schnell

• ease-in

• Start langsam

• ^ease-out

• Start schnell, Ende langsam

• ease-in-out

• Start schnell, Mitte schnell, Ende langsam

• ^step-start Einzelwerte, komplex: steps(1, start);

• ^step-stop

•

(8)

.box:hover {

background-color: black;

margin:15px;

padding:15px;

ffloat:right;

margin-right:60px;

transition-property:border;

transition-duration:5s;

transition-timing-function:ease-out;

-webkit-transition-property:border; // für Safari und älteren Browsern -webkit-transition-duration:5s;

-webkit-transition-timing-function:ease-out;

(9)

(10)

<p class="box" >

Graphics2D g2d = (Graphics2D)g;<br />

g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);<br />

AffineTransform at = new AffineTransform(); <br />

int x=50;<br />

int y=100;<br />

at.setToRotation( Math.toRadians(-90), x,y ); // theta x y<br />

g2d.setTransform(at); <br />

g2d.drawString("Name", x,y);<br />

html5-css3-text1.xhtml

(11)

p {

font-size:1.2em;

}

.box:hover {

background-color: black;

color:white;

transition-property:font-size;

transition-duration:5s;

transition-timing-function:ease-out;

font-size:3em;

html5-css3-text1.css

(12)

html5-css3-text1.xhtml

(13)

Farbdefinitionen in CSS3-Styles

In CSS3 gibt es nun auch den alpha-wert.

Funktion: rgba

• rgba(255,127,230,0.5); // nur mit der Funktion „rgba“

(14)

Farbdefinitionen in CSS3-Styles

Beispieldatei: html5-color1.xhtml

h1 {

background-color:#FFFF00;

} h2 {

background-color:rgba(255,255,0,0.2);

} h3 {

} h4 {

(15)

CSS3-Style: Transformation

Eigenschaften des Selectors „transform“

• ^scale

• Zoom eines Elements (x,y,xy)

• translate

• Verschiebung eines Elements (x,y,xy)

• ^rotate

• Rotation eines Elements (α)

• skew

• Ändert die vier Winkel eines Elements (α_x, α_y, α_xy)

^Vorteile

(16)

.box {

width:120px;

color:green;

transform:skew(30deg) translate(145px);

background-color:gray;

margin:5px;

}

Transformation: 1. Beispiel

Hier ist die erste Zeile<br />

Hier ist die zweite Zeile<br />

</p>

(17)

.box {

width:120px;

color:green;

transform:scaleX(2.5) translate(150px, 100px) skew(-45deg);

margin:5px;

}

</p>

(18)

(19)

.box {

width:300px;

color:green;

transform:scaleX(2.5) translate(150px, 100px) skew(-15deg);

margin:5px;

Transformation: 3. Beispiel (Video)

</video>

<video controls="controls" class="box" >

</video>

(20)

(21)

(22)

.box {

width:300px;

color:green;

transform:rotate(180deg) translate(-150px, -100px) skew(15deg);

Transformation: 4. Beispiel (Video)

</video>

<video controls="controls" class="box" >

</video>

(23)

(24)

CSS3-Style: Keyframes

Eigenschaften des Selectors „keyframes“

• Bezeichner

• ^from

• Der Startwert 0%

• to

• Der Endwert 0%

• oder Prozentzahl

• Aktuelle Prozentzahl

(25)

CSS3-Style: Animation (1)

Eigenschaften des Selectors „animation“

• animation-name

• animation-delay

• in sec oder ms

• animation-duration

• in sec oder ms

• animation-iteration-count

• 1, 1.5, infinite

• animation-direction

• animation-direction: normal

• animation-direction: reverse

• animation-direction: alternate

(26)

• animation-play-state

• animation-play-state: running

• animation-play-state: paused

• animation-play-state: paused, running, running

• animation-timing-function (zeitliche Veränderung)

• animation-timing-function: ease

• animation-timing-function: ease-in

• animation-timing-function: ease-out

• animation-timing-function: ease-in-out

• animation-timing-function: linear

• animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)

• animation-timing-function: step-start

(27)

• animation-fill-mode

• animation-fill-mode: none

• animation-fill-mode: forwards

• animation-fill-mode: backwards

• animation-fill-mode: both

(28)

@keyframes color-change { 0% {

background:white;

} 25% {

background:red;

} 50% {

background:green;

} 75% {

background:blue;

}

100% {

Animation / Keyframes: 1. Beispiel (Text)

</div>

.box {

width:150px;

height:140px;

animation:color-change 12s;

}

(29)

(30)

<body>

<h1>2. Beispiel Keyframes, Text</h1>

</body>

h1 {

animation-duration: 3s;

animation-name: slideleft;

}

@keyframes slideleft { from {

margin-left: 100%;

color:red;

width: 300%;

} to {

margin-left: 0%;

color:blue;

(31)

(32)

h1 {

animation-name: slidein;

} h2 {

animation-name: slidein2;

animation-timing-function: ease-in;

animation-iteration-count: infinite;

(33)

(34)

</div>

</div>

(35)

.box1 {

animation-name: slide1;

width: 300px;

position:relative;

}

@keyframes slide1 { 0% {

background-color:red;

top:0px;

left:400px;

}

50% {

background-color:blue;

top:100px;

left:200px;

}

100% {

background-color:green;

top:200px;

.box2 {

animation-name: slide2;

width: 300px;

position:absolute;

}

@keyframes slide2 { 0% {

background-color:red;

top:0px;

left:0px;

}

50% {

background-color:blue;

top:100px;

left:200px;

}

100% {

background-color:green;

top:200px;

(36)

(37)

HTML5 Verläufe

Vor HTML5 musste man mittels Programm, Illustrator, GIMP, CorelDraw etc. Kacheln separat erstellen.

Nachteile: Bilderstellung, Ladezeit

(38)

HTML5 Verläufe

Verläufe lassen sich nun sehr einfach OHNE Bilder erstellen

• Verläufe können beliebig komplex sein.

• Man benötigt keine Bilder.

• Der Hintergrund ist immer sofort vorhanden.

• Der Hintergrund kann gedreht werden.

• Der Hintergrund kann strahlenförmig sein.

• Diese Technik wird sehr häufig auf mobilen Geräten genutzt.

• background: linear-gradient(to bottom, green 0%, blue 100%);

• background: linear-gradient(90deg, green 0%, blue 100%);

(39)

.bg1 {

color:yellow;

background: linear-gradient(to bottom, green 0%, blue 100%);

background: linear-gradient(90deg, green 0%, blue 100%);

}

(40)

(41)

.bg1 {

color:white;

background: linear-gradient(90deg, purple, blue, green, yellow, red, purple);

}

Quelle: html5-Verlaeufe2.xhtml

(42)

.bg1 {

color:white;

background: radial-gradient(purple, blue, green, yellow, red, purple);

}

Quelle: html5-Verlaeufe3.xhtml

(43)

• background: linear-gradient(to bottom, green 0%, blue 100%);

• background: linear-gradient(90deg, green 0%, blue 100%);

• background: radial-gradient(red, yellow, green);

• background: radial-gradient(ellipse, red, yellow, green);

• background: radial-gradient(circle, red, yellow, green);

• Size-Parameter

• closest-side

• farthest-side

• closest-corner

• farthest-corner

• radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);

HTML5 Radial-Verläufe

(44)

.bg1 {

color:white;

background: repeating-radial-gradient(red, yellow 10%, green 15%);

}