.. Your Daily Design Dosis

15+ more cool and useful CSS Tutorials [No JavaScript]

| 1 Comment

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 now can create beautiful, interactive 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.

Good CSS3  tutorials can teach you the tricks and techniques used by experienced web designers and developers to implement a specific solution. 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.

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

Pure CSS Drop-down Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

CSS Drop-down Menu

Source

How to Build a CSS3 Sliding Menu

It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device. In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect.CSS3 Sliding Menu

Source

CSS3 signup form

If you’re about to launch a new web product or you just need to improve the user experience for an existing web form, then this tutorial is for you. In this article you’ll find out how to design a clean and attractive CSS3 signup form.CSS3 signup form

Source

Circle Hover effects with css Transitions

Author utilizes border radius property to create very interesting hover effects on circles with CSS transitions and 3D rotations.
CSS3 Circle Hover Effects

Source

CSS3 Patterns, Explained

Lea Verou explains how her CSS3 patterns gallery utilizes powerful CSS3 gradients to achive wonderful css patterns.
CSS3 Patterns

Source

Prefix & Postfix Input Form

On developing an application sometimes I need an instant library for prefixing and postfixing an input field on a form, I don’t have one so I decided to make it to be used on future project. This library using Font Awesome for the icons of the prefix and postfix, go through the post to see the sets.

Prefix & Postfix Input Form

Source

Slideshow with a parallax effect using CSS3

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.CSS3 slideshow with a parallax effect

Source

Simple and Clean CSS3 Menu

The idea for this CSS3 navigation menu came to me while watching this button on UI Parade. Usually, when I see design stuff on the internet, I try to image how can I make it using CSS3. I think this a professional habit.

Source

A CSS3 Clickable, Rotating Menu

To accomplish this effect we had to use a few of the quirks CSS has. Firstly we have to set up the HTML. We’re going to put some checkboxes and radio buttons in there too which (later) we’ll use in tandem with CSS to check if the user has ticked them. We can then have a label anywhere else in the code that links up to those corresponding radio buttons, and use the labels as block elements to design normally.

CSS3 Clickable, Rotating Menu

Source

CSS Mask-Image & Text

Web designers, want the same level of control over type that print designers have, including texture. Trent Walton implemented a subtle grey flecked texture effect over a white text. The texture will simply show up in supported browsers only. One of the hot CSS3 skills for 2012. Implement a subtle texture over text with just a few lines of code.

CSS Mask-Image & Text

 Source

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to create some interesting effects with CSS. This tutorial will show you how you can create a simple ‘stacked’ look to some images.

CSS3 Stacks

Source

CSS Social Buttons

Icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme.CSS Social Buttons

Source

Stylish Responsive Form With CSS3 And HTML5

Author showcase the use of many of those cool CSS3 effects, a simple web form using some of the newer HTML5 input types.Responsive Form

Source

Responsive Content Navigator with CSS3

This tutorial will show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way. We’ll also make the whole thing responsive.

Content Navigator with CSS3

Source

Lightbox Image Gallery In Pure CSS3

Everyone on the web is familiar with the Lightbox effect: one of the first popular JavaScript gallery plugins, variations on the idea quickly became ubiquitous. It’s my hope that recreating Lightbox in the simpler syntax of CSS3 will lead to more people customizing the effect for their own sites with more variability and creativity.

CSS3 Lightbox Image Gallery

Source

Responsive CSS3 slider

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. Not a tutorial but you should check out this awesome slider.Responsive CSS3 Slider

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.

1 comment

on this article: “15+ more cool and useful CSS Tutorials [No JavaScript]”