CSS「-webkit-line-clamp」を使用して複数行にも対応した三点リーダー(…)を実装する
ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。…
グローバルメニューにマウスを乗せた際の動きもバリエーションが増え、サイトによって様々。
このサイトでも使用しているグローバルメニューのマウスオーバーアクションの方法をメモ。
<nav id="gnav">
<ul>
<li><a href="/price/">制作料金</a></li>
<li><a href="/about/">会社案内</a></li>
<li><a href="/blog/">WEB制作の備忘録</a></li>
</ul>
</nav>
#gnav ul{
display:-webkit-flex;
display:flex; }
#gnav ul li{
margin-right: 40px; }
#gnav ul li a{
color: #fff;
line-height: 35px;
display: block;
text-shadow: 0 0 5px #000;
position: relative; }
#gnav ul li a:after{
background: #fff;
content: "";
width: 0;
height: 1px;
display: block;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out; }
#gnav ul li a:hover:after{
width: 100%; }