Invisible Text: Firstly let me make it clear that it is not the case of hiding the text by changing its font color to match the background color of a webpage. Sometimes we are required to put some text on the page which should not be visible to the user, but the web browser. For eg. suppose we want that some element on a web page should be readable only by a screen reader & not by our users. In such situations we can apply the following CSS trick:
Set the display attribute of the element to “none” i.e
display: none;
It should be noted that the above CSS trick doesn’t work for Post- IE6 web browsers.
PDA-Friendly Page Layout: The webpage which looks perfect on your computer system might look obscure & absurd when displayed on your handheld PDA devices. This is because of the difference in the rendering techniques employed by a desktop based web browser & a PDA based web browser. CSS has special provisions for correctly displaying a document over PDA devices.
The following code can be used to call up a document meant for PDA devices:
<link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” />
The above CSS trick overrides any inline CSS code & renders the page in exactly the PDA friendly layout.
3D Push Button Effect: The 3D push Button Effect is used to animate the buttons & images & make them more lively over mouseover. Previously this cool effect was only limited to buttons & images but now with the advent of new CSS techniques in web 2.0 & rich browser supports, the 3D Push effect can also be enabled over hyperlink text.
This small piece of code written below ensures that all your anchor text appears animated & lively.
a {
display: block;
width: 5em;
background: #ffffff;
border: 5px solid;
border-color: #aaa #180 #180 #aaa;
}
a:hover
{
position: relative;
top: 2px;
left: 2px;
border-color: #000 #aaa #aaa #108;
background: #ffggll;
}
The text written in green ensures that the anchor text moves 2 pixels ahead from Top & Left. The border & background also changes.
Set Minimum & Maximum Width for a Page using CSS: You will certainly end up losing your hairs if you rely on HTML for designing a webpage layout. HTML is a great way of arranging content but it is not a great way for designing a page layout structure. HTML is interpreted slightly differently by different browsers & not all the HTML tags are supported by each & every browser. Hence you may land up in ruining the complete design if you don’t use CSS. The most common problem that occurs with purely HTML based web pages is fixing the page width. Fortunately, CSS has a solution for that:
We can set the maximum & minimum width of a webpage using the following CSS properties:
max-width & min-width
Example
body {
min-width: 600px;
max-width: 900px;
}
The above given example should work fine for browsers such as firefox but the problem lies with the most popular web browser – Internet Explorer(as always!). Unfortunately, IE doesn’t understand this code in CSS. However, the functionality can be imparted to IE by using CSS with Javascript. Here’s the universal way..
Actually we can’t directly assign a min/max width to the <body> element. Follow the steps mentioned below to achieve this in IE:
Step 1: Assign a <div> tag within <body> like this:
<div id=”container”>
Step 2: Create a CSS code for the “container” class. The CSS code should look like this:
#container
{
min-width: 500px;
max-width: 1000px;
width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? “1200px” : “auto”); //Javascript Code for IE
}
The field marked green is the javascript code which works for IE. It can also be written in a more simplified manner like this:
width:expression(document.body.clientWidth < 600? “600px”: “auto” );Â //Sets Min width
width:expression( document.body.clientWidth > 1200? “1200px” : “auto”);Â //Sets Max width
Text Transform : This is one of the lesser known CSS code but, very useful while writing content. It atomizes at least some part of writing. Actually this code, when applied over a certain text portion, automatically capitalizes the first letter of the every line. It can also be used to capitalize the first word of every line. The text-transform CSS code can be used like this:
text-transform: uppercase; // for uppercase
text-transform: lowercase;// for lowercase
CSS font shorthand Rule : Below is the normal CSS rule applied by almost everyone while writting CSS code for the font:
body {
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
}
While the same rule can be modified to fit in a single line like this:
body {
font: 1em/1.5em bold italic small-caps verdana, serif
}
Isn’t it short & simple?
You might also like:
- Convert a liquid-layout to a fixed-width design
- How to Track Clicks on Outgoing Links
- Typography on Web
- CSS Pagination Links
- Make your JavaScript to be XHTML compliant
Tags: css, css cheats, css tips, css tricks, css tutorial, web designing
