CSS3 & HTML5 : 11 Fresh Tutorials

CSS3 & HTML5 : 11 Fresh Tutorials

css3 html5

CSS3 & HTML5 : 11 Fresh Tutorials - With the inevitable, exponential rise in popularity of both HTML 5 and CSS3, designers can look forward to many new and exciting possibilities for their web pages, applications, and scripts. Combined, these two emerging languages provide designers with immense power over the structure and presentation of their web documents.

How to Create Social Media Buttons Using CSS3

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.

Code a Vibrant Professional Web Design with HTML5/CSS3

We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Designing Search Boxes with HTML5 and CSS3

A hands-on tutorial demonstrating a few practical techniques for designing cross-browser, standards-compliant functional Search Forms with HTML5 and CSS3 (and a little bit of jQuery).

An Introduction to CSS 3-D Transforms

The CSS 3D Transforms module has been out in the wild for over a year now. Currently, only Safari supports the specification – which includes Safari on Mac OS X and Mobile Safari on iOS.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

Create Spinning Rays with CSS3 Animations & JavaScript

Subtlety is the key to using this effect...effectively. Using CSS properties to transition the element's rotation is even more optimal, seeing as they're native to the browser.

The CSS3 Resize Property

The resize property allows a developer to define whether or not a UI element can be resized manually by the user.

Happy Holidays with CSS3

New year is coming and I want to wish all of you Happy Holidays. For this reason, I made a little CSS3 experiment (with absolutely no images) and I hope you’ll enjoy it.

Creating 3D Buttons with CSS & jQuery

We're going to look at how to create a 3D button using very basic CSS and jQuery. This 3D button will better reflect the interactive abilities of many sites.

How to Create A Multi-Step Signup Form With CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

20 HTML5 Video Players & Tutorials

20 HTML5 Video Players & Tutorials

freebies html5

HTML5 Video Players & Tutorials - Though a number of plugins are available such as RealPlayer, Silverlight, Quicktime etc to view a video on a web page, HTML5 is virtually bringing a revolution in this sphere by standardizing video playback across different devices and web browsers. The main goal is to find a standard method for embedding video in website that will work in different platforms. Here in this article, we are going to showcase a list of some of the best HTML5 media players that can help you to add some interesting elements in your next website design project.

Open Standard Media (OSM) Player

Advection HTML5 Video Player

JW Player for HTML5

Degradable HTML5 audio and video

Video for Everybody!

Video JS HTML5 Video Player

SublimeVideo - HTML5 Video Player

Projekktor Zwei - Free HTML5 video player Home

LeanBack Player

azatoth / jquery-video

FryPlayer

HTML5 Video

CwVideo

Akamai’s Open Video Player for HTML5

FlareVideo

Moovie

HTML5 video player in CSS with Silverlight and Flash : MediaElement.js

Introduction to HTML5 video

Everything you need to know about HTML5 video and audio

Tutorial: How to Build an HTML5 Video Player

Building a custom HTML5 video player with CSS3 and jQuery

Building a better HTML5 video player with Glow

10 Surprising HTML5 Canvas Application Experiments

10 Surprising HTML5 Canvas Application Experiments

css html5 jquery

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.

Sketchpad

Sketchpad’s drawing tools allow for the usual brush, pencil, fill and text items but it also provides tools for spirographs, unusual shapes and stamps. Applying a pattern to these items is simple, meaning it’s easy to create something artistic even if you’re not particularly artistic yourself.

Reflections

Jean d’Arc has created this 3D texture mapping demo using the HTML5 canvas element. The demo features rotating 3D objects with spherical texture mapping and pixel shading.

Cubescape

Cubescape allows you to draw 3D isometric pictures by dropping little blocks. It was open to user submissions for a while and some people had amazing patience!

charact-o-matic

Type the text you wish to display in to box on the bottom left, and then use the controls scattered around the display area to change the 3D effect.

Cloudkick Viz

Cloudkick Viz uses the canvas element to display cloud server monitoring information in real time. The graph plots servers in real-time in a 3D space according to performance metrics like CPU and memory usage, and ping latency. Each plotted points size represents the relative power of the server and will blink when monitoring data is updated. If something critical happens, it will turn red and pulsate. Hovering over a server will show you its name and a ghost trail based on performance history, and clicking will yield detailed monitoring data.

Canvas Sphere

Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation.

canvas threshold filter

A threshold filter converts grayscale or color images into high contrast, black and white images. This threshold filter has been created with canvas by hitode909.

HTML5 Canvas - Collage

Your collage creating begins with a Flickr search, which will bring up a list of the most popular results. Clicking any of the results will automatically add them to the collage area as a new layer. Each layer can be altered in a variety of ways – from moving, scaling and rotating to changing opacities, blend modes and shadows. You can also adjust the layer position in relation to the other layers.

Tweet Flare

Nikhil Bobb has produced this interested HTML5 canvas visualisation based on real time tweets from around the world using Twitter’s geocode data. Each tweet sets off a flare, lighting up areas of activity on Earth.

iGrapher

iGrapher is a free web-based financial market visualisation tool for charting, analysis and prediction of different stock, currency and commodity markets. It uses canvas to draw the graphs of financial data.