Opacity CSS Code
A collection of CSS Code snippets. CSS Code Set #1 contains code of opacity, eliminating border outlines, and resetting web pages.
Repost. Originally posted 8/12/2011.
This is a cross browser CSS code that results in a 50% opacity to what ever it is applied to (i.e. images, links) Some of the code included is CSS 3 and may not work in some browsers.', '
The CSS Code:
.my-opacity {
filter:alpha(opacity=50); /* msie */
-moz-opacity: 0.50; /* firefox 1.0 */
-khtml-opacity: 0.50; /* webkit */
opacity: 0.50; /* css 3 */
}
Please note that this is written as class, not a div.
Rounded Corners CSS Code
A CSS 3 code to create rounded corners.
Warning: This is CSS 3 code and as yet may not work in all browsers.
CSS Sample Code:
#round{height:35px;
background-color:#ff0000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
HTML in body:
<div=""round"">Rounded Corner CSS Example</div>
CSS Border Outlines
How to eliminate the dotted outlines on link elements such as banners, graphics, buttons, etc.
For those who like css reset styles, neutralize all focus outlines. (Just remember to rebuild them for usability):
* :focus { outline: 0; }
A bit draconian but clear focus style is important for tabbed browsing. I''ve personally come to prefer the previous method whenever
possible.
For single problem elements (in this case a linked header) that will also work with older Mozilla and Firefox browsers:
div#header a:focus, div#header a:active {
outline: 0 none;
-moz-outline: 0 none;
}
CSS Code Reset
A sampling of CSS reset codes.
For those who desire to reset all the code to work with essentially a fresh slate here are some extremely simple CSS reset codes that are commonly used.
* {
padding: 0;
margin: 0;
}
or
* {
padding: 0;
margin: 0;
border: 0;
}
or combining the outline reset
* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
Of course there are some pretty elaborate reset CSS codes available out there to give the web author and designers out there even greater control.
