.. Your Daily Design Dosis

10+ Fresh CSS3-Only Tutorials (Look Ma, No Javascript!)

| 2 Comments

CSS is for styling and controlling layout of webpages. While CSS3 has become very powerful it is often used with JavaScript / jQuery to add cool dynamic stuff. We all know that JavaScript allows us to do great things, but a lot of the same types of effects can also be created with pure CSS3.

We all know that JavaScript allows us to do great things when it comes to user interfaces, but now can create beautiful, interactive and functional designs by using only CSS, focusing primarily on the properties of CSS3. Although Javascript/jQuery is amazing and can bring websites to a whole new level, it has a few flaws that we can’t account for:

  • Users can disable Javascript in their browser, by now, most of us account for this, and provide fallbacks.
  • Your site will take more time to load all of your wonderful javascript.

This is where CSS3 comes in, we now can create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3.

These tutorials mentioned below are focusing mainly upon the various properties of the CSS3, using the power of CSS3 effects and transitions, to build JavaScript-free cool stuff for your next web design. The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised.

Neat and modern main section with CSS3

Today we look at the most basic elements of a page such as blocks and forms. I think that if we make all the blocks with the same styles – it would be boring, so (for a change), I prepared four types of blocks with custom headers and footers. And, as a demonstration of the form design – I made the contact form. Now, this is complete design of a single page.

main section with CSS3

Demo | Source

CSS: Responsive Navigation Menu

A new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. This menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item.

It works on all mobile and desktop browsers including Internet Explorer! This trick is more useful on navigation with a lot of links like the screenshot below. You can condense all the buttons into an elegant dropdown.

A responsive dropdown navigation made with SASS

Demo | Source

Animenu – A responsive dropdown navigation made with SASS

The new and improved version is responsive, using SASS & Compass and has no JavaScript dependency. Some of the decisions I had to take on this new improved dropdown navigation were on the browser support and number of levels this menu will support. All these, considering that my previous versions support IE6 and until three levels of dropdown navigation. But, this time the accent is put on responsiveness.

Animenu

Note: The browser support for this dropdown navigation is IE8+, so it uses the new box model triggered by box-sizing: border-box and the shortest clearfix ever.

Demo | Source

How to Create Bounce Effect with CSS3 Animation

Today, we are going to doing an experiment with CSS3 Animation, we will try to create a “notification bar” with bounce effect. The basic idea on how the bounce will run is that when the object drops on the surface the first time, it bounces of the surface and will reach its highest level. Then it gradually reaches a lower point with every subsequent bounce, until the object stops bouncing.

Demo | Source

An experiment with Responsive Background-images

A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. But, how to serve different responsive background-images by defining them in my various media-queries? So far I only saw examples of this technique in headers of websites, but the different background-images weren’t responsive nor Retina-friendly ..

Responsive Background-images

Source

CSS3 patterned buttons

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you’ll see what I’ve been working on lately. As you may have expected, no images used here. Instead, an base64 string is used to create the patterned effect.

CSS3 patterned buttons

Demo | Source

Colorful CSS3 Animated Navigation Menu

In this short tutorial, we will be creating a colorful dropdown menu using only CSS3 and the Font Awesome icon font. An icon font is, as the name implies, a font which maps characters to icons instead of letters. This means that you get pretty vector icons in every browser which supports HTML5 custom fonts (which is practically all of them).

To add icons to elements, you only need to assign a class name and the icon will be added with a :before element by the font awesome stylesheet.

CSS3 Animated Navigation Menu

Demo | Source

Using CSS3 Filters to Enhance your Transitions

CSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease. The basic filters as listed in the W3C Draft are as follows: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast,blur, drop-shadow, custom.

CSS3 Filters

Note: Support is very limited at the time of writing, with Chrome currently the only browser with support for CSS3 filters, so anything other than experimental usage should be done with caution.

Demo | Source

Create a stunning menu in CSS3

The navigation of a website is one of the most fundamental aspects to make or break a user’s experience. Instead of loading your menu down with individual images or sprites, why not do the entire thing in CSS3? With animations, shadows, rounded corners and more, elements can be easily styled, and still weigh less than ever before.

No need for jQuery or JavaScript; no need to launch Photoshop. And let’s take it up a notch by including a great icon font to add some character to our menu.

stunning menu in CSS3

Demo | Source

3D Book Showcase

Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining.

3D Book Showcase

Demo | Source

Create a 3D Book Animation with CSS

Doing something interesting with the image of the book itself on the website. With the introduction of transforms in CSS, we can now replicate 3D objects. The 3D book consists of two elements, the spine and the cover. What we’re basically doing is rotating .book-spine, using CSS transforms, to the position it would be as if it were a real book and then, on hover, we’re rotating .book to reveal the spine and to show off the book in all its 3D glory.

3D Book Animation

Demo | Source

Bring Your Forms Up to Date With CSS3 and HTML5 Validation

Let’s look at how to create a functional form which validates users’ data, client-side. With that done, we’ll cover prettying it up using CSS, including some CSS3! We want to make sure the user is entering the information correctly. To accomplish this, we will use HTML5′s new client-side validation techniques.

HTML5 validation is coming closer to replacing client-side validation in helping users properly fill out their online forms. However, HTML5 validation still does not replace server-side validation. For the time being, it’s best to use both methods when handling user-submitted information.

CSS3 and HTML5 Validation

Demo | Source

CSS3 tucked corners

For this alternative CSS3 tucked corners effect, I used the beveled corners technique by Lea Verou, a technique you’ve seen implemented before for my CSS3 tabs with beveled corners. There’s nothing to change or to improve here. At first sight you may think there’s some extra markup in there but we’ll actually need everything below in order to be able to create four corners using CSS pseudo-elements.

CSS3 tucked corners

Demo | Source

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

2 comments

on this article: “10+ Fresh CSS3-Only Tutorials (Look Ma, No Javascript!)”
  1. The biggest advantage of using CSS3 is the speed gain.
    CSS3 code is executed by the browser in C which is several times faster than Javascript.

    I’ve seen few demo examples which ran 1000 little animations, once in CSS3 and once in Javascript. The speed gains were huge!

    • Hi Pritesh,

      .. spot on, buddy! What you mentioned is for me THE big benefit of CSS3, in stead of JavaScript! Don’t get me wrong, sometimes you need JavaScript to do some tricks that need to be browser compatible! But if you have a good fallback and CSS3 can do the same trick, go for CSS3! No extra HTTP-requests, no synchronous downloads, etc.

      Those differences can save you quite some loading time! I sooo do agree with you Pritesh! Thanks for commenting, have a great day!
      Cheers & Ciao!