Paul Cowan

Nomadic cattle rustler and inventor of the electric lasso

Simple CSS3 Login Form Using SASS

Previous Posts

I have been using these posts to cement the knowledge I am gleaning while transforming the markup for a product I am building. I find that trying to transmit the knowledge via blogging is the only way to really learn something or else it is easily forgotten. In the last three posts I have gone from defining my project file structure to creating the markup and CSS3 (with the extreme help of sass) for the header element in the image below. In this post, I want to outline the steps I took to create the following login page:

In the past, I hate to admit that I would have used a table to align the inputs with their labels but this time round I want to use css to control the layout. With that said, below is the haml that generates the markup for the above login form:

The above haml generates the following markup:

The only points of interest in the above markup are the new HTML5 attributes that are attached to the input elements on lines 8 and 10 of the above gist. These attributes are:

  • The required attribute which as you might have correctly deduced is used to specify that the element requires user input. Some browsers will alter the default appearance of required elements with a red border for example and most should stop you submitting the form if the mandatory field is left blank. It is worth remembering that this is HTML5, things can and will change until ratification.
  • The placeholder attribute which if set will place default text in an input field if the input element is empty or not in focus.

With the markup out of the way, we can now concentrate on some of the new CSS3 bells and whistles that I have used via sass and compass to create some of the nice effects in the form.

First of all, I want to concentrate on the login form itself: Below is the sass that is used to create the sunken effect for the text of the header and label elements that are outlined in the above image.

On line 1, is the definition of a mixin that I have used to avoid duplication in the two css selectors that assign styles to the <h2> and <label> elements. The mixin is used on lines 6 and 12 via the @include directive.
On line 3 of the above gist, I am using the new css3 text-shadow property that does what it says on the tin and adds a shadow effect to the text of a block element to make it stand out more.

It is worth noting that I keep all my colour variable definitions in a separate sass partial file named _colors.sass. This allows me to change the colour scheme in one file and not have to jump around the project files looking for the definitions. Below is an excerpt from colors.sass that shows the variable declarations used in the above gist:

1
2
$label-color: #445668
$label-box-shadow: #f2f2f2

The form element of the log in page uses a few of the new css3 techniques to add the new and now infamous css3 border-radius property that gives the form the nice rounded corners effect. It is often jokingly stated that the main purpose of CSS3 is to facilitate the adding of rounded corners to block elements.

But first of all, I want to show how I got this rippled effect on the bottom of the form: I have used the new css3 box-shadow property to achieve this effect. As the name suggests, the box-shadow property is used to apply an inset or drop shadow to a block element. It is also possible to add multiple box-shadows to an element as in this example. As this is a css3 experimental property there are the usual vendor specific prefixes for this property….that is unless you use compass and you can use the box-shadow mixin like I am below:

1
2
#new_user_session
  @include box-shadow($login-box-shadow-color 0 0 2px, $login-box-shadow-color 0 1px 1px, #fff 0 3px 0, $login-box-shadow-color 0 4px 0, #fff 0 6px 0, $login-box-shadow-color 0 7px 0)

I am passing in alternating box-shadow colour definitions to the mixin that are delimited by commas to give the appearance of a ripple. The above sass generates the following css:

1
2
3
4
5
6
#new_user_session {
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px, rgba(0, 0, 0, 0.2) 0 1px 1px, white 0 3px 0, rgba(0, 0, 0, 0.2) 0 4px 0, white 0 6px 0, rgba(0, 0, 0, 0.2) 0 7px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px, rgba(0, 0, 0, 0.2) 0 1px 1px, white 0 3px 0, rgba(0, 0, 0, 0.2) 0 4px 0, white 0 6px 0, rgba(0, 0, 0, 0.2) 0 7px 0;
  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px, rgba(0, 0, 0, 0.2) 0 1px 1px, white 0 3px 0, rgba(0, 0, 0, 0.2) 0 4px 0, white 0 6px 0, rgba(0, 0, 0, 0.2) 0 7px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px, rgba(0, 0, 0, 0.2) 0 1px 1px, white 0 3px 0, rgba(0, 0, 0, 0.2) 0 4px 0, white 0 6px 0, rgba(0, 0, 0, 0.2) 0 7px 0;
}

The above css creates the rippled effect.

Now let us get back to those nice rounded corners that are this season’s black in the fashionable world of css3: The css3 border-radius property is used to give a block element rounded corners and as we cannot be bothered to type all these vendor specific prefixed properties, we are going to use the compass border-radius mixin. Below is the border-radius mixin applied to the login form element:

1
2
#new_user_session
  @include border-radius(10px)

Which generates the following css:

1
2
3
4
5
6
7
8
#new_user_session{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

As you can see, compass takes care of the vendor specific pain.

Below is the sass in its entirety that is employed to create the css styling effects of the form minus the inputs.

The only point that I have not covered is the gradient effect that is created using the compass border mixin on line 6 of the above gist. I described linear gradients in the previous post.

Input Styling

I have used a combination of all the techniques mentioned so far to add some definition to the input elements: Below is the sass that is used to create the box-shadow, linear-gradient and border radius effects:

CSS3 Transitions

With CSS3 you can now achieve some effects that would have in the past required javascript to achieve. One of these techniques is known as a css3 transition. This allows the author to specify a css change or transition from one css style to another. It is also possible to put a time delay on the transition.

This is impossible to show without a demo and as my site is not on a public facing server yet, so I am going to have to point to these examples.

In my log in page, I am specifying that I want the text input’s border and background to change when the cursor is hovered over the input control: We can also put a delay on the transition which equates to a tasteful delay of a specified time before the transition occurs.

Below is the sass I have used to create this nice time delayed transition:

I am using the compass transition-property and transition-duration mixins to produce this effect. The compass documentation for the transition mixins can be found here.

Button Effect

Lastly I want to describe how the styling was created for the button: I have used the fancy-buttons library to easily create this effect.

With the library imported, I can simply use the fancy-button mixin to generate the css3 styles like this:

1
2
3
4
input[type=submit]
  @include fancy-button(#617798, 14px, 1em, 4px)
  width: auto
  text-transform: uppercase

I will leave things here for this article, if you made it to the end of the article then pat yourself on the back!

Comments