CSS でタグ風表示

shiogumar

License: MIT License

Fork
0
Fav
0
View
450
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 22 lines
  • CSS 107 lines
span 要素をタグ風に表示する CSS です!

いくつかバリエーションがありますので、色んな場面で利用できると思います。

span タグに class="tag" を付けると文字列をタグ風に表示します。

◆選べる基本スタイル一覧
class="tag" :通常表示のものです。文字の背景色とタグの色が別に設定可能です。
class="tag simple" :タグの色を文字の背景色と同じにし、文字色を白にしたものです。
class="tag stetch" :simple にステッチを付けたものです。

◆組み合わせ自由! オプション一覧
class="tag shadow" :タグの外側と通し穴に影を付けます。
class="tag ring" :通し穴に金属のリングを付けます。
class="tag groove" :文字に窪みを付けます。

◆通し穴の背景色を変更したい場合
.tag::before の background を変更してください。
穴のように見える白丸を配置しているだけですので、背景が透過することはありません。
  • CSS でタグ風表示
  • CSS でタグ風表示

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

shiogumar

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags