cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
  <head>
    <meta charset="utf-8"> 
  
 </head>
<body>

<!--MAPSPRITE-ICONE VIA https://simplesharingbuttons.com/ zip sur blog DjF-->
<!-- 
Pas d'attributs de présentation sur les icônes des réseaux sociaux car remplis de blanc par défaut. Si le CSS ne
se charge pas, l'image blanche sur fond blanc ne se verra pas.
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">

    <symbol id="icon-facebook" viewBox="0 0 512 512">
        <title>Facebook</title>
        <path d="M286.968 456V273.538h61.244l9.17-71.103H286.97V157.04c0-20.588 5.72-34.62 35.234-34.62l37.656-.01V58.807C353.35 57.934 331.003 56 304.992 56c-54.288 0-91.45 33.146-91.45 93.998v52.437H152.14v71.103h61.4V456h73.428z"/>
    </symbol>
    <symbol id="icon-googleplus" viewBox="0 0 16 16">
        <title>Google+</title>
        <path d="M5.09 7.273v1.745h2.89c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.185 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zm10.91 0h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.456V8.727H16"/>
    </symbol>    
     <symbol id="icon-twitter" viewBox="0 0 512 512">
        <title>Twitter</title>
        <path d="M456 131.94c-14.717 6.532-30.527 10.94-47.128 12.925 16.936-10.156 29.95-26.243 36.08-45.397-15.855 9.405-33.423 16.226-52.12 19.908-14.96-15.952-36.296-25.914-59.893-25.914-45.326 0-82.073 36.747-82.073 82.067 0 6.43.728 12.688 2.13 18.703-68.208-3.432-128.67-36.095-169.148-85.753-7.066 12.12-11.112 26.213-11.112 41.262 0 28.472 14.483 53.586 36.505 68.303-13.446-.428-26.097-4.117-37.17-10.26-.004.336-.004.682-.004 1.028 0 39.76 28.29 72.925 65.826 80.477-6.887 1.865-14.14 2.875-21.615 2.875-5.294 0-10.43-.53-15.436-1.477 10.44 32.597 40.75 56.327 76.653 56.99-28.078 22.014-63.465 35.135-101.923 35.135-6.618 0-13.15-.39-19.574-1.157 36.326 23.294 79.46 36.882 125.803 36.882 150.943 0 233.49-125.048 233.49-233.49 0-3.567-.082-7.104-.233-10.626 16.02-11.573 29.944-26.02 40.94-42.48z"/>
    </symbol> 
     <symbol id="icon-linkedin" viewBox="0 0 512 512">
        <title>LinkedIn</title>
        <path d="M61.053 178.668h85.76V436.63h-85.76zm43.46-124.387C75.17 54.28 56 73.57 56 98.855c0 24.752 18.588 44.574 47.377 44.574h.555c29.902 0 48.515-19.822 48.515-44.574-.554-25.283-18.61-44.573-47.934-44.573zM357.28 172.603c-45.49 0-65.867 25.018-77.277 42.59v-36.524h-85.738c1.137 24.197 0 257.963 0 257.963H280V292.567c0-7.712.556-15.42 2.83-20.93 6.187-15.4 20.304-31.354 43.992-31.354 31.012 0 43.436 23.665 43.436 58.328v138.02H456V288.7c0-79.237-42.305-116.098-98.72-116.098z"/>
    </symbol>     
    <symbol id="icon-mail" viewBox="0 0 512 512">
        <title>Email</title>
        <path d="M84.46 146.092c-2.98 2.82-4.84 6.823-4.84 11.267v184.264c0 8.548 6.746 15.478 15.42 15.478h322.735c8.516 0 15.42-6.917 15.42-15.478V157.36c0-4.455-1.832-8.47-4.813-11.293L256.407 295.61 84.46 146.092zm10.587-19.584c-17.01 0-30.8 13.752-30.8 30.655V341.82c0 16.93 13.677 30.655 30.8 30.655h322.72c17.01 0 30.8-13.752 30.8-30.655V157.163c0-16.93-13.677-30.655-30.8-30.655H95.047zm161.36 149.118l153.73-133.745h-307.46l153.73 133.746z" fill="#fff" stroke="#fff" fill-rule="evenodd" stroke-width="15.373"/>
    </symbol>

