いつか使うかもしれない用のサンプル的に、グラデーションを使ったデザインを試作したので記事の形にして残します。
先行事例は調べていませんが、もっとちゃんとした同種のデザインが既にあるかもしれませんので、あるならこの記事は参考にしない方が良いでしょう。
実現したいこと
実現したいことは以下の通り。
- CSSのグラデーションを使った見出しデザインを作る
- 画像は使わない
- 複数行対応
使用不可の条件
今回は以下のような状態のサイトにはほぼ使用できません。
- 背景に模様が敷き詰められている (1案除き全案)
- コンテンツ部分に背景色が用いられている(一部)
1に関しては、基本的に背景色で特定部位を覆うことでデザインを成り立たせているためです。
一番最後のサンプルだけは視点を変え、特定の条件下のみ背景に模様がある場合での使用を検討しています。
２に関しては、装飾に用いる疑似要素が背景の下に潜るためです。
一部と書いていますが、具体的にどれのことなのかは各サンプルの下部に記載しているので、そこを参照してください。
なお、疑似要素部分を通常のdivやspanなどに置き換えれば、z-indexの潜り込みを気にする必要はありません。
もっとも、HTMLタグを包含するように要素を作らねばら無い点は、JSなどを使わないと文中に既に存在するh要素などには使えないことになってしまいますが。
サンプル
記事タイトルに「見出し」と書いていますが、この記事に入れる動作サンプルにh要素を使うと手間がかかるので、サンプル自体は以下のようにdivを使っています。
<div class="sample-1">グスコーブドリは、イーハトーヴの大きな森のなかに生まれました。</div>
そのため、本来の形としてはh要素に適用している、という前提でお願いできればと。
なお、サンプルには青空文庫にある宮沢賢治の「グスコーブドリの伝記」の冒頭一文を使用しています。
見出しサンプル
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-1 {
position: relative;
margin: 40px 10px 30px;
padding: .5em;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0,0,0,.1);
}
.sample-1::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
box-shadow: 0 0 3px 0 rgba(0,0,0,.1) inset;
}
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-2 {
position: relative;
margin: 40px 10px 30px;
padding: .5em;
background-color: #fff;
}
.sample-2::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
transform: rotate(.8deg);
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
}
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-3 {
position: relative;
margin: 40px 5px 30px;
padding: .5em;
border: 6px double #fff;
}
.sample-3::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
}
.sample-3::after {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-color: #fff;
}
.sample-4 {
position: relative;
margin: 40px 0 30px;
padding: .2em 0;
}
.sample-4::before {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 5px;
content: '';
background-image: linear-gradient(to right, #d8e273 0%, #73d7e2 100%);
}
.sample-4::after {
position: absolute;
z-index: 1;
right: 0;
bottom: -5px;
width: 200px;
/*点線部分は横幅最大50%までにして、小さいブラウザサイズ閲覧時に点線部分だけにならないように調整*/
max-width: 50%;
height: 5px;
content: '';
background-image: repeating-linear-gradient(to right,#fff 0px, #fff 5px, transparent 5px, transparent 10px);
}
.sample-5 {
position: relative;
margin: 40px 0 30px;
padding: 18px 10px 10px;
border: 1px solid #eee;
}
.sample-5::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
content: '';
background-image: linear-gradient(to right, #d8e273 0%, #73d7e2 100%);
}
.sample-5::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 8px;
content: '';
background-image: repeating-linear-gradient(45deg,transparent 0px, transparent 5px, #fff 5px, #fff 10px);
}
.sample-6 {
position: relative;
margin: 40px 0 30px;
padding: .2em 0;
}
.sample-6::before {
position: absolute;
bottom: -9px;
left: 0;
width: 100%;
height: 9px;
content: '';
background-image: linear-gradient(to right, #d8e273 0%, #73d7e2 100%);
}
.sample-6::after {
position: absolute;
z-index: 1;
bottom: -8px;
left: 0;
display: block;
width: 100%;
height: 1px;
content: '';
border-top: 3px double #fff;
border-bottom: 3px double #fff;
}
hoverで動作するサンプル
以下はhoverで動作しますが、hoverで現れる装飾を見出しに付けることはまずないですし、単なるお遊び程度のものです。
※hoverで動作
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-7 {
position: relative;
margin: 40px 10px 30px;
padding: .5em;
}
.sample-7::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
}
.sample-7::after {
position: absolute;
z-index: -1;
top: -11px;
left: -11px;
width: calc(100% + 22px);
height: calc(100% + 22px);
content: '';
transition: all 1s;
background-color: #fff;
}
.sample-7:hover::after {
width: 100%;
height: 100%;
transform: translate(10px, 10px) ;
}
※hoverで動作
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-8 {
position: relative;
margin: 40px 10px 30px;
padding: .5em;
}
.sample-8::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
transition: all 1s;
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
}
.sample-8::after {
position: absolute;
z-index: -1;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
transition: all 1s;
background-color: #fff;
}
.sample-8:hover::before {
transform: rotate(-.4deg) ;
transform-origin: 50% 50%;
}
.sample-8:hover::after {
width: calc(100% + 10px);
height: calc(100% + 10px);
transform: translate(5px, 5px) rotate(.4deg) ;
transform-origin: 50% 50%;
}
画像との組み合わせ
趣旨とは違うのですが。
試したらおもしろそうだと思ったので、画像を併用して少し変わったものを作ってみました。
※コンテンツ部分に背景色が用いられている場合は使用不可
.sample-9 {
position: relative;
margin: 40px 15px 52px;
padding: .5em;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0,0,0,.1);
}
.sample-9::before {
position: absolute;
z-index: -2;
top: -10px;
left: -15px;
width: calc(100% + 30px);
height: calc(100% + 42px);
content: '';
/* 使う画像は各自用意のこと */
background-image: url(image.gif),linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
background-repeat: repeat-x,repeat;
background-position: right bottom, 0 0;
box-shadow: 0 0 3px 0 rgba(0,0,0,.1) inset;
}
画像は以前作った鶏をアニメーションさせたドット絵ですが、単なるイラストやアイコンでも「隙間から見えている感じ」や「隙間から覗いている感じ」にできるので、使い方によっては面白いかもしれません。
コンテンツ部分のテクスチャを活かす
「コンテンツの下に潜り込む」という状況を利用して、コンテンツ部分に適用した透過を含んだテクスチャの影響を活かす方法です。
サンプルでは手軽にCSSのストライプを使用していますが、これだけのためにテクスチャを敷くのは抵抗がありますので、元からテクスチャを敷いているサイト向きです。
/* メインコンテンツ部分に対して指定すると想定 */
#main-content{
background-image: repeating-linear-gradient(-45deg, rgba(239, 237, 225,1), rgba(239, 237, 225,1) 3px, transparent 0, transparent 6px);
}
.sample-10 {
position: relative;
margin: 40px 10px 30px;
padding: .5em;
background-color: #fff;
}
.sample-10::before {
position: absolute;
z-index: -2;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
content: '';
background-image: linear-gradient(45deg , #d8e273 0%, #73d7e2 100%);
}
結び
下線などのシンプルな構造であれば使いどころはありそうです。
補足:複数行でのデザイン崩れ
レスポンシブに関わらず、複数行になった際に成り立たないデザインは使いづらいものです。
たまにですが、複数行対応できないサンプルを注記もなく混ぜて掲載している記事も見かけまして、「これはできるのか？」と自分で試すこともありました。
そのため今回は、最初からサンプルを複数行にして分かりやすくしてみました。
ただ、結局のところ1行の方が奇麗に見える場合は多く、複数行にすると間延びして綺麗さや格好よさは減じることが多いように思います。
その意味では「構造的に崩れない」というあたりが限界で、どうがんばっても複数行になった時点で意図したデザインは崩れて成り立たないのかもしれません。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
