HowTo - Übergänge mit CSS3 - Schwierigkeit: Easy

adagi · 27 Apr. 2016

Hallo zusammen,

ich hab' hiermit wiedermal ein kleines HowTo für dich, den Einsteiger in CSS3. Hier lernst du (hoffentlich), wie du in CSS3 einfache Übergänge erstellen kannst.

Hier kannst du dir das Resultat einmal ansehen. Anschliessen werde ich dir erklären, wie man dies macht.

HTML:

<!DOCTYPE html>

<html> 
<head>

<style>
/* den Button stylen */
button
{
    background-color: lightblue;
    height: 30px;
    width: 100px;
    font-size: 14px;
    font-family: Serif;
    transition: all 0.8s;                     /* Zeit und 'Art' des Übergangs bestimmen.*/
    -moz-transition: all 0.8s;            /* all damit alle Veränderungen in 0.8 Sekunden ausgeführt werden */
    -o-transition: all 0.8s;                 /* -moz, -o und -webkit für die verschiedenen Browser */
    -webkit-transition: all 0.8s;
    -ms-transition: all 0.8s;
}


/* :hover     -      hier sind alle Veränderungen. */
button:hover
{
    background-color: orange;     
    height: 50px;
    width: 200px;
    font-size: 20px;
    font-family: Arial;
}
</style>

<meta charset="utf-8" />
<title> Animation-Tutorial </title>

</head>

<body>

<!-- button - Element, welches nun styled ist. -->
<button onclick="alert('+1 Keks');">       <!--     ich mag Kekse -->
Absenden!
</button>

</body>

</html>

Ich hoffe, dass ich Einigen helfen konnte!

LG adagi

adagi · 28 Apr. 2016

Holzdiebstahl schrieb:
CSS, JS, HTML etc. in eine Datei zu schreiben, da verliert man ziemlich schnell die übersicht

Hier ist es so wenig, dass ich mir gedacht habe, dass das niemanden stört!

Holzdiebstahl schrieb:
Und wer HTML und CSS lernen möchte, sollte die Grundlagen von HTML eh schon kennen, deswegen ist es unnötig den kompletten Code hinzuschreiben.

Danke für deinen Tipp. Werde ich nächstes Mal anders machen.

Holzdiebstahl schrieb:
Desweiteren ist das ja nicht wirklich ein Tutorial. Das ist eher ein Code zum abschreiben. Bei einem Tutorial hätte ich eher eine Schritt für Schritt Anleitung mir vorgestellt.

Ist kein Tutorial, sondern ein HowTo. Ein Tutorial wäre Schritt-für-Schritt aber bei einem HowTo geht es einfach darum, wie man es macht etc

Holzdiebstahl schrieb:
Muss man das bei HTML5 überhaupt machen?

Glaube nicht..

Habs mir aber so beigebracht, da es nie schadet.

LG adagi

HowTo - Übergänge mit CSS3 - Schwierigkeit: Easy

adagi

Mitglied

adagi

Mitglied