logo
  Pop-up 1
  Een super mooie popup die je met css maakt en heel veel kan aanpassen op jou stijl. Klik maar eens op de link hieronder.

 
IN DE CSS
label {
position: relative;}
.box {
position: absolute;
left: 0;
top: 100%;
z-index: 100;
/* Prevent some white flashing in Safari 5.1 */
-webkit-backface-visibility: hidden;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#778A9E), to(#C0E0FF));
background-image: -webkit-linear-gradient(top, #778A9E, #C0E0FF);
background-image: -moz-linear-gradient(top, #778A9E, #C0E0FF);
background-image: -ms-linear-gradient(top, #778A9E, #C0E0FF);
background-image: -o-linear-gradient(top, #778A9E, #C0E0FF);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 260px;
padding: 20px;
margin: 24px 0;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;}
.popUpControl:checked ~ label >
.box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);}
.popUpControl {
display: none;}
/* For link example */
.link { color: blue; text-decoration: none; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: #000000; text-decoration: none; }

 
TUSSEN DE BODY TAGS
<input type="checkbox" id="linkie" class="popUpControl">
<label for="linkie" class="link">
<span>link example</span>
<span class="box">
<span class="title">Titel</span>
<span class="copy">Jou tekst</span>
</span>
</label>

 
eind