User Tools
2015_2016:s1:webdoc:td5
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2015_2016:s1:webdoc:td5 [2015/11/29 19:55] urli |
2015_2016:s1:webdoc:td5 [2015/11/30 13:30] urli [Manier les selecteurs comme personne] |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| - | * Votre mission si vous l'acceptez est de modifier votre page web en suivant les 3 points ci-dessous : | + | * Votre mission si vous l'acceptez est de modifier la page web du TD précédent en suivant les 3 points ci-dessous : |
| * supprimer tous les classes ou id (O_o). | * supprimer tous les classes ou id (O_o). | ||
| * appliquer les styles uniquement via les selecteurs (http://www.w3schools.com/cssref/css_selectors.asp). | * appliquer les styles uniquement via les selecteurs (http://www.w3schools.com/cssref/css_selectors.asp). | ||
| Line 46: | Line 46: | ||
| * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html) | * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html) | ||
| </note> | </note> | ||
| + | |||
| + | ===== Transformations, Translations, Animations, ... ===== | ||
| + | |||
| + | |||
| + | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| + | * Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations. | ||
| + | </box> | ||
| + | ==== Déplacement au survol de l'image ==== | ||
| + | |||
| + | |||
| + | <code css> | ||
| + | img:hover { | ||
| + | -webkit-transform: translate(0, -20px); | ||
| + | /* -moz-transform: translate(0, -20px); | ||
| + | -ms-transform: translate(0, -20px); | ||
| + | -o-transform: translate(0, -20px); | ||
| + | transform: translate(0, -20px); /* déclenchement de la transition au survol */ | ||
| + | */ | ||
| + | } | ||
| + | </code> | ||
| + | (source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html) | ||
| + | |||
| + | |||
| + | ==== Changement de couleur d'un lien doucement ==== | ||
| + | |||
| + | <code css> | ||
| + | a { | ||
| + | font-size: 3em; | ||
| + | font-weight: bold; | ||
| + | color: #789; | ||
| + | text-decoration: none; | ||
| + | -webkit-transition-property: color; | ||
| + | -webkit-transition-duration: 3s; | ||
| + | |||
| + | /* Pour Firefox */ | ||
| + | /* -moz-transition-property: color; | ||
| + | -moz-transition-duration: 2s; */ | ||
| + | |||
| + | /* … et lorsque ce sera standardisé | ||
| + | transition-property: color; | ||
| + | transition-duration: 1s; */ | ||
| + | |||
| + | } | ||
| + | </code> | ||
| + | |||
| + | (source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm) | ||
| + | ==== Amusez-vous ==== | ||
| + | |||
| + | |||
| + | |||
| + | http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm | ||
| + | |||
| + | |||
| + | |||
| + | Regardez et amusez vous à partir du [[ http://animateyourhtml5.appspot.com/pres/index.html#5|site ci-après]]. | ||
| + | |||
| + | Par exemple : | ||
| + | <code css> | ||
| + | .move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; } | ||
| + | @-webkit-keyframes anim2 | ||
| + | { | ||
| + | from {left: 0px; -webkit-transform: scale(1.0) rotate(0deg) } | ||
| + | 50% {left: 600px; -webkit-transform: scale(0.5) rotate(10deg) } | ||
| + | to {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique. | ||
2015_2016/s1/webdoc/td5.txt · Last modified: 2015/11/30 13:30 by urli
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
