Multiple Backgrounds

 

background-image: url([1stImg), url(2ndImg);

background-repeat: no-repeat, no-repeat

background-position: center, top left;

background-size: 300px, 100%;

 

 

Color

hex color

0: darkest f: lightest

red, green, blue channel 

 

rgb color: rgb(red, green, blue);

 

Opacity

 

opactity: 0부터 1까지.  1이 solid,  안에 있는 텍스트까지

 

background에서 rgb대신에 rgba로..

 

 

CSS Gradients

 

.button{

  display: block;

  width: 100px;

  padding: 12px;

  border: 1px solid #77aaaa;

  font-family: arial;

  font-weight: bold;

  text-transform: uppercase;

  color: #fff;

  font-size: 14px;

  text-align: center;

  border-radius: 4px;

  background: #aadddd;

}

 

linear-gradient(top, #aadddd 0%, #77aaaa 100%)

                           시작컬러         

 

-moz- : firefox

-webkit- : chrome

 

Ulimate CSS Gradient Generator

www.colorzilla.com/gradient-editor/  

 

 

Box Shadow

 

box-shadow: 2px 2px 4px 2px rgba(40,40,40,0.6); h-offset, v-offset, blur, spread, color

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp 참조

 

www.cssmatic.com/box-shadow