CSS Background

css_background.css

.wildlife {
  background-image: url('img/bear.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}

ol {
	list-style-type: decimal-leading-zero;
}


/* Removing the default left padding of list items */
ol, ul {
	padding-left: 0;
	margin-left: 0; /* for IE */
}

/* 
Text Shadow:
first value: horizontal offset (how far right the shadow will go);
second value: vertical offset (how far bottom the shadow will go);
third value: blur radius;
fourth value: color of the shadow;

Box Shadow: Same as text shadow with the following added value:
fourth value: spread value (spreads the shadow equally). Negative values will shrink the shadow;

** We can create multiple text and box shadows by comma seperating them.
*/
.some_element {
	text-shadow: 5px 8px 10px #222;
	text-shadow: 0 1px 1px rgba(0,0,0, .8);
}

.some_other_element {
	box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8);
	box-shadow: 0 15px 20px -12px rgba(0, 0, 0, .8);
	/* Shadow Inside the box: Use inset keyword at the first or last of the values; */
	box-shadow: inset 20px 20px 5px rgba(0, 0, 0, .8);
	box-shadow: 20px 20px 5px rgba(0, 0, 0, .8) inset;
	box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, .8); /* shadow evenly distributed */
}

/* Gradients: Linear ... */
.some_element {
	background-image: linear-gradient(#ffa949, firebrick); /* default direction: top to bottom; */
	background-image: linear-gradient(to top, #ffa949, firebrick); /* default direction: bottom to top; */
	/* other directions: to right, to left */
	/* Using angle parameters ... */
	background-image: linear-gradient(0deg, #ffa949, firebrick); /* top to bottom */
	background-image: linear-gradient(360deg, #ffa949, firebrick); /* bottom to top */
	background-image: linear-gradient(90deg, #ffa949, firebrick); /* left to right */
	background-image: linear-gradient(45deg, #ffa949, firebrick); /* angle starts from bottom-left to top-right */
}
/* Gradients: Radial */
.some_element {
	background-image: radial-gradient(black, white); /* elliptical by default */
	background-image: radial-gradient(circle, black, white); /* circle */
	/* position of the gradient */
	background-image: radial-gradient(circle at top, black, white);
	background-image: radial-gradient(circle at top right, black, white);
}
/* Gradients with color position */
.some_element {
	background-image: linear-gradient(#ffa949, firebrick 60%, black 120%);
}

/* Multiple background images */
.some_element {
	background: linear-gradient(#ffa949, transparent 90%), 
	linear-gradient(0deg, #fff, transparent), 
	#ffa949 url('to/some/image.jpg') no-repeat center;
}


/* Notes:
1. Padding Percentages both height and width depends on the WIDTH of the containing element
2. If border color is not specified, it will inherit the text color
3. Top and Bottom margins have no effect on inline element. To get that effect, use inline-block
4. You can clear floats by using overflow:auto in the last floated element but the following is better way: */

.classname:after {
	content: "";
	display: table;
	clear: both;
}

/* Notes Cont...
5. Tracking: spacing between all characters in an element;
6. Kerning: spacing between specific character;
*/