Web-kreation » Scripts http://web-kreation.com Web & Graphic Design by Jeremie Tisseau, Web Design Consultant at Calleo Mon, 07 May 2012 04:27:42 +0000 en hourly 1 Sponsor list with CSS Sprites and Mootools 1.2 http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/ http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/#comments Mon, 28 Sep 2009 11:44:59 +0000 Jeeremie http://web-kreation.com/?p=1942 jQuery.com or JamieWhinCup. Before we start, have a look for yourself: view demo »]]> Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:

sponsor-list-sample

Preview / Download

sponsor list with CSS sprites and Mootools 1.2

view demoNote: There is a file embedded within this post, please visit this post to download the file.

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn’t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

nav_logo6

The main advantages of using sprites are:

  • Fewer images for the browser to download, which means less http requests.
  • Total images size is generally smaller.
  • Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

css sprites

Include the CSS code below in the head of your html document or in an external style sheet:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!--
#sponsors {
	width: 940px;
	display: block;
	clear: both;
	border: 1px solid #eee;
	padding: 10px 5px;
	margin: 15px auto;
	text-transform: uppercase;
	font-weight: bold;
	color: #666;
}
#sponsors span {
	display: block;
	float: left;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
}
#sponsors a {
	display: block;
	float: left;
	height: 20px;
	padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
	/*mouseover*/
	a:hover.mootools, 
	a:hover.drupal, 
	a:hover.technorati, 
	a:hover.jquery, 
	a:hover.miro, 
	a:hover.mozilla, 
	a:hover.nbc, 
	a:hover.twitter, 
	a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */
-->

In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -20px” to reveal the color version.

(If you want to learn more about sprites, check this excellent article from Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials)

Step 3: the Javascript (js/colorize.js)

I have commented the JS. It should be self-explanatory but if you have any question, ask in the comments below.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

window.addEvent('domready', function(){
 
	var sponsors = $$('#sponsors a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
	sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
		//On mouseenter
		'mouseenter': function(){
			this.setStyle('background-position','0 -20px'); //Reveal color image
			this.get('tween').start('opacity',1); //set opacity to 1
		},		
 
		//on mouseleave
		'mouseleave':function(){
			this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position for grayscale image
			var tween =  this.get('tween');
			tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
		}
 
	});
});

Step 4: Make it happen!

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

?View Code HTML4STRICT
1
2

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"><!--mce:0--></script>
<script src="js/colorize.js" type="text/javascript"><!--mce:1--></script>

Test your page in a browser and you will be all set.

]]> http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/feed/ 30 CSS 3 columns Liquid Layout (Fluid-Fix) http://web-kreation.com/all/css-liquid-layout-3-columns-fluid-fix/ http://web-kreation.com/all/css-liquid-layout-3-columns-fluid-fix/#comments Fri, 06 Jul 2007 16:12:42 +0000 Jeeremie http://web-kreation.com/blog/?p=14 Here is another 3 columns Liquid Layout.

I have gathered the skills of different web designers to make my own script. This script is a little bit different from what you can find around there. I was looking for a 3 columns layout but I didn’t want to have a liquid layout for the three columns, only for the content. I didn’t want to make a mess inside my sidebars and needed to have fixed widths. Besides, I needed a sticky footer and equal height columns (Yeah! I know what you think: “He wants everything this guy!”).

Anyway, after mixing different techniques, I could finally get what I wanted. And best of all, I decided to release it to you guys for free.

Preview

Check the demo:

View Demo

And here’s the code (simplified):

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>:::Web-Kreation::: Liquid Layout</title>
 
  <!-- We start the CSS-->
  <style type="text/css">
  	* {
		margin: 0;
		padding: 0;
	}
 
	html, body {
	     border:0;
	     margin:0;
	     padding:0;
	     height: 100%;
	}
 
	body {
	     font: 100%/1.25 arial, helvetica, sans-serif;
	     min-width: 780px;
	}
 
	p { margin: 15px 0; }
 
	p, h1, h2, h3, h4, h2, h6 { padding: 0 1em; } /* Important! Give padding to the text. You could give some padding from leftbar, rightbar and Content but it would not render properly in IE*/
 
	/*****header*****/
	#header {
	     width: 100%;
	     font-size: 1em;
	     color: white;
	     text-align: center;
	     margin: 0;
	     padding: 0;
	     height: 60px;
	     background-color: #494949;
	}
 
	/*****content*****/
	#wrapper {
	     min-width: 960px;
	     padding:0;
	     margin:0;
	     position: relative;
	     min-height: 100%; /* For Modern Browsers */
	     height: auto !important; /* For Modern Browsers */
	     height: 100%; /* For IE */
	}
 
	#InnerWrapper {
	     width: 100%;
	     padding-bottom: 1px;
	}
 
	#WrapContent {
	     padding-bottom: 58px;
	     width: 100%;
	     margin: 0;
	}
 
	#WrapContent:after { /* !important. stick the footer at the bottom*/
	  clear: both;
	  display: block;
	  content: ".";
	  height: 0;
	  visibility: hidden;
	}
 
	#leftbar {
		z-index: 2;
	     float: left;
	     width: 200px;
	     margin: 0;
	     padding: 10px 0;
	     background-color: #ffcccc;
	}
 
	#rightbar {
	     z-index: 5;
	     float: right;
	     width: 200px;
	     margin: 0;
	     padding: 10px 0;
	     background-color: #99ff99;
	}
 
	#content {
	     z-index: 0;
	     display: block;
	     width: auto;
	     padding: 10px 0;
	     text-align: left;
	     margin: 0 200px 0 200px;
	     background-color: #ffff99;
	}
 
	.clear {
	    clear: both;
	    display: block;
	    height: 1px;
	    overflow: hidden;
	    margin: 0;
	    padding: 0;
	}
 
	/*****footer*****/
	#footer {
	     position: absolute;
	     bottom: 0 !important;
	     bottom: -1px; /* For Certain IE widths */
	     clear:both;
	     padding:0;
	     margin:0;
	     width: 100%;
	     height: 58px;
	     color: white;
	     text-align: center;
	     background-color: #494949;
	}
  </style>
 
  </head>
  <body>
	<div id="wrapper">
          <div id="header">Top</div><!-- / Header -->
	     <div id="InnerWrapper">
	          <div id="WrapContent">
	                <div id="leftbar"><p>Left sidebar</p></div>
	                <div id="rightbar"><p>Right Sidebar</p></div>
	               <div id="content"><p>Content</p></div>
	               <div class="clear"></div>
			</div><!-- /wrapContent -->
		</div><!-- /innerwrapper -->
		<!-- Start Footer -->
		<div id="footer">Sticky Footer</div>
	</div><!-- /wrapper -->
  </body>
</html>

You are free to use this script. Do whatever you want with it but if you find some use of it drop me a message to let me know.

]]> http://web-kreation.com/all/css-liquid-layout-3-columns-fluid-fix/feed/ 10