This is a collection of fresh button styles and effects for your inspiration by Codrops. CSS transitions and pseudo-elements have been used for most of the effects. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of styles. There are lots of thin lines but also bold typography and vice versa. The transparent button with a slightly rounded border seems to…
Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.It’s been developed by Lea Verou. No extra JS needed for basic usage! Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags: Then you can add an Awesomplete widget by adding the following input tag:
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. Konca enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses…
A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed. This grid is a float and padding-based grid, meaning that it works by using floats to create rows and padding to create the gutters between columns instead of margin. This framework is built based off of config values so any number of columns, gutter sizes, column breakdowns, and breakpoints can be configured…
This is a tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG by Codrops. Can the text fill be animated? Can you fill text with animated shadows or gradients? Or what about using videos for filling the text? In this article there are five ways to create patterned filled text. In three out of these five cases you will retain the ability to…
Littlebox is a set of icons made entirely with CSS.Each littlebox icon is made up of three or fewer elements, but can be called with as a single element with class .lb-icon followed by the .lb-* class associated with the requested icon. It’s easy to include a littlebox icon in your project: Download the littlebox CSS files and initialize the plugin in your project. Add a littlebox icon to your project. The same structure is…
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements. While these effects are based on the place you click or touch, the whole idea of providing a subtle feedback effect is really interesting. Usually, subtle indicators are used in app showcases to visualize a tap on the mobile screen. But these kind of…
This is a tutorial that will teach you how to create a drag and drop interface for a newsletter builder using jQuery.You will be able to create your own template and import it in the builder.You can also learn how you can insert your own template at the end of this tutorial. This builder will have both Download and Export options. When exporting or downloading with the intend of importing it into a…
What’s a transformicon? It’s an animated symbol/button using CSS and presented in a neatly packaged library for Sass along with Vanilla CSS. Transformicons are mostly powered by CSS however, a little piece of JavaScript is required to toggle the transformed states. It supports E10+, Chrome 36+, Safari 6+, Firefox 30+, Opera 22+, iOS 7+, Android 4+, Chrome for Android 38+
Turret is a responsive frontend framework build with LESS to normalize styles for default HTML elements, created by Scott de Jonge. Turret has a simple and intuitive grid system and responsive utility classes for quick development using logical and legible markup.Turret is focused on typography, font definitions, colour palettes, and indicators for intuitive user interfaces. Turret is Less framework for styling native web elements. That’s about it, no javascript, no custom markup, just semantic web…