CSS - Advanced

Introduction

Here's some code that show some advanced of CSS that is practical for use.

Rounded Box

It's easy to make a rounded box. Even you don't need use image for it.

Code

<div>You don't need image for making box looks like rounded</div>

<style>
div{
    border: 1px solid #af0;
    padding: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
</style>

The result will be:

You don't need image for making box looks like rounded

Box Shadow

May be you ask how to make Apple website's box shadow? It's easy to make it, you just need to add one line: -moz-box-shadow for mozilla gecko, or -webkit-box-shadow for webkit based engine (Safari and Chrome) or just box-shadow for modern browser.

CSS Code

<div>Looks, it like apple box</div>

<style>
div{
    border: 1px solid #ccc;
    padding: 5px;
    -moz-box-shadow: 0 0 4px #88f;
    -webkit-box-shadow: 0 0 4px #88f;
    box-shadow: 0 0 4px #88f;
}
</style>

The result will be:

Looks, it like apple box

Nicer ComboBox

Here's the code will make the combobox looks nicer.

HTML Code:

<select>
    <option>Select A Fruit</option>
    <option>Apple</option>
    <option>Banana</option>
    <option>Mango</option>
    <option>Orange</option>
</select>

<style>
select{
    border: 1px solid #ccc;
    padding: 1px;
}
</style>

The above will result:     Select A Fruit Apple Banana Mango Orange

CSS - Advanced