Posts filed under ‘Css3’

Pure CSS3 box-shadow page curl effect

<![CDATA[

<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul.box {
margin: 0;
padding: 0; }

ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;
width: 250px;
height: 150px;
border: 1px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

ul.box li:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

ul.box li:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

Handcoded in Coda with love by Matt Hamm www.matthamm.com
thanks to www.ballyhooblog.com for the inspiration.

]]>

07,12,2010 at 17:10 1 yorum

Create a Multi-step Register Form with jQuery

<![CDATA[

Post Source

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and
jQuery. To spice up things a bit, we will include progress bar with the form, so the users
will be able to see the percentage of form completion.

You can take a look at the working demo if you click on the image below:

Create A Multi-Step Signup Form With CSS3 and jQuery DEMO

We will create four steps in our form:

1. username and password fields

2. first and last name and email address

3. age, gender and country

4. summary

HTML Code

First thing to do is to create the html structure. We need a box container with four divs,
one for each step. The basic HTML code is the following:

<div id="container">
    <form action="#" method="post">

        <div id="first_step">

        <div id="second_step">
        <div id="third_step">
        <div id="fourth_step">

    </form>
</div>

Inside each box container we will put the fields and a simple helpfull label. You can see
the code inside the first box in the code below:

<!-- #first_step -->
<div id="first_step">
    <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

    <div class="form">
        <input type="text" name="username" id="username" value="username" />

        <label for="username">At least 4 characters. Uppercase letters, lowercase letters and
numbers only.</label>

        <input type="password" name="password" id="password" value="password" />

        <label for="password">At least 4 characters. Use a mix of upper and lowercase for a
strong password.</label>

        <input type="password" name="cpassword" id="cpassword" value="password" />

        <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue
with signup.</label>
    </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix
-->
    <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />

</div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix
-->

We have used three input fields: username, password and confirm password and at the end of
the box, an input submit for the next step. The other boxes work in the same way.

Create A Multi-Step Signup Form With CSS3 and jQuery

At the end of the container box you can see a simple progress bar. This is the necessary
code:

<div id="progress_bar">

    <div id="progress"></div>
    <div id="progress_text">0% Complete</div>
</div>

The complete HTML code is the following:


        <div id="container">
        <form action="#" method="post">

            <!-- #first_step -->
            <div id="first_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="username" id="username" value="username" />

                    <label for="username">At least 4 characters. Uppercase letters, lowercase
letters and numbers only.</label>

                    <input type="password" name="password" id="password" value="password" />

                    <label for="password">At least 4 characters. Use a mix of upper and
lowercase for a strong password.</label>

                    <input type="password" name="cpassword" id="cpassword" value="password"
/>

                    <label for="cpassword">If your passwords aren’t equal, you won’t be able
to continue with signup.</label>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_first" id="submit_first"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #second_step -->
            <div id="second_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="firstname" id="firstname" value="first name" />

                    <label for="firstname">Your First Name. </label>
                    <input type="text" name="lastname" id="lastname" value="last name" />

                    <label for="lastname">Your Last Name. </label>
                    <input type="text" name="email" id="email" value="email address" />

                    <label for="email">Your email address. We send important administration
notices to this address</label>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_second" id="submit_second"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #third_step -->
            <div id="third_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <select id="age" name="age">

                        <option> 0 - 17</option>
                        <option>18 - 25</option>
                        <option>26 - 40</option>
                        <option>40+</option>

                    </select>
                    <label for="age">Your age range. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                    <select id="gender" name="gender">

                        <option>Male</option>
                        <option>Female</option>
                    </select>
                    <label for="gender">Your Gender. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                    <select id="country" name="country">
                        <option>United States</option>
                        <option>United Kingdom</option>

                        <option>Canada</option>
                        <option>Serbia</option>
                        <option>Italy</option>
                    </select>

                    <label for="country">Your country. </label> <!-- clearfix
--><div class="clear"></div><!-- /clearfix -->

                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->

                <input class="submit" type="submit" name="submit_third" id="submit_third"
value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!--
/clearfix -->

            <!-- #fourth_step -->
            <div id="fourth_step">

                <h1>SIGN UP FOR A FREE <span>WEBEXP18</span> ACCOUNT</h1>

                <div class="form">
                    <h2>Summary</h2>

                    <table>
                        <tr><td>Username</td><td></td></tr>
                        <tr><td>Password</td><td></td></tr>

                        <tr><td>Email</td><td></td></tr>
                        <tr><td>Name</td><td></td></tr>

                        <tr><td>Age</td><td></td></tr>
                        <tr><td>Gender</td><td></td></tr>

                        <tr><td>Country</td><td></td></tr>
                    </table>
                </div>      <!-- clearfix --><div
class="clear"></div><!-- /clearfix -->

                <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth"
value="" />

            </div>

        </form>
        </div>
        <div id="progress_bar">
            <div id="progress"></div>

            <div id="progress_text">0% Complete</div>
        </div>

As you can see, in the fourth step the table is empty. We fill it with the information
entered by the users using jQuery.

CSS Code

Now we need to add the style on the form. First, we use the @fontface rule for using a
custom font. Ive used the Cantarell
font
. The complete CSS Code is listed below:

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

@font-face {
   font-family: 'Cantarell';
   src: url(../fonts/Cantarell-Regular.eot);
   src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype');
}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: url('../images/container.png') no-repeat;
    width: 754px;
    height: 370px;
    margin: 20px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
    #container #first_step, #second_step, #third_step, #fourth_step { display: none; }
    #container #first_step { display: block; }

    #container .form { margin: 66px 72px 0 72px; }

    #container h1, #container h2 {
        font-size: Cantarell, Verdana, sans-serif;
        text-align: center;
        font-size: 24px;
        text-shadow: 1px 1px 2px #222;
    }
        #container h1 span { color: #a90329; }

    #container h2 {
        color: #888;
        font-size: 20px;
        text-align: left;
        text-shadow: none;
    }

    #container table {
        margin: 20px 40px;
        font-size: 14px;
        font-weight: bold;
    }
        #container table td {
            padding: 5px 10px;
        }
            #container table td:nth-child(2) {
                color: #a90329;
            }

    #container input, #container select {
        background: url('../images/input.png') no-repeat;
        color: #888;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        height: 35px;
        padding: 0 25px;
        margin: 20px 0;
        float: left;

        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }
        #container input.submit {
            background: url('../images/button.png') no-repeat;
            border: none;
            cursor: pointer;
            width: 85px;
            height: 38px;
            position: relative;
            bottom: 2px;
            left: 655px;
        }
            #container input.submit:focus { border: none; }

        #container input.send{ background: url('../images/send.png') no-repeat; }

        #container input.error { border: 1px solid red; }
        #container input.valid { border: 1px solid #1FFF00; }

        #container input:focus, #container select:focus {
            border: 1px solid #a90329;
            color: #a90329;
        }

    #container select { padding: 5px 0 5px 25px; }
        #container option { padding: 0 15px; }

    #container label {
        color: #666;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        float: right;
        margin: 23px -25px;
        width: 270px;
    }

#progress_bar {
    background: url('../images/progress_bar.png') no-repeat;
    width: 339px;
    height: 24px;
    margin: 0 auto;
    position: relative;
}

#progress {
    background: url('../images/progress.png') repeat-x;
    width: 0px;
    height: 23px;

    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
#progress_text {
    position: relative;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px #222;
    width: 339px;
    height: 24px;
    top: -23px;
    left: 0;
}

Create A Multi-Step Signup Form With CSS3 and jQuery

jQuery Code

Were going to use jQuery for:

– slide the steps

– check if the data are valid

– change the completion percentage of progress bar

Create A Multi-Step Signup Form With CSS3 and jQuery

We need load jQuery library inside the page and then to use two plugins:

jQuery UI,
the most famous plugin used to extend the jQuery functionality.

jQuery
inputfocus
, my jQuery plugin used to manage focus and blur events of the form.

Our jQuery code is listed below:

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'cpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'email'  : 'email address'
    };

    //inputfocus
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#email').inputfocus({ value: field_values['email'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
            if( $('#password').val() != $('#cpassword').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();
            }
        } else return false;
    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || (
$(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Complete');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();
        } else return false;

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();
    });

    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');
    });

});

The code from row 3 to 20 activate the inputfocus plugin to each input
field. The code from row 27 to 64 check the validity of the data entered by the user (if
username and password length is greather than 4 characters, if the password and confirm
password fields are equal), then update the progress bar value and then slide to second
step.

