Cadenas en pure CSS

07. mars 2017 CSS, SASS 0
Cadenas en pure CSS

Voici un petit script CSS qui permet d’afficher un cadenas sans image, seulement en CSS.

Le HTML

<p class="padlock">Secured credit card payment</p>
Texte : Secured credit card payment

Le CSS

.padlock {
  position: relative;
  padding-left: 20px;
  font-family: Arial;
}
.padlock:before, .padlock:after {
  content: "";
  position: absolute;
  display: block;
  background-position: 0 -180px;
}
.padlock:before {
  top: -2px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 12px 12px 0 0;
  border: 2px solid #999;
}
.padlock:after {
  top: 0;
  left: 0;
  width: 13px;
  height: 9px;
  border-radius: 2px;
  margin-top: 5px;
  background-color: #999;
}
/* source : priceminister */
CSS Cadenas

Le Résultat

Résultat HTML

Sur CodePen avec SCSS

See the Pen Padlock in pure CSS by lriaudel (@lriaudel) on CodePen.

Edit du 07/06/2017

Pourquoi faire compliqué quand on peut faire simple !!!

Il existe tout simplement un caractère unicode pour le cadenas : 🔒

&#128274; 
Code HTML du cadenas - Caractère spéciale

Et d’autre symboles unicode à cette adresse : http://outils-javascript.aliasdmc.fr/encodage-icone-symbole/encode-caractere-1F512-html-css-js-autre.html

Ou encore là : https://www.w3schools.com/charsets/ref_utf_symbols.asp


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *