footer logo

You can have anything you want in life if you dress for it.

gradiant with html and css
gradiant with html and css

La n00b, l’effet dégrader en CSS

Dans cet article , je vais essayer de créer un fond avec une couleur dégradée et des cercles.
Je vais utiliser la fonction index-z, pour positionner mes cercles. Je vais juste taper mon code HTML sur le bloc-note (notepad) de windows . Vous, pouvez utiliser l’éditeur de texte que vous souhaitez.
(il vous faut quelques notion basique, du HTML & CSS)

Disclaimer : je ne suis juste une noob, donc ne vous attendez pas à quel que chose de parfait dans le code.
Vous pouvez utilisez; n’impote qu’elle éditeur de texte (VIM, Emacs, SublimeText,Nodepad++ etc.)


Créer un fichier en .html & .css

Dans mon fichier je commence à baliser en créant le <head></head> et <body></body>
là où, je vais taper mon code. Je fais de même pour mon fichier de style en .css cette fois.

mon répertoire ressemble à cela :

On crée l’arrière plan en dégradé

La première chose à faire dans mon fichier gradient_background.html, je vais utiliser la balise <link> qui vas simplement dire à mon fichier .html qu’il faut qu’il applique le formatage au document à partir d’une feuille de style externe.

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>

Dans mon fichier style.css :

 body {
	background-color: #4158D0;
	background-image: -webkit-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background-image: -moz-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background-image: -o-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
            	 
 }

Astuce de noob :

pour générer facilement un dégradé, je vous conseille d’utiliser le site : https://cssgradient.io/gradient-backgrounds/
Vous pouvez choisir, modifier, créer, directement plusieurs type de dégrader rapidement.
En cliquant, sur les différents bouton, vous pouvez créer très rapidement vos propre dégrader et surtout il vous généra automatiquement le code CSS.

Les cercles de l’Enfer

Je dois, vous avouer que pour ce faire j’ai eu du mal, à créer les cercles mais aussi à bien les positionner avec la fonction index-z.

Pourtant si vous utilisez le navigateur Firefox, Chrome il y a  un mode développeur qui permet de faciliter, le travaille. 

Pour ouvrir le mode éditeur sur Chrome/chromium/Firefox le raccourcis est : ctrl +maj + i

Je vous conseil, de plutôt les utiliser pour vous aider dans le positionnement de vos objets. Vous pouvez, le faire également sans les utiliser mais cela vas prendre beaucoup,beaucoup de temps ! Et, vous allez surtout vous décourager !

Le premier cercler

Dans le fichier .html :

<div id="circle_01" class="tp-shape"></div>

Dans le fichier .css :

#circle_01 {
    z-index: 6;
    background-color: rgba(255, 255, 255, 0.2);
    visibility: visible;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0);
    margin: 0px;
    border-radius: 50%;                  	 
    padding: 0px;         	
    color: rgb(255, 255, 255);
    width: 1244px;
    height: 1244px;
    min-height: 0px; 
    min-width: 0px;               	 
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;"
}

Le second cercle

Dans le fichier .html on ajoute :

<div id="circle_02" class="tp_shape"></div>

le .css :

#circle_02 {
    z-index: 7;
    background-color: rgba(255, 255, 255, 0.2);
    visibility: visible;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0);
    margin: 0px;
    border-radius: 50%;
    padding: 0px;
    color: rgb(255, 255, 255);
    width: 764px;
    height: 764px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    transform-origin: 50% 50% 0px;

}

Aïe les cercles ne se superpose pas !

comme vous le voyez les cercles ne se superpose pas, plusieurs solution s’offre à nous jouer avec les positions des deux cercles ou créer un “conteneur”  qui vas fixé la position des cercles. De plus, je n’ai plus envie que toute l’arrière plan de la page soit en dégradé.

Une section pour les guider tous

Pour ordonner le tout et placer mes cercle comme je l’entend je les est donc disposer dans différent <div>.

.html :

<header class="container_01">
   	 <div class="container_02">
   		 <div class="wrap">
        			 <div id="circle_01" class="tp_shape"></div>
   		 </div>
   		 <div class="wrap_02">
   			 <div id="circle_02" class="tp_shape"></div>
   		 </div>
   		 
   	 </div>

.css :

header {
   	 background-color: #4158D0;
   	 background-image: -webkit-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
   	 background-image: -moz-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
   	 background-image: -o-linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
   	 background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	 padding: 0px; margin-top: 0px; margin-bottom: 0px;             	 
 }

.container_01 {
    height: 100%;
    max-height: none;
    margin-top: 0px;
    margin-bottom: 0px;
}

.container_02 {
overflow: hidden;
height: 100%;
width: 100%;
z-index: 20;
visibility: inherit;
opacity: 1;

 }
.wrap {
    position: absolute;
    display: block;
    pointer-events: auto;
    	transform: matrix(1, 0, 0, 1, 0, 0);
    left: -329px;
    top: -552px;
    z-index: 6;     	 
    visibility: visible;
}

.wrap_02 {
position: absolute; display: block;
             	pointer-events: auto;
             	transform: matrix(1, 0, 0, 1, 0, 0);
             	left: -136px;
             	top: -291px;
              	z-index: 7;
              	visibility: visible

}

Le résultat :

Pas mal pour un début, on peut toujours améliorer le code. J’espère que vous avez apprécié cet article.