CSS - Designbeep https://designbeep.com Free Resources for Designers and Developers Sun, 28 Jan 2018 09:20:45 +0000 en-US hourly 1 Micron.js – Create CSS Animations Controlled by JavaScript Power https://designbeep.com/2018/01/29/micron-js-create-css-animations-controlled-by-javascript-power/ Mon, 29 Jan 2018 09:06:09 +0000 http://designbeep.com/?p=66809 Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods. You can easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it’s Button, SVG or a Paper. Micron.js

The post Micron.js – Create CSS Animations Controlled by JavaScript Power first appeared on Designbeep.

]]> Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

You can easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it’s Button, SVG or a Paper.

[gpp_button color=”blue” url=”https://webkul.github.io/micron/” title=”css animation” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Micron.js[/gpp_button]

The post Micron.js – Create CSS Animations Controlled by JavaScript Power first appeared on Designbeep.

]]> Tailwind CSS – A Utility-First CSS Framework for Rapid UI Development https://designbeep.com/2017/11/06/tailwind-css-a-utility-first-css-framework-for-rapid-ui-development/ Mon, 06 Nov 2017 08:00:53 +0000 http://designbeep.com/?p=66038 Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit. It doesn’t have a default theme and there’s no built-in UI components.If you’re looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you’re looking for.Tailwind provides highly composable, low-level utility classes that make

The post Tailwind CSS – A Utility-First CSS Framework for Rapid UI Development first appeared on Designbeep.

]]> Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.

It doesn’t have a default theme and there’s no built-in UI components.If you’re looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.

But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you’re looking for.Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.

[gpp_button color=”blue” url=”https://tailwindcss.com/” title=”CSS Framework” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Tailwind CSS[/gpp_button]

The post Tailwind CSS – A Utility-First CSS Framework for Rapid UI Development first appeared on Designbeep.

]]> Vivify – A New Free CSS Animation Library https://designbeep.com/2017/08/29/vivify-a-new-free-css-animation-library/ Tue, 29 Aug 2017 07:30:59 +0000 http://designbeep.com/?p=65495 As web standards are changing constantly and being improved, we see now that web browsers can do many more things than just displaying text and images. The era of having web pages with just images and text is long gone and in order for you to be successful in this competitive area, you need to be very creative and stand out from the crowd. Animations on websites are great, and, more and more web designers are using them to give some cool effects on their designs to enhance user experience and satisfaction. Some years ago, animations could only be done

The post Vivify – A New Free CSS Animation Library first appeared on Designbeep.

]]> As web standards are changing constantly and being improved, we see now that web browsers can do many more things than just displaying text and images. The era of having web pages with just images and text is long gone and in order for you to be successful in this competitive area, you need to be very creative and stand out from the crowd.

Animations on websites are great, and, more and more web designers are using them to give some cool effects on their designs to enhance user experience and satisfaction.

Some years ago, animations could only be done with Javascript or using Adobe’s Flash but now the latest version of CSS, CSS3, has introduced some new basic effects which are faster and lighter on browsers to create some cool animations.

So today are sharing a fresh CSS animation library which is Vivify. It’s been developed by Martin Kníže
This CSS library contains many many class names you can add. Just take a look at the Vivify documentation and demo page.

[gpp_button color=”red” url=”http://vivify.mkcreative.cz/” title=”css animation” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Vivify[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Vivify – A New Free CSS Animation Library first appeared on Designbeep.

]]> Fractures – Baseline Atomic CSS Toolkit https://designbeep.com/2017/08/22/fractures-baseline-atomic-css-toolkit/ Tue, 22 Aug 2017 04:14:18 +0000 http://designbeep.com/?p=65447 Fractures is a baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.It’s been developed by Krisztian Puska – a developer and designer from Hungary.The project consists of a library providing a set of CSS utility classes for handling spacing, grids, alignment and even typography in a matter of seconds. Features: – You can design with — not around it. Leaves UI untouched. – Atomic, non blocking. – Manageable cognitive load, with a small footprint. – Fast in every way. – Framework agnostic.

The post Fractures – Baseline Atomic CSS Toolkit first appeared on Designbeep.

]]> Fractures is a baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.It’s been developed by Krisztian Puska – a developer and designer from Hungary.The project consists of a library providing a set of CSS utility classes for handling spacing, grids, alignment and even typography in a matter of seconds.

Features:

– You can design with — not around it. Leaves UI untouched.
– Atomic, non blocking.
– Manageable cognitive load, with a small footprint.
– Fast in every way.
– Framework agnostic.

[gpp_button color=”blue” url=”https://fractures.space/” title=”css toolkit” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Fractures[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Fractures – Baseline Atomic CSS Toolkit first appeared on Designbeep.

]]> Shoelace.css – Basics CSS Starter Kit https://designbeep.com/2017/08/14/shoelace-css-basics-css-starter-kit/ Mon, 14 Aug 2017 07:59:06 +0000 http://designbeep.com/?p=65345 Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing. Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any preprocessing at all. Just link to shoelace.css and add customizations directly to your stylesheet. You can use the CDN version or download the source manually. Shoelace.css View All Free Tools

The post Shoelace.css – Basics CSS Starter Kit first appeared on Designbeep.

]]> Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing.

Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any preprocessing at all. Just link to shoelace.css and add customizations directly to your stylesheet.

You can use the CDN version or download the source manually.

