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. ...
