.. Your Daily Design Dosis

10+ Fresh and Useful Pure CSS3 Tutorials [No Javascript]

| 9 Comments

As designers and developers we are constantly looking for the best way to get as much content to our users as possible, but we have to make it look nice, to let it flow beautifully, and of course without any text overload. We all know that JavaScript allows us to do great things when it comes to user interfaces, but a lot of the same types of effects can be created with pure 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. The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised. But we already see that there are loads of tutorial made to teach designers how to use it.

These tutorials mentioned below are focusing mainly upon the various properties of the CSS3. All of these CSS3 tutorials aren’t using any Javascript (or jQuery) whatsoever.

Note: the result of this tutorial will only work as intended in browsers that support CSS animations.

A Pure CSS3 Cycling Slideshow

in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. To get a solid sense of the process from beginning to end, below is an outline of the article.

CSS3 Cycling Slideshow

Source

Just some other awesome CSS3 buttons

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons. In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.

awesome CSS3 buttons

Source

Pure CSS Blockquote Styling

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

CSS Blockquote Styling

Source

Animated Content Tabs with CSS3

Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

CSS3 Animated Content Tabs

Source

How to Create Accordion Menu in Pure CSS3

In this tutorial we will learn how to create an accordion menu in pure CSS3. This menu was inspired in Futurico UI Pro by Vladimir Kudinov. As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector.

CSS3 Accordion Menu

Source

Showing Product Information With CSS3 3D Transform

There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. In this tutorial I’m going to share how to show our product information with cube style using CSS3 3D Transform.

Source

How to Build an Accordion Image Gallery with only CSS

Fluent animated transitions for sliding web page elements such as a menu or an image gallery, have always traditionally been implemented with JavaScript. But using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript! This means that the very popular “accordion or toggle” effects can be easily implemented using only CSS!

CSS3 Accordion Image Gallery

Source

Content Slider Using Pure CSS

My mission was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

CSS3 Content Slider

Source

CSS3 Breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

CSS3 Breadcrumbs

Source

CSS pointer-events and a pure CSS3 animating tooltip

I was creating a CSS-only tooltip and I wanted to fade it in and out using the CSS3transition property. Fading the opacity to 0 works great, except that the tooltip is technically still there (just invisible), blocking mouse interaction with content below it and growing the :hover area of its parent to include itself. Boo. I couldn’t just toggle display:block and display:none on:hover because that would hide the element before it had a chance to smoothly transition out.

CSS pointer-events and a pure CSS3 animating tooltip

Source

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

CSS3 Filter Functionality

Source

CSS3 Animated Progress Bars

Animated CSS3 progress bars created using animation and keyframes properties. It’s created by Lee Munroe originally but I implemented the reverse direction on the progress bar. It uses many CSS3 properties, like border-radius, animation, text-shadow, box-shadow, rgba, linear-gradient and keyframes to make the progress bar and it’s animation.

 CSS Progress Bars

Source

Rotating Words with CSS Animations

In this tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

CSS3 Animations

Source

 

Author: Gonzo the Great

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.

9 comments

on this article: “10+ Fresh and Useful Pure CSS3 Tutorials [No Javascript]”
  1. Nice one. I was looking for the blockquote design and I found it thanks to You!

  2. Some very useful tips! I love that these are purely css3. Thanks!

    • Hi Chris,

      .. yeah, it’s just amazing what you can do with CSS3 and HTML5! It’s a pity that not all browsers support it tho .. :(

      Thanks for your comment and enjoy your weekend! Cheers & Ciao!

  3. A nice collection of quality articles, very useful methods as most modern browsers support CSS3 transform.

  4. Hi Jan, nice roundup. Also, thank you for including some of my articles. ;)

    • Hi Catalin,

      .. what a honor, Sir ;-P – I really love your tutorials, Catalin, so I just had to include some of your brilliant work! A pity I didn’t see your new tutorial: ‘CSS filter effects in action’ earlier, otherwise it would be included here too (BTW: a brilliant way to pimp a image gallery!).

      Please keep on writing these tutorials, so I can learn more CSS wizardry and post more tuts here ;-P Have a great day and thanks for taking the time to comment! Cheers & Ciao Amigo!

top