css3

rgba :aで透明度の設定

#box1{
  background: rgba(255, 100, 100, 0.8);
}

hsla :明度の変更

#box1{
  background: hsla(210, 100%, 20%, 0.8);
}

opacity :透明度

body { background: skyblue; }

img{
  border: 7px solid blue;  
  opacity: 0.3;
}

属性セレクタ :^始まる、$終わる、*含む

a[href^="http"]{ color: orange; }

疑似クラス :last-child, nth-child(n) (※odd,evenも可), nth-last-child(n), only-child

li:last-child
{
  background: violet;
}

疑似クラス2 :first-of-type, last-of-type, nth-of-type(n), nth-last-of-type(n), only-of-type

p:first-of-type{
  background: violet;
}

疑似クラス3 :not(.) ,[type=”text”]:enabled, input[type=”checkbox”]:checked + label

li:not(.target)
{
  background:violet;
}

border-radius :角丸, border-radius: 30px / 15px; , order-bottom-right-radius, border-radius: 50%

div {
  width: 200px;
  height: 200px;
  background: skyblue;
  border-radius: 30px;
}

背景切り抜き

div {
  width: 200px;
  height: 200px;
  background: skyblue
  url('orange.jpg');
  border-radius: 50%
}

background-size :cover, contain

body {margin: 0;}

header {
  width: 100%; 
  height: 130px;
  background: url('orange.jpg')
  no-repeat skyblue;
  background-size: 50%;
}

複数の背景画像

body {margin: 0;}

header {
  width: 100%; 
  height: 130px;
  background:
  url('orange.jpg') no-repeat 0 0,
  url('apple.jpg') no-repeat 30px 30px;
}

グラデーション: linear-gradient(),linear-gradient(to bottom right,skyblue, blue);, linear-gradient(lightgreen 10%,skyblue 60%, blue);

body {margin: 0;}

div {
  width: 200px; 
  height: 200px;
  background-image: 
  linear-gradient(skyblue, blue);
}

円形グラデーション :radial-gradient(skyblue, blue),radial-gradient(at 30px 40px,skyblue, blue),radial-gradient(20px 30px at 30px 40px,skyblue, blue)

body {margin: 0;}

div {
  width: 200px; 
  height: 200px;
  background-image: 
  radial-gradient(skyblue, blue)
}

影: box-shadow, text-shadow

body {background: #eee;}

div {
  width: 200px;
  height: 100px;
  background: #fff;
  box-shadow: 10px 20px rgba(0, 0, 0, 4);
}

図形の変更：transform, skew

body {background: #eee;}

div {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  position: absolute;
  top: 100px;
  left: 100px;
}

#box1 {
   background: skyblue;
   opacity: .5;
}

#box2 {
   background: orange;
   opacity: .5;
   transform:translate(20px, 40px);
}

ベンダープレフィックス

-webkit-transform:skey(0.5, 1.5);
   transform:skey(0.5, 1.5);

transition

body {background: #eee;}

div {
  width: 100px;
  height: 100px;
  background: skyblue;

  transition-property:all;
  transition-duration:2s;
  transition-timimg-function:ease;
  transition-delay:0.8s;
}

div:hover {
   width: 200px;
   height: 50px;
   background: blue;
}