Mikul Gohil

Good practice of Css

2008-10-05T12:52:00.003+05:30

Here i got a nice artical or code for css good one to try

There have been a number of occasions when looking over other developers CSS I notice bits of code similar to the following…

#div { margin-top: 20px; margin-bottom: 10px; margin-right: 5px; margin-left: 25px; padding-top: 10px; padding-bottom: 15px; border-width: 1px; border-style: solid; border-color: #666666; font-family: Verdana, Helvetica, Arial; font-size: 14px; font-weight: bold; }

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div { margin-top: 0; margin-right: 5px; margin-bottom: 10px; margin-left: 15px; (auto, 0, px, pt, em or % ) }

#div { margin:0 5px 10px 15px; (top right bottom left) }

and

#div { margin-top: 10px; margin-right: 20px; margin-bottom: 0; margin-left: 20px; }

#div { margin:10px 20px 0; (top right/left bottom) }

and

#div { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }

#div { margin:0 auto; (top/bottom left/right) }

and

#div { margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; }

#div { margin:50px; (top/right/bottom/left) }

Border

#div { border-width: 5px; (thin, thick, medium or set value) (default = medium) border-style: dotted; (solid, dashed, dotted, double, etc) (default = none) border-color: blue; (named, hex, rgb or 0-255) (default = value of elements/elements parent color property) }

#div { border:5px dotted blue; }

and

#div { border-right-width: 2px; border-right-style: solid; border-right-color: #666666; }

#div { border-right:2px solid #666; }

and

#div { border-top-width: 3px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 2px; }

#div { border-width:3px 2px; }

Background

#div { background-color: #CCCCCC; (named, hex, rgb or 0-255) (default = transparent) background-image: url(images/bg.gif); (url or none) (default = none) background-repeat: no-repeat; (repeat, repeat-x, repeat-y or no-repeat) (default = repeat) background-attachment: scroll; (fixed or scroll) (default = scroll) background-position: top left; (top, right, left, bottom or center) (default = 0% 0%) }

#div { background:#CCC url(images/bg.gif) no-repeat 0 0; }

Font

#div { font-family: Verdana, Arial, Helvetica; (Verdana, Arial, “Times New Roman”, etc) (default = varies by browser) font-size: 12px; (xx-small, medium, x-large, set value, etc) (default = medium) font-weight: bold; (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal) font-style: italic; (normal, italic or oblique) (default = normal) font-variant: normal; (normal or small-caps) (default = normal) line-height: 1.5; (normal, px, pt, em, num or %) (default = normal) }

#div { font:italic bold 12px/1.5 Verdana, Arial, Helvetica; }

List

#div { list-style-image: url(images/bullet.gif); (url or none) (default = none) list-style-position: inside; (inside or outside) (default = outside) list-style-type: square; (circle, disc, square, etc) (default = disc) }

#div { list-style:square inside url(images/bullet.gif); }

Colors

Black: #000000 to #000 Blue: #0000ff to #00f Dark Grey: #666666 to #666 Light Grey: #cccccc to #ccc Orange: #ff6600 to #f60 White: #ffffff to #fff

Click here to download a PDF shorthand cheat sheet.

[Via leigeber]

Natural Wallpaper Collection

2008-10-02T02:06:00.004+05:30

I hope u will like this wallpaper It is amazing collection. Must see it

Professional photographer commissioned by Microsoft, these remarkable wallpapers are used as part of the Windows Vista collection. They are also free to download (bottom) at Hamad’s site. Here’s few that we personally like.

Complete Search Engine

2008-10-02T01:58:00.003+05:30

Here is the Search Engine know as Quarkbase Which Display All information of a company. It has all the infomation 360*

Click Here

Internet Speedo Meter

2008-10-02T01:20:00.003+05:30

Just test your Internet speed , Here is some thing about the tool

Speed.io is a modern DSL speedtest to analyze your broadband internet access. You find that your internet connection is too slow or you are just curious how fast you are - speed.io is a perfect tool for a fast speed check - worldwide.

Speed.io

Shake YouTube

2008-10-02T01:10:00.005+05:30

It is another futuristic Concept from YouTube This is the thing even i can't explain you. u have to go and have a look. It is a nice work done called Wario Land Shake it. Click HERE

First Youtube games

2008-10-02T00:57:00.003+05:30

Just got a new thing in youtube, it is not video but more then a video. It a game in a video. I was surprised by watching it. After that i just thought that it is just a starting of youtube games. soon they will have a domain games.youtube.com.

It is developed by a company called Hexolabs

Google reader theme

2008-09-25T10:36:00.002+05:30

Today i was just surfing around and i found a old post from google but it was a new for me , It was theme for google reader. here is some instruction for u to install it

Installation

Download gReader.zip. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox

Once you have the Stylish extension installed, just copy and paste the css into the ‘create styles for this page’ window.

Camino

In Camino, either paste this into your /Library/Application Support/Camino/chrome/userContent.css file, or if that file doesn’t exist, rename the greader.css file to be userContent.css. The theme will be applied when you restart Camino.

Safari

Once Safaristand is installed, place the greader.css file in your user/Library/Safari/Stand/UserStyleSheets folder. Then visit Google Reader, go to SafariStand > Settings > Site Alteration. Add the site, enable Site Alteration and choose the greader file from the list. Make sure the matching pattern is just www.google.com. You may have to empty your cache, restart Safari and refresh before seeing any changes!

Omniweb

In Site Preferences > Page Appearance, choose the greader.css file under ‘Style Sheet’. The change should happen instantly!

Opera

Put the greader.css file anywhere you like! Right-click on the Google Reader page, choose "Edit Site Preferences" and select the CSS file through the display tab, under ‘My Style Sheet’. Like Omniweb, the change should apply immediately.