[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
Post on:2015年12月11日
sponsors
コンテンツの区切りに使用するhr要素をCSS3で素敵にデザインするスタイルシートのテクニックを紹介します。
borderプロパティを使ったシンプルなものから、グラデーションやトランスフォームや疑似要素を使ったかなり凝ったものまで、コピペで簡単に利用できます。
ちょっと長いですが、全部で41種類です。
まずは、シンプルなものから。
18 Simple Style for Horizontal Rules
HTMLの「.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 |
<hr class="style**"> <style> 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; } </style> |
18 Simple Style for Horizontal Rules
HTMLの「.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 |
<hr class="style**"> <style> 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; } </style> |
18 Simple Style for Horizontal Rules
HTMLの「.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 76 77 78 79 |
<hr class="style**"> <style> 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; } </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 |
<hr class="hr-text" data-content="AND"> <hr class="hr-text" data-content="OR"> <style> .hr-text { line-height: 1em; position: relative; outline: 0; border: 0; color: black; text-align: center; height: 1.5em; opacity: .5; } .hr-text:before { content: ''; background: -webkit-linear-gradient(left, transparent, #818078, transparent); background: linear-gradient(to right, transparent, #818078, transparent); position: absolute; left: 0; top: 50%; width: 100%; height: 1px; } .hr-text:after { content: attr(data-content); position: relative; display: inline-block; color: black; padding: 0 .5em; line-height: 1.5em; color: #818078; background-color: #fcfcfa; } |
|
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 |
<hr class="fade"> <hr class="fade-2"> <hr class="dots"> <hr class="accessory"> <style> .fade { height: 1px; background-image: linear-gradient( 90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 100%); } .fade-2 { border-width: 0 0 1px; border-image: linear-gradient( 90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 100%) 0 0 100%; border-style: solid; } .dots { border-width: 0 0 8px; border-style: solid; border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat; width: 216px; } .accessory { height: 6px; background-image: radial-gradient( closest-side, hsla(0, 0%, 50%, 1.0), hsla(0, 0%, 50%, 0) 100%); position: relative; } .accessory:after { position: absolute; top: 50%; left: 50%; display:block; background-color: hsl(0, 0%, 75%); height: 12px; width: 12px; transform: rotate(45deg); margin-top: -10px; margin-left: -10px; border-radius: 4px 0; border: 4px solid hsla(0, 0%, 100%, 0.35); background-clip: padding-box; box-shadow: -10px 10px 0 hsla(0, 0%, 100%, 0.15), 10px -10px 0 hsla(0, 0%, 100%, 0.15); } </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 |
<hr class="pill"> <hr class="vertical-lines"> <hr class="horizontal-lines"> <hr class="slash-1"> <style> .pill { height:0px; border-radius: 2px; border: 2px solid hsl(0, 0%, 60%); width: 80%; } .vertical-lines { height: 10px; background-image: linear-gradient( 90deg, hsla(0, 0%, 50%, 1), hsla(0, 0%, 50%, 1) 33.33%, hsla(0, 0%, 50%, 0) 33.33%, hsla(0, 0%, 50%, 0) 100%); background-size: 3px 100%; width: 60%; } .horizontal-lines { height: 10px; background-image: linear-gradient( hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 1) 33.33%, hsla(0, 0%, 100%, 0) 33.33%, hsla(0, 0%, 100%, 0) 100%); background-size: 100% 3px; width: 40px; } .slash-1 { height: 10px; background-image: linear-gradient(-45deg, hsla(0, 0%, 70%, 0), hsla(0, 0%, 70%, 0) 25%, hsla(0, 0%, 70%, 1) 25%, hsla(0, 0%, 70%, 1) 50%, hsla(0, 0%, 70%, 0) 50%, hsla(0, 0%, 70%, 0) 75%, hsla(0, 0%, 70%, 1) 75%); background-size: 10px 10px; width: 250px; } </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 76 77 78 79 80 81 82 |
<hr class="slash-2"> <hr class="slash-3"> <hr class="bookends"> <hr class="bookends-dots"> <style> .slash-2 { height: 8px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="hsla(0, 0%, 65%, 1.0)"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"/><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"/></svg>'); background-size: 3px 3px; width: 65%; } .slash-3 { height: 10px; background-image: linear-gradient(45deg, hsla(0, 0%, 5%, 0), hsla(0, 0%, 5%, 0) 33.33%, hsla(0, 0%, 5%, 1) 33.33%, hsla(0, 0%, 5%, 1) 66.67%, hsla(0, 0%, 5%, 0) 66.67%, hsla(0, 0%, 5%, 0) 100%); background-size: 10px 100%; width: 250px; } .bookends { position: relative; border-width: 5px; border-color: hsl(0, 0%, 50%) transparent; height: 11px; border-style: double; width: 20%; } .bookends:before, .bookends:after { position: absolute; bottom: -3.536px; width: 7.071px; height: 7.071px; display: block; border-width: 0 7.071px 7.071px 0; border-color: hsl(0, 0%, 50%); border-style: double; box-sizing: border-box; } .bookends:before { transform: translateZ(0) rotate(-45deg); left: -21px; } .bookends:after { transform: translateZ(0) rotate(135deg); right: -21px; } .bookends-dots { position: relative; border-bottom: 1px solid hsla(0, 0%, 50%, 0.75); width: 50%; } .bookends-dots:before, .bookends-dots:after { position: absolute; bottom: -5px; width: 10px; height: 10px; display: block; border-width: 0 1px 1px 0; border-color: hsla(0, 0%, 50%, 0.75); border-style: solid; box-sizing: border-box; border-radius: 100%; } .bookends-dots:before { transform: translateZ(0) rotate(-45deg); left: -10px; } .bookends-dots:after { transform: translateZ(0) rotate(135deg); right: -10px; } </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 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 111 112 113 114 115 116 117 118 119 120 121 |
<hr class="flair"> <hr class="wave"> <hr class="shine"> <hr class="charlie"> <style> .flair { width: 65%; height: 30px; border-style: solid; border-color: hsla(0, 0%, 75%, 0.9); border-width: 1px 0 0 0; border-radius: 15px; } .flair:before { display: block; height: 30px; margin-top: -31px; border-style: solid; border-color: hsla(0, 0%, 75%, 0.9); border-width: 0 0 1px 0; border-radius: 15px; } /* Wave */ @mixin wavy-border($color:#000, $stroke:1, $width:50, $height:25) { border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 #{$width} #{$height+$stroke}"><path fill="none" stroke="#{$color}" stroke-width="#{$stroke}" d="M0,#{$height+($stroke/2)}c#{$width/4},0,#{$width/4}-#{$height},#{$width/2}-#{$height}s#{$width/4},#{$height},#{$width/2},#{$height}"/></svg>') 0 0 100% repeat; border-width: 0 0 #{$height+$stroke}px; border-style: solid; } .wave { width: 35%; @include wavy-border(hsla(0, 0%, 75%, 0.9), 3, 12, 12); position: relative; } .wave:before, .wave:after { position: absolute; display: block; width: 20px; height: 30px; background-color: hsl(0, 0%, 75%); bottom: -22.5px; } .wave:before { border-radius: 30px 0 0 30px; left: -2px; } .wave:after { border-radius: 0 30px 30px 0; right: -2px; } /* Shine */ .shine { height: 20px; width: 60%; background-image: radial-gradient( farthest-side at 50% -50%, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0)); position: relative; } .shine:before { height: 1px; display: block; background-image: linear-gradient( 90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.75) 50%, hsla(0, 0%, 100%, 0)); position: absolute; top: -1px; width: 100%; } /* Charlie */ .charlie { position: relative; top: -0.5em; font-size: 1.5em; height: 0; border: 0; margin: 0; -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.75) 1px 3px 5px); width: 75%; margin: auto; } .charlie:before, .charlie:after { display: block; position: absolute; left: 0; right: 0; background-size: 1em 100%; height: 1em; } .charlie:before { background-image: linear-gradient(315deg, hsla(0, 0%, 0%, 0.75) 25%, transparent 25%), linear-gradient(45deg, hsla(0, 0%, 0%, 0.75) 25%, transparent 25%); background-position: 50%; top: -0.5em; } .charlie:after { background-image: linear-gradient(135deg, hsla(0, 0%, 0%, 0.75) 25%, transparent 25%), linear-gradient(225deg, hsla(0, 0%, 0%, 0.75) 25%, transparent 25%); background-position: -webkit-calc(50% - 0.5em); top: 0.5em; } </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 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 |
<hr class="one" data-symbol="☂☂☂"> <hr class="two" data-symbol="✈"> <hr class="three" data-symbol="BREAK"> <hr class="four" data-symbol="SECTION"> <hr class="five" data-symbol="∞"> <hr class="six" data-symbol="lololol"> <hr class="seven" data-symbol="HI"> <hr class="eight" data-symbol="✂"> <hr class="nine" data-symbol="‡"> <style> hr { height: 1px; background: white; border: none; outline: none; margin: 3em 3em 5em; position: relative; &:before { content: attr(data-symbol); position: absolute; top: 0; left: 50%; background: black; color: white; padding: 0.5em 3em; @include transform(translate(-50%, -50%)); } } hr#one { width: 50%; margin: 3em auto; } hr#two { @include background-image(linear-gradient(left, black, white)); &:before { left: 90%; width: 20%; padding: 1em; top: 1px; } } hr#three { @include background-image(linear-gradient(left, #3498db, #10d7af, #3498db)); &:before { color: #10d7af; } } hr#four { &:before { border: 1px solid white; } } hr#five { &:before { font-size: 2em; padding: 0.5em 1em; font-weight: lighter; font-family: Helvetica Neue; } } hr#six { background: black; border-bottom: 1px dashed white; &:before { border: 1px dashed white; border-radius: 20px; } } hr#seven { background: black; border-bottom: 1px double white; &:before { border-left: 1px solid white; border-right: 1px solid white } } hr#eight { background: transparent; border-bottom: 2px dashed white; width: 40%; margin: 0 auto; &:before { top: 3px; left: 0; padding-right: 2em; } } hr#nine { &:before { border: 1px solid white; padding: 1em 1.25em; border-radius: 50%; } } </style> |
|
1 2 3 4 5 6 7 8 9 10 |
<hr> <style> hr{ border: none; border-left: 1px solid hsla(200, 10%, 50%,100); height: 100vh; width: 1px; } </style> |
sponsors
