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
Source: http://ift.tt/13G2Jnh
No comments:
Post a Comment