CSS3: Introduction

This entry is part 1 of 13 in the series CSS3

CSS3 is the newest interation of the CSS specification.

There are a few new features in CSS3:

  • Responsive design with media queries
  • Gradients
  • Transitions
  • Transformations
  • Animation

In this basic introduction, we try to cover some of the new features found in CSS3.

CSS3: Creating a responsive design with media queries

This entry is part 2 of 13 in the series CSS3

You might want to have a design that will work in handphone, tablet or a normal desktop.

CSS3 Media Queries give you the ability to have the display adjust to different screen widths, heights and even orientation.

In the CSS3 style below, we have the normal desktop where the background will be black, a screen size of between 320px to 400px (handphone) where the background will be blue and a screen size of 401px to 1024px where the background will be red.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - CSS3</title>
    <style>
        body {
            background: black;
            color: #fff;
            font-family: tahoma, verdana, sans-serif;
        }

        h1 {
            font-size: 3em;
        }

        p {
            font-size: 2em
        }

        @media screen and (min-width: 320px) and (max-width: 400px) {
            body {
                background: blue;
            }
            h1 {
                font-size: 2.2em;
            }
            p {
                font-size: 1.5em;
            }
        }

        @media screen and (min-width: 401px) and (max-width: 1024px) {
            body {
                background: red;

            }
            h1 {
                font-size: 2.5em;
            }
            p {
                font-size: 1.8em;
            }
        }
    </style>
</head>
<body>

<h1>British Rock</h1>

<p>Rod Stewart is one of the
    most popular best-selling music artists of all time, having sold over 100 million records worldwide.
</p>

</body>
</html>

 

CSS3: Making buttons with CSS gradients

This entry is part 3 of 13 in the series CSS3

Using CSS3, we can design some nice subtle buttons without any images.

As the gradients are scalable, you will find that it is actually less hassle to design buttons using CSS3 than to use images.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - CSS3</title>
    <style>
        div.container {
            height: 200px;
            width: 200px;
            background: -moz-linear-gradient(white, black);
            background: -webkit-linear-gradient(white, black);
            background: linear-gradient(white, black);
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class='container'>
    <p>Oversized Button</p>
</div>

</body>
</html>

Line 10 above is for Mozilla Firefox.  Line 11 is for Safari and Chrome webkit.  Line 12 is the official CSS3 gradient.

The white and black inside the brackets are the start and stop colors of the gradient.

CSS3: Designing buttons with attributes

This entry is part 4 of 13 in the series CSS3

We will now design 3 buttons with a combination of attribute selectors, box shadow, border-radius, multiple backgrounds, and CSS gradients to achieve the effects as in the buttons below.
 
CSS Gradients

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Gradients</title>
    <style>
        input {
            border: none;
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            -webkit-border-radius: 10px;
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
            font: bold 1.2em Arial, Helvetica, sans-serif;
            margin: 0 10px 0 0;
            padding: 10px 10px 10px 10px;
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        }

        input[type='submit'] {
            background: #91BD09;
            background: -webkit-linear-gradient(#91BD09, #578730);
            background: -moz-linear-gradient(#91BD09, #578730);
            background: linear-gradient(#91BD09, #578730);
        }

        input[value='Cancel'] {
            background: #b53109;
            background: -webkit-linear-gradient(#b53109, #540303);
            background: -moz-linear-gradient(#b53109, #540303);
            background: linear-gradient(#b53109, #540303);
        }

        input[type='reset'] {
            background: #f0bb18;
            background: -webkit-linear-gradient(#f0bb18, #a46b07);
            background: -moz-linear-gradient(#f0bb18, #a46b07);
            background: linear-gradient(#f0bb18, #a46b07);
        }

    </style>
</head>
<body>

<input type='submit' id='submit' name='submit' value='Submit'/>
<input type='reset' id='reset' name='reset' value='Reset'/>
<input type='submit' id='cancel' name='cancel' value='Cancel'/>

</body>
</html>

CSS3: Animated button using transition on mouse hover

This entry is part 5 of 13 in the series CSS3

Here we show a transition of a link button changing its color from gray to black.

The color that we want to transition to is on the :hover.

Without setting the transition effect, it will change to black immediately.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transistions</title>
    <style>
        a {
            background: gray;
            border-radius: 5px;
            display: block;
            float: left;
            padding: 5px;
            text-align: center;
            width: 125px;
            -webkit-transition: all 1s ease-in;
            -moz-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;
        }

        a:hover {
            background: black;
            color: white;
        }
    </style>
</head>
<body>

<a href='//yahoo.com'>Link to Yahoo</a>

</body>
</html>

The key piece of CSS is transition: all 1s ease-in.  With this line, the browser will animate all the properties (background and color) to use the ease-in timing function.

The total time of transition is 1 second.