機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

CSS3でしましまストライプを実装する。ほか

AD

プログラミング

サイトのデザインをちょっと更新したので使用したCSSを公開したいと思う。

しましまストライプを実装

プログラミング
.site-header
background: #009999;
    background-image: -webkit-gradient(linear,0 0,100% 100%, color-stop(.25,#ffffff), color-stop(.25,transparent), color-stop(.5,transparent), color-stop(.5,#ffffff), color-stop(.75,#ffffff), color-stop(.75,transparent),to(transparent));
    -webkit-background-size: 1000px;

上記コードのカラーコードfffを変更することでcolor変更が可能。

-webkit-background-size: 1000px;の値を変更することでしましまの大きさを調整できる。

要素を半透明にする

プログラミング
.main-body-in
background-color: rgba(255, 255, 255, 0.7);

また、背景が主張しすぎると読みにくいため、バックグラウンドに半透明の白紙を設置した。
0.7の値を弄ることで半透明度を変更できる。1.0が不透明。

SPONSOR

オンラインブートキャンプ全12コースの「ウケ放題」 AD

コメントを残す

Close Menu