良く忘れるcode集 part2

HTML & CSS

1.背景画像

back-pic.css

background-image:url();

background-size:cover;

2.中央寄せ(ブロックとインライン)

center.css

{
width:100px;

margin:0px auto;
}

text-align:center;

3.透明・文字間隔・細くする

xxx.css

opacity:0.5;

letter-spacing:10px;

font-weight:normal;

4.丸と影→クリック時に影を消す

layout.css

border-radius:10px;

box-shadow:0 7px #1a7940;

.box:active{
  box-shadow:none;
  position:relative;
  top:7px;
}

5.アイコン

icon.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<span class="fa fa-facebook">
}

Font Awesome
https://fontawesome.com/kits/0510cdeddb/use?welcome=yes
ここから選べます

6.カーソル

cursor.css

div{
  transition:all 1s;
}

div:hover{
  background-color:white;
}

cursor:pointer;

7.重ねる

position.css

.parents{
  position:relative;
}
.child{
  position:absolute;
  top:90px;
  width:100%;
}

7.ヘッダーの固定

header.css

.header{
position:fixed;
  top:0;
  z-index:10;
}