STYLE SWITCHER

CSS3

The revert CSS keyword

The revert CSS keyword

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.
<body>
  <div>Hello, world!</div>
  <div class="unset">Hello, monkey!</div>
  <div>Hello, watermelon!</div>
</body>
body {
  background-color: #F5F5F5;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

div {
  background-color: #C0C0C0;
  color: #006400;
  font-family: Georgia, Times, Times New Roman, serif;
}
.unset{
  all:unset;
}

See the Pen The unset CSS by Anish M Alias (@anishmalias) on CodePen.

Demo More Info
More
Bootstrap Dropdown Slidemorph Menu

Bootstrap Dropdown Slidemorph Menu

Bootstrap Dropdown Slidemorph Menu inspired by Youtube context menus within a video player. Transitions between submenus create very neat experience. Also, menu provides information about selected values for each item.
Website
More
FancyBox3

FancyBox3

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Website  
More
Custom Checkbox using SASS

Custom Checkbox using SASS

Styling default checkbox using SASS.

HTML

<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;
	}
}
More
Huebee – One-Click Color Picker with Javascript

Huebee – One-Click Color Picker with Javascript

huebee-brand
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
More
Background Blur – Ultra Light jQuery Plugin for Blurring Images

Background Blur – Ultra Light jQuery Plugin for Blurring Images

background-blur-plugin-by-msurguy
Background Blur plugin is an ultra small, cross browser jQuery plugin for blurring images.
Website  
More
Tilt Hover Effects with CSS and Javascript

Tilt Hover Effects with CSS and Javascript

tilt-hover-effects-codrops
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.
Website
More
Random Text Shuffle with Javascript

Random Text Shuffle with Javascript

codepen-random-text-shuffle
A simple javascript library to create colorful and crazy random text shuffle effect.
Website
More
Milligram – A minimalist CSS framework

Milligram – A minimalist CSS framework

screenshot-milligram-github-io-2016-11-17-22-38-13
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
More
Gradientify – jQuery Plugin to Provide CSS Gradient Transitions

Gradientify – jQuery Plugin to Provide CSS Gradient Transitions

jquery-gradientify-plugin-demo
Gradientify is a simple jQuery plugin that provides CSS gradient transitions.
Website
More