Useful And Fresh HTML5 & CSS3 Tutorials

Useful And Fresh HTML5 & CSS3 Tutorials 1

With this collection, we are sharing with you more than 35 useful and fresh tutorials about CSS3 and HTML5. Both of these technologies have been widely used these days in web development. The adaptation to these technologies by the designers and developers is so much increased that you can hardly find a modern website that was made without them. With HTML5 and CSS3 now designers and developers can achieve incredible results and create better online experience.

Here is the list of more than 35 fresh and useful tutorials on CSS3 and HTML5. We hope that you will like this collection and find these resources useful as well. Do share your opinions with us.

Building a Circular Navigation with CSS Transform

( Demo | Download )

In this tutorial we are going to show you how to create circular navigations using CSS transforms.We are going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique.

Useful And Fresh HTML5 & CSS3 Tutorials 2

Animated Border Menus

( Demo | Download )

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.

Useful And Fresh HTML5 & CSS3 Tutorials 3

Button Switches with Checkboxes and CSS3 Fanciness

( Demo | Download )

In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes.

Useful And Fresh HTML5 & CSS3 Tutorials 4

Transitions for Off-canvas Navigation

( Demo | Download )

Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu.

Useful And Fresh HTML5 & CSS3 Tutorials 5

Pixels, EM, And Percentage

Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage.

Useful And Fresh HTML5 & CSS3 Tutorials 6

Create Circle Using CSS

CSS3 can be used to draw simple design elements like square, circles etc. Previously web designer use Photoshop images and JavaScript to do this work but CSS3 properties has made it easy to create circles. Circles created using CSS are extremely fast loading than images.
So I am starting this short tutorials which will tell you how to use border-radius property and draw a circle in no time.

Useful And Fresh HTML5 & CSS3 Tutorials 7

Creative Loading Effects

( Demo | Download )

Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube.

Useful And Fresh HTML5 & CSS3 Tutorials 8

Build a custom HTML5 video player

( Demo | Download )

Media players that are built in to browsers vary in design. Ian Devlin explains how to use HTML5’s media API to build a custom player with a UI that stays consistent no matter what browser you use.

Useful And Fresh HTML5 & CSS3 Tutorials 9

Using CSS3 Page Break To Organise Print Pages

Although we are currently leaving in a digital era where everything can be accessed easily, there are many people who still prefer reading long text on paper. There is a chance that a number of your users will print out your content to read offline.

Useful And Fresh HTML5 & CSS3 Tutorials 10

CSS Clipping and Masking

CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code.

Useful And Fresh HTML5 & CSS3 Tutorials 11

CSS3 3D Transformation Functions

( Demo )

In this tutorial we look at the basic 3D functions you can apply to elements.

Useful And Fresh HTML5 & CSS3 Tutorials 12

A Look Into: Using CSS Variables

( Demo | Download )

In this code example, we created a CSS variable named primary-color. However, unlike in CSS Pre-processor, where we can declare variables independently, the variable in CSS should be nested under a CSS selector.

Useful And Fresh HTML5 & CSS3 Tutorials 13

Pure CSS Slide Up and Slide Down

( Demo )

If I can avoid using JavaScript for element animations, I’m incredibly happy and driven to do so. They’re more efficient, don’t require a JavaScript framework to manage steps, and they’re more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when “up” and slides in when “down”. The reason it’s difficult is because you may not know the content height. After playing around with different CSS properties, I’ve found a way to make a pure CSS sliding effect.

Useful And Fresh HTML5 & CSS3 Tutorials 14

Animated falling lamp from the ceiling

( Demo )

Looking around for ideas on my site edoardoo.com (which is now restyled, have a look! ), I’ve decided to implement something that was pretty easy in my mind, just an animated falling lamp from the ceiling of the browser.

Useful And Fresh HTML5 & CSS3 Tutorials 15

Exploding Blocks with CSS and Javascript

( Demo | Download )

In this tutorial you will find a lot of useful materials for both beginners and advanced web developers.

Useful And Fresh HTML5 & CSS3 Tutorials 16

CSS3 Navigation Menu Tutorial with Notification Badges

In this tutorial We will be showing how to make minimal CSS3 navigation menu that can be customized to fit your projects requirements and looks.

Useful And Fresh HTML5 & CSS3 Tutorials 17

Reshaping the web with CSS shapes & exclusions

( Demo )

Today’s web is built of rectangles, we can try and cheat it by creating other shapes in the browser, but the basic foundation is rectangles.

Useful And Fresh HTML5 & CSS3 Tutorials 18

