Az önce gezerken denk geldim

CSS 3 ile uzaklaşıp yakınlaşan diyalog kutusu. Kullanışlı bir şeye benziyor ancak İE 8 ve aşağısı desteklemiyor

HTML:

<form action="#" method="get">
<div class="container">
    <label for="activate">Click me to see!</label>
    <input type="checkbox" name="activate" id="activate" />
    <div class="type-1">Hey! I'm a dialogue box</div>
</div>
</form>

<form action="#" method="get">
<div class="container-2">
    <label for="activate-2">Another Style</label>
    <input type="checkbox" name="activate-2" id="activate-2" />
    <div class="type-2">Hey! I'm a dialogue box</div>
</div>
</form>

CSS:

/* type 1 */

.container .type-1 {
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    width: 300px;
    height: 25px;
    background: #343434;
    border: 7px solid #fff;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5), 0px 0px 20px rgba(0,0,0,0.2);
    border-radius: 10px;
    opacity: 0;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    font-family: Arial, sans-serif;
    position: absolute;
    left: -10px;
    top: -80px;
    /* Always on top */
    z-index: 9999999;
}
/* A little triangle, to give context */
.container .type-1:after {
    width: 0;
    height: 0;
    content: "";
    color: #fff;
    border: 14px solid;
    border-color: white transparent transparent transparent;
    position: absolute;
    /* You may need to change the positioning if you restyle the dialogue */
    bottom: -33px;
    left: 50%;
}
.container input {
    display: none;
}

.container input:checked + .type-1 {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
}

.container {
    width: 320px;
    margin: 0px auto;
    position: relative;
    top: 100px;
    text-decoration: none;
}

.container label {
    position: relative;
    border-bottom: 2px solid #000;
    margin: 0px auto;
    color: #000;
    cursor: pointer;
    font: 40px 'Istok Web', sans-serif;
    opacity: 0.7;
}

/* type 2 */

.type-2 {
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -webkit-perspective: 1000;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    
    width: 300px;
    height: 25px;
    background: #eee;
    border: 1px solid #b1b1b1;
    border-radius: 7px;
    opacity: 0;
    padding: 20px;
    color: #343434;
    position: absolute;
    left: 100%;
    top: 0px;
    z-index: 9999999;
    font: normal normal 22px Arial, sans-serif;
    box-shadow: inset 0px 40px 60px -30px rgba(255,255,255,1), 0px 0px 20px rgba(0,0,0,0.2);
}

.type-2:after, .type-2:before {
    width: 0;
    height: 0;
    content: "";
    border: 14px solid;
    border-color: transparent #eee transparent transparent;
    position: absolute;
    bottom: 20px;
    left: -27px;
}

.type-2:before {
    left: -28px;
    border-color: transparent #b1b1b1 transparent transparent;
}

.container-2 input {
    display: none;
}

.container-2 input:checked + .type-2 {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    font-variant: normal;
}

.container-2 {
    width: 280px;
    margin: 0px auto;
    position: relative;
    top: 150px;
}

.container-2 label {
    position: relative;
    border-bottom: 2px solid #000;
    margin: 0px auto;
    color: #000;
    cursor: pointer;
    font: 40px 'Istok Web', sans-serif;
    opacity: 0.7;
}

Kaynak: http://www.inserthtml.com/2012/05/zo...gue-pop-boxes/
Demo: http://inserthtml.com/demo/pop-in-dialogue/
İndir: http://www.inserthtml.com/downloads/...n-dialogue.zip