Dec
1

Yet another quick CSS tips & tricks

By Rabi Shrestha  //  CSS  //  5 Comments

After last week article on CSS trips and tricks I am adding some more here. I hope these tips are useful ones.

1. Remove links or textbox hightlight border

You can use the outline property to remove or hide a border highlighting the elements. Anish Blon wrote this in his most popular post one line CSS in March 2008.

a, input {
	outline:none;
}
to remove underline from link 
a:link {
  color: #0000FF; 
  text-decoration: none; 
  background: #FFFFFF;}/*normal links in the text*/

2. Hidden Text

You can hide the text by using the text-indent property as follows. We use hidden text when we’re using images to replace text but we want to make sure search engine can crawl the keyword.

a {
	text-indent:-999em;	
	outline:none;
	width:200px;
	height:100px;
}

3. CSS Transparency Setting for all browsers
you can use the following opacity hacks features to set transparency for different kinds of browsers

 .transparent_class {  
	filter:alpha(opacity=50);    /* ie  */
	-moz-opacity:0.5;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.5;    /* for really really old safari */  
	opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */
}

4. PNG Fix for IE6
Following hacks can be used to fix the PNG fix for IE6

.png_hack{
  background-image: url(../img/image.png) !important;
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

Please have your say.

[Photo Credit: Russ Weakley]

Related posts:

5 CSS tips & tricks One Line CSS Magic Web Accessibility8 Tips to make Webpage Accessible Creating an Iframe in CSS
Tags:

Author: Rabi Shrestha

Rabi Shrestha has written 39 articles for us.

5 Comments to “Yet another quick CSS tips & tricks”

Leave a comment

ThemeForest
Recommend on Google

Sign up for our mailing list.

Categories

Recent Comments