Glowing Text Effects

( Demo | Download )

In this CSS3 tutorial We will show you how to create a glowing text effects using CSS3. In this CSS3 Tutorial we are going to use BPdots font for dotted text effects and carbon texture (included in download file) for background.

Useful And Fresh HTML5 & CSS3 Tutorials 19

Create a minimalistic black and white navigation with HTML and CSS

( Demo | Download )

In this tutorial We will show you how to create a minimalistic black and white navigation using HTML and CSS.

Useful And Fresh HTML5 & CSS3 Tutorials 20

Create a flat, four part square menu with HTML & CSS3

( Demo | Download )

In this tutorial We will show you how to create a flat four part square menu with CSS3 and HTML. Have fun!

Useful And Fresh HTML5 & CSS3 Tutorials 21

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

( Demo | Download )

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content.

Useful And Fresh HTML5 & CSS3 Tutorials 22

Using HTML5 Drag And Drop To Create A Shopping Cart

( Demo | Download )

Here we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

Useful And Fresh HTML5 & CSS3 Tutorials 23

Adding Alarms to the Digital Clock

( Demo | Download )

Useful And Fresh HTML5 & CSS3 Tutorials 24

How to Create a Simple Drag and Drop Component Using HTML5

( Demo )

The drag and drop feature from the HTML 5 can optimize your website with a more dynamically interactive elements that your website users will find more engaging. HTML 5 has become an important aspect in web designing especially in creating highly creative and interactive components that will make your website more functionally usable for your visitors.

Useful And Fresh HTML5 & CSS3 Tutorials 25

Create a slide-out footer with this neat z-index trick

( Demo | Download )

In this short tutorial, we are going to create an interesting slide-out footer with a bit of CSS. Grab the zip from the download button above, open it in your favorite code editor and read on!

Useful And Fresh HTML5 & CSS3 Tutorials 26

Automatic Figure Numbering With Css Countrs

( Demo | Download )

Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page.

Useful And Fresh HTML5 & CSS3 Tutorials 27

Making a Beautiful HTML5 Portfolio

( Demo | Download )

In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

Useful And Fresh HTML5 & CSS3 Tutorials 28

Smooth Diagonal Fade Gallery with CSS3 Transitions

( Demo | Download )

In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.

Useful And Fresh HTML5 & CSS3 Tutorials 29

How to Build Cross-Browser HTML5 Forms

( Demo | Download )

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

Useful And Fresh HTML5 & CSS3 Tutorials 30

Simple Website Layout Tutorial

( Demo | Download )

Simple Website Layout Tutorial Using HTML 5 and CSS 3.

Useful And Fresh HTML5 & CSS3 Tutorials 31

How to Detect Geolocation On Web Browser Using HTML5

( Demo | Download )

HTML5 is been a part of many of my projects and once again I want to share a pretty interesting usage of HTML5 to detect geolocation of the user from the web browser. Currently most of the web browser support HTML5 except the lame Internet Explorer and this geolocation detection works fine with Firefox, Opera, Chrome and Safari.

Useful And Fresh HTML5 & CSS3 Tutorials 32

Caption Hover Effects

( Demo | Download )

A tutorial on how to create some subtle and modern caption hover effects.

Useful And Fresh HTML5 & CSS3 Tutorials 33

Expanding Search Bar Deconstructed

( Demo | Download )

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

Useful And Fresh HTML5 & CSS3 Tutorials 34

Build animated feature sections with CSS3

( Demo | Download )

Josh Netherton guides you through creating an animated features block, from sketching storyboards to coding out the CSS3 animations – learning the syntax on the way.

Useful And Fresh HTML5 & CSS3 Tutorials 35

Sliding Horizantal Layout

( Demo | Download )

A slider-like layout where the neighboring sections are positioned horizontally next to each other.

Useful And Fresh HTML5 & CSS3 Tutorials 36

An Introduction to CSS Custom Filters

( Demo | Download )

Useful And Fresh HTML5 & CSS3 Tutorials 37

CSS Regions and Edge Reflow

( Demo | Download )

Useful And Fresh HTML5 & CSS3 Tutorials 38

How to Create a Custom, Crisp Icon Font with IcoMoon App

( Demo | Download )

In this tutorial you will learn how to create a custom, crisp icon font with iconmoon app.

Useful And Fresh HTML5 & CSS3 Tutorials 39

SmashingApps.com participates in various affiliate marketing programs and especially Amazon Services LLC Associates Program, which means we may get paid commissions on editorially chosen products purchased through our links to any of the linked sites from us.