Download en gebruikersinstructies

Vanaf nu mag je met trots de Speakers Club Certified Badge gebruiken op jouw eigen promotie kanalen en middelen.

Speciaal voor jou hebben we deze handige pagina ingericht zodat je hier de juiste Badge(s) kan downloaden.

Bestandtypes en formaten

  • SVG

    SVG staat voor Scalable Vector Graphics. Het is een vectorbestandstype dat heel geschikt is voor het web.

  • PNG

    PNG staat voor Portable Network Graphic en is een rasterbestandstype voor afbeeldingen welke transparante en semi-transparante achtergrond ondersteunt.

  • JPG

    Jpg staat voor 'Joint Photographic Experts Group'. Dit formaat is uitermate geschikt voor fotografisch materiaal met veel kleuren. Ondersteunt geen transparante achtergronden.

  • EPS

    EPS is een vectorbestandstype dat vaak wordt gebruikt voor professionele en hoogwaardige afdrukken van afbeeldingen.

Legenda

Instructies

Voorkeursinstellingen
De voorkeursbadge is de badge met bestandsnaam ‘SC-CB-PS-FC-LightBG‘. Deze is bruikbaar op witte of hele lichte achtergronden. 

Alternatieve opties zijn: 

  • SC-CB-PS-FC-LightShade-LightBG
  • SC-CB-PS-FC-Dark-LightBG
  • SC-CB-PS-FC-DarkShade-LightBG
  • SC-CB-PS-FC-Contour-Black-LightBG

 

Hoe gebruik je de badge op donkere achtergronden?

Voor het gebruik op donkere achtergronden of voor het plaatsen over afbeeldingen moeten de varianten ‘SC-CB-PS-FC-Light-DarkBG‘ of ‘SC-CB-PS-FC-Contour-White-DarkBG’ gebruikt worden.

HTML

    
     <div id="keurmerktlap">
  <a href="https://www.speakersclub.nl/specialismes/talk-like-a-pro-gramme/" target="_blank"><img decoding="async" src="https://www.speakersclub.nl/wp-content/uploads/2022/07/CertifiedBadge-OpWit.png"></a>
</div>
    
   

CSS

    
     #keurmerktlap {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
text-align:center;
}
#keurmerktlap img {
width: 100%;
}
#keurmerktlap:before {
content: '';
position: absolute;
top: 0;
left: -100px;
width: 70px;
height: 90%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
@keyframes slide {
  0% {
    left: -100;
    top: 0;
  }
  50% {
    left: 120px;
    top: 0px;
  }
  100% {
    left: 290px;
    top: 0;
  }
}