</svg>

<div class="post">
    <h1>Composant: réseaux sociaux</h1>
    <p>Tooltip https://github.com/catc Personaliser la police sur : [data-hint]:after {</p>
    <p>voir aussi : https://www.mattboldt.com/demos/social-buttons/</p>
  <p>A noter  : le premier bouton E-mail ne possede pas de Tooltip</p>
    <hr>

    <!-- Tooltip -->
    <div class="reseau-social">
      <span data-hint="Partager sur Facebook" class="hint-top">
          <a class="facebook" href="https://www.facebook.com/sharer/sharer.php
               ?u=<?php echo urlencode(getLink($id));?>" rel="nofollow" target="_blank">
              <svg aria-hidden="true" role="presentation">
                <use xlink:href="#icon-facebook">Icone Facebook</use>
              </svg>
              <span>Facebook</span>
          </a>
      </span>
    </div>

    <!-- Tooltip fadeIn-->
    <div class="reseau-social">
      <span data-hint="Partager sur Google" class="hint-top hint-fade">    
        <a class="google" href="https://plus.google.com/share
             ?url=<?php echo getLink($id);?>" rel="nofollow" target="_blank">
            <svg aria-hidden="true" role="presentation">
              <use xlink:href="#icon-googleplus">Icone Google</use>
            </svg>
            <span>Google</span>
        </a>
      </span>
    </div>

    <!-- Tooltip animé -->
    <div class="reseau-social"> 
      <span data-hint="Partager sur Twitter" class="hint-top hint-anim">           
        <a class="twitter" href="<?php echo getLink($id); ?>" rel="nofollow" target="_blank">
            <svg aria-hidden="true" role="presentation">
              <use xlink:href="#icon-twitter">Icone Twitter</use>
            </svg>
            <span>Twitter</span>
        </a>
      </span>
    </div>    

    <!-- Tooltip avec delais-->
    <div class="reseau-social">
      <span data-hint="Partager sur Linkedin" class="hint-top hint-d-med">   
        <a class="linkedin" href="<?php echo getLink($id); ?>" rel="external" target="_blank">
            <svg aria-hidden="true" role="presentation">
              <use xlink:href="#icon-linkedin">Icone LinkedIn</use>
            </svg>
            <span>LinkedIn</span>
        </a>
      </span>
    </div>    

    <!-- Pas de Tooltip -->
    <div class="reseau-social">
      <span>    
        <a class="mail" href="mailto:?subject=Ici le sujet du mail&amp;body=Une page à voir absolument : <?php echo getLink($id); ?>" title="Partager avec un ami" rel="nofollow">
            <svg aria-hidden="true" role="presentation">
              <use xlink:href="#icon-mail">Icone Mail</use>
            </svg>
            <span>E-mail</span>
        </a>
      </span>
    </div>

    <!-- Tooltip animé avec delais moyen-->
    <div class="reseau-social">
      <span data-hint="Partager avec un ami" class="hint-top hint-anim-d-med">       
        <a class="mail" href="mailto:?subject=Ici le sujet du mail&amp;body=Une page à voir absolument : <?php echo getLink($id); ?>" title="Partager avec un ami" rel="nofollow">
          <svg aria-hidden="true" role="presentation">
            <use class="mail" xlink:href="#icon-mail">Icone Mail</use>
          </svg>
          <span>E-mail</span>
        </a>
      </span>
    </div>      

    <hr>
</div>
</body>
</html>  
            
          
!
            
              html{
    font-size: 62.5%;               /* 1rem = 10px */
}

p,a{
    font-size:1.4rem;               /* 14px */
}
.post
{
    color: #000;
}
    .post hr
    {
        width: 66%;
        height: 0.313em; /* 5px */
        border: none;
        background-color: currentColor;
        opacity: .2;
    }

