注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

【CSS】ゆるい線と、背景色をずらしたCSSの囲み枠🐶ゆるボックス

ゆるい線と、背景色をずらしたCSSの囲み枠

border-radiusで線のルーズ感を出し、rgba指定で透明度を加えた背景を重ねています。
複雑そうに見えてもソースコードは長くないので、更にご自身でカスタマイズも出来ます。

スポンサーリンク

表示例

Sample

Today is the first day of the rest of your life.

Charles Dederichさんの言葉です。「今日という日は、残りの人生の最初の日である」

Sample 色違いバージョン(画像です)

背景色をずらしたCSSの囲み枠

HTMLとCSSのコード

HTML

「zurewaku」と言うクラス名を付けています。
名付けセンス(笑) クラス名はカッコイイものに変えてください!
<div class="zurewaku">Today is the first day of the rest of your life.</div>

CSS

z-indexを3ヶ所全部に付けないと上手く表示されなかったんです。😅
.zurewaku  {
    position: relative;
    display:inline-block;
    padding: 8px 25px 8px 25px;
    color:#000000;
    font-weight: bold;
    background:  rgba(255, 255, 0, 0.3);
    border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
    z-index:0;
}
.zurewaku:after {
  position: absolute;
  background:  rgba(197, 197, 197, 0.8);
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  top:3px;
  left:-5px;
  content:"";
  height:100%;
  width:100%;
  z-index:-999;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
}
.zurewaku:before { 
  position: absolute;
  border: 3px solid  #333;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  content:"";
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  z-index:-998; 
}

カスタマイズ 便利な所

HTMLとCSSの表示結果を確認しながらカスタマイズ出来るサイトです。
A Pen by Captain Anonymous

色に関しての情報満載!配色の参考になるサイト。人気色のランキング、今日のラッキーカラーまであります。
WEB色見本 原色大辞典

ボーダーのカスタマイズ

borderの設定を変更してください。線種を点線・破線・二重線にしたり、線の色や太さを変えるだけでも雰囲気が変わります。

背景色をずらしたCSSの囲み枠

文字色のカスタマイズ

文字色のカスタマイズ

colorの設定を変更してください。
WEB色見本 原色大辞典
こちらの色にしたければ
color:#f5deb3;と設定します。

color:rgba(245, 222, 179, 1);でもOKです。

font-size:◯◯px;(フォントの大きさ)、font-weight: bold;(太字にする)、letter-spacing: ◯◯em;(文字間隔)、font-family: ◯◯;(フォント指定)なども、お好みで追加してください。

背景色のカスタマイズ

backgroundの設定を変更してください。
透過が絡んでるので、色味が難しいですね😖

背景色のカスタマイズ

WEB色見本 原色大辞典
こちらの色にしたければ
R:xxx G:xxx B:xxx の数値を左から入力してください。
background: rgba(245, 222, 179, 0.8);と設定します。
4番目の数値 0.8は透過の設定値です。
透過の設定数値は0に近づく程、透明に近くなります。
background:#f5deb3;でもOKです。

背景のズレ具合のカスタマイズ

-webkit-transform: rotateと、-moz-transform: rotateのdeg値をを変更してください。

0