This is a tutorail to cretae a CSS animated intro section for your website.CSS animation is agreat way to grab the user’s attention to a specific section of the website.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. By default, the intro content is hidden by setting its opacity to zero, then…
This is some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element. Animation is at the top element of a stack by clicking on an accept or reject button.These kind of animations can fit into many scenarios involving all kinds of card stacks that don’t necessarily have a dual logic. Some of the CSS techniques we use are only supported…
Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values. Not only a round slider, it supports the quarter, half and pie circle shapes also. Due to the flexibility of roundSlider, the user can do any customization based on their requirement. Here, some examples for the basic customization.By customizing the CSS styles we can make different appearances. It supports…
A mobile “pull to share” interaction that allows to share a page by using the familiar “pull to refresh” movement. It’s based on the action for refreshing and opening/closing a tab in Google Chrome for mobile. You can create a pull-to-share interaction that is based on the same Google Chrome interaction on iOS for opening/closing a new tab or refreshing the current tab. The sharing interaction in this experiment will do the following: when at…
It’s easy to create a website. You can do it with website builders from your phone, these days; or you could create a website at Websitebuilder.com in under 30 minutes. But being able to write in code allows you to include impressive elements to increase presentation, form, and function of any website. Parallax images and fullscreen videos are all the rage in web design these days, and for good reason: they have a lot of…
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin. The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack. When clicking on a menu item, the respective page comes up.
Project Cards Template is a portfolio template with expandable projects and a full-page navigation inspired by Primer app.It’s been created by Codyhouse and inspired by the Primer app, which makes a great use of cards and motion throughout their design.Expandable items and a bold, full-page navigation have been applied. Here’s a quick animation that explains the cards positioning
Neutron is a Sass framework that empowers you to create flexible, clear, and semantic website layouts.Neutron is built from the beginning to be clear, concise, and–primarily–a flexible system for creating website layouts. Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up…
Corpus is a CSS toolkit by Jamie Wilson. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities.Prism.js is used for syntaxhighlighting and Predawn color scheme.Styles are written in SCSS.
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. This is an in-depth tutorial by Codrops on how to build the ripple effect outlined under Google Material Design’s Radial…