吹き出しのような見出しのデザイン変更

  • 解決済 kcndkq

    (@kcndkq)


    4年、 12ヶ月前

    吹き出しのような見出しをつかっているのですが、線を太くしたいのですがどうすればいいのでしょうか。
    また、5色のグラデーションにしたいのですがどこになにを追加すればいいのでしょうか。
    下記が吹き出しのような見出しのcssです。

    .p-entry__body h3 {
  position: relative;
  padding: 1.5rem 1rem;
  border-bottom: 3px solid #00ffff;
  border-left: 3px solid #00ffff;
  border-radius: 0 0 0 20px;
}

.p-entry__body h3:before {
  position: absolute;
  left: 3em;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 12px 0 12px;
  border-style: solid;
  border-color: #00ffff transparent transparent transparent;
}

.p-entry__body h3:after {
  position: absolute;
  left: 3em;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width:  21px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
    • このトピックはkcndkqが4年、 12ヶ月前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • Aoba Momouchi

    (@aoixtreme)

    4年、 12ヶ月前

    変更するのはborderの数字です。

    .p-entry__body h3 {
  border-bottom: 3px solid #00ffff;
  border-left: 3px solid #00ffff;
}

.p-entry__body h3:before {
  bottom: -21px;
}

    例えば、太さを10px増やしたい場合は、次のように数字を増やしてください。

    .p-entry__body h3 {
  border-bottom: 13px solid #00ffff;
  border-left: 13px solid #00ffff;
}

.p-entry__body h3:before {
  bottom: -31px;
}
    トピック投稿者 kcndkq

    (@kcndkq)

    4年、 12ヶ月前

    線を太くすることは出来ました。
    グラデーションにすることは出来ないのでしょうか。

    Aoba Momouchi

    (@aoixtreme)

    4年、 12ヶ月前

    CSS3ではborder（線）のグラデーション指定が規定されていません。疑似的にborder-imageで代用すると以下になりますが、角丸が表現できません。

    .p-entry__body h3 {
  border-image: linear-gradient(to right,red,orange,yellow,green,aqua);
  border-image-slice: 1;
}

    見栄えだけのためにHTMLの要素を追加するのはスマートではありませんし、特に出現頻度の高いタイトル要素に適用するのは、お勧めしません。

    トピック投稿者 kcndkq

    (@kcndkq)

    4年、 12ヶ月前

    利用頻度の高いやつに使おうとしていたので止めておきます。
    他の見出しの装飾で質問したいのですが、
    https://miyu-info.com/midashi/
    上記のサイトの細い線+ワンポイントの□が二つ重なっている見出しのデザインを使いたいのですが、二つの□を大きくしたいです。どうすればいいのでしょうか。
    また、二つの□の位置を右にずらしたいです。どうすればいいのでしょうか。

    Aoba Momouchi

    (@aoixtreme)

    4年、 11ヶ月前

    現状のCSSはこのようになっています。

    h2 {
position: relative;
padding-left: 30px;
font-size:20px;
color: #000;
}

h2::before,
h2::after{
content: "□";
position: absolute;
}

h2::before{
left:0;
top:-3px;
}

h2::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}

    二つの□を大きくしたいです。また、二つの□の位置を右にずらしたいです。

    二つの□は文字ですから、例えば20ピクセル（h2と同じ）から30ピクセルに変更して、さらに□の位置を10ピクセル右にずらすなら以下を追加します。

    h2::before,
h2::after{
padding-left: 10px;
font-size:30px;
}

    □が大きくなった分、見出しも右に10ピクセル、下に20ピクセル(30px+20px)ずらします。

    h2 {
padding-top: 10px;
padding-left: 50px;
}
    トピック投稿者 kcndkq

    (@kcndkq)

    4年、 11ヶ月前

    わかりました。
    丁寧な説明ありがとうございます。

6件の返信を表示中 - 1 - 6件目 (全6件中)

トピック「吹き出しのような見出しのデザイン変更」には新たに返信することはできません。