CSS Mix Web Design Gallery - Design Resources

How to Use CSS Math Functions

ColorLover — Fri, 15 Apr 2022 05:56:55 +0000

The CSS logical functions calc(), clamp(), min() and max() are supported by all modern web browsers. But, despite being readily available – a simple GitHub search tells us that adoption for these functions has been slow. So, how exactly do we use them to build fluid and responsive layout experiences? Let’s find out.

Easy Dark Mode CSS Trick

ColorLover — Wed, 23 Mar 2022 05:55:53 +0000

Achieve a Dark Mode in the entire user interface using CSS in only one property.

Morphing Background Shapes on Scroll

ColorLover — Fri, 26 May 2017 06:44:29 +0000

A decorative website background effect where SVG shapes are morphing and transforming on scroll.

Timedropper a jQuery UI timepicker

ColorLover — Tue, 02 May 2017 06:28:56 +0000

Timedropper is an eye catching jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker. Set time in 12-hour clock in which the 24 hours of the day are divided into two periods. Change time using mousewheel.

Grid Loading Animations

ColorLover — Wed, 19 Apr 2017 07:41:37 +0000

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.

Summernote: Super simple WYSIWYG Editor

ColorLover — Mon, 14 Mar 2016 18:04:45 +0000

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Colorify.js

ColorLover — Fri, 25 Dec 2015 04:23:05 +0000

Colorify is a script written in Javascript, that allows you to extract colors from images, and manipulates them. From a simple plain color, based on the dominant color, to a beautiful gradient based on the image edges colors, colorify.js will spice up your designs!
- Extract the dominant color from an image
- Generate gradients based on the images colors
- Isolate colors and manipulates them everywhere in the page
- Create a Lazy-revealer system for your images
- Load image dynamically

jQuery Responsive Lightbox Plugin: Chocolat.js

ColorLover — Fri, 11 Sep 2015 03:11:21 +0000

Chocolat.js enables you to display one or several images staying on the same page.
The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.
The viewer may appears full-page or in a block.

"Roboto: Google’s signature family of fonts" is now free

ColorLover — Wed, 10 Jun 2015 03:02:21 +0000

oogle’s signature family of fonts, the default font on Android and ChromeOS, and the recommended font for Google’s visual language, Material Design.
It also contains the toolchain used in creating Roboto.
The font family supports all Latin, Cyrillic, and Greek characters in Unicode 7.0, as well as the currency symbol for the Georgian lari, to be published in Unicode 8.0.
The fonts are currently available in eighteen different styles.
A subset of an earlier version of Roboto is available from Google Fonts, and can be used as a web font.

Jquery Image Player

ColorLover — Fri, 17 Apr 2015 03:16:43 +0000

Businessess need to develop a video to explain the flow of applications like online internet banking, 3D visuals of car interiors, etc. However, this makes the overall file size very heavy. In such cases, users can use this "Jquery Image Player". Though giving a feeling of a video player, this is an image based player with a look and feel of video player.

Restive.JS: Make your site responsive and adaptive

ColorLover — Wed, 08 Apr 2015 04:34:47 +0000

Restive.JS is a JQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.

Space.js : HTML-Driven Narrative 3D-Scrolling

ColorLover — Tue, 07 Apr 2015 03:32:19 +0000

Space.js is a Javascript library which is based on parallax technologies used for narration. The library is HTML-driven, which means that you don’t need to write a single line of JavaScript to use it on your site and still have a lot of flexibility. The core of the library is to divide our HTML into frames, or space-frames as we call them her (to not conflict the common class name “frame”).

droidicon - Over 1600 icons for Android

ColorLover — Wed, 10 Dec 2014 06:21:04 +0000

droidicon provides over 1600 customizable icons, 25 ready-made social badges and more! droidicon makes it super easy to add icons and badges to your app. All of the social badges are already styled. Just add them to your app! Or you can customize the icons however you want.

Google Material Design theme for Bootstrap 3

ColorLover — Fri, 14 Nov 2014 15:00:22 +0000

This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application. Just include the theme, after the Bootstrap CSS and include the javascript at the end of your document (Just before the end of the body tag), and everything will be converted to Material Design (paper) style.

jQuery Face Detection Works on Images & Videos

ColorLover — Mon, 10 Nov 2014 08:42:04 +0000

jQuery Face Detection Plugin detects faces on images, videos and canvases to get theirs coordinates. It tracks a face and outputs the coordinate positions of the face model as an array. We believe that face recognition will open up a ton of possibilities in how we interact not just with each other.

Sweet Alert

ColorLover — Wed, 22 Oct 2014 06:30:30 +0000

Sweet Alert is a beautiful replacement for JavaScript Alert and confirm with animated icons and and window. SweetAlert is highly customizeable and responsive.

Open Source Design Tool to Express Yourself - Gravit

ColorLover — Tue, 30 Sep 2014 12:55:33 +0000

Meet Gravit – the cutting-edge design app that will take your creativity to new heights. Gravit offers the creative possibilities of a full-scale design suite - but in a snug app-sized package. Powerful yet easy-to-handle, Gravit has been custom designed from the ground up with an emphasis on versatility, fluidity and elegance – complex design tasks are made simple through its robust suite of tools and highly responsive smart work environment.

Dynamic Heatmaps for the Web - heatmap.js

ColorLover — Thu, 28 Aug 2014 05:33:57 +0000

heatmap.js v2.0 is the most advanced heatmap visualization library on the web. It has a light footprint (~3kB gzip) and with the new 2.0 release heatmap.js just got faster, with a new rendering module stronger, to handle even more datapoints (40k+) easier to use so you can get up to speed quickly easier to extend for custom functionality

Pexels: Free High Quality Photos under the Creative Commons Zero

ColorLover — Mon, 18 Aug 2014 06:48:33 +0000

All photos on Pexels are under the Creative Commons Zero (CC0) license. This means you can copy, modify, distribute and perform the photos. The pictures are free for personal and even for commercial use. All without asking for permission or setting a link to the source. So attribution is not required. All in all the photos are completely free to be used for any legal purpose.

Find the Name of a Font and Download with Fontface Ninja

ColorLover — Wed, 13 Aug 2014 06:17:30 +0000

You’re browsing a website and you want to find the name of a font? Here comes the ninja! Font Ninja is a Chrome extension (also Safari) allows you to find dont names in any websites and you can download any font on any website. Please don’t steal fonts, we need type designers.