cssで横並びリストの区切り線を描く
li { display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1; } ul:before, li:after { content: " | "; color: #999; font-size: 11px; }
装飾
要素の内側にシャドウを付ける
- 2016.10.24
- 装飾
box-shadowに「inset」を付けることで影が内側になる。 box-shadow:0 8px 12px -8px #222 inset; @include box-shadow( 0 8px 6px -8px rgba(0, 0, 0, 0.3) inset);
横並びリストを中央に寄せる
- 2016.10.24
- 装飾
ul { text-align: center; li { display: inline; } } ————- ul.ct{ left: 50%; margin: 0; position: relative; } ul.ct li { float: left; font-weight: bold; margin-right: 5px; left: […]
中央が浮き上がったようなシャドウを追加する
- 2016.10.24
- 装飾
.box { position: relative; } .box:before { content: ""; position: absolute; z-index: -1; left: 20%; right: 20%; top: 50%; bottom: 0; border-radius: 700px 700px 700px 700px / 70px 70px 70px 70px; box-s […]
2色ボーダー付きのタイトルを作成する
- 2016.10.24
- 装飾
◯タイトルテキストによって色付きラインの長さを変える場合 spanで色線の長さを可変させる <div class="hTitle"> <h3 class="heading"><span>事業内容</span></h3> </div> .hTitle { border-bottom: 3px solid #cccccc; he […]
マウスホバーで画像を回転させる
.rotatePhoto { width: 300px; height: 300px; overflow: hidden; } .rotatePhoto img { transition: 0.5s; } .rotatePhoto img:hover { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o- […]
マウスホバーで画像を拡大する
.scalePhoto { width: 200px; heght: 200px; overflow: hidden; img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linea […]