While there have been some great recent discussions on the subject of CSS and HTML5 this recent article gives the perfect overview. I was working behind the scenes to bring you the best tips and techniques which can be used in daily web design projects. If you do any level of web development from editing pages HTML and CSS can give you a level of control, and power over your designs that you’ve never experienced before.
In this post, I’ve gathered up to 30 fresh CSS3, HTML5 tips/techniques and tutorials that will show you just a bit of the power of CSS3 and HTML5, perhaps this collection covers both CSS and HTML you need to know.
First off, let’s get something out of the way. Prototyping in code is something of a misnomer within the context of what we’re about to discuss. Code sounds scary, it’s something programmers do. What we’re talking about here is far less frightening — all we’re aiming to promote is the basic concept that with some very simple HTML and a bit of CSS you can produce prototypes that communicate your ideas far better than any diagramming or wireframing tool ever could.
Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on attribute selectors. This week I want to continue and talk specifically about combinators before starting to cover pseudo class selectors.
CSS Selectors are an essential ingredient in developing websites. They’re the hooks our css has into our html. How may different css selector patterns do you regularly use?
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.
CSS has a good trick which allows you to change the style of an element when the visitors mouse moves over the element..
Originally published as a W3C Recommendation in 1996, Cascading Style Sheets (CSS) have endured as the best way of defining the rendering of content separate from its markup. Nearly 15 years later, CSS level 3 (CSS3) is making new design features available to web developers. We’ll take a look at some of the most interesting and popular of those features.
Last week we looked at the css flexible box module, one of the new css tools to help with site layout. The css multi-column layout module is another that also helps with site layout and has even better support than flexible boxes.
The changes brought by the various CSS3 modules are pretty exciting for designers and front-end developers. Decreases in bandwidth and HTTP requests, faster maintenance and using real fonts instead of images are all big pluses on the SEO and accessibility fronts. But one area that seems a bit neglected is the new background properties..
I understand that we’ve never had it so good. In fact, I have no doubt that time-travellers visiting from 2004 would be sick with jealousy at how easily we now conjure up rounded corners, shadows, and object rotations.
CSS offers several tools to help with site layout. Over the years we’ve worked mainly with floats, positioning, and margins, but let’s face it, most of us would like more. Fortunately css3 is giving us more tools for layouts. One of those tools is the flexible box.
The Buttonize Framework is a simple, light-weight CSS file with precompiled styles and colours for quick, modern looking buttons. It uses CSS3 for rounded corners and subtle gradients but with bulletproof fallbacks for older browsers.
Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3?s help, it was never easier to create nice looking buttons. In this article you’ll learn how to create some cool CSS3 buttons in just a few steps.
I love CSS3 transitions! They’re easy to implement, more performant than the setTimeout based alternative & because of this work really well on mobile devices..
Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover.
Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.
This post looks at a way to add a subtle noise effect to HTML elements using CSS. Using this technique is of interest because it doesn’t require use of an image editor, weighs in at just a little over 2K and doesn’t generate any extra HTTP requests.
For all the wonderful features it provides, CSS does a surprisingly poor job of the fundamentals of page layout. But options for richer, more dynamic pages are on their way, as Peter Gasston explains..
In my previous article about CSS Sprites – Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.
Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.
I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris..
The new semantic elements in html5 are fairly easy to understand, but to really become comfortable using them you need to actually use them in documents. To get myself started I created a demo page representing a typical blog post and developed it using html5.
In a recent project, the client asked me if there is any way to add reflection to images. He wanted this effect because he liked the reflection effect added by designer in the design of his website. But the issue was that he might need to add more images in the future, and he cannot go back to his designer every time. Of course learning photoshop to do it by himself did not excite him either.
We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.
Now, I’ve created Avery labels using Office, Illustrator, even Photoshop — but never using web technologies. You just don’t have a lot of control printing from your browser using CSS. Or do you…? After all, we’ve always been able to specify real-world measurements such as “in” and “cm” using CSS..
Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.