Pop up doesn't feel responsive enough - javascript

I've been following this guide to make a fold out pop-up and added the following script to make it close when clicking anywhere else.
jsfiddle example without javascript
jsfiddle example with javascript
$(document).ready( function(){
$('#linkie').click( function(event){
event.stopPropagation();
$('.box').toggle();
});
$(document).click( function(){
$('.box').hide();
});
});
But it doesn't feel as responsive as the original without the script when triggering the pop-up. Sometimes it takes two to three clicks to trigger, so I wonder if there's something that needs to be tweaked in the Css to make it a bit more responsive. Any help is much appreciated.
CSS:
label {
position: relative;
cursor: pointer;
}
.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(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
-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;
}
.box:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.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;
}
.button {
background: blue;
color: white;
padding: 5px;
border-radius: 5px;
}
/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: black; text-decoration: none; }

Why don;t you just use the first one and add some JavaScript to do the toggling. Something like
$(document).on("click", function(e) {
var elem = $(e.target);
if(elem.hasClass("link")) {
return;
}
$(".popUpControl:checked").next("label").click();
});
Example: http://jsfiddle.net/wP3vD/
Now the code above will not close the other element if there are multiple. That can be fixed, instead of exiting, you can excluded the label from the matched set.
$(document).on("mousedown", function (e) {
var elem = $(e.target);
labelsToClick = $(".popUpControl:checked").next("label").filter(function (i) {
return !$(this).find(elem).length;
}).click();
});
Example: http://jsfiddle.net/wP3vD/1/

Did you tried to set some timer for your toggle and hide method (i.e .toggle(300) OR .hide(300))

Related

Get correct position on header with show/hide function JS

