Comment personnaliser les articles, les boutons et les images ?

Voici des exemples de personnalisation possibles avec 3WDOC Studio pour des boutons, images et articles de vos séquences :

Survolez les éléments suivants avec votre souris !

Article 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Chaque élément est personnalisable dans un onglet de style. Ce sont les mêmes paramètres pour les articles, les boutons et les images. Pour les images, évidemment, il n’y a pas de personnalisation du texte.

Les trois onglets sont semblables à l’image suivante.

Ci-dessous, nous allons définir tous les éléments. Tout d’abord, vous devez définir le contour de l’élément, puis définir le style du texte (uniquement pour les articles et les boutons) et les paramètres de “hover” (changements de style lorsque la souris survole l’élément).

Le contour de l’élément

Chaque élément (image, article et bouton) est dans une boîte qui permet de lui offrir un contour. Par exemple, vous pouvez créer une bordure autour d’une image, un article ou un bouton et le concevoir.

cursor : Définit le type de curseur au survol de la souris.

border-radius:Définit l’arrondi des angles de l’élément

border-style: Définit le style de la bordure

border-width: Définit la largeur de la bordure

border-color: Définit la couleur de la bordure

box-shadow: Définit l’ombre de l’élément. Une ombre interne peut aussi être appliquée

Les paramètres de texte

Ce sont tous les paramètres pour personnaliser le texte, SEULEUMENT POUR UN ARTICLE OU UN BOUTON ! En fait, vous pouvez contrôler l’ensemble de son apparence (police, taille, couleur, etc).

color: Définit la couleur du texte

font-size: Définit la taille de la police en pixel

font-family: Définit la police

font-weight: Définit la graisse de la police

font-style: Définit le style de la police

text-align: Définit l’alignement du texte (à gauche, centré, à droite)

text-decoration: Définit la décoration du texte

text-transform: Définit la casse du texte

padding:Définit la marge autour du texte par rapport à son contenant

Paramètres “Hover”

Ce sont tous les changements de style d’un élément lorsque la souris le survole. Avec ces paramètres, vous pouvez créer des changements de style CSS, comme la couleur, la bordure ou l’opacité.
Mais vous pouvez également ajouter des transitions CSS3 , ces paramètres permettent des petites animations.

`color:hover:`Définit la couleur du texte au survol de la souris
`text-decoration:hover:` Définit la décoration du texte au survol de la souris
`background-color:hover:` Définit la couleur d’arrière plan au survol de la souris
`background-image:hover:` Définit l’image d’arrière plan au survol de la souris
`border-style:hover:` Définit le style de bordure au survol de la souris
`border-width:hover:` Définit la largeur de la bordure au survol de la souris
`border-color:hover:` Définit la couleur de bordure au survol de la souris
`opacity:hover:` Définit l’opacité au survol de la souris
`transition-delay:` Définit le temps de démarrage de l’effet de transition
`transition-timing-function:` Définit la fluidité de l’effet de transition
`transition-duration:` Définit la durée de l’effet de transition
`transition-property:` Définit l’élément de style sur lequel l’effet de transition va s’appliquer
`rotate:hover:` Définit en degré l’angle de rotation, de 180° à -180°, au survol de la souris
`scaleY:hover:` Définit un redimensionnement vertical au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
`scaleX:hover:` Définit un redimensionnement horizontal au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
`translateY:hover:` Définit un déplacement vertical au survol de la souris
`translateX:hover:` Définit un déplacement horizontal au survol de la souris