文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > NEW差し込み

NEW/UPをCSSのみで追加する

NEWやUPなど一時的に表示したい文字をHTMLのタグ修正せずにCSSのみで差し込みするサンプルを掲載しています。「::after」を使用することで、指定タグの後ろに文字を追加することができます。「::before」を使用すれば、前に文字を追加できます。

また、アニメーションを利用することで「点滅」「回転」などのアニメーションを利用することで、さらに目立つ文字とすることが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

NEWの差し込みをしてみよう

サンプルは<div>で構成されたメニューを想定し、2つ目のメニューに「NEW」を付けています。このため、使用しているタグの状況によりCSSの変更が必要となりますのでご注意ください。

差し込みする文字の設定
大きさ
横位置
縦位置
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="menuListArea">
  <div class="menuList" id="makeImg">
    <div>ファッション</div>
    <div>スポーツ</div>
    <div>ビューティー</div>
    <div>・・・</div>
  </div>
</div>
生成したCSS
 /* === NEWの差し込み定義 ======================================= */
 /* このサンプルは、2行目のメニューにNEWを付けています            */
 /*                                                               */
.menuList > div:nth-child(2)::after {
  display        : inline-block;       /* インラインボックス定義  */
  content        : "NEW";              /* 表示する文字            */
  color          : #ff0000;            /* 文字色                  */
  font-weight    : bold;               /* 太字                    */
  font-size      : 10pt;               /* ベースの文字サイズ      */
  letter-spacing : -1px;               /* 文字間隔詰め            */
  line-height    : 1;                  /* 1行の高さ               */
  vertical-align : top;                /* 基準の高さ位置          */
  margin         : 0;                  /* 外余白なし              */
  padding        : 2px;                /* 反転時の内余白          */
  transform      : scale(0.6)          /* 文字サイズ変更          */
                   translateX(-30%);    /* 横位置調整              */
                                       /* ブリンクのアニメ指定    */
  animation      : newAnime .7s infinite alternate;
}
@keyframes newAnime {
 100% { color      : #ffffff;          /* ブリンク時の文字色      */
        background : #ff0000;          /* ブリンク時の背景色      */
      }
}
ページTOP
広告
広告

色々なNEW/UPの差し込みサンプル

文字の周りに色を付け(例は赤文字に黄色で縁取り)

文字の縁取りを行うことで、細字でも目立たせることができます。

HTML
CSS
表示

NEW文字を横軸回転

CSSのanimationを利用し、NEWを回転させるサンプルです。
サンプルは横軸回転ですが、縦軸回転や時計回り、反時計回りも指定することが簡単にできます。animationでご確認ください。

HTML
CSS
表示

NEWの文字を5色に変化

CSSのanimationを利用し、NEW文字の色を5色に変化させるサンプルです。
サンプルは5色ですが色は自由に指定することができます。animationでご確認ください。

HTML
CSS
表示

背景色を右から左に変化させるNEW文字

CSSのanimationを利用し、NEW文字の背景色を変化させるサンプルです。
サンプルは右から左に単色ですが自由に指定することができます。animationでご確認ください。

HTML
CSS
表示
ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン