Designerページの見出しデザイン　-タグ風編集-

Designerで使えるCSS,Designerで見栄えを変えてみたい,未分類

概要

Designerページの見出しをデザインする方法を紹介しています。

本記事はタグ風のデザインを使用する方法の紹介です。ぜひ参考にしてみてください！

完成イメージ

CSS適用前
CSS適用後

手順

1.アウトラインからCSSを開き、上記クラスをセレクタに指定します。下線を引くCSSを記述します。

.pd-page-title .ibx-label-text {
  position: relative !important;
  display: inline-block;
  padding: 1rem 2rem 1rem 3rem;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #fa4141;
}
.pd-page-title .ibx-label-text:before {
  position: absolute ;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

2.実行します

CSS解説

border-radius: 100vh 0 0 100vh;

border-radius はCSSプロパティで、HTML要素の角の丸みを指定するために使用されます。このプロパティを使うことで、要素の角を丸くすることができ、ボックスモデルの角の形状を制御することが可能です。

要素の上左、上右、下右、下左の順で指定するのがルールですので、左上と左下に丸みを帯びさせる記述となっています。

Designerで使えるCSS,Designerで見栄えを変えてみたい,未分類