Very Simple CSS Tricks

Here are some CSS tricks which might seem very simple yet it is so crucial to the outlook of a website. If you are a CSS pro, this article is probably not for you. After you read this article, if you feel that there are some things that could be done differently, please let us know.

Line Height

This is a functionality that is used to change the space between lines. It makes the text more readable. The line height can be simply provided for a paragraph in this way.

< style type=text/css ">
p {
line-height: 120%;
}

Each font size has its own space associated with it and we can increase that space by defining in percentages.

Big First Letter

In the newspapers, you might have seen the first letter being big and the rest are the normal size. This is possible with CSS as well. This is how you do it.

f1:first type character {
float:left;
color:black;
font size:250%;
} 

This is the way you use it in your template file.

< p class="f1">This is text... </p>

Text Transformation

This is the property of CSS where you can transform the text entered into all caps, or all small caps or even capitalize every word.

Upper Case

uc {
text-transform: uppercase;
}

When you use this in a paragraph this way

word up y’all

, the output is going to look like “WORD UP Y’ALL”.

Lower Case

lc {
text transform: lowercase;
}

This does just the opposite of the uppercase.

Capitalize
clize {
text transform: capitalize;
}

This function capitalizes every single word in a paragraph.

Focus Element

This is a pseudo class in CSS and it gives a different appearance to the text that is in focus. This can be useful, if you have a form and want to highlight the current textbox in which the user enters data.

<style type="text/css "> 
ipp { color:red } 
ipp:focus { color:blue } 
</style>

The normal color in this function is red, but if the element has focus on it, it turns into blue.

Change Mouse Pointers

Usually we are equipped with the boring white mouse pointer pointing towards left. . CSS offers the possibility the pointer of mouse to change. This is realizable over the cursor characteristic.

Here is how to change the mouse cursor.

Use this either in your CSS file or your header file.

<style type="text/css"> 
body { cursor: cursor_name; } 
</style>

If you would like the cursor just when you put your mouse on links,

<style type="text/css"> 
a:link,a:visited,a:active { 
cursor: cursor_name; } 
</style>

Here is a list of different cursors:

cursor: auto (uses what is set by user)

cursor: crosshair (should produce a cross)

cursor: default (cursor remains as it is)

cursor: e-resize (arrow pointing right)

cursor: hand (the traditional pointing hand)

cursor: help (a Question Mark should appear)

cursor: move (a cross with arrows on the tips)

cursor: n-resize (an arrow pointing north or up)

cursor: ne-resize (an arrow pointing northeast)

cursor: nw-resize (an arrow pointing northwest)

cursor: pointer (that hand again)

cursor: s-resize (an arrow pointing south or down)

cursor: se-resize (an arrow pointing southeast)

cursor: sw-resize (an arrow pointing southwest)

cursor: text (looks like the end of an I-beam)

cursor: w-resize (an arrow pointing west)

cursor: wait (an hourglass)

Images in List

Suppose you want a cool looking pointer next to your bulleted points, CSS is the answer.

Consider a list like this.

<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>

Now you can insert an image this way :

ul { cunning style image:url("graphic.gif") }

Scroll Bar Features

CSS can alter the look and feel of the scroll bar which would otherwise remain the same for all websites.

These are the different sections of a scroll bar :
* scrollbar-3dlight-color – This property describes the color of the outer top and left bevel edges (the normally lighter portion of the “highlights”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar arrow color – This property describes the color of the scrollbar directional arrows of a scroll bar when they are activate-able. When scrllbars appear but are not usable, this property does not control the arrow color in this state.

* scrollbar darkshadow color – This property describes the color of the outer bottom and right bevel edges (the normally darker portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar face color – This property describes the color for the button face of the scrollbar arrow widgets, the button face color of the slider widget and the main color of the inactive square at the bottom/right corner of the scrolled box. This property has no effect on the scrollbar tray/track that the scrollbar slider widget travels in.

* scrollbar highlight color – This property describes the color of the inner top and left bevel edges (the normally darker portion of the “highlights”) of the scrollbar arrows, the scroll bar slider box, and half of the dither pattern color of the scrollbar slider tray area (the other half of the dither is taken from the OS default button face color.) For a more detailed explanation of the components of a scrollbar interface.

* scrollbar shadow color – This property describes the color of the inner bottom and right bevel edges (the normally lighter portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar.

* scrollbar base color – This property describes the color of the button face of the scrollbar arrow widgets, the button face color of the slider widget and half of the dither colors for the scrollbar slider tray.

* scrollbar track color – This property describes the solid color of the scrollbar track.

Here is the implemented version of these tags.

BODY
{
scrollbar-3dlight-color:#FF9E00;
scrollbar-arrow-color:#FF9E00;
scrollbar-base-color:#FFDF00;
scrollbar-darkshadow-color:#C64100;
scrollbar-face-color:#FF7D00;
scrollbar-highlight-color:#FF9E00;
scrollbar-shadow-color:#E76100;
}

3D Shade

CSS does the 3D shading for images.

This is just a sample code :

border style: groove;
border style: ridge;
border style: inset;
border style: outset;

Related posts:

1. Some Neat CSS Tricks
2. Some XP Tricks you may not know…
3. Basic Windows Keyboard Shortcuts
4. Latest USB Optical Mouse… What the heck! Aircraft or mouse??
5. Text Tricks in CSS

Filed Under: Archive Categories