The code from row 71 to 100 check the data integrity for the second step (if first and last
name arent empty and if the email address is valid). The rest is similar to the previous
code.

Create A Multi-Step Signup Form With CSS3 and jQuery

Conclusions and Download

We have seen how simple its to create a multistep signup form. This is only an example so I
omitted some features as back button, and more others. Anyway the example is ready to use
and it needs only to change the form action with the link of your php file used to store
data and to edit the jQuery line 125 to: $(form).submit();. You can also decide to
use an AJAX calls to send the informations to server, and again its very easy to implement.

To see form in action click on the image below:

Create A Multi-Step Signup Form With CSS3 and jQuery DEMO

and if you like the final result download form files using the below button.

Download Files

]]>

27,11,2010 at 2:09 2 yorum

Understanding CSS3 Transitions

<![CDATA[

Post Source

What are CSS transitions?

I like to think of CSS transitions like butter, smoothing out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing. Unlike real butter, transitions aren’t fattening—they’re just a few simple rules in your stylesheet to enrich certain events in your designs.

The W3C explains CSS transitions
quite simply:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

A simple example

Here’s a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change—an effect previously only possible using Flash or JavaScript, but now possible with a few simple lines of CSS.

The markup is a simple hyperlink, like so:


<a href="#" class="foo">Transition me!</a>

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover:

a.foo {
  padding: 5px 10px;
  background: #9c3;
  }
a.foo:hover {
  background: #690;
  }

Fig. 1: The normal and :hover state of the link.

Now let’s add a transition to that background color change. This will smooth out and animate the difference over a specified period of time.

http://www.youtube.com/v/8v7ltfDGKTc?fs=1&hl=en_US

Fig. 2: Here we can see the smooth transition of light green to darker green background.

For the time being, we’ll use only the vendor-prefixed properties which currently work in WebKit-based browsers (Safari and Chrome) to keep things simple. Later, we’ll add vendor prefixes for Mozilla and Opera.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }

You’ll notice the three parts of a transition in the declaration:

  • transition-property: The property to be transitioned (in this case, the background property)
  • transition-duration: How long the transition should last (0.3 seconds)
  • transition-timing-function: How fast the transition happens over time (ease)

Timing functions (or, I really wish I’d paid attention in math class)

The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).

If you slept through geometry in high school like I did, don’t worry. I recommend simply plugging in each of these timing function values to see how they differ.

For our simple example, the duration of the transition is so quick (just a mere 0.3 seconds) that it’d be difficult to tell the difference between the six options. For longer animations, the timing function you choose becomes more of an important piece of the puzzle, as there’s time to notice the speed changes over the length of the animation.

When in doubt, ease (which is also the default value) or linear should work just fine for short transitions.

We could simplify the declaration significantly by using the transition shorthand property:

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

Now we have a much more compact rule that accomplishes the same result.

All of this wonderful transitioning works just fine in WebKit browsers, but what about the others?

Browser support

As I mentioned earlier, transitions were initially developed by WebKit, and have been in Safari and Chrome since version 3.2, but Opera supports them as well in version 10.5
and support has been promised in Firefox 4.0. Because of that present and near-future support, it’s important to add the appropriate vendor prefixes so that our transitions will work in more browsers as support is rolled out.

Building the full transition stack

Here’s a revised declaration, adding the –moz- and –o- prefixes as well as the actual CSS3 transition property. We’re putting the non-prefixed property last in the stack to ensure that the final implementation will trump the others as the property moves from draft to finished status.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover {
  background: #690;
  }

With that stack, we’ll be smoothing out that background color change in current versions of Safari, Chrome, and Opera, as well as future versions of any browser that chooses to support it.

Transitioning states

I remember being slightly confused when I first started playing around with CSS Transitions. Wouldn’t it make more sense if the transition properties were placed in the :hover declaration, since that’s the trigger for the transition? The answer is that there are other possible states of an element besides :hover, and you’ll likely want that transition to happen on each of those without duplication.

For instance, you may want the transition to also happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.

The following example adds the same background switch to the :focus state. This enables triggering the transition from either hovering over or focusing the link (via the keyboard, for example).

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  background: #690;
  }

Transitioning multiple properties

Let’s say that along with the background color, we also want to change the link’s text color and transition that as well. We can do that by stringing multiple transitions together, separated by a comma. Each can have their varying duration and timing functions (fig. 3).

http://www.youtube.com/v/YhFJH7ryUzQ?fs=1&hl=en_US

Fig. 3: The normal and :hover states of the link.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background .3s ease,
    color 0.2s linear;
  -moz-transition: background .3s ease,
    color 0.2s linear;
  -o-transition: background .3s ease, color 0.2s linear;
  transition: background .3s ease, color 0.2s linear;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

Transitioning all possible properties

An alternative to listing multiple properties is using the all value. This will transition all available properties.

Let’s drop all into our simple example instead of listing background and color separately. They’ll now share the same duration and timing function.

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  }
a.foo:hover,
a.foo:focus {
  color: #030;
  background: #690;
  }

This is a convenient way of catching all the changes that happen on :hover, :focus, or :active events without having to list each property you’d like to transition.

Which CSS properties can be transitioned?

Now that we’ve successfully transitioned the background and color of a hyperlink, there are many other CSS properties that can be transitioned, including width, opacity, position, and font-size. A chart of all the possible properties
(and their types) that can be transitioned is available from the W3C.

Why not use JavaScript instead?

You might be wondering, with not all browsers supporting (or at least promising support for) CSS Transitions, why not use a JavaScript solution to handle the animation? Popular frameworks such as jQuery, Prototype, and script.aculo.us
have enabled animations via JavaScript that work cross-browser for some time now.

It all depends on how crucial the transitions are to the experience. I’m stressing here in this little book that you can embrace the simplicity and flexibility of CSS3 if you choose the appropriate parts of the user experience to apply it: enriching the interactions that happen on the page. Quite often, the animation of these interactions when handled by CSS Transitions aren’t integral to the brand, readability, or layout of the website. Therefore, a few simple lines of CSS to trigger a simple animation that’s native to the browsers that support it (rather than tapping into a JavaScript framework) seems like a smart choice. And one I’m glad we have at our disposal.

]]>

23,11,2010 at 23:56 Yorum bırakın

CSS3 Media Queries

<![CDATA[

Post Source

CSS3 Media Queries


CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries

(demo)

Check my demo
and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

  • Large size:
    3 columns sidebar
  • Smaller:
    2 columns sidebar (the middle column drops to the left column)
  • Even smaller:
    1 column sidebar (the right column shift up below the logo)
  • Smallest:
    no sidebar (logo & right column shift up and the other sidebar columns move below)

screen capture

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

screen capture

A List Apart

  • Large size:
    navigation at the top, 1 row of pictures
  • Medium size:
    navigation on the left side, 3 columns of pictures
  • Small size:
    navigation at the top, no background image on logo, 3 columns of pictures

screen capture

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

screen capture

]]>

22,11,2010 at 17:45 Yorum bırakın

Upcoming Firefox 4 CSS Transitions

<![CDATA[

Post Source

Introduced in Gecko 2 (Firefox 4)

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

Certain SVG properties can also be animated.

Note:
Because the CSS transitions specification is still in draft form, all properties associated with them are prefixed with “-moz-” for use in Gecko. For compatibility with WebKit, you should also use the “-webkit-” prefix, and for Opera compatibility, use the “-o-” prefix. So, for example, you would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

Example Video

If you’re running a recent Gecko or WebKit nightly build, you can try this live example by clicking here.

CSS transition properties

CSS transitions are controlled using the -moz-transition
shorthand property. This is the preferred way to set up your transitions, because it makes it easier to avoid getting your parameter list lengths out of sync, which can result in a frustratingly large amount of time spent debugging of your CSS.

If you wish, you can control the individual components of the transition using the following sub-properties:

-moz-transition-property
Specifies the name or names of the CSSproperties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
-moz-transition-duration
Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.
-moz-transition-timing-function
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
-moz-transition-delay
Defines how long to wait between the time a property is changed and the transition actually begins.

Detecting the completion of a transition

There is a single event that is fired when transitions complete. The “transitionend” event offers two properties:

propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn’t affected by the value of -moz-transition-delay.

As usual, you can use the element.addEventListener()
method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);
Note:
The “transitionend” event doesn’t fire if the transition is aborted because the animating property’s value is changed before the transition is completed.

Properties that can be animated

CSStransitions can be used to animate the following properties.

Note:
The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don’t currently animate, because someday they might, causing unexpected results.
Property Value type

background-color

<color>

background-image

gradients only (not implemented as of 2010/04/11. see here)

background-position

<percentage>

<length>

background-size

<percentage>

<length>

border-color (including sub-properties)

<color>

border-radius,(including sub-properties)

<percentage>

<length>

border-width (including sub-properties)

<length>

border-spacing

<length>

bottom

<percentage>

<length>

-moz-box-flex

number

box-shadow

shadow

color

<color>

-moz-column-count

number

-moz-column-gap

<length>, keywords

-moz-column-rule-color

<color>

-moz-column-rule-width

<length>, keywords

-moz-column-width

<length>

clip

rectangle
fill paint
fill-opacity opacity-value
flood-color

<color> | keywords

font-size

<percentage>

<length>

font-size-adjust

number, keywords

font-stretch

keywords

font-weight

number | keywords (excluding bolder, lighter)

height

<percentage>

<length>

-moz-image-region

rect()

left

<percentage>

<length>

letter-spacing

<length>

lighting-color

<color> | keywords

line-height

number | 

<percentage>

<length>

margin (including sub-properties)

<length>

marker-offset

<length>

max-height

<percentage>

<length>

max-width

<percentage>

<length>

min-height

<percentage>

<length>

min-width

<percentage>

<length>

opacity

number

outline-color

<color>

outline-offset

integer

-moz-outline-radius (including sub-properties)

<percentage>

<length>

outline-width

<length>

padding (including sub-properties)

<length>

right

<percentage>

<length>

stop-color

<color> | keywords

stop-opacity opacity-value
stroke paint
stroke-dasharray dasharray
stroke-dashoffset

<percentage>

<length>

stroke-miterlimit miterlimit
stroke-opacity opacity-value
stroke-width

<percentage>

<length>

text-indent

<percentage>

<length>

text-shadow

shadow

top

<percentage>

<length>

-moz-transform-origin

<percentage>

<length>, keywords

-moz-transform

transform-function

vertical-align

<percentage>

<length>, keywords

visibility

visibility

width

<percentage>

<length>

word-spacing

<percentage>

<length>

z-index

integer

When property value lists are of different lengths

If any property’s list of values is shorter than the others, its values are repeated to make them match. For example:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s;
	}

This is treated as if it were:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s, 3s, 5s;
	}

Similarly, if any property’s value list is longer than that for -moz-transition-property, it’s truncated, so if you have the following CSS:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s, 2s, 1s;
	}

This gets interpreted as:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s;
	}

Read More
]]>

21,11,2010 at 21:56 Yorum bırakın

Build a Practical Pure CSS3 Button

<![CDATA[

Post Source

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in May, 2010.

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Video Tutorial

http://blip.tv/play/gcMVgd3hegI%2Em4v

Final Code

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>
	<style>

	/* CUSTOM FONT */
	@font-face {
		font-family: 'EfonRegular';
		src: url('font/EFON-webfont.eot');
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	body {
	 width: 400px;
	 margin: 200px auto;
	 background: #666;
	}

	.button {
	 width: 400px;
	 height: 100px;
	 line-height: 100px;
	 color: white;
	 text-decoration: none;
	 font-size: 50px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));

	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;

	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	}

	/* WHILE HOVERED */
	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
	}

	/* WHILE BEING CLICKED */
	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
	}
	/* FONT GLYPH (MOSTLY FOR FUN) */
	.button:before {
		font-family: EfonRegular;
		content: 'v';
		color: #09232F;
		font-size: 90px;
		float: left;
		margin-left: 35px;
		margin-right: -10px;
		text-shadow: 0 1px 0 #4190AF;
	}

	</style>
</head>
<body>
     <a href="#" class="button"> Follow Me </a>
</body>
</html>

Result

]]>

19,11,2010 at 16:25 Yorum bırakın

HTML/CSS/JS – Best Practices and Optimization Techniques

<![CDATA[

]]>

31,10,2010 at 12:07 Yorum bırakın

Eski Yazılar