40 Eventual Throng of CSS3 Techniques and Tutorials

Create a Button with Hover and Active States using CSS Sprites

Too many designers neglect the click state (active: property in CSS) in web design, either because they are unaware of it, underestimate the importance of it or are plain lazy.

Awesome Overlays with CSS3

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

11 Classic CSS Techniques Made Simple with CSS3

We have all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there a new age coming. This new age includes the use of CSS3. In today tutorial, I will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Enable CSS pseudo-element selectors in Internet Explorer

I was looking for a plug-and-play script that enables CSS3 :nth-of-type and other CSS3 selectors in Internet Explorer. John Resigs Sizzle is, well, incomprehensible to me (at least) and the mighty Dean Edwards IE7/8 scripts don’t (yet) support the CSS3 selector types I need.

CSS3 Minimalistic Navigation Menu

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).

Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property its now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

How To Create a Stylish Drop Cap Effect with CSS3

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Lets take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

Use CSS3 to Create a Dynamic Stack of Index Cards

Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3.

Beautiful Photoshop-like Buttons with CSS3

One of the elements on a web page that a visitors attention is drawn to first is in many cases a button. Whether it is a Add to cart Leave a comment or Subscribe button, they all are designed to stand out from the rest of the design and make the visitor click on them.

CSS Animation

CSS; Cascading Style Sheets. If you are serious about web design, thats the next thing you should learn.

Pushing Your Buttons With Practical CSS3

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. Its already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

#57: Using CSS3

The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement.

Create Beautiful CSS3 Typography

In this tutorial, you will find how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic. You will also touch on some general typographical concepts along the way.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Horizontal sliding panels are great for many situations, but like everything else, they are not always ideal. It depends on the project. To see what I mean by horizontal sliding panel, go have a look at my other site Design-Newz, and click on the want more button thats on the right above the navigation bar.

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.  Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.

CSS Basics: How to Design & Code a Stylish Button

Some of my most popular articles and tutorials are those that cover the basics. In this post we will go through the process of designing a stylish button graphic in Photoshop, then build a complete working example in HTML and CSS.

How To Code a Blog Theme Concept in HTML & CSS

Last week we went through the process of creating a clean blog theme layout in Photoshop. Now, lets transform the visual concept into a working HTML/CSS prototype web page before finishing everything up as a complete theme next week. We will build the page structure with clean HTML,

Sweet tabbed navigation using CSS3

Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Experimenting with the element() CSS function

Just like I said in my previous article; Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Next to the :any() CSS selector, another cool CSS feature was added to the Gecko engine that I wanted to check out, and is called the element() function.

Customizing Web Form With CSS3 and Webkit

Last week, we shared a few things we would learned about UI in mobile WebKit browsers. In that post we touched briefly on the idea of using CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms. Today I would like to share some specific examples of how we did that.

Build Multi-level Multi-column Multi Menus with pure CSS

I am sure there are many designers and developers who likes to implement the Multi-level, Multi-Column, Multi-Menus, Light Weight and the most Browser Compatible Menu or Navigation with pure css and without using any javascript.

CSS3 Image Styles

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.

How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout.

Rotating billboard using only CSS3

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.

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Lets take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

Write Better CSS With Best Practices

Everyone has a slightly different approach to CSS. Thas part of the reason it can be a nightmare to edit someone else code.

Blur Menu with CSS3 Transitions

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we will apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

Create Spinning Rays with CSS3: Revisited

Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I thought I’d take some time to look at it and improve it.

CSS3 Lightbox

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are click able, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

Having Fun With CSS3: Spinning Newspapers

Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.

Animated CSS3 helix using 3d transforms

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.

BonBon Sweet CSS3 Buttons

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

Splash and Coming Soon Page Effects with CSS3

CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We will experiment with animation sequences and how to bring some life to some simple elements.

Create a Swish CSS3 Folded Ribbon in Five Minutes

Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Lets see how..

Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

CSS3 vs. Photoshop: Rounded Corners and Box Shadows

This tutorial will demonstrate how to create a nice, simple navigation bar using several combined CSS3 styles. We are aiming for a look and feel that in the past could only be created by combining several images, JavaScript and several divs. Lets get it started