In this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using 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
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/
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;
}
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
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
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 :
<input onclick=”chooseStyle(this.value, 60)” name=”choice” type=”radio” value=”blue” />blue
<input onclick=”chooseStyle(this.value, 60)” name=”choice” type=”radio” value=”black” />black
</form>
Note : we used the titles of styles to define the value of the input .
URLs :
Opthions select menu (switchcontrol) :
</form>
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 .
No related posts.
