Facebookのアップロードメモ
Facebookのようなアップロード操作のUIを書いてみたくて、ソースを見たのでメモ。
1、グレーの点線に真ん中に+が描いてある。ここは<a>タグで作ってある。枠線の色はcssで次。
border: 2px dashed #dddfe2; /* 薄いグレー*/
border-radius: 2px;
box-sizing: border-box;
display: inline-block;
height: 100px;
margin-right: 5px;
position: relative;
width: 100px;
2、アップロードした画像はサムネイル表示される。サムネイルは削除、タグ付けができる。hover時には濃い半透明のグレーで網掛けになる。
html
<span>
<div class="_jfc" style="width:100px; height:100px;">
<button class="_jfe" type="button" ←削除ボタン
<img class="img" src="画像ソース" width="100" height="100">
<div
<button ←タグ付け
<button class="_jfi" ←写真を編集
._jfc:hover .jfh, ._jfc:focus ._jfh, ._jfe:focus~._jfi._jfh, ._jfc ._jfh:focus, {
opacity: 1;
}
._jfc:hover ._jfi:after, ._jfc:focus ._jfi:after, ._jfe:focus~._jfi:after, {
background: rgba(0,0,0,.4);
content: '';
height: 100px;
position: absolute;
width: 100px;
}
._jfi:after {
content: '';
height: 100px;
position: absolute;
transition: all .5s;
width: 100px;
}