Home > Développement > CSS > TIPS

TIPS

Bootstrap

Colonnes de hauteur égale

row {
  display: table;
} 
.col-sm-3 {
  float: none;
  display: table-cell;
  vertical-align: top;
}

3 EASIEST WAYS TO MAKE EQUAL HEIGHT BLOCKS USING CSS

Nav (onglet full width)

<nav class="nav-justified"></nav>

Spinner (loader)

<span class="glyphicon glyphicon-repeat fast-right-spinner"> </span>
<span class="glyphicon glyphicon-repeat normal-right-spinner"> </span>
<span class="glyphicon glyphicon-repeat slow-right-spinner"> </span>

<span class="glyphicon glyphicon-repeat fast-left-spinner"> </span>
<span class="glyphicon glyphicon-repeat normal-left-spinner"> </span>
<span class="glyphicon glyphicon-repeat slow-left-spinner"> </span>
.glyphicon.fast-right-spinner {
  -webkit-animation: glyphicon-spin-r 1s infinite linear;
  animation: glyphicon-spin-r 1s infinite linear;
}

.glyphicon.normal-right-spinner {
  -webkit-animation: glyphicon-spin-r 2s infinite linear;
  animation: glyphicon-spin-r 2s infinite linear;
}

.glyphicon.slow-right-spinner {
  -webkit-animation: glyphicon-spin-r 3s infinite linear;
  animation: glyphicon-spin-r 3s infinite linear;
}

.glyphicon.fast-left-spinner {
  -webkit-animation: glyphicon-spin-l 1s infinite linear;
  animation: glyphicon-spin-l 1s infinite linear;
}

.glyphicon.normal-left-spinner {
  -webkit-animation: glyphicon-spin-l 2s infinite linear;
  animation: glyphicon-spin-l 2s infinite linear;
}

.glyphicon.slow-left-spinner {
  -webkit-animation: glyphicon-spin-l 3s infinite linear;
  animation: glyphicon-spin-l 3s infinite linear;
}

@-webkit-keyframes glyphicon-spin-r {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes glyphicon-spin-r {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes glyphicon-spin-l {
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes glyphicon-spin-l {
  0% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

Eléments

Bounce

/* Diagonal */
.arrow { animation: bounce 3s ease infinite; float: right; position: relative; }
@keyframes bounce {
  from {top: 0; left: 10px;}
  50%  {top: -25px; left: -15px;}
  to   {top: 0vh; left: 10px;}
}

/* Vertical */
.arrow { animation: bounce 3s ease infinite; float: right; position: relative; }
@keyframes bounce {
  from {top: 0;
  50%  {top: -2vh;
  to   {top: 0vh;
}

Cartouche

div { 
  text-align :center ; 
}
p { 
  display: inline-block; 
}

Effet texte en points

Code Pen

Footer

html, body {
  height: 100%;
}

footer {
  bottom: 0;
  left: 50%;
  position: absolute;
}

Menu

Creative CSS3 Animation Menus

Menu horizontal

Supprimer margin, padding et les puces :

ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Changer la couleur les liens et supprimer le soulignement :

ul li a {
  color: #000;
  text-decoration: none;
} 

Utiliser des pseudos-classes (dans cet ordre) :

ul li a:link {}
ul li a:visited {}
ul li a:hover {}
ul li a:focus {}
ul li a:active {}

Rendre la zone cliquable rectangulaire (button) :

ul li a {
  line-height: 2rem;
  display: block;
}

Placer les éléments horizontalement :

ul li {
  float: left;
  display: inline-block;
}

Sous-menu

Gérer l’apparition et la disparition :

li > ul {
    display: none;
}
li:hover > ul {
    display: block;
}

Stabiliser la position :

li {
  position: relative;
}
li > ul {
  position: absolute;
}

Formulaires

Input type file

/* Remplacer le bouton input type=file par une image */
input {
  display: block;
  text-indent: -9999em;
  background: url(file.png) no-repeat;
  border: 0;
  cursor: pointer;
}

Placeholder

input::-webkit-input-placeholder { color: red; }
input:-moz-placeholder { color: red; /* FF 4-18 */ }
input::-moz-placeholder { color: red; /* FF 19+ */ }
input:-ms-input-placeholder { color: red; /* IE 10+ */ }

Textarea

textarea { resize: none; } /* No resizing */

Images

Effet au survol sur image

img {
  position: relative;
  float: left;
  margin-right: 1%;
  margin-bottom: 5%;
  cursor: pointer;
  -webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  -moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}

/* Fond de couleur */
img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: none;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

img:hover:before {
  background: rgba(255,240,42, 0.8);
}

Effet scotch

Code Pen

Filtres

Lien

Interdire le téléchargement des images

Empêche l’enregistrement au clic droit :

img { pointer-events: none; }

SVG

Displaying SVG

Titre + Picto

Pour ajouter une image dans un titre et éviter que l’image apparaisse dans le référencement, utiliser les pseudos classes en CSS et importer Font Awesome :

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
h1::before {
  content: "f091";
  font-family: "FontAwesome";
  color: #;
}

Ou importer une image avec : content: url();
La taille n’est pas modifiable sinon il faut créer un élément HTML et y mettre un background en CSS.

Init

Body

body {
  font: 16px sans-serif;
  box-sizing: border-box; /* inclut le padding dans le contenu */
}

Animated - Menu Underline

Sélecteur

.classe:not(:last-of-type) {}  /* tout sauf le dernier */
:not() {}  /* n'importe quel sélecteur */
/* Mozilla */
@-moz-document url-prefix() { }

/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

How to write a CSS hack for IE 11

Position

Centrer + Responsive

div {
  max-width : Xpx ;
  width : 100% ;
  text-align : center ;
  margin : auto;
}

Centrer verticalement

.parent {
  position: relative;
}

.enfant {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%) translateX(-50%);
}

Espacement

div { display: inline-block; } /* espace de 4px entre les divs */
div .enfant { font-size: 0; } /* supprime espace */

div { display: block; } /* pas d'espace */

.parent { display : table; }
.parent .row { display: table-row; }
.parent .row .enfant { display: table-cell; }

Float

/* OU display: block; si hover sur enfant */
.parent { overflow: hidden; }   

/* garde l'enfant float dans le contenu du parent, évite l'enfant de sortir du flux */
.parent .enfant { float : left; } 

Thumbnail Grid

Thumbnail Grid with Expanding Preview

Tableaux

Scroll dans le contenu avec un entête fixe

Codeply