読者です 読者をやめる 読者になる 読者になる

gocha124の日記

ごちゃごちゃ書きます

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" ←写真を編集

 

css

._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;

}