Here are 40+ tutorials, tips and techniques to start with CSS3 and HTML5. A listing brings CSS Gallery Many of the techniques discussed are supported to some extent in some modern browsers such as Safari and Firefox with the widest support, so you can start immediately, lets have a look and start using..
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.
If we’re smart with our shadows, gradients, and borders, we can relatively easily create nice looking notepad paper with just CSS3. I’ll show you exactly how in this week’s video tutorial.
Getting Started with HTML 5 and CSS 3 in Adobe Dreamweaver CS5
Adobe’s Worldwide Web Evangelist joins us to show how to create HTML 5 web pages and do design using CSS 3 in Adobe Dreamweaver CS5.
HTML emails are a great way to keep clients posted on the latest updates related to your business or product, but they’re a bit tricky. CSS support in email clients is inconsistent. As a result, we must resort to ancient techniques, such as using tables, and inline CSS. Today, I’m going to walk you through the process of creating simple HTML emails.
HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site.
I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.
What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.
Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
Each and every day we’re witnessing more and more HTML/CSS3 tutorials, experiments and projects; new standards are being pushed not just by web developers, but by prominent and popular services, such as Google, Apple and lately even Microsoft..
Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.
Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table.
Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use. In this article you will see how you can create a set of gradient buttons just with CSS (no images).
When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.
In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML attribute, fallback is created using Modernizr’s feature detection.
Checkerboard, striped & other background patterns with CSS3 gradients
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.
Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.
CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now. However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 3.6) browsers. With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).
Search is one of the most important part of any website. Here I will show a few practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality.
I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I’m a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well.
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.
This is part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design. In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.
I’m working on a redesign and am looking into the possibilities of CSS3. I made a Photoshop mockup for an “elsewhere on the internet” page in which i wanted to list social networks on a different way. So I made “flags” placed next to each other where each flag represents a “social network”.
As you probably found out, yesterday, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting! While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).
Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. Full example and code download included.
One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities. Shortly after I placed my article online, Chris Spooner wrote a very cool article called Super Cool CSS Flip Effect with Webkit Animation. It showed me some great other 3d techniques that can be achieved using pure CSS3. Those two articles inspired me to create yet another very cool 3d CSS demo, that I like to call an Animated CSS3 helix using 3d transforms.
Although I didn’t like CSS animations at first, the more I work with it, the more I do like the way it’s implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons have a low opacity.
This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface
Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too..
Some months ago we have created an animated landscape using Photoshop and jQuery. So today we just decided to create some what same effect with pure CSS3 technology. Below is the stepwise instruction to create animated landscape with css3.
When creating your web designs, you are always striving for a consistent look across the different browsers. Unfortunately, one of the most fundamental elements of your website – the browser controls – also prove the most difficult to style. Some of them, like the select element, are impossible to change beyond a certain extent. This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.
Create A Clean and Stylish CSS3 Contact Form
In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.
Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements.
In the first part of this article – Build a HTML5/CSS3 Website Layout Without Images – Part 1, we have finished explaining all the HTML5 elements used in the code of our demo’s index.html page and today we will discuss the CSS properties used to make it pretty.
In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.
Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years. Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.
How We’ll be Building Websites in 5 Years: HTML5 and CSS3 Layout
Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the usability of that web page. Likewise, the flexible box model only works in Firefox and Webkit.
As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. Apple believes that HTML5 is what will define the web and would love to see more developers adopt it instead of Flash. Now that big video sites such as YouTube are testing support for HTML5 (Mashable).