The Code Dreamer : Nitin Hayaran » CSS

Sexy Tooltip using CSS3 (no images)

nitin — Thu, 18 Mar 2010 08:45:59 +0000

CSS is Awesome, but “CSS3” is Awesomely Awesome.

With CSS3 we can make our pages even more beautiful without using additional images and extra markup.

In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.

Here, this example is semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

The inspiration for these tooltips is from the excellent attempt from “Nicolas Gallagher” in Pure CSS speech bubbles.

Lets first head on to the demo for its actual effect.

Tooltip Demo

Tooltip using CSS3

Interested ??? Lets head on to its code

HTML Markup

The HTML used here is very simple, just add class”tooltip” and in title put tooltip text.

<a class="tooltip" title="This is first tooltip" href="#">Link</a>

CSS Code

The CSS for this effect utilizes :before and :after to show tooltip. Moreover box-shadow, gradient, border-radius properties of CSS3 are used to add some glare. Here is the code.

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content: attr(title);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;
 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
 
	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);
 
	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */
}
 
/* creates triangle */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"\00a0";
	display:none;
	width:0;
	height:0;
	border-style:solid;
 
	top:-3px;
	left:0px;
	border-width:15px 7px 15px 7px;
	border-color:transparent transparent #075698;
}
 
a.tooltip:hover::before{
	display:block;
}
 
a.tooltip:hover{
	z-index:10;
	position:relative;
}
 
a.tooltip:hover::after{
	width:200px;
	display:block;
	margin:25px 0 0 10px;
}

Hope you'll like it.

Beautiful Nag Screen using JQuery & CSS3

nitin — Tue, 16 Mar 2010 16:51:18 +0000

Yesterday I wrote about a beautiful implementation for nag screen using mootools and CSS3. Thanks for all of my visitor for showing interest in it.

Considering requests from some of the users, I have also worked on its jQuery version. In jQuery version I have also tried to remove the bugs pointed out by one of the user.

The new jQuery version also have following improvements:

Close button can be used to close nag screen
Now the whole text doesn’t jumps when nag screen sticks to top

thanks “Seeker” for pointing out these bugs.

Head over to Demo and download the source for this page.

Demo of Nag Screen

Download Nag Screen Code

Be sure to check out the MooTools version.

Beautiful Nag Screen using Mootools & CSS3

nitin — Mon, 15 Mar 2010 12:30:04 +0000

Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we'll be creating beautiful and dynamic Nag Screen using Mootools.

The application of nag screen is widespread, it widely used by various websites to show important messages on the webpage. Some examples of such screens are :

Update notices in wordpress
Import address book message, which facebook shows
Registration messages shown on various websites

So, considering such a wide use of nag screens I’ve tried to make them a little beautiful and flashy.

Just have a look at the demo to see the effect :

Nag Screen Demo

For capturing the scroll events I have used “ScrollSpy” developed by “David Walsh”. Thanks David for make such useful and easy to use plugin.

You can always access source of the webpage for its better understanding. To grab the source please download it here:

Download Source

For further clarification and suggestions please drop comments.

Be sure to check out the jQuery version.

How to Create a Simple Slideshow using Mootools / JQuery

nitin — Sat, 13 Mar 2010 17:13:47 +0000

When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.

Demo using Mootools

Demo using JQuery

So, Interested ??? Lets head over to its implementation.

Action Plan

Step 1 : HTML Code Markup
Step 2 : Setup CSS for the Slideshow
Step 3 : Javascript for getting desired effect

Step 1 : HTML code

In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.

<div id="bigPic">
    <img alt="" src="imgs/1.jpg" />
    <img alt="" src="imgs/2.jpg" />
    <img alt="" src="imgs/3.jpg" />
    <img alt="" src="imgs/4.jpg" />
    <img alt="" src="imgs/5.jpg" />
    <img alt="" src="imgs/6.jpg" />
    <img alt="" src="imgs/7.jpg" />
    <img alt="" src="imgs/8.jpg" />
    <img alt="" src="imgs/9.jpg" />
    <img alt="" src="imgs/10.jpg" />
</div>
 
<ul id="thumbs">
    <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li>
    <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li>
    <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li>
    <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li>
    <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li>
    <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li>
    <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li>
    <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li>
    <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li>
    <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li>
</ul>

Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.

Step 2 : Necessary CSS Code

This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.

#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
 
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

Step 3 : Javascript Magic

The basic idea to get the effect is in following steps:

