How To Create Circles With CSS3 and No Images

Thanks to CSS3 it’s now possible to create circles with only code. Look ma, no images! In the following post, I’ll show you how to create full, half and quarter circles using only CSS. Unfortunately, the half and quarter circles only work in Firefox at this time. The trick to creating the circles, is the use of the border-radius selector. Coding a full circle Below are the styles for creating a full circle. »

CSS3 Multiple Backgrounds

CSS3 has a nifty feature that I wasn’t aware of until recently: multiple backgrounds per element. This was something I used to wish for frequently before I got used to faking it by nesting DIVs and assigning them single backgrounds. Chris Coyier’s CSS-Tricks blog pointed this neat part of the spec out. The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. »

How to create nice color indicator with CSS3

Hello everybody who is interested in different css ornamentation :) . Today I’ll explain how to create next element with CSS3. Here is HTML: <div class="circle"><div></div></div> And CSS: .circle { background: #c0c0c0; background: -moz-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0c0c0), color-stop(50%,#505050), color-stop(100%,#c0c0c0)); background: -webkit-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%); background: -o-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%); background: -ms-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%); background: linear-gradient(to bottom, #c0c0c0 0%, #505050 50%, #c0c0c0 100%); filter: progid:DXImageTransform. »