Posts

Showing posts from July 8, 2011

Change Text Selection highlight Color in Css3

::selection { background: #ffb7b7; /* Safari */ } ::-moz-selection { background: #ffb7b7; /* Firefox */ }

Rounded Corners in CSS3

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1 CSS3 Mozilla WebKit border- top-right-radius -moz-border- radius-topright -webkit-border- top-right-radius border- bottom-right-radius -moz-border- radius-bottomright -webkit-border- bottom-right-radius border- bottom-left-radius -moz-border- radius-bottomleft -webkit-border- bottom-left-radius border- top-left-radius -moz-border- radius-topleft -webkit-border- top-left-radius border- radius -moz-border- radius -webkit-border- radius Here is example for Rounded Corner in CSS3 <div class="content-box"> <h2>Four Corners</h2> <p>This box has all corners rounded.</p> </div> <style type="text/css"> .content-box { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AFAFAF; border-radius: 5px 5px 5px 5px; height: 200px; margin: 10px auto 0; width: 600px; } </style>

Multiple Backgrounds with CSS3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. Here’s a basic example: This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner). <div class="examplemultiplebackgrounds"> <p>This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner).</p> </div> <style type="text/css"> div.examplemultiplebackgrounds { width: 446px; height: 395px; background-image: url(images/balloon-orange.png), url(images/landscape.jpg); background-position: