Apple-like Login Form with CSS 3D Transforms

download

The markup

We need two forms – login and recover. Each form will have a submit button, and text/password inputs:

index.html

        <div id="formContainer">
            <form id="login" method="post" action="./">
                <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
                <input type="password" name="loginPass" id="loginPass" placeholder="Password" />
                <input type="submit" name="submit" value="Login" />
            </form>
            <form id="recover" method="post" action="./">
                <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
                <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
                <input type="submit" name="submit" value="Recover" />
            </form>
        </div>

Note the IDs of the elements in the form. We will be using them extensively in the CSS part. Only one of these forms will be visible at a time. The other will be revealed during the flip animation. Each form has aflipLink anchor. Clicking this will toggle (add or remove) the flipped class name on the #formContainer div, which will in turn trigger the CSS3 animation.

The jQuery Code

The first important step is to determine whether the current browser supports CSS3 3D transforms at all. If it doesn’t, we will provide a fallback (the forms will be switched directly). We will also use jQuery to listen for clicks on the flipLink anchors. As we will not be building an actual backend to these forms we will also need to prevent them from being submitted.

Here is the code that does all of the above:

assets/js/script.js

$(function(){

    // Checking for CSS 3D transformation support
    $.support.css3d = supportsCSS3D();

    var formContainer = $('#formContainer');

    // Listening for clicks on the ribbon links
    $('.flipLink').click(function(e){

        // Flipping the forms
        formContainer.toggleClass('flipped');

        // If there is no CSS3 3D support, simply
        // hide the login form (exposing the recover one)
        if(!$.support.css3d){
            $('#login').toggle();
        }
        e.preventDefault();
    });

    formContainer.find('form').submit(function(e){
        // Preventing form submissions. If you implement
        // a backend, you will want to remove this code
        e.preventDefault();
    });

    // A helper function that checks for the
    // support of the 3D CSS3 transformations.
    function supportsCSS3D() {
        var props = [
            'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
        ], testDom = document.createElement('a');

        for(var i=0; i<props.length; i++){
            if(props[i] in testDom.style){
                return true;
            }
        }

        return false;
    }
});


The CSS


CSS will handle everything from the presentation of the forms and form elements, to the animated effects and transitions. We’ll start with the form container styles.


assets/css/styles.css

#formContainer{
    width:288px;
    height:321px;
    margin:0 auto;
    position:relative;

    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}


As well as a width, height, margin and positioning, we also set the perspective of the element. This property gives depth to the stage. Without it the animations would appear flat (try disabling it to see what I mean). The greater the value, the farther away the vanishing point.


Next we’ll style the forms themselves.
#formContainer form{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;

    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Enabling a smooth animated transition */
    -moz-transition:0.8s;
    -webkit-transition:0.8s;
    transition:0.8s;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}

#login{
    background:url('../img/login_form_bg.jpg') no-repeat;
    z-index:100;
}

#recover{
    background:url('../img/recover_form_bg.jpg') no-repeat;
    z-index:1;
    opacity:0;

    /* Rotating the recover password form by default */
    -moz-transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}


We first describe the common styles that are shared between both forms. After this we add the unique styles that differentiate them.


The backface visibility property is important, as it instructs the browser to hide the backside of the forms. Otherwise we would end up with a mirrored version of the recover form instead of showing the login one. The flip effect is achieved using the rotateY(180deg) transformation. It rotates the element right to left. And as we’ve declared a transition property, every rotation will be smoothly animated.


Notice the keyframe declaration at the bottom of the form section. This defines a repeating (declared by theinfinite keyword) keyframe animation, which does not depend on user interaction. The CSS description of the animation is given below:

/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
    0%{  box-shadow:0 0 1px #008aff;}
    50%{ box-shadow:0 0 8px #008aff;}
    100%{ box-shadow:0 0 1px #008aff;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
    0%{  box-shadow:0 0 1px #008aff;}
    50%{ box-shadow:0 0 10px #008aff;}
    100%{ box-shadow:0 0 1px #008aff;}
}


Each of the percentage groups corresponds to a time point in the animation. As it is repeating the box shadow will appear as a soft pulsating light.


Now let us see what happens once we’ve clicked the link, and the flipped class is added to #formContainer:

#formContainer.flipped #login{

    opacity:0;

    /**
     * Rotating the login form when the
     * flipped class is added to the container
     */

    -moz-transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

#formContainer.flipped #recover{

    opacity:1;

    /* Rotating the recover div into view */
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    transform:rotateY(0deg);
}


The flipped class causes the #login and #recover div to get rotated by 180 degrees. This makes the #login form disappear. But as the #recover one was already facing us with its back side, it gets shown instead of hidden.


The opacity declarations here are only a fix for a bug in the Android browser, which ignores the backface-visibility property and shows a flipped version of the forms instead of hiding them. With this fix, the animation works even on Android and iOS in addition to desktop browsers.


Done!


CSS 3D transforms open the doors to all kinds of interesting effects, once reserved only for heavy flash web pages. Now we can have lightweight, crawlable and semantic sites that both look good and provide proper fallbacks for subpar browsers.

Colorful CSS3 Animated Navigation Menu

download

The HTML

Here is the markup we will be working with:

index.html

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
                <!-- More dropdown options -->
            </ul>
        </li>

        <!-- More menu items -->

    </ul>
</nav>


The CSS


As you see in the HTML fragment above, we have unordered lists nested in the main ul, so we have to write our CSS with caution. We don’t want the styling of the top UL to cascade into the descendants. Luckily, this is precisely what the css child selector ‘>‘ is for:


assets/css/styles.css

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}


This limits the width and margin declarations to only the first unordered list, which is a direct descendant of our #colorNav item. Keeping this in mind, let’s see what he actual menu items look like:

#colorNav > ul > li{ /* will style only the top level li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}


We are setting a inline-block display value so that the list items are shown in one line, and we are assigning a relative position so that we can offset the dropdowns correctly. The anchor elements contain the actual icons as defined by Font Awesome.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}


Now we can move on with the drop downs. Here we will be defining a CSS3 transition animation. We will be setting a maximum-height of 0 px, which will hide the dropdown. On hover, we will animate the maximum height to a larger value, which will cause the list to be gradually revealed:

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;

    /* This is important for the show/hide CSS animation */
    max-height:0px;
    overflow:hidden;

    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}


And this is the animation trigger:

#colorNav li:hover ul{
    max-height:200px;
}


The 200px value is arbitrary and you will have to increase it if your drop down list contains a lot of values which do not fit. Unfortunately there is no css-only way to detect the height, so we have to hard code it.


The next step is to style the actual drop-down items:

#colorNav li ul li{
    background-color:#313131;
}

#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
    background-color:#363636;
}

#colorNav li ul li:hover{
    background-color:#444;
}

#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}


And of course, we are going nowhere without some fancy colors! Here are 5 versions:

#colorNav li.green{
    /* This is the color of the menu item */
    background-color:#00c08b;

    /* This is the color of the icon */
    color:#127a5d;
}

#colorNav li.red{  background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{  background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{ background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{ background-color:#df6dc2;color:#9f3c85;}


One neat aspect of using icon fonts, is that you can change the color of the icon by simply declaring a color property. This means that all customizations you might want to make can be done with CSS alone.


Done!


Icon fonts are a great addition to one’s web development toolset. As they are regular fonts, you can use thefont-size, color and text-shadow properties to customize them. This example doesn’t use images nor JS, so it should be fairly easy to match it with your current design and use it within a few minutes.

Create clock with html5

download

For our new lesson I have prepared nice pure HTML5 clocks. This is pretty easy script, but it is very easy and impressive (as usual). Of course – anything necessary will be at canvas object.

Step 1. HTML

This is markup of our clocks. Here it is.

index.html

view source

print?

01	<!DOCTYPE html>

02	<html lang="en" >

03

<head>

04	<meta charset="utf-8" />

05	<title>HTML5 Clocks | Script Tutorials</title>

06	<link href="css/main.css" rel="stylesheet" type="text/css" />

07	<script src="http://code.jquery.com/jquery-latest.min.js"></script>

08	<script src="js/script.js"></script>

09

</head>

10

<body>

11

<header>

12	<h2>HTML5 Clocks</h2>

13	<a href="http://www.script-tutorials.com/html5-clocks/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

14

</header>

15	<div class="clocks">

16	<canvas id="canvas" width="500" height="500"></canvas>

17

</div>

18

</body>

19

</html>

Step 2. CSS

Here are all required stylesheets

css/main.css

view source

print?

1

.clocks {

2	height: 500px;

3	margin: 25px auto;

4	position: relative;

5	width: 500px;

6

}

Step 3. JS

js/script.js

01	// inner variables

02	var canvas, ctx;

03	var clockRadius = 250;

04	var clockImage;

05

06	// draw functions :

07	function clear() { // clear canvas function

08	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

09

}

10

11	function drawScene() { // main drawScene function

12	clear(); // clear canvas

13

14	// get current time

15	var date = new Date();

16	var hours = date.getHours();

17	var minutes = date.getMinutes();

18	var seconds = date.getSeconds();

19	hours = hours > 12 ? hours - 12 : hours;

20	var hour = hours + minutes / 60;

21	var minute = minutes + seconds / 60;

22

23	// save current context

24	ctx.save();

25

26	// draw clock image (as background)

27	ctx.drawImage(clockImage, 0, 0, 500, 500);

28

29	ctx.translate(canvas.width / 2, canvas.height / 2);

30	ctx.beginPath();

31

32	// draw numbers

33	ctx.font = '36px Arial';

34	ctx.fillStyle = '#000';

35	ctx.textAlign = 'center';

36	ctx.textBaseline = 'middle';

37	for (var n = 1; n <= 12; n++) {

38	var theta = (n - 3) * (Math.PI * 2) / 12;

39	var x = clockRadius * 0.7 * Math.cos(theta);

40	var y = clockRadius * 0.7 * Math.sin(theta);

41	ctx.fillText(n, x, y);

42

}

43

44	// draw hour

45	ctx.save();

46	var theta = (hour - 3) * 2 * Math.PI / 12;

47	ctx.rotate(theta);

48	ctx.beginPath();

49	ctx.moveTo(-15, -5);

50	ctx.lineTo(-15, 5);

51	ctx.lineTo(clockRadius * 0.5, 1);

52	ctx.lineTo(clockRadius * 0.5, -1);

53	ctx.fill();

54	ctx.restore();

55

56	// draw minute

57	ctx.save();

58	var theta = (minute - 15) * 2 * Math.PI / 60;

59	ctx.rotate(theta);

60	ctx.beginPath();

61	ctx.moveTo(-15, -4);

62	ctx.lineTo(-15, 4);

63	ctx.lineTo(clockRadius * 0.8, 1);

64	ctx.lineTo(clockRadius * 0.8, -1);

65	ctx.fill();

66	ctx.restore();

67

68	// draw second

69	ctx.save();

70	var theta = (seconds - 15) * 2 * Math.PI / 60;

71	ctx.rotate(theta);

72	ctx.beginPath();

73	ctx.moveTo(-15, -3);

74	ctx.lineTo(-15, 3);

75	ctx.lineTo(clockRadius * 0.9, 1);

76	ctx.lineTo(clockRadius * 0.9, -1);

77	ctx.fillStyle = '#0f0';

78	ctx.fill();

79	ctx.restore();

80

81	ctx.restore();

82

}

83

84	// initialization

85	$(function(){

86	canvas = document.getElementById('canvas');

87	ctx = canvas.getContext('2d');

88

89	// var width = canvas.width;

90	// var height = canvas.height;

91

92	clockImage = new Image();

93	clockImage.src = 'images/cface.png';

94

95	setInterval(drawScene, 1000); // loop drawScene

96

});

I have defined main timer to redraw scene. Each step (tick) script defines current time, and draw clock arrows (hour arrow, minute arrow and second arrow).