jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Website  

Styling default checkbox using SASS.

<div class="custom-checkbox">
    <label>
        <input type="checkbox" name="">                                                   
        <span class="checkbox-icon"></span>
        <span class="checkbox-text">Select</span>
   </label>
</div>                 

Color Variables

$primary_color    : #000;
$fonts_1          : FontAwesome;

Mixins

@mixin transition($transition...){
  transition: $transition;
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
}

SASS Structure

.custom-checkbox{
	position: relative;
	display: inline-block;
	min-height: 19px;
	padding: 0px 0px 0px 27px;

	label{
		margin: 0;
		padding: 0;
		display: block;
	}
	.checkbox-icon{
		width: 19px;
		height: 19px;
		display: block;
		background: lighten($primary_color, 95%);
		border: lighten($primary_color, 80%) 1px solid;
		position: absolute;
		top: 0px;
		left: 0px;
		text-align: center;

		&::before{
			content: "\f00c";
			font-family: $fonts_1;
			font-size: 13px;
			color: lighten($primary_color, 40%);
			display: block;

			opacity: 0;
			filter: alpha(opacity=0);

			transform: translate(4px, 0px);
			-webkit-transform: translate(4px, 0px);
			-moz-transform: translate(4px, 0px);
			-ms-transform: translate(4px, 0px);
			-o-transform: translate(4px, 0px);

			@include transition(all ease 0.2s);
		}
	}
	input{
		display: none;

		&:checked + span.checkbox-icon{

			&::before{
				opacity:1;
				filter: alpha(opacity=100);

				transform: translate(0px, 0px);
				-webkit-transform: translate(0px, 0px);
				-moz-transform: translate(0px, 0px);
				-ms-transform: translate(0px, 0px);
				-o-transform: translate(0px, 0px);
			}
		}
	}

	.checkbox-text{
		font-size: 14px;
		padding-top: 1px;
	}
}

Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click. Huebee has open-source license for personal usage.

Website

Background Blur plugin is an ultra small, cross browser jQuery plugin for blurring images.

[otw_shortcode_button href="https://msurguy.github.io/background-blur/" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button]  

Some ideas for hover animations with a fancy tilt effect by using CSS and javascript. In this idea you can animate an image with a tilt effect on its parts. Having several elements in the item, you can achieve a variety of effects that look very interesting.

[otw_shortcode_button href="http://tympanus.net/codrops/2016/11/23/tilt-hover-effects/" size="medium" icon_position="left" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button] [otw_shortcode_button href="http://tympanus.net/Development/TiltHoverEffects/" size="medium" icon_position="left" shape="square" css_class="codehints-example" target="_blank"]Example[/otw_shortcode_button]  

A simple javascript library to create colorful and crazy random text shuffle effect.

[otw_shortcode_button href="http://codepen.io/SaschaSigl/pen/woGYKJ/" size="" icon_position="" shape="square" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button] [otw_shortcode_button href="http://codepen.io/SaschaSigl/full/woGYKJ/" size="" icon_position="" shape="square" css_class="codehints-example" target="_blank"]Example[/otw_shortcode_button]

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

Website

Gradientify is a simple jQuery plugin that provides CSS gradient transitions.

[otw_shortcode_button href="https://github.com/codefog/jquery-gradientify" size="" icon_position="" shape="" css_class="codehints-post" target="_blank"]Website[/otw_shortcode_button] [otw_shortcode_button href="https://codefog.github.io/jquery-gradientify/" size="medium" icon_position="left" shape="square" css_class="codehints-example" target="_blank"]Example[/otw_shortcode_button]

Sass comes with functions that can easily be applied to colors in your CSS properties. These functions, when used correctly, can be incredibly powerful. They take some of the sting out of choosing and manipulating colors. When used with variables, they can speed up development drastically.

creating variable for the color that we’re going to manipulate:

$base-color: #AD141E;

Darken & Lighten

These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%.

darken( $base-color, 10% )
lighten( $base-color, 10% )

Saturate, & Desaturate

These will will adjust the Saturation of the colors HSL values, much like Darken and Lighten adjusted the Lightness. Again, you need to give a percentage value to saturate and desaturate.

saturate( $base-color, 20% )
desaturate( $base-color, 20% )

Adjust-hue

This adjusts the hue value of HSL the same way all of the others do. Again, it takes a percentage value for the change.

adjust-hue( $base-color, 20% )

Adding Alpha Transparency

Using our hex color we can do a few things to get it to be a little transparent. We can call hsla, rgba, opacify, and transparentize. All of them accomplish the same thing, just in different ways. I stick to rgba as it comes most naturally to me which takes a color and a value from 0 to 1 for the alpha.

rgba( $base-color, .7 )

Tint & Shade

Our very own Phil LaPier has added to those base color functions. Both of these are accessible in Bourbon. They mix your color with a value of white (tint) and black (shade) and are similar to Darken and Lighten. They take the color and a % value for the change.

tint( $base-color, 10% )
shade( $base-color, 10% )

Features

• Fully responsive
• On the fly events edit
• Twitter bootstrap integration
• Animated month change
• HTML5 and CSS3 supported
• Under constant development

Website