はてなブログの続きを読むをカスタマイズ
続きを読むがあまり目立たないので、カスタマイズしました
やりたかったことは
- 枠で囲む
- 文字と枠の色を変える
- マウスを乗せたらなんか動く(適当w)
サンプルコード
entry-see-more というクラスに色々と設定をします
今回は上から降ってくるようなモーションを入れてます
transition: 0.4s;
ここでモーションの速さを調整します
.entry-see-more { display: block; width: 100px; height: 30px; line-height: 30px; text-align: center; text-decoration: none; font-weight:bold; position: relative; color: #ff99cc; background:#FFF; border: 1px solid #ff99cc; z-index:2; overflow: hidden; transition: 0.4s; } .entry-see-more:hover { color:#FFF; } .entry-see-more:after { position:absolute; content:''; width:100%; height:100%; top:-100%; left:0; z-index:-1; transition: 0.4s; } .entry-see-more:hover:after { top:0; background:#ff99cc; }
参考にしたサイト
色々なパターンがあって、とてもわかりやすかったです
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (4件) を見る
- 作者: 田口和裕,松永英明,上ノ郷谷太一
- 出版社/メーカー: 翔泳社
- 発売日: 2004/09/09
- メディア: 単行本(ソフトカバー)
- 購入: 30人 クリック: 1,223回
- この商品を含むブログ (466件) を見る