STYLE SWITCHER

CSS3

Jan 23rd, 2017
0
CSS , CSS3

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
Jan 14th, 2017
0
CSS , CSS3 , HTML 5

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
Jan 10th, 2017
0
CSS3 , Jquery

FancyBox3

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Website  
More
Dec 29th, 2016
2
CSS3 , HTML 5 , 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
Dec 14th, 2016
0
CSS3 , HTML 5 , Jquery

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
Dec 6th, 2016
0
CSS3 , Inspirational websites

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.
[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]  
More
Dec 6th, 2016
0
CSS3 , HTML 5 , Jquery

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.
[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]  
More
Nov 24th, 2016
0
CSS3 , Jquery

Random Text Shuffle with Javascript

codepen-random-text-shuffle
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]
More
Nov 17th, 2016
0
CSS , CSS3 , HTML 5

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
Nov 4th, 2016
0
CSS3 , HTML 5 , Jquery

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