[CSS3] Review

Border radius: 
border-radius: <top left> <top right> <bottom right> <bottom left>


Box shadow: 
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius?> <color> 
Example 1: multi shadows
.box{
   box-shadow: 1px 1px #000,
   insert 1px 1px 2px blue;    
}

Example 2: Negative values:
.box{
   box-shadow: -1px -2px 2px #000;    
}


Text shadow:
text-shadow: <offset-x> <offset-y> <blur-radius> <color>

 

 

Box sizing:

  1. content-box: width only apply on content

  2. padding-box: width apply on content+padding

  3. border-box: with apply on content+padding+border

 

 

background: rgba(0,0,0,0.2);

background: hsla(240,100%,50%,0.2);

 

Linear-gradient:

linear-gradient(<angle?> to <side-or-corner>, <color-stop>s);
Example:
.element{
    background: line-gradient( to bottom, red, yellow);
}

Kyewords:

to top       --->   0deg
to bottom --->   180deg
to right     --->   270deg
to left       --->   90 deg

 

Radial gradient:

 

 

Font face:

@font-face{
  font-family: 'DroidSerifRegular';
  src: url('DroidSerif.eot');
  font-style:normal;
  font-weight: normal;
}

 

We want to use the @font-face DroidSerifRegular font on the body copy of our blog. Set the body copy to use this font. Also, let’s set Georgia, Times New Roman, and serif as fallback fonts.

body {
  font-family: 'DroidSerifRegular', Georgia, 'Times New Roman', serif;
}

 

We want to add the bold version of DroidSerifRegular, DroidSerifBold, using the local version at DroidSerifBold.eot. Create a new @font-face declaration, but set it up so that we can use the font-weight to change the weight.

@font-face{
  font-family: 'DroidSerifRegular';
  src:url('EroidSerifBold.eot');
  font-weight: bold;
  font-style: normal;
}

We have our bold @font-face version of Droid Serif set up properly. Now, set the h1 to use this new font.

h1 {
font-family: 'Droid Serif';
  font-weight: normal;
  font-style:  normal;
}

 

Using the transform property, translate the img 20px to the right and 40px down.

img {
transform: translate(20px, 40px); 
}

 

Using the transform property, rotate the img 15deg.

img {
transform: rotat(15deg);
}

Using the transform property, scale the img by 1.5.

img {
transform: scale(1.5);
}

Using the transform property, skew the img by 45deg on the x axis.

img {
transform: skewX(45deg);
}

Let’s add a nice transition to all of our links when they are hovered over. Using the individual properties, add a transition to the color property over the course of 1second, with no delay, and the timing function of ease.

a {
  color: #c44743;
  transition-property: color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

a:hover {
  color: #d56d68;
}

Write a transition on one line using the shorthand transitionproperty. The property we want to transition is background-color, the duration is 0.6 seconds, the timing is linear, and the delay is 0.1 second.

.element {
  background-color: #c44743;
  transition: background-color 0.6s linear 0.1s;
  
}

.element:hover {
  background-color: #d56d68;
}

Using a keyword, change the transition to transition the two properties, color and background-color.

.element {
  color: #c44743;
  transition: all 0.2s ease-in-out 0s;
}

.element:hover {
  background-color: rgba(196, 71, 67, 0.10);
  color: #d56d68;
}