Kathirvel K

Posts Tagged ‘css

We can write CSS hacks using media queries also,

/* IE6/7 uses media, */
@media, {
.dude { color: green; }
.gal { color: red; }
}

/* IE8 uses */
@media all {
.dude { color: brown; }
.gal { color: orange; }
}

/* IE9 uses \9 */
@media all and (monochrome:0) {
.dude { color: yellow\9; }
.gal { color: blue\9; }
}

Tags: ,

Default paragraphs in this page have yellow background. In any of the following test cases a blue background is set with a special (hack) rule. When the background is blue, the hack is applied.
Note: “All” == IE5+/Win, Op6+, Moz, Saf

IE6- (and IE7+ quirks) only
/*\*/ * html selector { property: value; } /**/

IE5.5- only
selector { property: value; p\roperty: normal-value; }

IE7 standard only
*:first-child+html selector { property: value; }

All except IE6- and IE7+ quirks
html>body selector { property: value; }

IE6+ quirks and IE5 (= all IE/Win quirks) only
* html selector { property /**/: value; }

All except IE6 standards
selector { property /**/: value; }

All except IE5.0
selector { property/**/: value; }

All except IE5.5
selector { property: /**/value; }

What is sliding doors technique?

The technique is very simple. If we want to have a dynamic-width button, we have to find a way to stretch it horizontally. We will accomplish this if we create two background images that will define the button: one for the left side and one for the right side – like in the example below.

LEFT                                                                                                           RIGHT

Smaller, right image will slide on the top of the larger, left image (that why it is called sliding doors). The more right image slides to the left, the narrower button will be and vice versa. The image below shows the technique.

Styling the button

First, let’s take a look at the HTML elements that will simulate button. We have <span> element within the <a> element. Span element contains left, wider image and text. The width of the text will determine the size of the button.

<a class="button" href="#"><span>Submit</span></a>

Now let’s take a look at the CSS code. We have a .button class that will be applied to <a> element and .button span class that will be applied to <span> element within <a> element. We also have.button:hover span that will change the font style within <span> element.  And that’s all. Simple, eh? The comments in the code below describes each element.

a.button {
    /* Sliding right image */
    background: transparent url('button_right.png') no-repeat scroll top right; 
display: block;
float: left;
height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 20px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Background left image */ 
background: transparent url('button_left.png') no-repeat; 
display: block;
line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 0 5px 18px;
} 
a.button:hover span{
text-decoration:underline;
}

The result will look like the examples below.

You can see it “in action” on example page.

source

How to make sexy buttons with CSS

» Source

Scalable CSS buttons with PNG images and background colors

» Source

Sexy CSS Hover Button

» Source

CSS Submit buttons

» Source

Simple Round CSS Buttons ( Wii Buttons )

» Source

Make fancy buttons using CSS sliding doors technique

» Source

Beautiful CSS buttons with icon set

» Source

Sliding Doors buttons using only 1 image

» Source

Rediscovering the button element

» Source

Using sliding doors in WordPress

» Source

This tutorial explains how to design a liquid layer with rounded corners, using CSS and few line of code in HTML.
A simple solution is to define four layers, each ones with the CSS attribute background which contains a rounded corner image:


The result is something like this:

Step 1: CSS code
Copy and paste this code in your CSS file:

div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat;width:100%;}
div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom;padding:10px;}
How you can see, layer w1 is the main container container with the rounded left-top border in the attribute background.
Layer w2 is contained into layer w1 and it have in the background attribute the rounded right-top border. So, for all others.
Layer w4 will contain your text or other html elements. I added a padding attribute to add 10px space from external borders.

Step 2: HTML code
Now, copy and paste this HTML code into your page:

<div>
<div class=”w2″>
<div class=”w3″>
<div class=”w4″>
Welcome on my site
</div>
</div>
</div>
</div>

So, add all HMLT elements you want inside w4 layer and your liquid layer with rounded corners is ready to use!

(Source: http://woork.blogspot.com/2007/12/liquid-layer-with-rounded-corners-using.html )

tr.traGraph {
background-image: url(departments/mis/web/trafficStats/images/traBkg.gif);
background-repeat: no-repeat;
background-position: left;
height: 400px;
}

td.traPgGraph {
background-position: 20% 0%;
}

Simply give the TR a “position: relative” attribute and then give the TD a “background-image: none” attribute.

http://snook.ca/archives/html_and_css/applying_a_back/

http://www.mynameisal.com/wordpress/?p=82

Tags: ,
a:focus{ outline:none}
/*remove outline from clicked links*/
*|*:-moz-any-link:focus{outline-width:0!important}
/*remove outline inputs*/
input:focus::-moz-focus-inner{border-color:transparent!important}

a:focus{ outline:none}

/*remove outline from clicked links*/

*|*:-moz-any-link:focus{outline-width:0!important}

/*remove outline inputs*/

input:focus::-moz-focus-inner{border-color:transparent!important}

Tags: