.::. Vuthy Sok .::. Web Developer

If you would like put the inner shadow only bottom box. you can use css3 to adjust shadow HTML <div class="box"></div>  CSS div.box {     background:red;     height:100px;     width:200px;     -moz-box-shadow: inset 0 -10px 10px -10px #000000;     -webkit-box-shadow: inset 0 -10px 10px -10px #000000;     box-shadow: inset 0 -10px 10px -10px #000000; }

Today I would like to show how to add background-color, border-radius and color to ordered list. if you make your look at nice on your website so it easy way to to like below: 1. HTML <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> 1. CSS <style>     body { counter-reset: item; } ol { list-style: none; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; } </style> Working Demo

Here code for fixed issue on Galaxy S4 border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only scre...

div.banner img { max-width: 500px; width: expression(this.width > 500 ? 500: true); }

W3Schools offers a comprehensive CSS3 reference: http://w3schools.com/css3/default.asp CSS3.Info contains tons of great articles on the newest CSS3 stuff: http://www.css3.info/ Pixel2Life offers a ton of tutorials: http://www.pixel2life.com/tutorials/css_stylesheets/ Check out Good-Tutorials for more CSS tutorials: http://www.good-tutorials.com/tutorials/css NetTuts+ has a lot of great articles and tutorials on CSS3: http://net.tutsplus.com/?s=css3

Some browser when you click on link text or link image you always see outline box around text or image link. a, object { outline: none; }

You can use the CSS3 'resize' property to "specify whether or not an element is resizable by the user": textarea { resize:none; } or you can use textarea { max-width: 175px; /* RESTRICT SAFARI RESIZE */ max-height: 250px; /* RESTRICT SAFARI RESIZE */ }