Archive for February, 2012

centering image in a div

Posted by roqeem in css on February 27, 2012

the CSS how to center an image in a div:

<img style="display:block; margin: auto" src="images/img_promo.jpg">

Leave a comment

awesome CSS tricks to enhance the design of your website

Posted by roqeem in css on February 21, 2012

Image Transparency
Hover your mouse over the second image below to toggle between transparent and normal mode.

By default, the image is set to appear transparent. With mouseover, the image appears as it normally would. Both transparency and mouseover effects are easy to achieve with just a few lines of CSS:

<style>
img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
</style>

… so the complete code looks like this:

<!DOCTYPE html>
<html>
<head>
<title>How to Create Transparency with CSS</title>
<style type=”text/css”>
img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
</style>
</head>
<body>
<img alt=”kiwi” src=”kiwi.jpg”/>
</body>
</html>

Centering with the auto margin
The align=”center” attribute and the attribute are both old and outdated. Sure, sometimes “old is gold”, but not in this case. If you’ve used either of these methods to center something on every page of your fifty page website….imagine updating those fifty pages when you suddenly decide you prefer a left alignment instead.

The preferred CSS technique for centering block-level elements (in this case, a div) is:

div {margin-left:auto; margin-right:auto;}

But if you’re one of the FEW people who care about IE5, then you might want to use an alternate method, since auto margins are not supported by IE5:

body {text-align:center;}
div.content {text-align:left;}

Multiple classes, side by side
You can assign an element as many classes as you’d like, separating each class with a space. For instance:

<style>
.winter {width:100px; height:100px}
.summer {border:4px dashed blue}
.spring {background-color:orange}
</style>

<div class=”winter summer spring”></div>

And the result…

Overlapping Elements with absolute positioning and z-index
CSS allows you to choose the positioning of elements on your website. By default, all elements use relative positioning, even if you don’t specify this in your stylesheet:

position:relative

If you want to overlap an element, you must change its default positioning from relative to absolute, like so:

position:absolute

Use z-index to specify which elements overlap the others. A style of z-index:1 puts an element at the bottom, then z-index:2 in front of it, and so on. Remember, the element with the highest z-index will be closest to you when looking at the screen.

Check out the example below to see absolute positioning and z-index in action:

and the code…

<style>
.container {width:100%; height:380px; background-color:black}
.blue, .green, .yellow
{position:absolute; width:150px; height:150px; border:2px dashed red;}
.blue {background-color:blue; z-index:1; margin:60px 0 0 60px}
.green {background-color:green; z-index:3; margin:60px 0 0 300px}
.yellow {background-color:yellow; z-index:2; margin:160px 0 0 180px}
</style>

<div class=”container”>
<div class=”blue”></div>
<div class=”green”></div>
<div class=”yellow”></div>
</div>

Swapping an image upon mouseover
In addition to applying the hover effect on text links, it’s nice to be able to use it for images.

For instance, hover your mouse over the image below to see the image swap take place.

How can you achieve this? I’m sure there are many ways out there. One way is to use the hover style combined with the background-image style. Here are the images and code for the panda-bird example:

<style>
.imagebox, a {width:264px; height:180px;}
.imagebox {background-image:url(bird.jpg)}
.imagebox a {display:block; background-image:url(panda.jpg)}
.imagebox a:hover {background-image:none}
</style>

<div class=”imagebox”>
<a href=”#”></a>
</div>

Placing elements side by side using floats
Divs are easy to use since they’re block elements that don’t share their horizontal space with any other element. That’s great if you’re designing downward, but what if you want to place a bunch of divs side by side? A lot of people resort to using tables to lay out their content, since tables give you the freedom to populate rows and columns…pretty easy huh? Well, you can achieve the same task by using CSS. Are tables bad? Not really…but tables can’t be placed in a stylesheet, so updating 50 pages full of tables could get a little cumbersome.

Here’s what CSS can do, without the use of tables:

…try it yourself:

<style>
.hi {float:left; margin:0 20px 20px 0; background-color:gray; width:130px; height:80px;}
.bye {clear:both; width:430px; height:150px; background-color:black;}
</style>

<div class=”hi”>
<div class=”hi”>
<div class=”hi”>
<div class=”bye”>

Table border, cellpadding, and cellspacing
When using tables, almost everything is style-able with CSS….but then there’s those annoying but oh-so-necessary cellpadding and cellspacing properties that we’re forced to put directly in the table tags.

Surprise surprise…..CSS has a cellpadding and cellspacing equivalent!

Before you discovered the CSS method, you probably did this:

<table border=”1″ cellspacing=”4″ cellpadding=”5″></table>

The CSS equivalent to the above is this:

<style>
table, td {border-color:gray; border-style: solid;}
table {border-spacing:4px; border-width: 0 0 1px 1px; border-collapse: collapse;}
td {padding:5px; border:1px solid gray; border-width: 1px 1px 0 0;}
</style>

…and the result:

Custom bullets for unordered lists
CSS allows you to personalize the bullets in unordered lists, and this really helps them “fit in” with the theme of your website. We’re going to create a grocery list using this green check mark with a slight drop shadow:

<style>
ul li {list-style-image:url(greencheck.gif)}
</style>

…and now our list looks like this:

Tooltips that replace the “title” attribute in HTML links
The title attribute is added to a link in HTML, and makes a small yellow popup appear with the text you assign to the title.

Example:

<a href=”#” title=”Lorem ipsum dolor sit amet…”>
mouseover me to see a title attribute</a>

It works just fine, but you can’t style it. A CSS tooltip can achieve the same effect as the title attribute, with a lot of styling flexibility:

If you prefer the CSS tooltip over the HTML title attribute, then here’s how to get it:

<style>
div {width:275px; background-color:purple; padding:20px; border:1px dotted gray; color:#cbadcb}
a {text-decoration:none; color:yellow; font-weight:bold}
a:hover {color:orange; background:purple; } /*background color required for IE6*/
a.tip span {display:none; padding:10px; margin-left:8px; width:200px;}
a.tip:hover span {display:inline; position:absolute; background-color:#312f2f; border:1px solid black; color:#CFCFCF; font-weight:normal; font-size:9pt; margin:25px 0 0 -250px; opacity:0.9;filter:alpha(opacity=90)}
</style>

<div>
<a class=”tip” href=”#”>mouseover me to see the tooltip appear!<span>You can use a tooltip to provide people with information about a link before they click on it.</span></a>. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

source: http://stylisticweb.com

Leave a comment

CSS Transparency Settings for All Browsers

Posted by roqeem in css on February 15, 2012

Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values to ensure cross browser compatibility that goes back as far as you can. To cover all your bases, you need a bunch of CSS statements. Fortunately they don’t interfere with each other, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 

	/* Theoretically for IE 8 & 9 (more valid) */
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);

	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;

	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

Update July 5, 2011. Here’s what I’d recommend for usage today, in way easier copy-and-pasteable format.

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

source: http://css-tricks.com

Leave a comment

Design a site like this with WordPress.com
Get started