Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

HALF ROUNDED CORNERS - PURE CSS

css codes :
background:#493c06 none repeat scroll 0 0;
   
-webkit-border-top-left-radius:5px;
-khtml-border-radius-topleft:5px;   
-moz-border-radius-topleft:5px;
border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;
-khtml-border-radius-topright:5px;   
-moz-border-radius-topright:5px;
border-top-right-radius:5px;

half rounded corners actual result:




ps: tested on firefox

ROUNDED CORNERS - PURE CSS

Here's the css code:
 border:solid #343530 1px;
 background:#0A0D06 none repeat scroll 0 0;

-webkit-border-radius:5px;
-khtml-border-radius:5px;   
-moz-border-radius:5px;
border- radius:5px;


CSS - Rounded Corners actual result:

Hello World!


ps: tested on firefox.

CSS Transparency

.off{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.on {
filter:alpha(opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
-khtml-opacity: 0.20;
}

CSS Sticky Div - footer

#footer{
background:#ccc none repeat scroll 0%;
border-top:1px solid #666666;
bottom:0pt;
color:#09f;
font-size:x-small;
font-style:normal;
height:1.8em;
left:0pt;
padding:0pt;
position:fixed;
text-align:center;
width:100%;
}

CSS Sticky Div on top of my page

I wanted to create a div that will serves as toolbar on my page till i come up with this one.

STICKY DIV ON TOP ON MY PAGE : CSS
----------------------------------

#tool-bar {
background:#777777 none repeat scroll 0%;
border-bottom:1px solid #292929;
color:#ccc;
font-size:85%;
padding-top:2px;
height:15px;
left:0pt;
position:fixed;
top:0pt;
width:100%;
z-index:1;
}



On my html page
------------------
<div id=\"tool-bar\">
My Tool Bar Floating on top of my page
</div>