Adventures in CSS: a seal of approval

Published on 3/25/2011

---

Here’s how to make a nice “seal of approval” using only cascading style sheets. This only works in REAL browsers for now (webkit/firefox), but there are other options for IE

Approved!

it should look like this image:

Here we have a simple div tag:

And we apply some css styles to it:

1. to make it a circle, apply border-radius:50%;
2. to rotate the div, use -webkit-transform: rotate(20deg);
3. give the background a nice radial gradient with: -webkit-gradient(radial, 50% 0%, 1, 50% 0%, 200, from(#B00000), to(#600000));
4. give it a subtle shadow with: box-shadow: 2px 2px 2px gray;

Here’s the full CSS:

.seal
{
    height:200px;
    width:200px;
    text-align:center;
    color:white;
    font-family:Trebuchet MS;
    font-size:xx-large;
    line-height:200px; /*center text vertically*/
    background-color:#600000; /*fallback for other browsers*/

    border-radius:50%;
    -moz-border-radius:50%;

    -webkit-transform:rotate(20deg);
    -moz-transform: rotate(20deg);

    background: -webkit-gradient(radial, 50% 0%, 1, 50% 0%, 200, from(#B00000), to(#600000));
    background: -moz-radial-gradient(50% 0%, cover, #B00000, #600000);

    box-shadow: 2px 2px 2px gray;
    -moz-box-shadow: 2px 2px 2px gray;
}

... views