実はこれ、枠線じゃなくて背景だったりします。
でも、枠の内容のサイズに応じて伸縮しても支障なく表示されますよ^^
どうも!LSSです!!
実は以前からCSSサンプルのネタとして↑のような枠を思いついていたんですが、
- border
- outline
- box-shadow
のどれを使ってもしっくりこなくて、伸ばし伸ばしになっていました^^;
…が、ふっと別の方法を思いついたのでやってみたところ、うまくいったのが今回のサンプルとなります!
コード
<style><!--
.dblsq{
padding:15px;
background-image:linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue);
background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;
background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;
background-repeat:no-repeat;
}
--></style>
<div class="dblsq">ボックスの中身</div>
上記内容をHTMLにコピペして、「ボックスの中身」部分を書き換えて使えます。
※ボックスの中身で改行する場合は<br/>タグ(はてなブログの編集画面ではシフトキーを押しながらENTER)を入れてください。
CSSクラスとして指定しているので、
class="dblsq"
を入れるだけで他の要素にも当てられます。
枠線の正体
この赤と青の四角、実は合計8つの「背景画像」だったりします。
CSSの「background-image」「background-size」「background-position」、いずれも「カンマ区切りで複数指定できる」事を利用し、
background-image;赤ベタ,赤ベタ,赤ベタ,赤ベタ,青ベタ,青ベタ,青ベタ,青ベタ;
background-size:縦長サイズ,縦長サイズ,横長サイズ,横長サイズ,縦長サイズ,縦長サイズ,横長サイズ,横長サイズ;
background-position:赤四角の左辺開始位置,赤四角の右辺開始位置,赤四角の上辺開始位置,赤四角の底辺開始位置,青四角の左辺開始位置,青四角の右辺開始位置,青四角の上辺開始位置,青四角の底辺開始位置;
という感じで配置しています。
padding:15px;
で中身の文字が線とかぶらないように余白を指定し、
background-repeat:no-repeat;
でそれぞれの四角が繰り返されないようにしています。(繰り返すと全部ベタ塗りになってしまう)
アニメ―ションもつけてみました
くるくるくるくる…
れっつ だんすぃん!!
コード
<style><!--
@keyframes dblsqa{
0%{background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;}
5%{background-position:0px 0px,calc(100% - 10px) 0px,0px 0px,0px calc(100% - 10px),10px 10px,100% 10px,10px 10px,10px 100%;}
10%{background-position:0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%,10px 0px,100% 0px,10px 0px,10px calc(100% - 10px);}
50%{background-position:0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%,10px 0px,100% 0px,10px 0px,10px calc(100% - 10px);}
55%{background-position:10px 10px,100% 10px,10px 10px,10px 100%,0px 0px,calc(100% - 10px) 0px,0px 0px,0px calc(100% - 10px);}
60%{background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;}
}
.dblsq2{
padding:15px;
background-image:linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(red,red),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue),linear-gradient(blue,blue);
background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;
background-position:10px 0px,100% 0px,10px 0px,10px calc(100% - 10px),0px 10px,calc(100% - 10px) 10px,0px 10px,0px 100%;
background-repeat:no-repeat;
animation:dblsqa 10s linear 0s infinite;
}
--></style>
<div class="dblsq2">ボックスの中身</div>
他にも改変のやりようはあります
例えば線の太さを変えるなら、
background-size:3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px,3px calc(100% - 10px),3px calc(100% - 10px),calc(100% - 10px) 3px,calc(100% - 10px) 3px;
の「3px」の部分を全て書き換える事でできます。
線の色は、
linear-gradient(red,red)
のredの部分を書き換える事で出来ますし、これを例えば
linear-gradient(red,pink)
のように前後で色を変えると、グラデーション色になります。
※その場合、「上から下」のグラデ―ションになります。「左から右」のグラデーションにする場合は、
linear-gradient(90deg,red,pink)
とします。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^