POP up only css

POP UP only CSS

This is another attempt at CSS-tricks to try to control the event click with CSS, using, as in the example posted a few days ago, labels that are normally reserved for the creation of forms such as INPUT and LABEL. Here, it is create a pop-up , a window with some content, that opens when weclick on any button class and, in principle, could contain anything. In this example, I played a bit, deleted things, adding others, testing let it play out and the first thing I should clarify is that it does not work in versions prior to IE9 and if you do not know in that version. The second is that I have not found a way to control when you try to put two or more instead of a repeating except CSS and using IDs instead of classes which does not make much sense so that part, and if anyone will be pending have an idea, I'm all ears.

this is another with whatever content you want, including links or images



This would be the HTML:

<input id="popup" type="checkbox"  class="popUpControl">
class="elboton" <label for="popup">
  <span class="click"> show </ span>
  <span class="hiddenbox">
    .......
  </ Span>
</ Label>

The INPUT tag is of type checkbox, but always remain hidden, is not allowed to use CSS because we can only know if you are "marked" because when we click , change the property called checked.LABEL The label is associated with the first and is what we see. A pseudo-SPAN is SPAN button and other content that permutará, becoming visible or hiding, with some kind of animation. 's CSS:




<style>
  / * LABEL label * /
  . Elboton {
    background-color: # AAA;
    border-radius: 10px;
    box-shadow: 0 0 10px # 222 inset;
    color: # FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px # 000;
  }
  / * In a post Blogger. hidden internal line breaks to keep my sanity * /
  . Elboton br {display: none;}
  / * The container with what we want to show * /
  . Hiddenbox {
    background-color: # FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px # 000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -Moz-transform-origin: 0 0;
    -Webkit-transform-origin: 0 0;
    -O-transform-origin: 0 0;
    -Ms-transform-origin: 0 0;
    -Moz-transform: scale (0);
    -Webkit-transform: scale (0);
    -O-transform: scale (0);
    -Ms-transform: scale (0);
    -Moz-transition: all 1s;
    -Webkit-transition: all 1s;
    -O-transition: all 1s;
    -Ms-transition: all 1s;
  }
  / * Displays the contents hidden * /
  . PopUpControl: checked ~ label>. Hiddenbox {
    opacity: 1;
    -Moz-transform: scale (1);
    -Webkit-transform: scale (1);
    -O-transform: scale (1);
    -Ms-transform: scale (1);
  }
  / * The CHECKBOX we keep hidden forever * /
  . PopUpControl {display: none;}
  / * Change the text of pseudo-button * /
  . PopUpControl: checked ~ label> span.click {display: none;}
  . PopUpControl: checked ~ label: before {content: "hide";}
</ Style>

Ah. I forgot. Nor I have idea how to make pop-up appears to animate when and only when hidden does.

Tooltips animation

Animated With Tooltip

This is a way to generate tooltips animated not only requires to be implemented anywhere. Obviously, as many of these things, the animation will not work in all browsers but the tooltip will be visible without problems. The HTML is simple, only an ordered list inside a DIV:

<div id="masterpanel">
  <ul> id="mainpanel">
    <li> <a href="#" class="picasa"> <small> open Picasa </ small> </ a> </ li>
    <li> <a href="#" class="stumble"> <small> send Stumble </ small> </ a> </ li>
    <li> <a href="#" class="twitter"> <small> share Twitterr </ small> </ a> </ li>
    <li> <a href="#" class="youtube"> <small> YouTube channel </ small> </ a> </ li>
    <li> <a href="#" class="facebook"> <small> share on Facebook </ small> </ a> </ li>
  </ Ul>
</ Div>

Each LI tag contains a link with a different class and the content is text which we will see in the tooltip . Obviously, the key is the CSS:

<style>
# Masterpanel {/ * this is the main container * /}
# Masterpanel ul {/ * the list * /
  list-style: none;
  padding: 0;
  margin: 0;
}
# Masterpanel ul li {/ * each item in the list * /
  padding: 0;
  margin: 0;
  position: relative;
}

/ * This is the link * /
# Masterpanel ul li a {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
  text-decoration: none;
  margin: 0 5px; / * the separation between them * /
  float: left; / * next to each other * /
  position: relative;
  padding: 0 20px;
  / * The size of the images * /
  height: 60px;
  width: 60px;
}

/ * Images are the funds of those links * /
a.tpicasa {background-image: url (image1);}
a.tstumble {background-image: url (image2);}
a.ttwitter {background-image: url (image3);}
a.tyoutube {background-image: url (image4);}
a.tfacebook {background-image: url (image5);}

/ * Tooltip text will be hidden * /
# Masterpanel to small {
  background-color: Brown;
  border-radius: 10px;
  color: # FFF;
  display: none;
  font-size: 11px;
  line-height: 1;
  padding: 5px;
  text-align: center;
  width: 90px; / * the actual width of the link * /
}

/ * Hover effect * visible to tooltip /
# Masterpanel a: hover small { 
  display: block; 
  left: 0; 
  margin-top:-35px; 
  position: absolute; 
  top: 0;
  z-index: 9999;
  / * Animation for Firefox and Chrome / Safari * /
  -Moz-animation: mymove .25 s linear;
  -Webkit-animation: mymove .25 s linear; 
}

/ * Animation rules for each of the browsers * /
@-Moz-keyframes mymove {
  0% {-moz-transform: scale (0.0); opacity: 0;}
  50% {-moz-transform: scale (1.2,1.2); opacity: 0.3;}
  75% {-moz-transform: scale (0.9,0.9); opacity: 0.7;}
  100% {-moz-transform: scale (1.1); opacity: 1;}
}
@-Webkit-keyframes mymove {
  0% {-webkit-transform: scale (0.0); opacity: 0;}
  50% {-webkit-transform: scale (1.2,1.2); opacity: 0.3;}
  75% {-webkit-transform: scale (0.9,0.9); opacity: 0.7;}
  100% {-webkit-transform: scale (1.1); opacity: 1;}
}
</ Style>

Blog Templates

BLOG TEMPLATES :

Template Details :

Name : X10 Masonry

Description : X10 Masonry Red is a free blogger template with 2 columns, left sidebar, gallery-styled, perfect for photologs, exclusive design for Blogger, posts thumbnails and threaded comments ready. Excellent layout for blogs about culture, girls, music, people or photography.
                                                         Demo    
Download



Template Details :

Name : Xquisite v.23

Description : Xquisite v.23 is a nice blogger template mainly for gallery and magazines . It has a new look and a new design with footer widget Thanks to http://urang-kurai.blogspot.com
Xquiste v.23 preswnts a new look and nice css hover effects to gallery 
                                                        Demo    Download
        

Powered by Blogger.

Copyright © / webeXquisite : Site Management

Template by : webeXquisite / powered by :blogger