Increase the z-index of current shown image
Show next image to be shown just below current image.
Now using fade out current image. This way next image will become visible.

Equivalent JS code used is as follows.

Using Mootools

If you use JQuery directly head on to next section with JQuery code.

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index<$('bigPic').getElements('img').length){
        var indexImage = $$('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).setStyle('z-index',2);
                $clear(myTimer);
                var myFx = new Fx.Tween(currentImage, {
                    duration: 250,
                    onComplete:function(){
                        $(this).setStyles({'display':'none','z-index':1});
                        myTimer = showNext.delay(3000);
                    }.bind(currentImage)
                }).start('opacity',0);
            }
        }
        indexImage.setStyles({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $$('#thumbs li').removeClass('active');
        $$('#thumbs li')[index].addClass('active');
    }
}
 
function showNext(){
    var len = $('bigPic').getElements('img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
window.addEvent('domready',function(){
    myTimer = showNext.delay(3000);
    showNext(); //loads first image
    $('thumbs').getElements('li').addEvent('click',function(e){
        var count = this.get('rel');
        showImage(parseInt(count)-1);
    });
});

JQuery Implementation

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.

Download Code

JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip

Drop Shadow in Images : No extra markup

nitin — Wed, 06 Jan 2010 15:01:49 +0000

Drop Shadows adds extra glare to any design. They can be easily accomplished in any graphic editor, however its a little tricky in web programming. In this post I'll walk you through various ways in which you can add shadows to images without any extra markup used.
In all cases i'll use the same HTML code for showing Image.

<img src="image.jpg" class="thumbnail" />

CSS 3

In the latest public working draft we have a box-shadow property. This property can be used to draw a drop-shadow for a CSS box.

The CSS for the above example is :

.thumbnail{
    padding:4px;
    border:1px solid #DDD;
    -moz-box-shadow: 5px 5px 7px #999;
    box-shadow: 5px 5px 7px #999;
    -webkit-box-shadow: 5px 5px 7px #999;
}

Good naa !!!

But the problem with this implementation is that it doesn't work in IE. The Box Shadow property is supported by only :
+ Firefox 3.5
+ Safari (3.2.1)
+ Google Chrome 2
So its up to you whether you want to ignore IE users or not.

Now lets see other approach.

Using Background Shadow Image

In this approach we'll be using an extra image in background that will give shadow effect. This technique is also illustrated here "CSS Drop Shadows".

In this case the CSS used is:

.thumbnail{
    width:250px;
    height:250px;
    padding:4px 14px 14px 4px;
    background:transparent url('image-bg.png') no-repeat 0 0;
}

Some other implementations are

Demo 1

Demo 2

Hope this article will give more ideas for similar implementation.

Happy Coding!!!!

Another Beautiful Thumbnail Hover Effect : Using Mootools

nitin — Sat, 21 Nov 2009 09:11:02 +0000

Some days back I wrote a post regarding "Beautiful Thumbnail Hover Effect". On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.

This implementation is little different. To know more about this effect lets see the demo first.

View Demo

If you have seen the demo then you might be wondering how this image is splitting in middle. Actually to get this effect I have used two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.

Now lets move on to its implementation.

The HTML

Here i am given html code to showing one thumbnail:

<div class='thumb'>
	<div class='someContent'>
		<div class='content'>Some Random Text Over Here.  </div>
		<div class='more'><a href="#">More »</a></div>
	</div>
	<div class='divLeft' style='left:0px'>
		<div class='divLeftImage' style='background:url(7.jpg);'></div>
		<div class='divLeftShadow'></div>
	</div>
	<div class='divRight' style='left:0px;background-image:url(7.jpg);'></div>
	<img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>
</div>

This code looks to me as self explanatory.

The CSS

div.thumb{
    position:relative;
	width:160px;
	height:160px;
	margin:30px 40px;
	overflow:hidden;
	border:5px solid #313131;
	float:left;
}
div.divLeft, div.divRight{
	width:90px;
	height:160px;
	overflow:hidden;
	position:relative;
    top:-160px;
	overflow:hidden;
	float:left;
}
div.divLeft{
	margin-right:-10px;
}
div.divLeftImage{
	width:80px;
	height:100%;
	float:left;
}
div.divLeftShadow{
	width:10px;
	height:100%;
	float:left;
	background:transparent url('shadow.png') repeat-y 0 0;
}
div.divRight{
	width:80px;
	background-position:-80px 0;
}
.thumbnail-shadow {
	float:left;
	height:33px;
	position:relative;
	top: -320px;
	width:100%;
}
 
div.someContent{
	position:relative;
    width:160px;
	height:150px;
	padding:10px 0px 0px;
	font-size:12px;
	font-family:Arial;
	text-align:justify;
	background:transparent url(thumbnail-overlay.png) no-repeat scroll 0px -167px;
 
}
div.someContent div.content{
	color:#CCC;
	height:126px;
	font-size:11px;
	padding:0 10px 0 20px;
}
div.someContent div.more{
	background-image:url(readmore-bg.png);
	bottom:0;
	float:right;
	height:16px;
	padding:5px 5px 3px 20px;
	position:relative;
	right:0;
	width:45px;
}

Javascript : Mootools

And Finally the magic of Mootools to get the desired effect. To get the desired effect I am moving div.divLeft 70px toward left, and moving div.divRight 80px toward right. At the same time the background image for the background text is coming down.

$$('div.thumb').each(function(div){
 
	div.getElement('div.someContent').set('tween', {duration:'700'});
	div.getElement('div.divLeft').set('tween', {duration: '450'});
	div.getElement('div.divRight').set('tween', {duration: '450'});
 
	div.addEvent('mouseenter',function(e){
		this.getElement('div.divLeft').tween('left','-70px')
		this.getElement('div.divRight').tween('left','80px')
		this.getElement('div.someContent').tween("background-position", "-20px 0px");
	})
	div.addEvent('mouseleave',function(e){
		this.getElement('div.divLeft').tween('left','0px')
		this.getElement('div.divRight').tween('left','0px')
		this.getElement('div.someContent').tween("background-position", "0px -167px");
 
	})
})

The whole code is available for download :

Download Another_Thumbnail.zip

Hope you guys will like it. Let me hear your feedbacks through comments.

Make Your Links (Hyperlinks) Even More Sexier

nitin — Thu, 29 Oct 2009 14:17:47 +0000

You would have often seen various attempts to make hyperlink more beautiful. One of my personal favorite is to have little icons beside links to let you know where they link to.
Different icons for external links, pdfs, images, etc. etc. You can find the tutorial for such link over here.

In this post i'll tell you a technique using which you can make your links even more sexier.

Check out the demo first : View Demo

The Implementation of this effect is given in the following sections.

The HTML

<a class="link" href="#">Put Anything Here</a>

All you need is to add classname "link" to your hyperlinks.

The CSS

The only important class is to have the final class "a.link".

a:link,a:hover,a:active,a:visited{
	color:#59BAEF;
	text-decoration:none;
	white-space:nowrap;
}
a{
	outline:none;
}
a.link{
	background:transparent url(a-bg.png) no-repeat -81px bottom;
}

The Javascript : Mootools

window.addEvent('domready',function(){
	$$('a.link').each(function(a){
		a.setStyle('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
		a.set('tween',{duration:600});
		a.addEvents({
			'mouseenter' : function(){
				a.tween('backgroundPosition', a.getSize().x + "px "+ (a.getSize().y-2) +"px");
			},
			'mouseleave' : function(){
				a.tween('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
			}
		})
	})
})

The Javascript : jQuery

$(document).ready(function(){
    $('a.link').css('backgroundPosition', "-81px "+ ($(this).outerHeight()-2) +"px");
    $('a.link').bind('mouseenter',function(e){
        var a = $(this);
        a.animate({'backgroundPosition': a.outerWidth() + "px "+ (a.outerHeight()-2) +"px"},600);
    });
    $('a.link').bind('mouseleave',function(e){
        var a = $(this)
        a.animate({'backgroundPosition': "-81px "+ (a.outerHeight()-2) +"px"},600);
    });
})

Image Used

This effect is just a demo of the possibilities. I would love to here your own implementations.

Beautiful and Simple Buttons with CSS

nitin — Sun, 11 Oct 2009 15:11:13 +0000

I have always been fond of CSS wonders. Although We all have seen lots of buttons using CSS, using JS, but today I am bringing you a fresh implementation of buttons.

The real beauty of these buttons are in its background images. In this tutorial I have also included the photoshop(psd) file used in creation of these buttons, so feel free to come up with your own imagination.

Since I wanted these buttons to be flexible, I have made the background image expand with the size of the button's text. For that, I have used the beloved sliding doors technique; two complementing images creating the illusion of a single, stretching image.

Lets head on to the real implementation of these buttons.

HTML

<a class='button' href='#'>
	<span>Hello World</span>
</a>

CSS

a:link.button, a:visited.button, a:hover.button , a:active.button{
	background:url(btn-l.png) no-repeat 0 0;
	display:block;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	padding-left:13px;
	color:#969696;
	outline:none;
	margin:20px 0;
}
a:hover.button{
	background-position:0 -45px;
	color:#0D4289;
}
a:active.button{
	background-position:0 -91px;
	color:#00306F;
}
a:hover.button span{
	background-position: right -45px;
	color:#0D4289;
}
a:active.button span{
	background-position: right -91px;
	color:#00306F;
}
a.button span{
	display:block;
	text-align:center;
	line-height:44px;
	padding:0 5px;
	background:url(btn-r.png) no-repeat right 0;
}

The background images used in these buttons are

btn-l.jpg

btn-r.jpg

Demo

For the demo please click here See Buttons in Action

Download

You can grab the source file used in these buttons (including PSD) here.

Beautiful Thumbnail Hover Effect : Using Mootools

nitin — Thu, 01 Oct 2009 07:37:56 +0000

Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.

View Demo

The Implementation of this effect is given in the following sections.

The HTML

<div class="thumbnail-wrap">
<div class="thumbnail-div">
<div style="background-image: url(5_thumb.jpg);">
   <img class="thumbnail-shadow" src="thumbnail-shadow.png" alt="bottom" />
<div class="sections-overlay">
    <a rel="imagezoom" href="5.jpg">
     <img class="zoom" src="zoom.png" alt="Some Title of the Image 5" />
    </a>
    <a class="readmore" href="#">read more >></a></div>
</div>
</div>
</div>

I think the code here is self explanatory.

The CSS

The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.

.thumbnail-wrap {
	float:left;
	height:151px;
	margin:30px;
	width:151px;
}
.thumbnail-div {
	background-color:#313131;
	float:left;
	height:146px;
	padding:5px 0 0 5px;
	width:146px;
}
.thumbnail-shadow {
	float:left;
	height:33px;
	width:100%;
}
.thumbnail-div .sections-overlay {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(thumbnail-overlay.png) no-repeat scroll -40px -300px;
	float:left;
	margin-top:-33px;
}
.thumbnail-div div{
	height:141px;
	width:141px;
}
.sections-overlay {
	background-image:url(readmore-bg.png);
	opacity: 0;
	visibility:hidden;
	background-position: 0px -167px;
}
.thumbnail-div .sections-overlay .zoom {
	margin:60px 0 0 61px;
}
.sections-overlay .zoom {
	border:medium none;
	margin:165px 0 0 312px;
}
.readmore {
	background-image:url(readmore-bg.png);
	color:#FFFFFF;
	display:block;
	float:right;
	font-size:10px;
	margin:17px 0 0 40px;
	padding:5px 10px;
}

The Javascript : Mootools

And Finally the magic of Mootools to get the desired effect. All this effect is doing to decrease the margin-top of "thumbnail-div" by 10px and showing "sections-overlay" div using opacity:1.

$$('div.thumbnail-div').each(function(div){
  div.addEvents({
    'mouseover': function(){
      $(this).tween('marginTop', '-10px');
      $(this).getElements('div.sections-overlay').each(function(d){
        d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
      });
    },
    'mouseout': function(){
      $(this).tween('marginTop', '0px');
      $(this).getElements('div.sections-overlay').each(function(d){
        d.morph({opacity: 0, backgroundPosition: "0px -167px"});
      });
    }
  });
});

Doing just this we'll get such an amazing effect on Thumbnails. This effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail.

The whole code is available for download :

Download Thumbnail.zip

Hope you guys will like it. Let me hear new implementation through comments.

Optimize CSS : Tips to optimise css files

nitin — Mon, 02 Mar 2009 08:47:47 +0000

For increasing performance of any website, the size of CSS / JS files should be as minimum as possible. To decrease the size CSS files following techniques must be used.

Structure your CSS and HTML elegantly

You must use cascading power of CSS in you html/css code.
For eg. Code like this could be written as

First

Second

Third

Forth

Fifth

Should be written as


	First
	Second
	Third
	Forth
	Fifth

This is just an example, these type of technique could be used in your html/css files to optimize your code.

Use CSS Shorthand Rules

When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.

Compare the example longhand its equivalent shorthand below.

#someid {
	background-attachment: fixed;
	background-color: #000000;
	background-image: url(images/image.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

Shorthand version:

#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }

Optimize Your CSS

Use CSS Optimiser. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manually.

Server-side Compression

Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.