Nach der Transformation geht es im Webdesign-Workshop mit der CSS Eigenschaft Transition weiter\u2026<\/p>\n\n\n\n\n\n\n\n
Transition \u2013 Was ist das denn?<\/strong><\/p>\n\n\n\n Mit den Transitions lassen sich per CSS interessante \u00dcbergangseffekte realisieren. Mouseovers und Farb- oder Objekt\u00e4nderungen f\u00fcr ausgew\u00e4hlte Elemente der Webseite\u2026<\/p>\n\n\n\n F\u00fcr die folgenden Experimente macht es Sinn eine neue Datei zu erstellen (Kopiervorlage nutzen) und dann wieder eine Box erzeugen\u2026<\/p>\n\n\n\n <\/p>\n\n\n\n <p><\/p>\n\n\n\n <div id=\u201cbox1\u2033><\/p>\n\n\n\n <\/div><\/p>\n\n\n\n <\/p><\/p>\n\n\n\n <\/p>\n\n\n\n Transition 1 mit Hover-Effekt:<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Per CSS kommt dann die Transition dazu:<\/p>\n\n\n\n #box1 {<\/p>\n\n\n\n width: 100px;<\/p>\n\n\n\n height: 100px;<\/p>\n\n\n\n background: red;<\/p>\n\n\n\n -webkit-transition: width 2s; \/* Safari *\/<\/p>\n\n\n\n transition: width 2s;<\/p>\n\n\n\n }<\/p>\n\n\n\n #box1:hover {<\/p>\n\n\n\n width: 300px;<\/p>\n\n\n\n height: 100px;<\/p>\n\n\n\n background: red;<\/p>\n\n\n\n -webkit-transition: width 2s; \/* Safari *\/<\/p>\n\n\n\n transition: width 2s;<\/p>\n\n\n\n }<\/p>\n\n\n\n Transition 2 mit Hover und Farbwechsel:<\/strong><\/p>\n\n\n\n F\u00fcr eine Box 2 kann folgendes CSS probiert werden\u2026:<\/p>\n\n\n\n #box2 {<\/p>\n\n\n\n width: 100px;<\/p>\n\n\n\n height: 100px;<\/p>\n\n\n\n background: red;<\/p>\n\n\n\n -webkit-transition: width 2s; \/* Safari *\/<\/p>\n\n\n\n transition: width 2s;<\/p>\n\n\n\n }<\/p>\n\n\n\n #box2:hover {<\/p>\n\n\n\n width: 300px;<\/p>\n\n\n\n height: 100px;<\/p>\n\n\n\n background: green;<\/p>\n\n\n\n -webkit-transition: width 2s; \/* Safari *\/<\/p>\n\n\n\n transition: width 2s;<\/p>\n\n\n\n transition-delay: 1s;<\/p>\n\n\n\n }<\/p>\n\n\n\n Die Boxen ver\u00e4ndern beim Mouse-Over ihre Gr\u00f6\u00dfe. Die zweite Box sogar die Farbe und das mit Zeitverz\u00f6gerung\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Nach der Transformation geht es im Webdesign-Workshop mit der CSS Eigenschaft Transition weiter\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":12,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/262\/revisions\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}