Useful CSS Tips & Tricks

Useful CSS Stylesheet Tips & Tricks

1. Create an IE Specific Stylesheet

IE Only


IE 7 Only



2. Background Image of Textbox
input#sometextbox {
background-image:url('back-image.gif');
background-repeat:no-repeat;
padding-left:20px;
}

3. Setting Minimum width for a page
specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

HTML
<body>
<div id="container">

CSS

#container {
min-width: 600px;
width:expression(document.body.clientWidth <>

4. Cross Browser Opacity
make an element transperant by setting the opacity level.

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

5. Centering a Website
this technique to center the content.

HTML

CSS
#page-wrap {
width: 800px;
margin: 0 auto;
}

6. CSS Drop Caps
first letter will be a drop-cap.

p:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

7. CSS Text Shadow
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

Light Shadow
.shadow {
padding: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Pressed
.pressed {
color: #fff;
padding: 20px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

8. Using !important
By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.

.page { background-color:blue !important; background-color:red; }

9. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }

10. Perfect Page-Printing with CSS
@media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}

11. Auto Resize Large Images

<style type="text/css">
#post_view img { max-width: 146px; height: 112px; width: expression(this.width > 146 ? 146: true); }
</style>


<div id="post_view"></div>

12. Displaying PNG'S in IE

#png_bg {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}

13.Round Corners without images
This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

{
border:2px solid;
border-radius:25px;
-webkit-border-radius:25px; /* Safari */
}

14.Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes
the code clearner and easier to understand.
Instead of creating CSS like this

.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}

It can be short-handed into the following:

.header {
background: #fff url(image.gif) no-repeat top left
}

15.Understanding Class And ID
These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

Class vs. ID
Use a class tag if:

1. The style is used in various places throughout the document.
2. The style is very general.

Use an id tag if:

1. The style is only used once ever in the document.
2. The style is specific to a certain area of the document.

16.Remove outline for WebKit Browsers
When you focus (:focus) on an input element, perhaps you have noticed that Safari adds a blue border around it (and Chrome, a yellow one).
If you would like to remove this border outline, you can use the following style rule (this removes the outline from text fields):
input[type="text"]:focus {
outline: none;
}

17.Easy Web Fonts with Google Font API
<link href="http://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet" type="text/css">
h1 {
font-family: 'Cantarell', Arial, serif; /* Use a font stack, just in case. */
}

18.CSS3 Font Face
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}

19. CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}

20. Opacity and Cross Browser Compatibility
Opacity is basically a way to make different HTML elements transparent
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}

21. Rotating Text Using CSS
HTML:

Example of

rotated text

CSS:
.rotateit{
display:block;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
}

22. Understanding Box Model of CSS
Box Model is useful for new web developer and designers in order to know the actual height and width taking by the elements and to deal better with the cross browser compatibility issues

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

23. Import or Link CSS
two ways of linking stylesheets in the websites; HTML link tag and CSS @import.

Link
<link href="styles.css" type="text/css" />

@import
<style type="text/css">@import url("styles.css");</style>

24. Controlling Text Overflow in CSS
control this text fall outside the rendering area of the element box
<div style="position: absolute; left: 20px; top: 50px;
width: 120px; height: 50px; border: thin solid black;
overflow: hidden; text-overflow: ellipsis">
Contents overflow
</div>

25. Highlighting the Element that has Focus in a Form
input:focus { border: 1px dotted red;}

26. CSS Visibility or Display Property
visibility and display seems similar in terms of output

Visibility - When visibility is set to hidden, it carry the space but is not seen.
visibility:hidden;

Display - Display property is mostly use to hide the object by setting its value to none because it dose not carry space and other elements used to collapse in order to fill the space.
display:none;

27. Swapping Background Images When Hovered
swap the background image when mouse is over particular text , link or element
.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}

28. Set a Full Page Background Image
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}

29. default Cursor with CSS
cursor: url(“image.cur”), default;

30. Double Boders Using CSS
.double {
border: 3px double #999;
}

31. Transform Text
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

32. Beveled box
img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}

32. Beveled box
#indented ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#indented ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
#indented ul li a:hover {background: #111;}
<div id="indented" class="box">
<ul>
<li><a href="#" target="_blank">r-ednalan</a></li>
</ul>
</div>

33. Fixed Footer Backgrounds
body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
width: 100%;
min-width:970px;
}

Tutorial101

article

Friday, June 18, 2010

Useful CSS Tips & Tricks

Related Post

Search This Blog

HOME

Category

Popular Posts