Audio blog on CSS sprites
Object oriented CSS:
We are already familiar with object oriented programming. It means grouping behaviour and methods. In CSS we split the skin and the structure. The ultimate aim of this is to increase code reusability and make the code more readable.
Skins are visible attributes like color,gradient,visible borders etc..
Structures are dimensions essentially.
A particular skin can be applied to two or more elements having different structures. So when you separate skin from structure you can reuse the same skin for different elements. This is the basic concept behind OOCSS.
Media queries:
The CSS statements that involve selection of some sort of media(screen, print, mobile etc..) are called media queries.
For example,
@media all and (min-width:500px) { … }
The statements inside this block will be executed for media type where the screen width is of minimum 500px.
Media queries are very helpful in creating layouts which changes according to the device used.
Sprites:
My favorite topic of the day!!
Sprites are nothing but collection of images stitched as single image. The stitching can be horizontal, vertical or in some random manner suiting your needs.
Why to use sprites?
Remember this for images,
sum of sizes of individual images > size of sprite containing all images
also,
for fetching an element of a web page a http request has to be sent to the server. So,
more images to load in a page ==> more http requests
more http requests ==> more time to load the page !!
Thus by using sprites loading time of a page can be greatly reduced.
How sprites work?
When you need to display an image, you just create a div and display that portion of the larger image which contains the specific image you want.
Consider sprite as a big canvas with lot of small paintings or images. The div you create acts as a small window through which you can see only small portion of the canvas. When you move the canvas behind the window you can see different images based on what part of canvas is now visible through the window.
Hope u get what i mean.. feel free to drop comments if you don’t get my point !
Other notable points about sprites:
My experience with sprite:
http://www.google.co.in/logos/2011/gumby11-gumby.jpg
This is an example of sprites image. It came as a part of a google doodle. I thought of animating it. I will share the code for doing the animation.
pic1- shows the html code. Javascript is used to change the background position of the div created. (in my words background position determines the position of the canvas behind our window , the div ). Javascript also does the job of calling the function repeatedly in a set time interval to change the background position of the div .
pic2- shows the CSS code that is used to alter properties of the div created. Note that background of the div is our image !
See you in next post.
Trained at Sourcebits
Object oriented CSS:
We are already familiar with object oriented programming. It means grouping behaviour and methods. In CSS we split the skin and the structure. The ultimate aim of this is to increase code reusability and make the code more readable.
Skins are visible attributes like color,gradient,visible borders etc..
Structures are dimensions essentially.
A particular skin can be applied to two or more elements having different structures. So when you separate skin from structure you can reuse the same skin for different elements. This is the basic concept behind OOCSS.
Media queries:
The CSS statements that involve selection of some sort of media(screen, print, mobile etc..) are called media queries.
For example,
@media all and (min-width:500px) { … }
The statements inside this block will be executed for media type where the screen width is of minimum 500px.
Media queries are very helpful in creating layouts which changes according to the device used.
Sprites:
My favorite topic of the day!!
Sprites are nothing but collection of images stitched as single image. The stitching can be horizontal, vertical or in some random manner suiting your needs.
Why to use sprites?
Remember this for images,
sum of sizes of individual images > size of sprite containing all images
also,
for fetching an element of a web page a http request has to be sent to the server. So,
more images to load in a page ==> more http requests
more http requests ==> more time to load the page !!
Thus by using sprites loading time of a page can be greatly reduced.
How sprites work?
When you need to display an image, you just create a div and display that portion of the larger image which contains the specific image you want.
Consider sprite as a big canvas with lot of small paintings or images. The div you create acts as a small window through which you can see only small portion of the canvas. When you move the canvas behind the window you can see different images based on what part of canvas is now visible through the window.
Hope u get what i mean.. feel free to drop comments if you don’t get my point !
Other notable points about sprites:
- Sprites can be used when you have lot of small images to load.
- They can be very helpful when behaviour of an image changes depending upon user interactions(hover,click etc...)
- They can be used to create an animation
- Many Google doodles use sprites to create video like effect
My experience with sprite:
http://www.google.co.in/logos/2011/gumby11-gumby.jpg
This is an example of sprites image. It came as a part of a google doodle. I thought of animating it. I will share the code for doing the animation.
pic1- shows the html code. Javascript is used to change the background position of the div created. (in my words background position determines the position of the canvas behind our window , the div ). Javascript also does the job of calling the function repeatedly in a set time interval to change the background position of the div .
pic2- shows the CSS code that is used to alter properties of the div created. Note that background of the div is our image !
 |
| Pic 1 the html file |
 |
| Pic 2 the CSS file |
See you in next post.
Trained at Sourcebits
No comments:
Post a Comment