css Archive

This is a couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations developed by Codrops. You will explore some different layouts combined with some engaging CSS animations. The demos all have a schematic …

This is a great resource developed by Codrops. Basically a collection of ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease …

Open color is a color scheme for UI design. You can use it for font, background, border, etc. It contains a gray and twelve colors. Open color is provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette. All …

You’ve probably seen something similar to this before on car dealership sites. Pick a car, pick a color, pick wheel style, pick additional options etc. As you go through the image changes based on your selections. That’s a product builder! Product builders …

This is a tutorial to create inspirational input focus effects using css3 and jQuery.In this tutorial, you see animated input border effect, animated background effect and animated placeholder effects on focus. And you can also see placeholder move as a label on …

Colofilter.css is a Duotone filters made with CSS. Those colorful filters uses css blend modes and were heavily inspired by Spotify. This is called “DuoTone”, and today, with the power of CSS you can play around with some blend-modes properties, to get …

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.It wors in a variety of projects, furthering the cause for an accessible web. This plugin requires your website or application already runs a copy of jQuery, version 1.11.2 or higher. It …

Orkney is a geometric typeface designed and conceptualised by Samuel Oakes and Alfredo Marco Pradil. The goal in creating the typeface was to have a unique yet functional typeface that can be used for a wide variety of projects on print or …

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.You can also add any HTML special character to your tooltips, or even use third-party Icon fonts: Balloon.css make use of pseudo-elements thus self-closing elements such …

This is a photographic filter project created using only CSS.These filters are inspired by VSCO and are not exact replicas of their filters, but are as close as they are. Unfortunately, IE & Edge browsers, as well as Opera Mini do not …

This is a tutorial by Codrops on how to create a very simple intro effect similar to the one seen on the Takeit website where a stack of Polaroids gets animated to a grid when clicking on a button or when scrolling. …

This is a simple portfolio template, with project preview images that slide out to reveal the selected project by Coyhouse.The idea is to move blocks of content as a way to transition from the main/gallery page to the project page. All panels …