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 !

img_3

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

Pour aller plus loin


Bruno Flaven
0