Étiquettes

Quelques exemples

Contrairement au bouton, l'étiquette n'est pas cliquable.
Le bouton dispose de ses propres effets qui peuvent être cumulés avec ceux de l'étiquette.

.text-shadow

Texte

Code CSS : 

.text-shadow{
  text-shadow: 2px 2px #888888;
}

.box-shadow

Texte

Code CSS : 

.box-shadow{
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
}

.w3-badge

Texte Texte

La class w3-spin doit être associée à w3-badge ou w3-tag : <span class="w3-badge w3-spin">Texte</span>

.w3-tag

Texte Texte

La class w3-spin doit être associée à w3-badge ou w3-tag : <span class="w3-tag w3-spin">Texte</span>

.w3-animate-...

Slides in an element from the left (-300px to 0)

w3-animate-left

Cette animation peut être appliquée à une étiquette que si elle est placée en haut de page, sinon elle ne sera pas visible au chargement de la page.

Animations w3.css

Animation CSS

Dégradés

Texte

Code CSS : 

.linear-gradient {
  background: linear-gradient(black, white); /* de haut en bas */
}

De gauche à droite : linear-gradient(to right, black, white);
En diagonale : to bottom right

Documentation MDN

Stick

But : afficher une "étiquette" qui affiche une ombre sous elle, telle qu'on a l'impression que les bords sont décollés.

Texte