I was trying a few weeks ago to find some CSS3 tutorials on a specific topic so I looked and looked and went through a lot of articles and annoyed me that I spent a lot of time looking for that single tutorial I wanted.
To help you not go through the same thing I’ve made a sorted list of CSS3 tutorials on 5 categories: Navigation tutorials, Text tutorials, Gallery and Animation tutorials and Misc tutorials. This way a newcomer to CSS3 coding can find what he wants and needs.
Navigation
Multi-Level Accordion Menu
Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with jQuery as well, in case you prefer a subtle animation compared to the instant default effect.
Shazam-Like Morphing Button Effect
In this tutorial we’ll create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening button. We’ll animate some musical notes that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with album info of the “identified” song.
Stretchy Navigation
A rounded navigation trigger that stretches on click/tap to reveal the navigation items.
Creating Material Design Ripple Effects with SVG
With the advent of Google’s Material Design came a visual language that set out to create a unified experience across platforms and devices. Google’s examples depicted through their Animation section of the Material Guidelines has become so identifiable in the wild that many have come to know these interactions as part of the Google brand.
In this tutorial we’ll show you one way of building the ripple effect specifically outlined under Radial Action of the Google Material Design specification by combining it with the powers of SVG and GreenSock.
Building Full Screen CSS3 Menus with Tons of Creative Demos
This article will cover how to build these complex and responsive menus using almost nothing but CSS3 techniques. The only JavaScript involved is used for toggling a class on the body element. We choose to toggle the body class because that gives you free reign to manipulate any element on the web page when you want the menu to be shown – giving you an extra edge level of control for getting creative with just CSS.
Responsive Sidebar Navigation
Building responsive navigation for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project
Creating an Animated Menu Indicator with CSS Selectors
In this article, I’ll cover creative ways of using sibling selectors and pseudo elements to make a CSS-only menu indicator that would normally be achieved using JavaScript.
Mega Dropdown: A responsive and easy to customise mega-dropdown component.
12 Fun Sharing Button Effects
Everyone loves eye candy and smooth CSS3 animations. This is why today we are sharing our latest experiment with you – a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more!
Breadcrumbs & Multi-Step Indicator
A handy snippet to create responsive CSS breadcrumbs or multi-step indicators with ease.
How to Create a Circular Progress Button
A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.
Secondary Sliding Navigation
Today’s resource is a simple, handy snippet: a secondary navigation that slides down, replacing the main navigation links.
This approach can be an alternative to a standard dropdown menu, in particular if you want to emphasise more the sub navigation. Besides you can easily customize the snippet and use the slide in panel for a search box instead, or a login form – just to give you a couple of ideas.
Bouncy Navigation
There are cases when you want to present the user with a choice, with the focus of the web page being the different options. Whether it is a modal navigation, or a list of categories, todays nugget gets you covered!
They used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen.
Gallery and animation
Animated Page Transition
A CSS powered animation, that replaces the refresh of the page while the content is updated using Ajax.
Animating an SVG Menu Icon with Segment
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.
Presentation Slideshow
Although presentations are usually created using native apps, we decided to challenge ourselves and design a presentation template for the browser. It wasn’t an easy task, for the way you interact with a presentation slideshow is different compared to how you scroll through a website: each unit/slide must be isolated, so that its content can be assimilated before switching to the next one.
Animating Sliding Door Images To Reveal A Background
As a general rule it’s best not to disturb the integrity of a well-crafted photograph, but it is possible to split an image to reveal content hidden underneath. Most methods use two separate images, but it’s much more efficient to do so using CSS.
Using Multi-Step Animations and Transitions
CSS animations are rad and the concept is fairly simple. Name the animation, define the movement in @keyframes and then call that animation on an element. If you haven’t worked with them, you can level up on the syntax right here in the Almanac.
While the concept is simple, there are little tricks to make the animations seem complex and one of those is multi-step transitions. That’s what we’re going to look at in this post.
Animated Intro Section
Animations in web design are often used to drive the user’s focus to a specific section. One section you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However we decided to spice things up a little by creating some text effects that you can easily apply to the intro section of your web projects.
Quad-Image Gallery
A little gallery the author was inspired to pull together: four images arranged in a rectangle, each transitioned to a larger size on a click, with captions.
How to animate “box-shadow” with silky smooth performance
How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.
There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo-element.
Animated SVG Image Slider
A simple, responsive carousel with animated SVG paths used as transition effects.
CSS 3D Captioned Domino Image
3D Bold Navigation
Today’s resource is a strong approach to showing a website navigation. Bear in mind, though, it doesn’t have to be the “main” navigation. You could have, for example, a product gallery and you’d like to create a smooth transition while switching from one product category to the other.
Animated CSS3 Photo Stack
In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
CSS Animated Gallery With Persistent Images, Part Two
SVG Animations Using CSS and Snap.svg
Text
Automatic Text Contrast with CSS Blend Modes
Contrast is a basic accessibility concern often overlooked by designers in love with subtlety, shading, and thin sans-serif fonts. But contrast becomes an inescapable issue when text crosses into an area similar in color to itself.
How to Create (Animated) Text Fills
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
Animated Headlines
A collection of animated headlines, with interchangeable words that replace one another through CSS transitions.
Wrapping Text Around Circular Images With CSS Shapes
Dynamic Web Typography: Exploding Text
Inspiration for Text Styles and Hover Effects
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. So today we’d like to share a couple of text styles and hover effects with you to get your creative juices flowing. We hope you enjoy them and find them inspiring!
Easy Cross-Browser Text Masks with Blend Modes
Misc
Shaded Progress Bars: A CSS/Sass Exercise
A tutorial on how to create some interesting 3D progress bars with CSS/Sass. Discover how to use box shadows and gradients to create realistic looking skins.
Consider this tutorial an advanced CSS exercise that will give you insight in a lot of interesting 3D properties and shading techniques. Creating UI components using only CSS will train your ability to think outside of the box and in this tutorial we will show you some tricks on how to create a more complex shape, use it as a progress bar and animate it.
Horizontal Timeline
Building a horizontal timeline was a bit tricky, because you can’t rely on the vertical (more intuitive) scrolling behaviour. They decided to separate timeline and events, with the first one working like a slider, while the second one occupying the full width and showing a single event at a time.
Creating Scrolling Parallax Effects with CSS
For quite a long time now websites with the so called “parallax” effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor.
MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes
How to Create a Fullscreen Video Opening Animation
In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video.
The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.
Project Cards Template
A portfolio template with expandable projects and a full-page navigation inspired by Primer app. Today’s resource is inspired by the Primer app, which makes a great use of cards and motion throughout its design. They applied similar effects to a portfolio template, with expandable items and a bold, full-page navigation.
Animating CSS Background Blend Modes
Styling & Customizing File Inputs the Smart Way
A tutorial on how to style and customize in a semantic, accessible way using the element and some JavaScript.
Animated SVG Hero Slider
Filtered HTML Image Caption With Dynamic Clip
Create inline help tips for your site with a bit of CSS
When creating a web app, you often need to present people with friendly help prompts that explain parts of your interface. One of the ways to do it is to have separate pages with help topics that you link to. However, this causes people to lose context of what they are doing and is not very user friendly.
3D Folding Panel
3D fold effects are pretty popular nowadays, mostly because they have been integrated quite often in mobile apps. A beautiful example is the iOS Peek Calendar app. Thanks to CSS3 transformation and transitions, we can create a similar interaction in the browser!
Sliding Header Layout
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid. Today we’d like to show you how to create a simple grid layout with a special header effect.
The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. We’ll be using some techniques like Flexbox and CSS Transitions for modern browsers.
Product Tour
A responsive tour snippet, with a step-by-step guide to help users understand how to use your website. Onboarding processes are essential to let users familiarize with your website/app functionalities as soon as possible.
A common user case is the “free trial”: if a user is taking your app for a spin, he’s going to gather as many information as he can in few minutes, before deciding whether your app is worth paying for. You don’t want one of these info to be “how the hell does this work”? The easiest way to improve user experience is to build a simple step-by-step intro tour.
CSS Only Dropdowns With The Checkbox Hack
In this quick tip, we are going to take a look at a CSS only technique for creating dropdowns. It revolves around the checkbox HTML element and some smart usage of CSS selectors without a single line of JavaScript.
The “Blur Up” Technique for Loading Background Images
Page Preloading Effect
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.
Quick Add To Cart
A handy snippet to let users customize a product directly from the products gallery, and add it to the cart. Taking advantage of bigger screens shouldn’t be limited to the use of bigger images/elements. We can put those extra pixels to work by enhancing the user experience with additional features.
“Scribble” Image Reveal with SVG and Blend Modes
Mobile “Pull to Share” Interaction Experiment
A mobile “pull to share” interaction that allows to share a page by using the familiar “pull to refresh” movement. Based on the action for refreshing and opening/closing a tab in Google Chrome for mobile.
Fixed Background Effect
A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.