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

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

プログラミング

サイトのデザインをちょっと更新したので使用した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が不透明。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

CSS メディアスクリーン レスポンシブ 例
JavascriptでCSSを追加する
YoutubeのUp nextを非表示にするUSER CSS
spanishdict.comの広告を削除するUSER CSS
xpathをCSSセレクターに変換するには
Cambridge English Dictionary 広告削除 USER CSS
CSSで and or 否定;not


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu