Navigation bauen, siehe navi01.html
Wichtig für Klausur: Datei "Muster.pdf"
Typo im Netz ist standardmäßig 16 p
Im HTML wird immer die Grundlage gelegt, wenn dort schon ein Fehler ist, ganz schlecht!
Übungsaufgabe: position absolute/z-index: ... position: absolute; z-index: 1;}
Ebenen und Ebenenreihenfolge wird angezeigt
Transition | Übergang
für schöne Effekte
CSS transition ändert den Wert einer CSS-Eigenschaft über
die Zeit. Dabei entstehen Animationen wie das Ein- und Ausblenden und
Bewegen von HTML-Elementen ohne Javascript oder Flash.
CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern. Aber die Animationen mit :hover oder :focus wirken wie ein Schalter: an, aus, an, aus.
CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern. Aber die Animationen mit :hover oder :focus wirken wie ein Schalter: an, aus, an, aus.
transition-property: height; Eigenschaft
transition-duration: 3s; Dauer
transition-time-function: ease-out; linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n)
transition-delay: 3px; Zeitverzug (Delay)
transition: all 3s; Dann kommen alle Übergänge zum Einsatz
#eins:hover {height: 300px;} = Das passiert dann im Browser!
Hintergrundbild verschieben über position
<style type="text/css">
li {
float: left;
height: 388px;
width: 100px;
border: 1px solid #333;
margin-right: 3px;
color: transparent;
background-image: url(001_industriekultur.jpg)}
li:nth-child(2) {background-position: -100px 0;}
li:nth-child(3) {background-position: -200px 0;}
li:nth-child(4) {background-position: -300px 0;}
li:nth-child(5) {background-position: -400px 0;}
li:nth-child(6) {background-position: -500px 0;}
</style>
<body >
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<body >
Animation
... animation: horst 5s infinite} Loop, dauerhafte Animation
@keyframes horst { was gemacht werden soll
0% {background: #DF0000;}
50% {background: #FFDF00;}
100% {background: #DF0000;}
} Achtung, 2 geschweifte Klammern!
Keine Kommentare:
Kommentar veröffentlichen