CSSスニペット

/* --------------------------- ハック -------------------------- */ /* Firefox ------------------------- */ @-moz-document url-prefix() { p { margin: 0; } } /* Chrome ------------------------- */ @media screen and (-webkit-min-device-pixel-ratio:0) { p { margin: 0; } } /* Safari ------------------------- */ @media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, p { margin-top: 0; } } /* --------------------------- 擬似要素 -------------------------- */ /* 基本 ------------------------- */ .main-content-area em::before { content: "【"; } .main-content-area em::after { content: "】"; } /* テキストの両端に伸びる線 ------------------------- */ .site-title-sub::before, .site-title-sub::after { content: ''; display: inline-block; width: 140px; height: 2px; margin: 0 30px; background-color: #fff; vertical-align: middle; } /* --------------------------- 背景画像を全画面配置 -------------------------- */ /* 画面全体 ------------------------- */ body { background: url(../images/home/main-image@2x.png) center top fixed no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 部分的 ------------------------- */ .main-image { min-height: 700px; background: url(../images/home/main-image@2x.png) center top fixed no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* --------------------------- position:fixedでヘッダ固定時のページ内リンクのずれを解消 -------------------------- */ .header { height: 150px; position: fixed; } .main { padding-top: 150px; } .fixed-fix { /* 上にアキを持たせてある */ margin-top: -180px; padding-top: 180px; } /* html <a href="#about">about</a> <h1 id="about" class="fixed-fix">XXXXXXXX</h1> */ /* --------------------------- hover -------------------------- */ /* 下線が中央から両端へ伸びる ------------------------- */ .nav-item a { display: inline-block; } .nav-item a::after { content: ''; display: block; width: 0; margin: 6px auto 0; border-bottom: 1px solid #7C5119; transition: width 0.3s ease-in-out; } .nav-item a:hover::after { width: 100%; } /* ズーム ------------------------- */ a { -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } a:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } /* --------------------------- シャドウ -------------------------- */ /* テキストシャドウ白 ------------------------- */ p { text-shadow: 0 1px 0 rgba(255,255,255,1); } /* テキストシャドウ黒 ------------------------- */ p { text-shadow: 0px 0px 2px rgba(0,0,0,.8); } /* ボックスシャドウ ------------------------- */ div { box-shadow: 0px 10px 15px -10px rgba(0,0,0,.4); } /* --------------------------- カラー -------------------------- */ /* 白 ------------------------- */ p { color: rgba(255,255,255,.65); } /* --------------------------- 「…」(エリプシス)付与して、CSSのみで省略 -------------------------- */ .caption { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* --------------------------- micro clearfix -------------------------- */ /* 2016年版:モダンブラウザ用 参考)http://coliss.com/articles/build-websites/operation/css/css-latest-clearfix.html */ .cf::after { content:" "; display:block; clear:both; } /* 2011年版:IE6/7対応 参考)http://coliss.com/articles/build-websites/operation/css/css-micro-clearfix.html */ /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.