Tutoriel CSS utile, simple, efficace

Mode Normal
Mode Experimental

Dégradé de couleur

Pour réaliser ce magnifique dégradé vous aurez besoin d'utiliser background-image.

<div class="section-header">
    <h1>Tutoriel CSS <span>utile, simple, efficace</span></h1>
</div>
.section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  font-size: 2em;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(to top right, rgba(129,236,236,.8), rgba(0,206,201,1));
}
.section-header > h1 {
  margin: 0;
  padding: 0;
}
.section-header > h1 > span {
  color: #55efc4;
  cursor: pointer;
  position: relative;
}
.mon-div-trop-beau {
  background-image: linear-gradient(to top right, rgba(129,236,236,.8), rgba(0,206,201,1));
}

Aligner trois div horizontalement

Pour réaliser ces deux divs aligner verticalement vous aurez besoin d'utiliser les flexbox !
Il vous faudrat un div mère et trois div a l'interieur.

Cerise
Carotte
Orange
<div class="temp-flexbox">
  <div class="">
    <img src="./img/cerise.svg" alt="Cerise">
  </div>
  <div class="">
    <img src="./img/carotte.svg" alt="Carotte">
  </div>
  <div class="">
    <img src="./img/orange.svg" alt="Orange">
  </div>
</div>
.temp-flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.temp-flexbox > div {
  margin: 0 10px 0 0;
  padding: 5px;
  box-shadow: 0 0 7px 1px rgba(85, 239, 196, 0.7);
}
.temp-flexbox > div > img {
  width: 100px;
}
.div-mere {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Bien aligner un titre verticalement dans un div

Pour bien aligner un titre d'une ligne verticalement dans un div il vous faudrat user 4 secondes de votre temps.

Je suis un titre aligner verticalement dans un div

<div class="temp-lineheight">
  <h4>Je suis un titre aligner verticalement dans un div</h4>
</div>
.temp-lineheight  {
  margin: auto;
  width: 50%;
  box-shadow: 0 0 7px 1px rgba(85, 239, 196, 0.7);
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.le-fameux-div {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

Changer la couleur de selection du curseur

Il suffit de choisir un div ou simplement toutes les balises et le tour est joué !

Wooooow je suis beaucoup trop beau, trop beau, trop beau
En plus c'est parfait, j'adore le rose !

<div class="temp-selection">
  <h4>Wooooow je suis beaucoup trop beau, trop beau, trop beau<br>
  En plus c'est parfait, j'adore le rose !</h4>
</div>
.temp-selection {
  box-shadow: 0 0 7px 1px rgba(85, 239, 196, 0.7);
  padding: 10px 20px 10px 20px;
  margin: auto;
  width: 50%;
  text-align: center;
}
.temp-selection > h4::-moz-selection {
  background-color: #e84393;
  color: #ffffff;
}
.temp-selection > h4::selection
  background-color: #e84393;
  color: #ffffff;
}
h4::-moz-selection {
  background-color: #e84393;
  color: #ffffff;
}
h4::selection {
  background-color: #e84393;
  color: #ffffff;
}

Bien aligner du texte de plusieur ligne verticalement

Pour cela il vous faudrat utiliser la disposition flex.

Bonjour, je suis du texte qui est sur plusieur ligne, et grâce au flexbox je suis aligner automatiquement !

<div class="temp-vertical">
    <h4>Bonjour, je suis du texte qui est sur plusieur ligne,
    et grâce au flexbox je suis aligner automatiquement !</h4>
</div>
.temp-vertical {
  margin: auto;
  box-shadow: 0 0 7px 1px rgba(85, 239, 196, 0.7);
  padding: 10px 20px 10px 20px;
  width: 50%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.div-contient-texte {
  display: flex;
  justify-content: center;
  align-items: center;
}

Faire un menu en CSS

Pour cela il vous faudrat encore utiliser la disposition flex.

<div class="menu">
  <a href="#"><div>Menu</div></a>
  <a href="#"><div>Boutique</div></a>
  <a href="#"><div>Aide</div></a>
</div>
<div class="temp-menu">
  <a href="#"><div>Menu</div></a>
  <a href="#"><div>Boutique</div></a>
  <a href="#"><div>Aide</div></a>
</div>
.temp-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.temp-menu > a {
  text-align: center;
  width: 100%;
  border: solid 1px rgba(85, 239, 196, 0.7);
  text-decoration: none;
  color: #000000;
  padding: 10px;
}
.temp-menu > a:hover {
  box-shadow: 0 0 7px 1px rgba(85, 239, 196, 0.7);
}
.menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.menu > a {
  width: 100%;
  text-align: center;
}

Réaliser un formulaire simple

Vous aller voir comment réaliser un formulaire flat et simple d'utilisation !

Email:

Password:

<div class="temp-form">
  <div class="temp-inner">
    <p>Email:<br>
    <input type="text" name="email" autocomplete="off"></p>
    <p>Password:<br>
    <input type="password" name="password" autocomplete="off"></p>
    <p><input type="button" name="button" value="Envoyer >"></p>
  </div>
</div>
<div class="form">
  <div class="form-inner">
    <p>Email:<br>
    <input type="text" name="email" autocomplete="off"></p>
    <p>Password:<br>
    <input type="password" name="password" autocomplete="off"></p>
    <p><input type="button" name="button" value="Envoyer >"></p>
  </div>
</div>
.temp-form {
  margin: auto;
  box-shadow: 0 0 7px 1px rgba(129,236,236,.8);
  padding: 10px 20px 10px 20px;
  width: 50%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.temp-form > .temp-inner > p > input {
  border: solid 1px rgba(129,236,236,.8);
  transition: 200ms;
}
.temp-form > .temp-inner > p > input:focus{
  box-shadow: 0 0 7px 1px rgba(129,236,236,.4);
}
.temp-form > .temp-inner > p:last-child > input {
  border: solid 1px rgba(129,236,236,.8);
  background-color: #ffffff;
  float: right;
  padding: 2px 5px 2px 5px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: 200ms;
}
.temp-form > .temp-inner > p:last-child > input:hover {
  background-color: rgba(129,236,236,.8);
  color: #ffffff;
}
.temp-form > .temp-inner > p:last-child > input:active {
  padding: 2px 5px 2px 5px;
}
.form {
  margin: auto;
  padding: 10px 20px 10px 20px;
  width: 50%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form > .form-inner > p:last-child > input {
  float: right;
}

Bloquer la selection du texte

Comment ne pas pouvoir selectioner du texte en CSS.

Il est impossible de me selectionner, éhéh. Très perturbant je trouve...

<div class="temp-nonselect">
  <h4>Il est impossible de me selectionner, éhéh. Très perturbant je trouve...</h4>
</div>
<div class="div-beau">
  <h4>Il est impossible de me selectionner, éhéh. Très perturbant je trouve...</h4>
</div>
.temp-nonselect {
  box-shadow: 0 0 7px 1px rgba(129,236,236,.8);
  padding: 10px 20px 10px 20px;
  margin: auto;
  width: 50%;
  text-align: center;
}

.temp-nonselect > h4 {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
.div-beau {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

/* OU BIEN */

.div-beau > h4 {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}