Tutoriel Fiche #2

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

Sommaire

  1. Le Tuto
  2. Exercices

Bonjour,
dans ce tutoriel qui fait suite au premier, nous allons améliorer notre fiche en ajoutant un fond et un cadre à notre titre, un cadre et changer la couleur de notre sous-titre et un fond à notre paragraphe.


Le Tuto

Le titre auparavant juste un texte noire avec une police qu'on lui a définit va avoir un fond avec une opacité et un cadre au dessus et en bas.
Mais comment faire ?
Tout se passe dans le css, tout d'abord un fond de couleur en faible opacité est possible avec 
  1. background-color: rgba(x,x,x,x)



En fait le rgba s'écrit comme ceci : code rouge, code vert, code bleue; opacité. Dans mon exemple du blanc j'ai dont mit (255,255,255,0.5) , l'opacité est donc de 50%.
Maintenant passons au cadre, en effet on a juste appris border, mais si on veut uniquement l'appliquer à un coté il suffit de le mettre comme ceci 

  1. border-top

    border-bottom

    border-left

    border-right



Avec toutes ces informations vous devez être capable de gérer les 3 phases de ce tutoriels mais je vais vous donner tout le CSS pour que vous puissez vous corriger. 

  1. .fichetutowyv{

    	background-color: #054950; 

    	border: 2px black solid;

    }

    

    h1{

    	font-family: 'Aboreto', cursive; 

    	font-size: 24px; 

    	text-transform: uppercase; 

    	text-align: center;

    	background-color: rgba(255,255,255,0.5);

    	border-top: 2px white solid;

    border-bottom: 2px white solid;

    }

    

    h2{

    	text-transform: uppercase;

    border-top: 2px white solid;

    border-bottom: 2px white solid;

    color: white;

    }

    

    p{

    	text-align: right;

    background-color: rgba(255,255,255,0.5);

    }


Exercices

Exercice Simple 
  1. Changer la couleur de fond et la couleur des bordures des différents éléments.



Exercice Intermédiaire 

  1. Ajouter une ombre au paragraphe.



Exercice Avancée 

  1. Ajouter une image a la fiche.



Dans le prochain tutoriel nous verrons comment mettre une ombre à notre paragraphe, insérer une image qui fera office d'avatar et nous modifierons le css pour inclure des variables de couleurs qui sera plus simple pour modifier nos couleurs selon nos envies.

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.

↑
↓