Cadenas en pure CSS

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

Le HTML

[pastacode lang= »markup » manual= »%3Cp%20class%3D%22padlock%22%3ESecured%20credit%20card%20payment%3C%2Fp%3E » message= »Texte : Secured credit card payment » highlight= » » provider= »manual »/]

Le CSS

[pastacode lang= »css » manual= ».padlock%20%7B%0A%20%20position%3A%20relative%3B%0A%20%20padding-left%3A%2020px%3B%0A%20%20font-family%3A%20Arial%3B%0A%7D%0A.padlock%3Abefore%2C%20.padlock%3Aafter%20%7B%0A%20%20content%3A%20%22%22%3B%0A%20%20position%3A%20absolute%3B%0A%20%20display%3A%20block%3B%0A%20%20background-position%3A%200%20-180px%3B%0A%7D%0A.padlock%3Abefore%20%7B%0A%20%20top%3A%20-2px%3B%0A%20%20left%3A%202px%3B%0A%20%20width%3A%205px%3B%0A%20%20height%3A%205px%3B%0A%20%20border-radius%3A%2012px%2012px%200%200%3B%0A%20%20border%3A%202px%20solid%20%23999%3B%0A%7D%0A.padlock%3Aafter%20%7B%0A%20%20top%3A%200%3B%0A%20%20left%3A%200%3B%0A%20%20width%3A%2013px%3B%0A%20%20height%3A%209px%3B%0A%20%20border-radius%3A%202px%3B%0A%20%20margin-top%3A%205px%3B%0A%20%20background-color%3A%20%23999%3B%0A%7D%0A%2F*%20source%20%3A%20priceminister%20*%2F » message= »CSS Cadenas » highlight= » » provider= »manual »/]

Le Résultat

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 : 🔒

[pastacode lang= »markup » manual= »%26amp%3B%26%2335%3B128274%3B%20″ message= »Code HTML du cadenas – Caractère spéciale » highlight= » » provider= »manual »/]

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