im on the way to get scroll hide/show function work on header section, i made some codepen to show you how works on my page, but if you check it, when you scroll down header didn't get top of the page, when you scroll up it show correctly, is anyone able to guide me :)
var prev = 0;
var nav = document.getElementById("js-scroll-top");
window.addEventListener("scroll", function () {
var scrollTop = window.pageYOffset || 0;
if (scrollTop > prev) {
nav.classList.add("hidden");
} else {
nav.classList.remove("hidden");
}
prev = scrollTop;
});
body {
font-family: helvetica neue, helvetica, arial, sans-serif;
background: #FFFF00;
height: 8000px;
}
.nav {
background: #111;
text-align: center;
color: #fff;
height: 20px;
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: -moz-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.nav.hidden {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.header {
display: flex;
background-color: #fff;
justify-content: center;
color: #000;
width: 100%;
height: 20px;
padding-top: 20px;
padding-bottom: 20px;
position: sticky;
top: 3.75rem;
}
p {
margin: 0;
padding: 20px;
<div id="js-scroll-top" class="nav">Scroll to show/hide this bar!</div>
<div class="header">header</div>
On .nav.hidden instead of translating the element, use an absolute position:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
So as soon as the element above the header gets an absolute position, the header will slide up to take its place.
Actually, this may lead the header to go up immediately without following the animation time.
Better if you swap the translation for an height that goes to 0.
I'm not providing snippets cause am writing from my phone.
You need to change the top of the .header element as that defines the distance from the top that it "sticks" to.
I would move the nav controlling class to the html element, and use it to also modify the top of the header.
Something like
var prev = 0;
window.addEventListener("scroll", function () {
var scrollTop = window.pageYOffset || 0;
if (scrollTop > prev) {
document.documentElement.classList.add("hidden-nav");
} else {
document.documentElement.classList.remove("hidden-nav");
}
prev = scrollTop;
});
body {
font-family: helvetica neue, helvetica, arial, sans-serif;
background: #FFFF00;
height: 8000px;
}
.nav {
background: #111;
text-align: center;
color: #fff;
height: 20px;
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: -moz-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hidden-nav .nav {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.header {
display: flex;
background-color: #fff;
justify-content: center;
color: #000;
width: 100%;
height: 20px;
padding-top: 20px;
padding-bottom: 20px;
position: sticky;
top: 3.75rem;
transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hidden-nav .header{
top:0rem;
}
p {
margin: 0;
padding: 20px;
<div id="js-scroll-top" class="nav">Scroll to show/hide this bar!</div>
<div class="header">header</div>

Focus problem on input form only on device with touchscreen

I have a form that shows up when I click on a search button like so :
See above that the mouse doesn't find the input and isn't clickable. If I try to click on it, it closes the window (same as if I pressed Esc button).
We found that the issue occurs on Surface Pro and on mobile phone (I guess it's because of touchable screen).
If I take a computer without touchable screen, it's working fine - see screenshot :
Here is my HTML form :
<form method="get" action="//revendeur-sport.kettler-france.com/recherche" class="dropdown-menu" id="search_form" style="display: block;">
<input name="controller" value="search" type="hidden">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Chercher dans notre catalogue" class="ui-autocomplete-input" autocomplete="off" type="text">
<button type="submit">
<i class="icon icon-search2"></i>
</button>
</form>
And Here is my CSS :
élément {
display: block;
}
#header .search-widget.open .dropdown-menu {
z-index: 99;
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
#header .search-widget .dropdown-menu {
position: absolute;
top: 100%;
margin: 0;
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
.popup-over .dropdown-menu {
right: 0;
left: auto;
}
.search-widget .dropdown-menu {
background: none;
border: none;
min-width: inherit;
padding: 0;
display: block;
float: none;
}
.open > .dropdown-menu {
display: block;
}
.search-widget form {
-moz-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-webkit-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-o-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-ms-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
}
.search-widget form {
position: relative;
}
.dropdown-menu, .popup-content {
animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: animationmenus ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: none;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: animationmenus ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: animationmenus ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 8px 0;
margin: 0.125rem 0 0;
font-size: 14px;
color: #666666;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
font-family: "Poppins", sans-serif;
font-size: 14px;
line-height: 1.5;
color: #666666;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
You can find the website in question at : https://revendeur-sport.kettler-france.com/
EDIT : It works fine on Internet Explorer & Edge. But doesn't on Firefox (last update) & Chrome (last update)
Thanks for your help.

Toggle Element Colour Based on Background Colour in JS

I've written some JavaScript code that almost works the way I want it to, but I need some help figuring out how to make it work the way I need it to.
I want to change the colour of a fixed navigation element (hamburger) when it encounters a section with the class of white.Right now this is accomplished by adding a class of darker to that nav element.
What I can't figure out is how to have the darker class removed when I scroll past an element that no longer has the class of white. Any help is much appreciated!
Thanks in advance! :)
Code pen demo
The code is as follows: (Maybe not showing as expected here in SO, better in Codepen)
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('.white').offset().top;
if (y >= z) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
//Variables
$grey-darker: hsl(0, 0%, 21%);
$grey: hsl(0, 0%, 48%);
$white: hsl(0, 0%, 100%);
$bold: 900;
//Formatting
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: -1.5px;
}
h1 {
color: $white;
font-size: 7em;
font-weight: $bold;
}
//Navigation/
.navigation {
display:flex;
vertical-align:top;
width: 100%;
height: 76px;
position: fixed;
}
//Hamburger --> This should change from white & blue depending on background color
#hamburger {
width: 30px;
height: 20px;
margin-left: auto;
align-self: center;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
cursor: pointer;
z-index: 5;
}
#hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
}
#hamburger span.change.darker{
background: Blue;
}
#hamburger span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(2) {
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(3) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger.open span:nth-child(1) {
background:white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 5px;
}
#hamburger.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#hamburger.open span:nth-child(3) {
background:white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 5px;
}
//Main
.container-fullpage {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100vw;
}
.sectionOne {
background: blue;
}
.sectionTwo{
color: blue;
background: $white;
}
.sectionTwo h1 {
color: blue;
}
.sectionThree{
background: blue;
}
.sectionFour{
background: $white;
}
.sectionFour h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
<div class="hamburger" id="hamburger">
<span class="change"></span>
<span class="change"></span>
<span class="change"></span>
</div>
</nav>
</header>
<main>
<div class="container-fullpage sectionOne">
<h1 class="home">First Section</h1>
</div>
<div class="container-fullpage sectionTwo white">
<h1>Second Section</h1>
</div>
<div class="container-fullpage sectionThree">
<h1>Third Section</h1>
</div>
<div class="container-fullpage sectionFour white">
<h1>Fourth Section</h1>
</div>
</main>
I think this is the javascript code that will do what you want:
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var top1 = change.offset().top;
var bottom1 = change.offset().top + change.outerHeight(true);
var overlapsWhite = false;
$('.white').each(function() {
var top2 = $(this).offset().top;
var bottom2 = $(this).offset().top + $(this).outerHeight(true);
if (top1 >= top2 && bottom2 >= bottom1){
overlapsWhite = true;
return false;
}
});
if (overlapsWhite) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
Check on Code pen

Simulate a shine effect on a button that is executed on hover event, but with other event

this is my first question
I can't find an answer.
I have been looking on various topics, like this ones (for example):
How to force a hover state with jQuery?
How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
I want to simulate a shining effect on a button that triggers on hover (The effect is just CSS and i took it from this site: https://codemyui.com/pure-css-shining-button-hover-animation/), but with other event, like clicking some other button or whatever.
According to my previous topics research, is not possible to trigger a hover event, so the workaround is assign a class to that hover CSS style,
and thats what i tried to do, but i can't make it work.
I think the problem is because the CSS it has pseudo-elements like :after, :before and :hover and sometimes they are combined.
Here is the code:
CSS:
#import url(https://fonts.googleapis.com/css?family=Raleway:300);
.btnShine {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.btnShine {
background: #333;
color: #ccc;
width: 200px;
height: 60px;
border: 0;
font-size: 18px;
border-radius: 4px;
font-family: 'Raleway', sans-serif;
-webkit-transition: .6s;
transition: .6s;
overflow: hidden;
}
.btnShine:focus {
outline: 0;
}
.test1, .btnShine:before {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
width: 60px;
height: 100%;
left: 0;
top: 0;
opacity: .5;
-webkit-filter: blur(30px);
filter: blur(30px);
-webkit-transform: translateX(-100px) skewX(-15deg);
transform: translateX(-100px) skewX(-15deg);
}
.test2, .btnShine:after {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.2);
width: 30px;
height: 100%;
left: 30px;
top: 0;
opacity: 0;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform: translateX(-100px) skewX(-15deg);
transform: translateX(-100px) skewX(-15deg);
}
.test4, .btnShine:hover {
background: #338033;
cursor: pointer;
}
.test3, .btnShine:hover:before {
-webkit-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
-webkit-transition: .7s;
transition: .7s;
}
.test5, .btnShine:hover:after {
-webkit-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: 1;
-webkit-transition: .7s;
transition: .7s;
}
HTML:
<button id="btn">Simulate a hover on the Stylized button</button>
<!--this shine effect was taken from this url https://codemyui.com/pure-css-shining-button-hover-animation/-->
<button class="btnShine">hover</button>
JS / JQuery:
$("#btn").on("click", function(){
//$(".btnShine").trigger("mouseenter");
//$(".btnShine").trigger("hover");
//$(".btnShine").trigger("mouseover");
//$(".btnShine").mouseover();
$('.btnShine').addClass("test3");
$('.btnShine').addClass("test4");
$('.btnShine').addClass("test5");
/*
$('.btnShine').removeClass("test5");
$('.btnShine').removeClass("test4");
$('.btnShine').removeClass("test3");
*/
});
I made this JSFiddle, so you guys can understand what i'm trying to do.
https://jsfiddle.net/kaedfegn/2/
PS: I'm Chilean so my native language is Spanish.
You forgot to add the :before and :after to all your test classes.
So, this:
.test1, .btnShine:before
should be this:
.test1:before, .btnShine:before
See the updated fiddle
I would consider adding all your "test" classes into one class and writing the styles around that 1 class. I combined all of them and called it .shine in this fiddle.
so the selector would look something like this:
.btnShine.shine, .btnShine:hover {
background: #338033;
cursor: pointer;
}
.btnShine.shine:before, .btnShine:hover:before {
-webkit-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: 0.6;
-webkit-transition: .7s;
transition: .7s;
}
.btnShine.shine:after, .btnShine:hover:after {
-webkit-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: 1;
-webkit-transition: .7s;
transition: .7s;
}

Open envelope animation html5 or jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I was looking for the forum or some other place to ask, so forgive me for posting this here...
I have been looking for an animation such as opening an envelope, not just shrink the image pretending that it opens.. and need something like this:
http://www.youtube.com/watch?v=PYX31NUbu2M
but I don't want a flash animation...
Click to open:
Envelope opens, pulls the "invitation", unfolds the "invitation" and stays on screen
Click to continue
Click to go back
Click to closed the envelope
All I was able to find was flash animation, I need it to be html, css, java or jquery... also I need some sort of flexibility for the width and height since I want to be able to use responsive media...
If anyone knows of script that can do this please, share it, please point me in the right direction.
Thank you.
Check this out : http://codepen.io/search?q=Envelope&limit=all&depth=everything&show_forks=false
I found some codepen could match for your requirement :
http://codepen.io/peiche/pen/ifhwq
http://codepen.io/jotavejv/pen/LkJyA
A Google search revealed this:
Demo and source: http://cssdeck.com/labs/animated-envelope
HTML:
<div id="bg"></div>
<div class="contact">
<div class="envelope">
<div class="top">
<div class="outer"><div class="inner"></div></div>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="cover"></div>
<div class="paper">
<a class="call" href="tel:5555555555"><div class="i"></div>555 555 5555</a>
<a class="mail" href="mailto:you#domain.com"><div class="i">#</div>you#doma.in</a>
</div>
</div>
</div>
CSS:
#bg {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #bbbbbb 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(40%,#ffffff), color-stop(100%,#bbbbbb)); background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -o-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: -ms-radial-gradient(center, ellipse cover, #ffffff 40%,#bbbbbb 100%); background: radial-gradient(ellipse at center, #ffffff 40%,#bbbbbb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=1 );
}
.contact {
position: absolute;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
height: 250px;
width: 250px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
.contact .envelope {
position: absolute;
height: 93px;
width: 165px;
left: 50%;
margin-left: -83px;
top: 50%;
margin-top: -50px;
background: #F9F9F9;
transition: margin-top 300ms;
-ms-transition: margin-top 300ms;
-moz-transition: margin-top 300ms;
-o-transition: margin-top 300ms;
-webkit-transition: margin-top 300ms;
}
.contact:hover .envelope {
transition-delay: 150ms;
-ms-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-o-transition-delay: 150ms;
margin-top: -20px;
}
.contact .envelope .top {
position: absolute;
top: -3px;
left: 0px;
width: 100%;
height: 73px;
z-index: 30;
overflow: hidden;
transform-origin: top;
-ms-transform-origin: top;
-moz-transform-origin: top;
-o-transform-origin: top;
-webkit-transform-origin: top;
transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
-webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
}
.contact:hover .envelope .top {
transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
-webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
height: 10px;
top: -60px;
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.contact .envelope .outer {
position: absolute;
bottom: 0px;
left: 0px;
border-left: 83px solid transparent;
border-right: 82px solid transparent;
border-top: 70px solid #EEE;
}
.contact .envelope .outer .inner {
position: absolute;
left: -81px;
top: -73px;
border-left: 81px solid transparent;
border-right: 80px solid transparent;
border-top: 68px solid #333;
}
.contact .envelope .bottom {
position: absolute;
z-index: 20;
bottom: 0px;
left: 2px;
border-left: 81px solid transparent;
border-right: 80px solid transparent;
border-bottom: 45px solid #333;
}
.contact .envelope .left {
position: absolute;
z-index: 20; top: 0px;
left: 0px;
border-left: 81px solid #333;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
.contact .envelope .right {
position: absolute;
z-index: 20;
top: 0px;
right: 0px;
border-right: 80px solid #333;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
.contact .envelope .cover {
position: absolute;
z-index: 15;
bottom: 0px;
left: 0px;
height: 55%;
width: 100%;
background: #EEE;
}
.contact .envelope .paper {
position: absolute;
height: 83px;
padding-top: 10px;
width: 100%;
top: 0px;
left: 0px;
background: #F9F9F9;
z-index: 10;
transition: margin-top 300ms 0ms;
-ms-transition: margin-top 300ms 0ms;
-moz-transition: margin-top 300ms 0ms;
-o-transition: margin-top 300ms 0ms;
-webkit-transition: margin-top 300ms 0ms;
}
.contact:hover .envelope .paper {
margin-top: -60px;
transition: margin-top 300ms 150ms;
-ms-transition: margin-top 300ms 150ms;
-moz-transition: margin-top 300ms 150ms;
-o-transition: margin-top 300ms 150ms;
-webkit-transition: margin-top 300ms 150ms;
}
.contact .envelope .paper a {
position: relative;
display: block;
font-size: 14px;
margin: 5px;
margin-bottom: 0px;
text-align: center;
color: #333;
text-decoration: none;
}
.contact .envelope .paper a.call .i {
position: absolute;
top: 2px;
left: 20px;
display: inline-block;
width: 3px;
height: 5px;
border-width: 5px 0 5px 2px;
border-style: solid;
border-color: #555;
background: transparent;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
border-top-left-radius: 3px 5px;
border-bottom-left-radius: 3px 5px;
-moz-border-radius-topleft: 3px 5px;
-moz-border-radius-bottomleft: 3px 5px;
-webkit-border-top-left-radius: 3px 5px;
-webkit-border-bottom-left-radius: 3px 5px;
transition: border-color 300ms;
-ms-transition: border-color 300ms;
-moz-transition: border-color 300ms;
-o-transition: border-color 300ms;
-webkit-transition: border-color 300ms;
}
.contact .envelope .paper a {
color: #333;
transition: color 200ms;
-ms-transition: color 200ms;
-moz-transition: color 200ms;
-o-transition: color 200ms;
-webkit-transition: color 200ms;
}
.contact .envelope .paper a:hover {
color: #EEE;
}
.contact .envelope .paper a.call:hover .i {
border-color: #DDD;
}
.contact .envelope .paper a.mail .i {
position: absolute;
top: 0px;
left: 17px;
display: inline-block;
font-size: 13px;
font-weight: bold;
}

Categories