Tutoriel Fiche #3

Ayfoth vous propose de réaliser la création suivante : Tutoriel : Tutoriel Fiche #3

Bonjour,
dans ce tutoriel qui fait suite au deuxième, nous allons améliorer notre fiche en mettant en place des variables, en mettant une ombre à nos paragraphes et en ajoutant et positionnant une image qui nous servira aussi comme avatar.


Les variables

Pour commencer nous allons considérablement alléger notre CSS en utilisant des variables mais qu'est ce que c'est ?
Ce sont des éléments que l'on définit à l'avance pour les réutiliser simplement. Dans notre fiche on va les utiliser pour la couleur de fond et les bordures mais on peut les utiliser pour tout et n'importe quoi en CSS.
Mais à quoi ça sert ?
Hé bien vu qu'elles sont attribué tout au début du code il nous suffit de changer une seule ligne pour changer par exemple tous les fonds qui étaient de cette couleur, autant dire que dans des codes avancés et longs ça raccourcit drôlement le travail.

Alors c'est pas tout ça mais une variable ne se déclare pas n'importe comment, elle respecte une certaines syntaxe et s'écrit comme ceci dans votre CSS

  1. --nomdelavariable: codedelavariable



Autrement pour une couleur de texte par exemple nous aurons

  1. --couleur-texte: #AB2565 ou --couleur-texte: rgba(255,255,255,0.5)



On peut mettre n'importe quoi qui correspond a la variable dans le cas précédent d'une couleur on peut mettre en hexadécimal, en rgba, en rgbs, en hsl etc; tout ce qu'on aurait pu mettre après un color.


Bien mais comment on appelle une variable ?

Et bien pour l'appeler , en respectant l'exemple précédent on va faire comme ceci

  1. color: var(--couleur-texte)



Ainsi le jour où l'on installe un nouveau thème graphique sans changer le codage dans le cas d'un forum par exemple il nous suffira de juste changer --couleur-texte au début de notre css )pour que ca le change partout où l'on a appelé la variable.

La ligne de la variable peut se déclarer n'importe ou dans votre CSS mais personnellement je conseil d'y faire de cette facon

  1. :root{
    les variables
    }
    Reste du CSS



Dans le cadre de notre tutos nous allons donc attribuer une variable à notre fond et une variable à notre bordure :

  1. :root{
    --couleur-fond-elements: rgba(255,255,255,0.5);
    --bordure: 2px white solid;
    }



Et du coup les lignes CSS concernées par ces variables deviendront :

  1. h1{
    font-family: 'Aboreto', cursive;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--couleur-fond-elements);
    border-top: var(--bordure);
    border-bottom: var(--bordure);
    }

    h2{
    text-transform: uppercase;
    border-top: var(--bordure);
    border-bottom: var(--bordure);
    color: white;
    }

    p{
    text-align: right;
    background-color: var(--couleur-fond-elements);
    }



Avec ce code vous pouvez modifier à votre guise couleur-fond-elements et bordure pour personnaliser votre fiche avec vos propre couleurs.


Les ombres

En CSS il existe 2 propriétés principales pour les ombres, text-shadow (pour les ombres des textes) et box-shadow (pour les ombres d'un "bloc"), les deux s'écrivent de la même facon
  1. nomdelapropriété: position-horizontale position-verticale etendue-flue couleur

    box-shadow: 10px 10px 5px black par exemple



Dans notre cas on l'applique à nos paragraphes donc

  1. p{
    text-align: right;
    background-color: var(--couleur-fond-elements);
    box-shadow: 2px 2px 5px black;
    }



Voilà vous savez comment faire des ombres désormais.


Le positionnement

Et maintenant on va finir par l'ajout d'une image qui servira d'avatar, dans un premier on ajouter l'image dans notre HTML

  1. <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet">

    <div class="fichetutowyv"><h1>Tutoriel #1</h1>
    <img src="https://zupimages.net/up/22/35/xe0k.jpg" />
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    </div>



Et maintenant on va modifier l'image directement dans notre CSS en lui attribuant taille et forme arrondie

  1. img{
    height: 70px;
    width: 70px;
    border-radius: 70px;
    }



Mais voila le placement n'est pas top comment faire ?

Et bien on va la positionner manuellement en mode relatif mais pour cela il faut que toute la fiche soir d'abord en position absolute

  1. .fichetutowyv{
    background-color: #054950;
    border: 2px black solid;
    position: absolute;
    }



Puis nous allons placer correctement notre image en mode relatif mais quel est ce mode, cela veut dire qu'elle reste dans le flux et garde sa 'place".

  1. img{
    height: 70px;
    width: 70px;
    border-radius: 70px;
    position: relative;
    top: -60px;
    left: 20px;
    margin-bottom: -100px;
    }



Alors oui il y a un margin-bottom c'est pour remonter l'espace vide générée par l'image sinon ca fera un décalage.


Code Final

  1. <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet">

    <div class="fichetutowyv"><h1>Tutoriel #1</h1>
    <img src="https://zupimages.net/up/22/35/xe0k.jpg" />
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    <h2>sous-titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus dui eget cursus ultrices. Etiam auctor, lacus eget semper malesuada, enim massa vulputate quam, ut porttitor dolor lacus vitae risus. Sed sit amet malesuada nunc, ac auctor metus. In posuere orci at libero consectetur interdum. Mauris maximus odio eu sapien congue blandit. Quisque blandit iaculis ante, rhoncus suscipit purus malesuada vel. Aenean elementum neque in nulla maximus vestibulum. Fusce lobortis imperdiet orci quis pretium. Aliquam pharetra felis vel aliquam fermentum. Cras vel malesuada quam. Aliquam ut eros eu massa varius luctus. Nam aliquam eros at ultrices lobortis. Ut laoreet neque erat, ac egestas metus pretium quis. Maecenas scelerisque vestibulum est. Sed sollicitudin urna quis dapibus molestie. </p>
    </div>


  1. :root{
    --couleur-fond-elements: rgba(255,255,255,0.5);
    --bordure: 2px white solid;
    }

    .fichetutowyv{
    background-color: #054950;
    border: 2px black solid;
    position: absolute;
    }

    img{
    height: 70px;
    width: 70px;
    border-radius: 70px;
    position: relative;
    top: -60px;
    left: 20px;
    margin-bottom: -100px;
    }

    h1{
    font-family: 'Aboreto', cursive;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--couleur-fond-elements);
    border-top: var(--bordure);
    border-bottom: var(--bordure);
    }

    h2{
    text-transform: uppercase;
    border-top: var(--bordure);
    border-bottom: var(--bordure);
    color: white;
    }

    p{
    text-align: right;
    background-color: var(--couleur-fond-elements);
    box-shadow: 2px 2px 5px black;
    }


Exercices

Exercice Variable
  1. Changer les variables pour personnaliser la fiche et en inventer une nouvelle



Exercice Ombre

  1. Modifier l'ombre du paragraphe, en en ajoutant hier incluant un text-shadow



Exercice Positionnement

  1. Jouer avec le positionnement de l'image et en positionnants d'autres blocs que l'image.



Dans le prochain tutoriel nous verrons comment utiliser les sélecteurs, comment ajouter une petite animation au survol et comment mettre et décorer des liens.

Rendus

Personne n'a encore essayé ce tutoriel. Soyez le premier !

Commentaires

Ce tutoriel n'a pas reçu de réponses pour le moment. Soyez le premier à le commenter !

Répondre

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.