[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ
Post on:2016年12月1日
sponsors
コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。
borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。
まずは、繊細なレース柄を実装するテクニック。
区切り線としても、デザインのアクセントとしてもいいですね。
必要なHTMLはすべてdiv要素一つ、グラデーションを使用して美しいレースをデザインします。カラーを変えてもいい感じです。
キャプチャは上から、7, 6, 4, 3, 2です。
|
1 2 3 4 5 6 7 |
<div class="lace one"></div> <div class="lace two"></div> <div class="lace three"></div> <div class="lace four"></div> <div class="lace five"></div> <div class="lace six"></div> <div class="lace seven"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
.lace { height: 70px; background: #222; margin-bottom: 15px; } .one { background-image: radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px); background-repeat: repeat-x; background-size: 20px 11px; } .two { background-image: radial-gradient(circle at 15px 0, #360031 2px, #fba5ec 20px, rgba(255,255,255,0) 21px); background-repeat: repeat-x; background-position: 0 0; background-size: 30px 21px; } .three { background-image: radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px), radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px), radial-gradient(circle at 15px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px), radial-gradient(circle at 5px 5px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px); background-repeat: repeat-x; background-position: 0 0, 15px 6px, 0 0, 25px 9px; background-size: 30px 21px, 30px 21px, 30px 21px, 30px 20px; } .four { background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px), linear-gradient(to left bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px), radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 7px); background-repeat: repeat-x; background-size: 12px 20px, 12px 20px, 12px 11px; background-position: 0 0, 0 0, 0 20px; } .five { background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px), linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px); background-repeat: repeat; background-size: 12px 14px, 12px 14px, 12px 11px; background-position: 0 0, 0 0, 0 20px; } .six { background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fff 6px, rgba(255,255,255,0) 7px), radial-gradient(circle at 12px 0, rgba(255,255,255,0) 11px, #fff 12px, rgba(255,255,255,0) 13px), radial-gradient(circle at 12px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px), radial-gradient(circle at 12px 12px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px), linear-gradient(to left, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px); background-repeat: repeat-x; background-position: 6px 35px, 6px 39px, 6px 42px, -6px 43px, 8px 45px; background-size: 12px 12px, 24px 13px, 24px 12px, 24px 24px, 24px 8px; } .six:before { content: ""; display: block; height: 35px; background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px), linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px); background-repeat: repeat; background-size: 12px 14px, 12px 14px, 12px 11px; background-position: 0 0, 0 0, 0 20px; } .seven { background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px), radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px); background-repeat: repeat-x; background-position: 0 29px, 0 33px; background-size: 12px 12px; } .seven:before { content: ""; display: block; height: 31px; background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px), linear-gradient(to left bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px); background-repeat: repeat; background-size: 6px 12px, 6px 12px, 12px 11px; background-position: 0 0, 0 0, 0 20px; } |
hr要素で実装したコンテンツ間の区切り線をジグザグにします。
※コンテンツの背景は分かりやすいように、インラインスタイルで記述されています。
|
1 2 3 4 5 |
<div class="content" style="background-color: #3498db;">コンテンツ</div> <hr class="zigzag-blu-lgreen"> <div class="content" style="background-color: #2ecc71;">コンテンツ</div> <hr class="zigzag-lgreen-green"> <div class="content" style="background-color: #27ae60;">コンテンツ</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
hr { border: none; height: 10px; } .zigzag-blu-lgreen { /* first color: #3498db second color:; */ background: linear-gradient(-135deg, #3498db 5px, transparent 0) 0 5px, linear-gradient(135deg, #3498db 5px, #2ecc71 0) 0 5px; background-color: #333538; background-position: left bottom; background-repeat: repeat-x; background-size: 10px 10px; } .zigzag-lgreen-green { background: linear-gradient(-135deg, #2ecc71 5px, transparent 0) 0 5px, linear-gradient(135deg, #2ecc71 5px, #27ae60 0) 0 5px; background-color: #333538; background-position: left bottom; background-repeat: repeat-x; background-size: 10px 10px; } |
同じdiv要素のコンテンツの区切りですが、こちらはdiv要素の背景としてジグザグが実装されています。
|
1 2 3 4 5 6 |
<div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.jagged-border { position: relative; width: 100%; height: 50px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px); } .jagged-border:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height: 10px; } .lightgray-bg { background: #ECF0F1; } .lightgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%); background-size: 20px 40px; } .white-bg { background: #FFF; } .white-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ffffff 33.333%, #ffffff 66.667%, transparent 66.667%); background-size: 20px 40px; } .darkgray-bg { background: #C3C9CC; } .darkgray-bg:before { background: -webkit-linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); background: linear-gradient(45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #c3c9cc 33.333%, #c3c9cc 66.667%, transparent 66.667%); background-size: 20px 40px; } |
最後のジグザグは、SVGを使った実装。
|
1 2 3 4 5 |
<div class="svg-bi svg-ds">コンテンツ</div> <div class="pseudo gradient"> <div>コンテンツ</div> </div> <div class="svg-bi css-ds">コンテンツ</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/* SVG Data URI & Border Image */ .svg-ds { position: relative; z-index: 2; background-color: teal; -webkit-border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="66" viewBox="0,0 64,66"><filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="1" result="offsetblur"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><polygon fill="teal" filter="url(#dropshadow)" points="32,3 2,33 32,63 62,33"/></svg>') 27.27273% 26.5625% repeat; -o-border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="66" viewBox="0,0 64,66"><filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="1" result="offsetblur"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><polygon fill="teal" filter="url(#dropshadow)" points="32,3 2,33 32,63 62,33"/></svg>') 27.27273% 26.5625% repeat; border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="66" viewBox="0,0 64,66"><filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="1" result="offsetblur"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><polygon fill="teal" filter="url(#dropshadow)" points="32,3 2,33 32,63 62,33"/></svg>') 27.27273% 26.5625% repeat; border-width: 0 0 18px; border-style: solid; background-clip: padding-box; margin-bottom: -18px; } /* Liner Gradients & Pseudo Element */ .pseudo { position: relative; z-index: 1; position: relative; box-sizing: border-box; background-clip: padding-box; border-bottom: 15px solid transparent; margin-bottom: -15px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); background-color: #ad424e; } .pseudo:after { content: ''; position: absolute; display: block; width: 100%; height: 15px; bottom: -15px; left: 0; color: #ad424e; background-image: -webkit-linear-gradient(45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%); background-image: linear-gradient(45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%); background-size: 30px 60px; background-position: 50% -45px; background-repeat: repeat-x; z-index: 1; } /* SVG Data URI & Border Image */ .css-ds { background-color: orange; -webkit-border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 2 1" preserveAspectRatio="none" fill="orange"><polygon points="2 0 0 0 1 1"/></svg>') 0 0 100% repeat; -o-border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 2 1" preserveAspectRatio="none" fill="orange"><polygon points="2 0 0 0 1 1"/></svg>') 0 0 100% repeat; border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 2 1" preserveAspectRatio="none" fill="orange"><polygon points="2 0 0 0 1 1"/></svg>') 0 0 100% repeat; border-width: 0 0 15px; border-style: solid; background-clip: padding-box; margin-bottom: -10px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); } |
点線をアニメーションで実装するテクニック。コンテンツは自由に配置することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="wrap"> <div class="line-reveal" id="line-a"> <div class="overlay"></div> <div class="line"></div> </div> <div class="line-reveal" id="line-b"> <div class="overlay"></div> <div class="line"></div> </div> <div class="line-reveal" id="line-c"> <div class="overlay"></div> <div class="line"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
html, body { background: black; margin: 0; padding: 0; color: #999; } #wrap { overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #blurb { text-align: center; width: 400px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; } #blurb h1 { color: white; } .line-reveal { width: 120%; height: 3px; overflow: hidden; position: absolute; } .line-reveal.show .overlay { -webkit-animation: wipe 3s ease; animation: wipe 3s ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .line-reveal .overlay { background: black; height: 10px; position: absolute; top: -5px; width: 100%; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .line-reveal .line { border: 3px dashed white; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #line-a { left: 0; top: 60%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-50deg); transform: rotate(-50deg); } #line-a .line { border-color: #ff9900; } #line-b { left: 0; bottom: 20%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } #line-b .line { border-color: #ff0099; } #line-c { right: 10%; bottom: 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: rotate(70deg); transform: rotate(70deg); } #line-c .line { border-color: #0099ff; } @-webkit-keyframes wipe { to { -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes wipe { to { -webkit-transform: scaleX(0); transform: scaleX(0); } } |
Horizontal lines around centered content
見出しやテキスト、ボタンなどの両脇にラインを配置するテクニック。ラインは可変なので、テキスト量は自由に調整できます。
|
1 2 3 4 5 6 7 |
<h1 class="has-lines">見出し</h1> <h1 class="has-lines">見出し複数行</h1> <p class="has-lines">本文</p> <p class="has-lines">本文複数行</p> <p class="has-lines"> <button>ボタン</button> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.has-lines { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .has-lines:before, .has-lines:after { content: ''; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; background: #ccc; min-width: 20px; display: inline-block; vertical-align: middle; } .has-lines:before { margin-right: 20px; } .has-lines:after { margin-left: 20px; } |
Transparent H1 Intersects Border
両脇だけでなく、両脇から伸びたラインでぐるっと囲むテクニック。空divが必要になりますが、これも実現可能です。
|
1 2 3 4 5 6 |
<div class="section"> <div class="top-border left"></div> <div class="top-border right"></div> <h1>見出し</h1> <p>パラグラフ</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.section { position: relative; width: 900px; max-width: 80%; border: 2px solid #333; border-top: none; text-align: center; margin: 60px auto; } .section h1 { position: relative; margin-top: -14px; display: inline-block; letter-spacing: 4px; } .top-border{ position: absolute; height: 2px; width: 24%; background-color: #333; } .right { right: 0; } .left { left: 0; } @media (max-width: 685px) { .top-border { width: 18%; } } .section p { width: 61%; margin: 20px auto 40px auto; line-height: 30px; } .section a { outline: 0; display: inline-block; padding: 20px; margin-bottom: 40px; width: 440px; max-width: 80%; background-color: #333; color: #fff; font-size: 22px; letter-spacing: 3px; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; } .section a:hover { background-color: #1D222D; } .section a:link, .section a:visited, .section a:link:hover, .section a:visited:hover { text-decoration: none; color: #fff; } |
グラデーションは背景全体だけでなく、ボーダーに使用しても美しいデザインです。
|
1 2 3 |
<div class='backbox'> <p>パラグラフ</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.backbox { font-family: "Josefin Slab"; text-transform: uppercase; font-size: 3rem; color: white; width: 75%; position: relative; left: 12.5%; top: 3rem; text-align: center; padding: 0.0625rem; position: relative; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.3)), color-stop(60%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0)); } .backbox:before { width: 100%; height: 0.125rem; position: absolute; left: 0; top: 0; content: ""; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.8)), color-stop(60%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); } .backbox:after { width: 100%; height: 0.125rem; position: absolute; left: 0; bottom: 0; content: ""; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.8)), color-stop(60%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0)); } |
グラデーションのボーダーはボタンに使用してもいいですね。フォーカスすると全体にグラデーションが適用されます。
|
1 2 3 4 5 6 |
<div class="container"> <div class="input"> <input class="input__input" type="text" placeholder="プレイスホルダー"> <div class="input__bg"></div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .input { width: 450px; } .input__input { position: relative; font-size: 36px; width: 100%; padding: 0.5em 0.6em; line-height: 1.4; -webkit-appearance: none; border-radius: 2px; border: none; background-repeat: no-repeat; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); border-left: 3px solid #50c56c; border-right: 3px solid #4ec4ce; background-position: 0 0, 0 100%; background-size: 100% 3px; background-color: transparent; color: white; } .input__input::-webkit-input-placeholder { color: #eee; font-family: 'Proxima Nova', 'futura', 'helvetica'; transition: color 0.2s ease-out; } .input__input:focus { outline: none; } .input__input:focus::-webkit-input-placeholder { color: white; } .input__input:focus ~ .input__bg { opacity: 1; } .input__bg { display: block; position: absolute; z-index: -1; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #50c56c 0%, #4ec4ce 100%), linear-gradient(to right, #50c56c 0%, #4ec4ce 100%); transition: all 0.3s ease-out; } |
18 Simple Styles for Horizontal Rules
最後はシンプルなデザインながら、使い勝手がよいhr要素のスタイルを18個。HTMLの各classはそれぞれ数字を記述してください。
|
1 |
<hr class="style**"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } |
18 Simple Styles for Horizontal Rules
|
1 |
<hr class="style**"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
hr.style7 { border-top: 1px solid #8c8b8b; border-bottom: 1px solid #fff; } hr.style8 { border-top: 1px solid #8c8b8b; border-bottom: 1px solid #fff; } hr.style8:after { content: ''; display: block; margin-top: 2px; border-top: 1px solid #8c8b8b; border-bottom: 1px solid #fff; } hr.style9 { border-top: 1px dashed #8c8b8b; border-bottom: 1px dashed #fff; } hr.style10 { border-top: 1px dotted #8c8b8b; border-bottom: 1px dotted #fff; } hr.style11 { height: 6px; background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0; border: 0; } hr.style12 { height: 6px; background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0; border: 0; } |
18 Simple Styles for Horizontal Rules
|
1 |
<hr class="style**"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
hr.style13 { height: 10px; border: 0; box-shadow: 0 10px 10px -10px #8c8b8b inset; } hr.style14 { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); } hr.style15 { border-top: 4px double #8c8b8b; text-align: center; } hr.style15:after { content: '\002665'; display: inline-block; position: relative; top: -15px; padding: 0 10px; background: #f0f0f0; color: #8c8b8b; font-size: 18px; } hr.style16 { border-top: 1px dashed #8c8b8b; } hr.style16:after { content: '\002702'; display: inline-block; position: relative; top: -12px; left: 40px; padding: 0 3px; background: #f0f0f0; color: #8c8b8b; font-size: 18px; } hr.style17 { border-top: 1px solid #8c8b8b; text-align: center; } hr.style17:after { content: '§'; display: inline-block; position: relative; top: -14px; padding: 0 10px; background: #f0f0f0; color: #8c8b8b; font-size: 18px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); } hr.style18 { height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px; } hr.style18:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px; } |
sponsors
