Renkli Kutular 1.2 çalışmasını paylaşcaz Bende sitesinden bakarak yaptım sizlere sunuyorum yarar bir kod olur bizede adımları dikkatli şekilde takip edelim.

Css

/*
Description: Renkli Kutular
Author: Bay Klavye
*/

.not {background: #E3F0F2 url(https://img.webme.com/pic/h/hibycocuk/note.png) center no-repeat; border: 1px solid #66CCCC; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

.fox {background: #ffffa0 url(https://img.webme.com/pic/h/hibycocuk/alert.png) center no-repeat; border: 1px solid #E6DB55; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

.tiyo {background: #F7BE81 url(https://img.webme.com/pic/h/hibycocuk/tip.png) center no-repeat; border: 1px solid #800517; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

.siir {background: #FBEFFB url(https://img.webme.com/pic/h/hibycocuk/siir.png) center no-repeat; border: 1px solid #800517; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

.max {background: #CEF6E3 url(https://img.webme.com/pic/h/hibycocuk/video.png) center no-repeat; border: 1px solid #0B610B; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

.soru {background: #CCFFFF url(https://img.webme.com/pic/h/hibycocuk/soru.png) center no-repeat; border: 1px solid #3399FF; background-position: 7px 50%; text-align: left; padding: 10px 10px 10px 45px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

Htm

<p class="not">HiByCocuk.tr.gg</p>
<p class="fox">HiByCocuk.tr.gg</p>
<p class="tiyo">HiByCocuk.tr.gg</p>
<p class="siir">HiByCocuk.tr.gg</p>
<p class="max">HiByCocuk.tr.gg</p>
<p class="soru">HiByCocuk.tr.gg</p>

İkonları değişmek isterseniz alttaki linkten güzel ikonlar bulabilirsiniz

• http://www.iconfinder.com/browse