This is where CSS3 comes in, we now can create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised. But we already see that there are loads of tutorial made to teach designers how to use it.
Note: the result of this tutorial will only work as intended in browsers that support CSS animations.
A Pure CSS3 Cycling Slideshow
in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation. To get a solid sense of the process from beginning to end, below is an outline of the article.
Just some other awesome CSS3 buttons
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.
Pure CSS Blockquote Styling
Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.
Animated Content Tabs with CSS3
Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.
How to Create Accordion Menu in Pure CSS3
In this tutorial we will learn how to create an accordion menu in pure CSS3. This menu was inspired in Futurico UI Pro by Vladimir Kudinov. As we will create it with CSS this will only work on browsers and devices that support the :target pseudo-class selector.
Showing Product Information With CSS3 3D Transform
There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. In this tutorial I’m going to share how to show our product information with cube style using CSS3 3D Transform.
How to Build an Accordion Image Gallery with only CSS
:target and the negation pseudo-class
Content Slider Using Pure CSS
A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.
CSS pointer-events and a pure CSS3 animating tooltip
I was creating a CSS-only tooltip and I wanted to fade it in and out using the CSS3
transition property. Fading the
0 works great, except that the tooltip is technically still there (just invisible), blocking mouse interaction with content below it and growing the
:hover area of its parent to include itself. Boo. I couldn’t just toggle
:hover because that would hide the element before it had a chance to smoothly transition out.
Filter Functionality with CSS3
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
CSS3 Animated Progress Bars
Animated CSS3 progress bars created using animation and keyframes properties. It’s created by Lee Munroe originally but I implemented the reverse direction on the progress bar. It uses many CSS3 properties, like
keyframes to make the progress bar and it’s animation.
Rotating Words with CSS Animations
In this tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.