CSS Transitions(linear, ease, ease-in,etc.)

All the different properties for the CSS3 animation and transition can be confusing at first. The typical properties are usually:linear, ease, ease-in, ease-out, ease-in-out

Here is a quick summary: 

linear: no acceleration or slow down
ease: fast beginning and a slowdown at the end (the default)
ease-in: start slow and then finish fast
ease-out: normal beginning and slowdown at the end
ease-in-out: starts slow, fast in the middle and finish slow

A simple way to thinking of it is to think of “ease” as “take it easy- in this position“, so for example:
“ease-in”: Take it easy near the beginning
“ease-out”: Take it easy at the end
“ease-in-out” Take it easy at the beginning and the end

Simple tear drop effect with CSS3

With CSS3 and the support of webkit it’s become super easy to apply rounded corners . Below I will show you guys how to do a simple teardrop effect using CSS3.

So we will transform a simple square to a teardrop:

            

 

#tear{
	margin: 0 auto;
	top: 60px;
	position: relative;
	width: 300px;
	height: 300px;
	background-color: #6CF;

	-webkit-border-top-right-radius: 70px; 
	-webkit-border-bottom-left-radius: 70px; 
	-moz-border-radius-topright: 70px; 
	-moz-border-radius-bottomleft:70px; 

	}

*Note that you can also do a full rounded corner by simply doing –webkit-border-radius: #px;

Basics of web font-size types (px, em,pts)

Pixels(px)

The default font size in the web is 16px.

What 16px refers to is the height of the font from highest top to the lowest bottom of the letters. For instance an “e” may only be 10px but when the letter is included with a word such as “Legit” it gets measured from the lowest bottom of the “g” and highest tipping point of the “L” which accounts to 16px.

Em

A lot of people get confused about em, but there’s nothing really that difficult about them if we can think of them like ratios.

1em = default font

So

1.5em = 1.5 x default font

font-size:16px;

font-size:2em;

The above code will approximately double the font size to 32px.

 

Pt

A point is rarely ever used as this unit of measurement is used for physical print. This is based on ink on paper typography. To put it in metaphors,  pixels are to web as points are to paper. Points should never be used on the web as they vary wildly from browser to  browser so you don’t have to understand the ratios converting to pts.

CSS3 fonts

Integrating custom fonts into your CSS3 is very easy. This is established by using the font-face property. Since the code is easy lets dive right into the CSS.
Example:

/**********
CSS3
***********/

@font-face{
font-family: special font name;
src: url(‘directory of your download fonts’);
}
p{
font-family:special text, sans-serif, helvetica;

}
To download free text that is @font-face compatible you can go to this site:

http://www.fontsquirrel.com/fontface

Working with CSS3 backgrounds

Working with CSS3 backgrounds

Layers

With CSS3 you can stack different backgrounds in different layers. You can accomplish this simply by separating the different background links with commas “,”.  Background layers will work with Chrome, Safari and Firefox, in addition to IE9.

For example:
background: url(‘../../Pictures/Milhouse.gif’)  no-repeat ,   <–First background 
url(‘../../Pictures/Milhouse1.jpg’) top right no-repeat; <– Second background layer 

Size
The CSS3 property lets you adjust the background size straight from the code without having to readjust in an image edidor like photoshop.

The code is simple:

Background-size: width, height

For example if a background size of 2400 x 1800 px is too big we can cut this in half by writing:
background-size: 1200px, 900px;

Background origin/clip

Background-origin is where the background image actually starts and background-clip is where the background gets cut off.

There are 3 attributes for the background origin/clip property, they are: border-box, content-box, padding-box

Background-origin: border-box, content-box, padding-box
or
Background-clip: border-box, content-box, padding-box

Depending on which of the three you choose, that is where your background image will begin.

For example:

Background-origin:border-box;
Background-clip:content-box;

The above code means that the background will start immediately from the border and be clipped  or cut off wear the content box starts.