Un rapide tutoriel
pour appliquer un style à un bouton
Vous allez appliquer un style à un bouton dans votre séquence, en utilisant des transitions CSS3. Les boutons vous permettent de naviguer dans votre séquence : faire apparaître des nouveaux médias, créer des hyperliens vers vos autres séquences ou des sites externes . Ce tutoriel vous montre comment personnaliser le style d’un bouton dans votre séquence, en utilisant des transitions CSS3.
Allez dans l'onglet STYLE et cliquez sur MANAGE
Clonez un style existant afin de personnaliser un bouton
Editez ce style : donnez-lui un nom (label)
Allez dans le "Style Editor""
Cliquez sur l'onglet Button, prévisualisez le style pré-existant
Vous pouvez voir le style du "Button 1", et son style quand votre souris le survole
Retournez dans l'Editeur
Choisissez le "Button 1"
Comme vous le voyez, il y a beaucoup de propriétés de style pour un bouton !
Dans ce tutoriel nous en changerons juste quelques-uns pour vous donner un aperçu des possibilités de style
Quand votre souris survole une propriété, une aide contextuelle apparaît automatiquement et vous explique cette propriété
Stylez maintenant le "Button 1"
Par exemple, choisissez une bordure en pointillés (dotted)...
... avec une largeur de 5 pixels
Définissez une bordure de couleur noire
Choisissez la police Impact
Donnez-lui une taille de 37 pixels
Choisissez la couleur noire (il s'agit de la couleur du texte)
Mettez votre texte en gras (bold)
Choisissez le blanc comme couleur de fond
Définissez une marge de 26 pixels (padding)...
... et une opacité de 1 (pleine)
Sélectionnez "ease-out" dans les "transition-timing function"
Choisissez 1.5 sec pour la durée de la transition
Sauvegardez et prévisualisez vos modifications
Ca marche ! Vous avez stylé le "Button 1"
Mais vous n'avez pas encore stylé ses paramètres de "survol" (hover)...
Retournez dans l'Editeur
Stylez maintenant les paramètres "hover" (survol)
Mettez un "box-shadow" (ombre au bouton)
Définissez une rotation : votre bouton va bouger
Vous pouvez changer la taille du bouton, verticalement...
... et horizontalement
Déplacez le bouton, verticalement...
... et horizontalement
Choisissez une couleur (couleur du texte)...
... et une couleur de fond
Vous pouvez aussi définir une couleur de bordure
Changez le style de la bordure..
... sa largeur...
... et l'opacité du bouton
Maintenant, sauvegardez et prévisualisez vos modifications
Ca marche ! Vous avez stylé le "Button 1" et ses paramètres de survol (hover)
Quelques informations à propos de 3WDOC Studio…
3WDOC Studio est un outil polyvalent spécialement conçu pour créer et délivrer en HTML5 vos contenus rich media optimisées sur le web. 3WDOC Studio a pour finalité première de mettre en mouvement des objets et des éléments Web (texte, photos, vidéos, arborescence, API, base de données…) dans la durée pour concevoir donc une narration web. 3WDOC Studio = 3WDOC Player + 3WDOC Editor.
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]
[...] Tutorial interactif Appliquer un style à un bouton [...]