Codehints | CSS3

Anish

Jan 23^rd, 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

Anish

Jan 14^th, 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

Anish

Jan 10^th, 2017

0

CSS3 , Jquery

FancyBox3

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

Website

More

Anish

Dec 29^th, 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

Anish

Dec 14^th, 2016

0

CSS3 , HTML 5 , Jquery

Huebee – One-Click Color Picker with Javascript

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

Anish

Dec 6^th, 2016

0

CSS3 , Inspirational websites

Background Blur – Ultra Light jQuery Plugin for Blurring Images

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

Website

More

Tilt Hover Effects with CSS and Javascript

Anish

Dec 6^th, 2016

0

CSS3 , HTML 5 , Jquery

Tilt Hover Effects with CSS and Javascript

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

Anish

Nov 24^th, 2016

0

CSS3 , Jquery

Random Text Shuffle with Javascript

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

Website

More

Anish

Nov 17^th, 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