/*! Simple Hint v2.1 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */
[data-hint]:after, [data-hint]:before {
  display: inline-block;
  pointer-events: none;
  position: absolute;
  visibility: hidden; }
[data-hint]:hover:after, [data-hint]:hover:before {
  visibility: visible; }
[data-hint]:before {
  content: "";
  border: 5px solid transparent;
  z-index: 9998; }
[data-hint]:after {

  /* DjF Personnalisation de la police */
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif; 

  content: attr(data-hint);
  text-align: center;
  padding: 3px 7px;
  border-radius: 2px;
  z-index: 9999;
  color: white;
  font-weight: 400;
  white-space: nowrap;
  font-size: 1.2rem;
  line-height: 2em;
  background: #292929; }

[class*="hint-bottom"]:before, [class*="hint-top"]:before {
  right: 50%;
  margin-right: -5px; }
[class*="hint-bottom"]:after, [class*="hint-top"]:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }

[class*="hint-bottom"]:before {
  border-bottom-color: #292929;
  top: 100%; }
[class*="hint-bottom"]:after {
  margin-top: 10px;
  top: 100%; }

[class*="hint-top"]:before {
  border-top-color: #292929;
  bottom: 100%; }
[class*="hint-top"]:after {
  bottom: 100%;
  margin-bottom: 10px; }

[class*="hint-left"]:before, [class*="hint-right"]:before {
  top: 50%;
  margin-top: -5px; }
