Notification Styles Inspiration Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects. View demo Download source Today we’d like to share a couple of simple styles and effects for website notifications. In this small set of notification style variations our aim was to do exactly that. Note that the effects will only work in browsers that support CSS animations and 3D transforms. There are several issues in IE: Animating the stroke-dashoffset of the SVG path for the circular loading animation using a CSS animation does not work. Firefox (Win) does not seem to like box shadows when flipping things, but we’ve left it nonetheless in the bouncy flip effect because it looks so neat in all the other browsers. We’ve used some great resources that helped creating the effects: The icons used in some of the demos are from the Linecons icon set and the web font was created with the IcoMoon App.
Tab Styles Inspiration A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques. View demo Download source Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. For the demo we’ve used a flexbox layout so make sure you view it with a modern browser. The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font. For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs. The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css Take a look at some of the examples: There are a couple of example media queries and fallbacks that can be customized. We hope you enjoy these styles and get inspired :)
Off-Canvas Menu Effects Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. View demo Download source Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. Please note that the effects serve as inspiration and will work (best) in modern browsers. Let’s take a look at some of the styles. This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho. This demo is using Snap.svg for animating SVG paths.
Minimal Form Interface A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. View demo Download source Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website and thought that this is a really nice and user-friendly concept for a form. So, the idea is to show the user just one input field at a time, without any clutter or distractions, but only with elements that are helpful in indicating how much needs to be filled. Please note that we are using some modern CSS properties like pointer-events and animations which are not supported in older browsers. Initially, we don’t show the navigation arrow. The numbers in the bottom right tell the user how many questions there are in total and which question is the current one.
slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:
Draggable Dual-View Slideshow An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed. View demo Download source Today we’d like to share an experimental slideshow with you. The idea is based on the great navigation concept from the Wild website where one can view the projects in either fullscreen or in a carousel mode. There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. Please note that this slideshow is highly experimental and only works properly in modern browsers. The images used in the demo are from Unsplash.com. When the slideshow is loaded, we show some info initially, that shows which interaction possibilities exist: The main view of the slideshow is the fullscreen one. When clicking on the arrow button, the content will be revealed in a sliding transition: