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
