"*+.iTDoctor4u.+*": CSS3 Classes

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qA5HPcrJx5mp8pwcJ6w6Mn2aQWVqZaLWUxDxIO4LXmwbMMERwwkdYL_hE-mHmmTIhje2rDq84BLsIEcNIqSTXU0AOcbv3-XBL_YVy-9FFvIOmDV9TpituiSlxK7oKEN-WWTY6rI6zoI/s1600/CSS3+Pop+UP+Box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5qA5HPcrJx5mp8pwcJ6w6Mn2aQWVqZaLWUxDxIO4LXmwbMMERwwkdYL_hE-mHmmTIhje2rDq84BLsIEcNIqSTXU0AOcbv3-XBL_YVy-9FFvIOmDV9TpituiSlxK7oKEN-WWTY6rI6zoI/s1600/CSS3+Pop+UP+Box.png" width="640" /></a></div>
 
<h3>
How To Use in Blogger Or Website</h3>
 
<ul>
<li>First of all Log in To www.blogger.com</li>
<li>Click Template>>Edit HTML and Press <kbd>Ctrl+F</kbd></li>
<li>A box will be appear then find ]]></b:skin></li>
<li>Then given below code paste before/above on ]]></b:skin></li>
</ul>
 
<ul>
</ul>
<h4>
CSS Code</h4>
<blockquote class="tr_bq">
/*-----------------CSS-Pop-Up-Box----------------*/ 
/* Container */ 
.modal { 
 
    /* Overlay page content */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.5); 
    z-index: 10000; 
 
    /* Transition opacity on open */ 
    -webkit-transition: opacity 500ms ease-in; 
    -moz-transition: opacity 500ms ease-in; 
    transition: opacity 500ms ease-in; 
 
    /* Hide for now */ 
    opacity: 0; 
    pointer-events: none; 
} 
 
/* Show modal */ 
.modal:target { 
    opacity: 1; 
    pointer-events: auto; 
    /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */ 
} 
 
/* Content */ 
.modal > div { 
    width: 500px; 
    background: #fff; 
    position: relative; 
    margin: 10% auto; 
 
    /* Default minimise animation */ 
    -webkit-animation: minimise 500ms linear; 
    -moz-animation: minimise 500ms linear; 
 
    /* Prettify */ 
    padding: 30px; 
    border-radius: 7px; 
    box-shadow: 0 3px 20px rgba(0,0,0,0.9); 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #ccc); 
    background: -webkit-linear-gradient(#fff, #ccc); 
    background: -o-linear-gradient(#fff, #ccc); 
    text-shadow: 0 1px 0 #fff; 
} 
 
/* Override animation on modal open */ 
.modal:target > div { 
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce; 
} 
 
.modal h2 { 
    font-size: 36px; 
    padding: 0 0 20px; 
} 
 
@-webkit-keyframes bounce { 
  0% { 
    -webkit-transform: scale3d(0.1,0.1,1); 
    box-shadow: 0 3px 20px rgba(0,0,0,0.9); 
  } 
  55% { 
    -webkit-transform: scale3d(1.08,1.08,1); 
    box-shadow: 0 10px 20px rgba(0,0,0,0); 
  } 
  75% { 
    -webkit-transform: scale3d(0.95,0.95,1); 
    box-shadow: 0 0 20px rgba(0,0,0,0.9); 
  } 
  100% { 
    -webkit-transform: scale3d(1,1,1); 
    box-shadow: 0 3px 20px rgba(0,0,0,0.9); 
  } 
} 
 
@-webkit-keyframes minimise { 
  0% { 
    -webkit-transform: scale3d(1,1,1); 
  } 
  100% { 
    -webkit-transform: scale3d(0.1,0.1,1); 
  } 
} 
 
@-moz-keyframes bounce { 
  0% { 
    -moz-transform: scale3d(0.1,0.1,1); 
    box-shadow: 0 3px 20px rgba(0,0,0,0.9); 
  } 
  55% { 
    -moz-transform: scale3d(1.08,1.08,1); 
    box-shadow: 0 10px 20px rgba(0,0,0,0); 
  } 
  75% { 
    -moz-transform: scale3d(0.95,0.95,1); 
    box-shadow: 0 0 20px rgba(0,0,0,0.9); 
  } 
  100% { 
    -moz-transform: scale3d(1,1,1); 
    box-shadow: 0 3px 20px rgba(0,0,0,0.9); 
  } 
} 
 
@-moz-keyframes minimise { 
  0% { 
    -moz-transform: scale3d(1,1,1); 
  } 
  100% { 
    -moz-transform: scale3d(0.1,0.1,1); 
  } 
} 
 
/* Modal close link */ 
.modal a[href="#close"] { 
    position: absolute; 
    right: 0; 
    top: 0; 
    color: transparent; 
} 
 
/* Reset native styles */ 
.modal a[href="#close"]:focus { 
    outline: none; 
} 
 
/* Create close button */ 
.modal a[href="#close"]:after { 
    content: 'X'; 
    display: block; 
 
    /* Position */ 
    position: absolute; 
    right: -10px; 
    top: -10px; 
    width: 1.5em; 
    padding: 1px 1px 1px 2px; 
 
    /* Style */ 
    text-decoration: none; 
    text-shadow: none; 
    text-align: center; 
    font-weight: bold; 
    background: #000; 
    color: #fff; 
    border: 3px solid #fff; 
    border-radius: 20px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
    } 
 
    .modal a[href="#close"]:focus:after, 
    .modal a[href="#close"]:hover:after { 
    -webkit-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
} 
 
.modal a[href="#close"]:focus:after { 
    outline: 1px solid #000; 
} 
 
/* Open modal */ 
a.openModal { 
    margin: 1em auto; 
    display: block; 
    width: 200px; 
    background: #ccc; 
    text-align: center; 
    padding: 10px; 
    border-radius: 7px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #ddd); 
    background: -webkit-linear-gradient(#fff, #ddd); 
    background: -o-linear-gradient(#fff, #ddd); 
    text-shadow: 0 1px 0 #fff; 
    border: 1px solid rgba(0,0,0,0.1); 
    box-shadow: 0 1px 1px rgba(0,0,0,0.3); 
} 
 
a.openModal:hover, 
a.openModal:focus { 
    background: -moz-linear-gradient(#fff, #ccc); 
    background: -webkit-linear-gradient(#fff, #ccc); 
    background: -o-linear-gradient(#fff, #ccc); 
} 
/*-----------------CSS-Pop-Up-Box----------------*/</blockquote>
 
<h4>
HTML CODE</h4>
<blockquote class="tr_bq">
<a href="#example" class="openModal">Open Box</a> <aside id="example" class="modal">     <div>         <h2>BOX Text Below</h2>         <p>Your Text Here</p>         <a href="#close" title="Close">Close</a>     </div> </aside></blockquote>
<h5>
<a href="http://itdr4u-2.blogspot.com/2014/02/how-to-make-pure-css3-pop-up-text-box.html" target="_blank">Live Demo</a></h5>

CSS3 Classes How To Make Pure CSS3 Pop Up Text Box

How To Use in Blogger Or Website First of all Log in To www.blogger.com Click Template>>Edit HTML and Press Ctrl+F A box will...

How To Make Pure CSS3 Pop Up Text Box

jQuery Slide Down and Up Pop up Box

Popular Posts

Comments

All Posts