[class*="hint-left"]:after, [class*="hint-right"]:after {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

[class*="hint-left"]:before {
  border-left-color: #292929;
  left: 0;
  margin-left: -10px; }
[class*="hint-left"]:after {
  right: 100%;
  margin-right: 10px; }

[class*="hint-right"]:before {
  border-right-color: #292929;
  right: 0;
  margin-right: -10px; }
[class*="hint-right"]:after {
  left: 100%;
  margin-left: 10px; }

.hint-persist:before, .hint-persist:after {
  visibility: visible; }

@media only screen and (max-width: 768px) {
  [class*="hint-"][class*="-mobile"]:after, [class*="hint-"][class*="-mobile"]:before {
    display: none; } }

[class*="hint-"][class*="-s-small"]:after {
  width: 200px;
  white-space: initial; }

[class*="hint-"][class*="-s-med"]:after {
  width: 300px;
  white-space: initial; }

[class*="hint-"][class*="-s-big"]:after {
  width: 450px;
  white-space: initial; }

.hint-d-short:hover:after, .hint-d-short:hover:before {
  -webkit-transition: visibility 0s 0.4s ease;
  transition: visibility 0s 0.4s ease; }

.hint-d-med:hover:after, .hint-d-med:hover:before {
  -webkit-transition: visibility 0s 1s ease;
  transition: visibility 0s 1s ease; }

.hint-d-long:hover:after, .hint-d-long:hover:before {
  -webkit-transition: visibility 0s 1.5s ease;
  transition: visibility 0s 1.5s ease; }

[class*="hint-fade"]:before, [class*="hint-fade"]:after {
  -webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  opacity: 0; }
[class*="hint-fade"]:hover:before, [class*="hint-fade"]:hover:after {
  opacity: 1; }
[class*="hint-fade"][class*="-d-short"]:hover:before, [class*="hint-fade"][class*="-d-short"]:hover:after {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s; }
[class*="hint-fade"][class*="-d-med"]:hover:before, [class*="hint-fade"][class*="-d-med"]:hover:after {
  -webkit-transition-delay: 1s;
  transition-delay: 1s; }
[class*="hint-fade"][class*="-d-long"]:hover:before, [class*="hint-fade"][class*="-d-long"]:hover:after {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s; }

[class*="hint-anim"][class*="hint-top"]:after, [class*="hint-anim"][class*="hint-top"]:before {
  bottom: 125%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out, bottom 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, bottom 0.3s ease-out; }
[class*="hint-anim"][class*="hint-top"]:hover:after, [class*="hint-anim"][class*="hint-top"]:hover:before {
  opacity: 1;
  bottom: 100%; }
[class*="hint-anim"][class*="hint-bottom"]:after, [class*="hint-anim"][class*="hint-bottom"]:before {
  top: 125%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease; }
[class*="hint-anim"][class*="hint-bottom"]:hover:after, [class*="hint-anim"][class*="hint-bottom"]:hover:before {
  top: 100%;
  opacity: 1; }
[class*="hint-anim"][class*="hint-right"]:after, [class*="hint-anim"][class*="hint-right"]:before {
  margin-right: -25px;
  margin-left: 25px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease, margin 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease, margin 0.3s ease-out; }
[class*="hint-anim"][class*="hint-right"]:hover:after, [class*="hint-anim"][class*="hint-right"]:hover:before {
  margin-right: -10px;
  margin-left: 10px;
  opacity: 1; }
[class*="hint-anim"][class*="hint-left"]:after, [class*="hint-anim"][class*="hint-left"]:before {
  margin-right: 25px;
  margin-left: -25px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease, margin 0.3s ease-out;
  transition: opacity 0.3s ease-out, visibility 0.3s ease, margin 0.3s ease-out; }
[class*="hint-anim"][class*="hint-left"]:hover:after, [class*="hint-anim"][class*="hint-left"]:hover:before {
  margin-right: 10px;
  margin-left: -10px;
  opacity: 1; }
[class*="hint-anim"][class*="-d-short"]:hover:before, [class*="hint-anim"][class*="-d-short"]:hover:after {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s; }
[class*="hint-anim"][class*="-d-med"]:hover:before, [class*="hint-anim"][class*="-d-med"]:hover:after {
  -webkit-transition-delay: 1s;
  transition-delay: 1s; }
[class*="hint-anim"][class*="-d-long"]:hover:before, [class*="hint-anim"][class*="-d-long"]:hover:after {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s; }

[class*="hint-"][class*="-t-info"][class*="hint-bottom"]:before {
  border-bottom-color: #44C2F9; }
[class*="hint-"][class*="-t-info"][class*="hint-top"]:before {
  border-top-color: #44C2F9; }
[class*="hint-"][class*="-t-info"][class*="hint-right"]:before {
  border-right-color: #44C2F9; }
[class*="hint-"][class*="-t-info"][class*="hint-left"]:before {
  border-left-color: #44C2F9; }
[class*="hint-"][class*="-t-info"]:after {
  background: #44C2F9; }

[class*="hint-"][class*="-t-success"][class*="hint-bottom"]:before {
  border-bottom-color: #83C510; }
[class*="hint-"][class*="-t-success"][class*="hint-top"]:before {
  border-top-color: #83C510; }
[class*="hint-"][class*="-t-success"][class*="hint-right"]:before {
  border-right-color: #83C510; }
[class*="hint-"][class*="-t-success"][class*="hint-left"]:before {
  border-left-color: #83C510; }
[class*="hint-"][class*="-t-success"]:after {
  background: #83C510; }

[class*="hint-"][class*="-t-error"][class*="hint-bottom"]:before {
  border-bottom-color: #FF4C4C; }
[class*="hint-"][class*="-t-error"][class*="hint-top"]:before {
  border-top-color: #FF4C4C; }
[class*="hint-"][class*="-t-error"][class*="hint-right"]:before {
  border-right-color: #FF4C4C; }
[class*="hint-"][class*="-t-error"][class*="hint-left"]:before {
  border-left-color: #FF4C4C; }
[class*="hint-"][class*="-t-error"]:after {
  background: #FF4C4C; }

[class*="hint-"][class*="-t-notice"][class*="hint-bottom"]:before {
  border-bottom-color: #FFAE00; }
[class*="hint-"][class*="-t-notice"][class*="hint-top"]:before {
  border-top-color: #FFAE00; }
[class*="hint-"][class*="-t-notice"][class*="hint-right"]:before {
  border-right-color: #FFAE00; }
[class*="hint-"][class*="-t-notice"][class*="hint-left"]:before {
  border-left-color: #FFAE00; }
[class*="hint-"][class*="-t-notice"]:after {
  background: #FFAE00; }


/*------------------------------------*\
/* COMPOSANT RESEAU SOCIAL              >
/*------------------------------------*/

.reseau-social{                   /* Contener du composant */
    position: relative;           /* Pour le Tooltip */
    display: inline-block;        /* Disposer les un à coté des autres */
    margin: 0.3125em;             /* 5px Marge entre les boutons */
    padding-top: 0.3125em;        /* 5px Espace au dessus pour le tooltip*/
}

  .reseau-social:active{          /* click sur le contener */
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
  }  

  /* les classes enfants */
  .reseau-social a{                 /* Element référant pour la taille */
    display: inline-block;
    padding:0.5em;                  /* 8px Padding à l'intérieur du bouton */
    font-family:Helvetica Neue,Helvetica,Arial,sans-serif;     
    font-size: 1.6rem;              /* 16px ELEMENT REFERANT du composant */      
    text-decoration: none;
    color:#fff;

    border-width: 1px;              /* Habillage Facultatif */
    border-style: solid;
    border-radius: 3px;
  }        
  .reseau-social a:hover,           /* box shadow à l'intérieur et à l'extérieur*/
  .reseau-social a:focus{ 
      outline: none;
      box-shadow: inset 0 0 5em rgba(0,0,0,.3), 0 0.2em 0.6em 0 rgba(0,0,0,0.2);
  }  
  .reseau-social svg,
  .reseau-social span{
      vertical-align: middle;    
  }
  .reseau-social svg{
      width: 1.5em;            /* 24px taille donnée par font size de la classe parent : a*/
      height:1.5em;
      /* Couleur de remplissage du SVG (pas d'attribut de présentation dans les SVG */ 
      /* Le SVG hérite de la couleur définie dans son parent. .reseau-social, color:#fff; */
      /* Cette regle pourrait être installée dans le reset CSS pour s'appliquer sur tous les SVG : svg {fill:curentColor;} force les enfants à hériter de la coiuleur de leur parent */
      fill:currentColor;
  }

  /* Sous classes : couleurs spécifiques */
  .reseau-social .facebook{
      border-color: #3b5998;          /* si bordure  */
      background-color: #3b5998;      /* Reprend les couleurs de la marque  */
  }
  .reseau-social .google{
      border-color: #dd4b39;
      background-color: #dd4b39;
  }
  .reseau-social .twitter{
      border-color: #3172EA;
      background-color: #00aced;
  }
  .reseau-social .linkedin{
      border-color: #0574aa;
      background-color: #007bb6;
  }
  .reseau-social .mail{
      border-color:#000;
      background-color: #111;
      fill-rule:evenodd; /* les autres attributs sont embarqués dans le SVG : attribut de présentation */
  }

/* Classe spéciale pour le second bouton email */   
/* on precise un style qui s'appliquera par dessus les attributs de présentation */     
/* https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/ */
use.mail{
    fill:yellow;   
    stroke-width:1px;
    stroke:#000;
}
.reseau-social:hover use.mail{
    fill: magenta;      
}
/* On force la cascade, le CSS prend le dessus sur les attributs de présentation*/
svg path {
  all: inherit; /* ou fill:inherit, stroke-width:inherit, stroke:inherit; etc... */
}

/* Moins de 640px */
/* Moins d'espace entre les liens */
/* Logo social plus grand */
/* pas d'affichage de texte */
@media screen and (max-width: 639px) {
    .reseau-social {
        margin: 0.3125em;           /* 5 px */
    }
    .reseau-social a {
        padding: 0.8125em;          /* 13 px */
    }
    .reseau-social svg{
        margin:0 auto;              /* image centrée */
        width: 2.25em;              /* 36px */
        height: 2.25em;
    }
    .reseau-social a span{          /* texte du lien caché */
        display: none;
    }    
}
@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:640px) {}
@media screen and (min-width:641px) {}
            
          
!
999px
Loading ..................

Console