[gpp_button color=”blue” url=”https://shoelace.style/” title=”CSS starter kit” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Shoelace.css[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Shoelace.css – Basics CSS Starter Kit first appeared on Designbeep.

]]> Spectre.css – A lightweight, responsive and modern CSS framework https://designbeep.com/2017/06/30/spectre-css-a-lightweight-responsive-and-modern-css-framework/ Fri, 30 Jun 2017 04:40:15 +0000 http://designbeep.com/?p=65023 Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. – Lightweight (~10KB gzipped) starting point for your projects – Flexbox-based, responsive and mobile-friendly layout – Carefully designed elements and components Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with LESS compiler. Spectre.css View All Free Tools

The post Spectre.css – A lightweight, responsive and modern CSS framework first appeared on Designbeep.

]]> Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

– Lightweight (~10KB gzipped) starting point for your projects
– Flexbox-based, responsive and mobile-friendly layout
– Carefully designed elements and components

Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with LESS compiler.

[gpp_button color=”blue” url=”https://picturepan2.github.io/spectre/” title=”css framework” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Spectre.css[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Spectre.css – A lightweight, responsive and modern CSS framework first appeared on Designbeep.

]]> Typography Animations and Letter (hover) Effects https://designbeep.com/2017/06/14/typography-animations-and-letter-hover-effects/ Wed, 14 Jun 2017 07:53:38 +0000 http://designbeep.com/?p=64872 This is a couple of ideas for typography animations and letter (hover) effects for playful interactions developed by Codrops. You can find awesome text animations that you can use in your web projects. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. The below examples have been created using anime.js. and Charming.js So just see the demo and find out how to create such effects. Live Preview    

The post Typography Animations and Letter (hover) Effects first appeared on Designbeep.

]]> This is a couple of ideas for typography animations and letter (hover) effects for playful interactions developed by Codrops. You can find awesome text animations that you can use in your web projects.

Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out.
The below examples have been created using anime.js. and Charming.js

So just see the demo and find out how to create such effects.

[gpp_button color=”blue” url=”https://tympanus.net/Development/LetterInteractions/” title=”css letter” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Live Preview[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2017/06/07/some-letter-effects-and-interaction-ideas/” title=”css letter” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

The post Typography Animations and Letter (hover) Effects first appeared on Designbeep.

]]> Item Reveal Animations with SVG https://designbeep.com/2017/05/29/item-reveal-animations-with-svg/ Mon, 29 May 2017 07:53:18 +0000 http://designbeep.com/?p=64792 This is an experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. It’s been developed by Codrops. These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website. The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG paths allows to specify several steps for the animation which leaves us with virtually endless possibilities. Demo  

The post Item Reveal Animations with SVG first appeared on Designbeep.

]]> This is an experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. It’s been developed by Codrops.

These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website.

The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG paths allows to specify several steps for the animation which leaves us with virtually endless possibilities.

[gpp_button color=”blue” url=”https://tympanus.net/Development/ItemRevealer/” title=”SVG” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2016/06/29/item-reveal-animations-with-svg/” title=”SVG” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Item Reveal Animations with SVG first appeared on Designbeep.

]]> Folder Preview Examples With CSS Animation When Hovering https://designbeep.com/2017/05/18/folder-preview-examples-with-css-animation-when-hovering/ Thu, 18 May 2017 09:02:08 +0000 http://designbeep.com/?p=64734 These are some ideas for previewing or just playing with folders on hover developed by Codrops. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what’s inside. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. A couple of modern CSS properties have been used so this demo only works in the latest browsers. Demo    Source

The post Folder Preview Examples With CSS Animation When Hovering first appeared on Designbeep.

]]> These are some ideas for previewing or just playing with folders on hover developed by Codrops. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what’s inside. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder.

A couple of modern CSS properties have been used so this demo only works in the latest browsers.

[gpp_button color=”blue” url=”https://tympanus.net/Development/FolderPreviewIdeas/” title=”Animation When Hovering” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2017/05/17/folder-preview-ideas/” title=”Animation When Hovering” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Folder Preview Examples With CSS Animation When Hovering first appeared on Designbeep.

]]> Ember Burger Menu: Off-canvas sidebar component using CSS transitions https://designbeep.com/2017/05/04/ember-burger-menu-off-canvas-sidebar-component-using-css-transitions/ Thu, 04 May 2017 08:11:11 +0000 http://designbeep.com/?p=64637 This is an off-canvas sidebar component with a collection of animations and styles using CSS transitions. It’s been developed by Offir Golan. This addon utilizes contextual components to be able to correctly control and animate necessary elements. If you’re not impressed with the in-house animations and want to create your own, all you have to do is pass the following class to the customAnimation property in the {{burger-menu}} component. If you think your animation would be a good addition to the existing collection Features: – Easy to use & setup off-canvas menu – Mix and match from many menu &

The post Ember Burger Menu: Off-canvas sidebar component using CSS transitions first appeared on Designbeep.

]]> This is an off-canvas sidebar component with a collection of animations and styles using CSS transitions. It’s been developed by Offir Golan. This addon utilizes contextual components to be able to correctly control and animate necessary elements.

If you’re not impressed with the in-house animations and want to create your own, all you have to do is pass the following class to the customAnimation property in the {{burger-menu}} component. If you think your animation would be a good addition to the existing collection

Features:

– Easy to use & setup off-canvas menu
– Mix and match from many menu & menu item animations
– Control your menu from anywhere in your app
– Swipe gesture support with changeable thresholds
– Easily create your own animations

[gpp_button color=”blue” url=”https://offirgolan.github.io/ember-burger-menu/” title=”CSS transitions” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Ember Burger Menu[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Ember Burger Menu: Off-canvas sidebar component using CSS transitions first appeared on Designbeep.

]]>