in this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using CSS.

1. conditional-css

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

usage : http://www.conditional-css.com/usage

2. CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

usage : http://rafael.adm.br/css_browser_selector/

3. adding a CSS StyleSheet to your RSS feeds

it is an old technique , but we mentioned it as it is important to broke the regular pattern of the RSS readers viewing system .

usage :

you will need to add the tag ( xml-stylesheet ) to your RSS feed file

Next you will need to create the CSS file called rss.css , how each RSS tag is displayed .

here’s an example for the RSS.css file

note : you can use the stylesheet to show or hide some feeds items to force the visitor to visit your site , but I do not support that .
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

4. CSS Watermark Effect

CSS Watermark is an unobtrusive and easy way for creating watermark (crossbrowser semi-transparent text) effect on your website’s images. You may choose between four standard and easy applicable text positions – topleft, topright, bottomright and bottomleft over the image.

Download : http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=50

5. Alternative style sheets switching via the browser menu

alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.

Usage : https://developer.mozilla.org/en/Alternative_style_sheets

6. Alternative style sheets switching via the website

Usage :

we will add the alternative style sheets to the document , in our example we have three styles : default , blue and black , inside style.css we will define the formats which will appear in all styles , and default.css is for the formats belongs to the default but it will be change in the other styles .
Note : I added the tag ( rel=”stylesheet” ) to the default style and the tag ( rel=”alternate stylesheet”  ) to the secondary.

next add the styleswitch.js file by adding this code at the head tag

you can download the styleswtich file from here

Now , the final step is to add the Switching style opthion by one of these methods :
Radio menu :

Note : we used the titles of styles to define the value of the input .

URLs :

Opthions select menu (switchcontrol) :

7. Forming Tooltip using CSS3

We used to create tooltips using JavaScript , it was hard in changing colors and shapes but with CSS3 it is very easy.

Usage :

First we will make a div
<div title=” Tooltips Test”></div>
and adding the StyleSheet code which will hide the title when moving the cursor (pointer) on the div .

now add the CSS code to show the tooltip when you move the pointer on it .

Related Tutorials