Browsing Category

HTML & CSS

An In Depth Analysis of HTML5 Multimedia and Accessibility

An In Depth Analysis of HTML5 Multimedia and Accessibility

In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, you’ll increase the availability of your media to users with different
needs and requirements, making it more accessible.

This tutorial comes courtesy of the recently released HTML5 Multimedia book.

Say Hello to Webkit Filters

Say Hello to Webkit Filters

Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Twice a month, we revisit some of our readers’ favorite posts from through out the history of Nettuts+. This tutorial was first published in August, 2010.

In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following…


This entry is part 14 of 14 in the HTML5 and You Session
How to Inject Custom HTML and CSS into an iframe
videos

How to Inject Custom HTML and CSS into an iframe

Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task. In today’s quick tip, I’ll show you how to inject HTML and CSS into an iframe.

Quick Tip: The Awesome Details Element

Quick Tip: The Awesome Details Element

One of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details element. I’ll show you to use it in today’s quick tip.

Quick Tip: How to Keep the Count with CSS
basixvideos

Quick Tip: How to Keep the Count with CSS

Did you know that, with CSS, you can create a counter? This can be especially useful for instances where the count is purely needed for presentational purposes. I’ll show you how to use counter-increment in this useful quick tip.

How to Create an HTML5 Microdata Powered Resume

How to Create an HTML5 Microdata Powered Resume

In May 2009, Google introduced Rich Snippets, a small block of information displayed in Google’s search engine results to make it easier for users to decide which pages are relevant to their search. In June 2011, Google announced the creation of Schema.org, a new initiative from Google, Bing and Yahoo! that aims to improve the web by creating structured data markup schema.

This tutorial demonstrates how to create an online resume that incorporates Schema.org Microdata. The tutorial also includes instructions on how to use Authorship Markup!

How to Create a Beautiful Icon with CSS3

How to Create a Beautiful Icon with CSS3

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

Cross-Browser CSS in Seconds with Prefixr

Cross-Browser CSS in Seconds with Prefixr

A couple weeks ago, as I began to manually update my stylesheet with all of the various browser prefixes for the new CSS3 properties, I thought to myself, “This is such a waste of time. Surely, there’s an easier way.

Quick Tip: How to Add Syntax Highlighting to Any Project
videos

Quick Tip: How to Add Syntax Highlighting to Any Project

In this lesson, we’ll use a JavaScript based syntax highlighter to quickly add a syntax highlighting functionality to any web project — even on a simple HTML page!

Page 1 of 1812345678...Last »