-
-
Save thedaviddias/3ffb1715fc50572795e04554fdc2c31b to your computer and use it in GitHub Desktop.
Un affichage de numéro vert avec Microformat et mise en forme en CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Live demo : http://bl.ocks.org/1213727 --> | |
<html> | |
<head> | |
<title>Un affichage de numéro vert avec Microformat et mise en forme en CSS</title> | |
<link rel="stylesheet" media="all" href="numero_vert.css" type="text/css" /> | |
</head> | |
<body> | |
<span class="vcard numerovert"> | |
<span class="fn">Nom de la société</span> | |
<span class="tel"> | |
<span class="type"><abbr title="Numéro">Nº</abbr> Vert</span><span class="value">0 800 123 456</span> | |
</span> | |
</span> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 1em; | |
} | |
.numerovert { | |
font-family: sans-serif; | |
display: inline-block; | |
font-weight: bold; | |
} | |
.numerovert .fn { | |
display: none; | |
} | |
.numerovert .type { | |
color: white; | |
background: green; | |
padding: 0 .4em; | |
margin: 0; | |
border: 1px solid green; | |
-webkit-border-top-left-radius: .5em; | |
-webkit-border-bottom-left-radius: .5em; | |
-moz-border-radius-topleft: .5em; | |
-moz-border-radius-bottomleft: .5em; | |
border-top-left-radius: .5em; | |
border-bottom-left-radius: .5em; | |
} | |
.numerovert .value { | |
color: green; | |
padding: 0 .4em; | |
margin: 0; | |
border: 1px solid green; | |
-webkit-border-top-right-radius: .5em; | |
-webkit-border-bottom-right-radius: .5em; | |
-moz-border-radius-topright: .5em; | |
-moz-border-radius-bottomright: .5em; | |
border-top-right-radius: .5em; | |
border-bottom-right-radius: .5em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment