Experiments » css3

Archive for the 'css3' Category

CSS3 Popup Box with Shadow

Jul 07 2011 Published by cooljaz124 under css3

Demo Page : CSS3 Popup Box with Shadow

There are lots of css3 experiments on css3 popup box with that nice little arrow on top. But, what if we need a neat subtle shadow around it as well ?

Well its a bit tougher than we actually think of – as the triangular shape for making the arrow is made using a border-width trick. A box-shadow for that gives you shadow around the real square shape, and not just for the colored triangle.

It was Kiran Jonnalagadda who came up with an initial idea on how to do this trick, but was done without :after/:before and used some additional markup. Playing out with some dark css/design hacks, here is what I have acheived.

HTML

<div id="inner">
How is this CSS3 popup ? But, its complete of dark css magic :)
</div>

CSS

body{
background: #fff;
text-align: center;
font-size: 13px;
font-family: Arial;
line-height: 18px;
color: #474747;
}
#inner:after{
content: '';
background: #fff;
height: 15px; width: 15px;
position: absolute;
bottom: -8px; left: 45%;
z-index: 4;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
#inner {
background: #fff;
border-radius: 12px;
box-shadow: 0 0 6px rgba(0,0,0,0.6);
width: 200px;
position: relative;
margin: 20px; padding: 10px;
}

No responses yet

Overlay Effect Menu with CSS3

Dec 01 2010 Published by cooljaz124 under css3

Right after I saw Overlay effect menu with jQuery, I thought of giving a try to achieve almost the same effect using CSS3.

Demo Page : Overlay Effect Menu with CSS3

The demo is just a css3 experiment and i won’t recommend this for your projects unless you least care about old browsers.

The overlay part is quite simple, and I have used the CSS selector “+” for achieving the desired effect. The main ul is placed as a sibling of overlay div.

CSS applied goes like this.

ul#main-list:hover + .overlay{
background:rgba(0,0,0,0.5);
}

What the code does is, while hovering the main ul, the overlay div which is a sibling of the ul element, get the property – which is opacity 0.5 with background #000. As simple as that.

For the navigation transition parts, its all done using pure css3.

Here is the navigation HTML part.

<ul id="main-list"> 
<li> <a href="#">Logo Design</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
</ul>
</li>



<li> <a href="#">Web Design</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
</ul>
</li>



<li> <a href="#">PSD2XHTML</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
</ul>
</li>



<li> <a href="#">Wordpress</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
</ul>
</li>



<li> <a href="#">Ruby on Rails</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
</ul>
</li>
</ul>

CSS goes like this, includes the CSS3 transition and border radius effects.

ul#main-list{
left:40px;top:30px;
position:absolute;
z-index:0;
}

ul.sublist,.overlay,ul#main-list li,ul#main-list li a{
/* CSS3 Transition Magic */
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0);
z-index:-1;
}
.sub-div{
/* CSS3 Transition Magic */
-webkit-transition: all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out ;
}
.overlay{
/* CSS3 Transition Magic */
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out ;
}
ul#main-list:hover + .overlay{
background:rgba(0,0,0,0.5);
}
ul#main-list li{
margin:0 3px 0 0;
}
ul#main-list li a{
display:block;
width:90px;
height:20px;
padding:10px;
background:rgba(0,0,0,0.6);
text-transform:uppercase;
text-shadow:0 0 1px #000000;
font-weight:bold;
color:#AAAAAA;
}
ul.sub-list{
overflow:hidden;
position:absolute;
top:38px;left:0;
visibility:hidden;
/* display:none; */
height:180px;
background:rgba(255,255,255,1);
margin:0 0 0 0;
opacity:0;
}
ul#main-list ul.sub-list li a{
padding:0;
background:none;
color:#000;
text-shadow:1px 1px 1px #fff;
height:auto;width:auto;
}
ul#main-list li:hover ul.sub-list{
visibility:visible;
opacity:1;
padding:14px 10px 10px 10px;
}
ul#main-list li:hover a{
background:rgba(255,255,255,1);
color:#000;
text-shadow:1px 1px 1px #fff;
}
.sub-div{
overflow:hidden;
margin:-20px 0 0 0;
padding:20px;
width:502px;
}
ul#main-list li:hover .sub-div{
margin:5px 0 0 0;
}
ul.sub-list ul{
float:left;
margin-right:10px;
overflow:hidden;
width:110px;
}
ul#main-list ul.sub-list ul li{
display:block;
width:110px;
}
ul#main-list ul.sub-list ul li a{
color: #222222;
display: block;
font-size: 12px;
margin: 2px;
padding: 2px 2px 2px 4px;
text-decoration: none;
height:auto;
clear:both;
}
ul#main-list ul.sub-list ul li a:hover{
color: #fff;
background:#000;
text-shadow:none;
}
li.sub-head{
border-bottom: 1px solid #DDDDDD;
color: #AAAAAA;
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 6px;
}

Advantages of jQuery version

Internet Explorer Support
Many people are still using Firefox 3.6, but transition are available only from FF4.0

Advantages of CSS3 Version

No need to load extra js for achieving the effect.
Faster load time.

PS : Note that, the current load time will be higher, as I have some description and Twitter/Facebook iframes embedded in the demo page. Plus, my server seems a bit slow, and hence fetching the large image takes time. Provided both demos, jQuery and CSS3, in the same environment – there is no doubt CSS3 wins.

6 responses so far

Slick CSS3 Animated Image Caption

Nov 23 2010 Published by cooljaz124 under css3

This is an experiment to create an animated image caption. You might have seen enough of this effect all around the web, but my attempt is to achieve the same effect using CSS3 Transitions.

DEMO PAGE :Slick CSS3 Animated Image Caption

Here is Final Html Code.

<div class="container">
<img src="your image url" alt="image" />
<article class="text">
<h2><a href="#">Text to be transitioned.</a></h2>
</article>
</div>

And the CSS goes like this.

.container{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

PS: I dedicate this post to my friend, Nithin Bekal.

23 responses so far

Archive for the 'css3' Category

CSS3 Popup Box with Shadow

Overlay Effect Menu with CSS3

Slick CSS3 Animated Image Caption

Latest Posts

Feed on

Search

Categories

Monthly

Pages