1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできる・「CSS Generators: Tooltips & Speech Bubbles」

Ads

CSS Generators: Tooltips & Speech Bubbles

1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできる・「CSS Generators: Tooltips & Speech Bubbles」
CSS Generators: Tooltips & Speech Bubblesは1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできるWebサイトです。

よく見かける一般的な吹き出しや角丸、borderありの吹き出し、グラデーション背景、点線border、ツートーンカラーのborder、様々な形状のarrorの吹き出しなど100種のCSS吹き出しが用意されており、それぞれはarrorの位置をドラッグで調整、ワンクリックでコードをコピーする事が出来ます。

必用なHTML要素は以下のみ。

<div class="tooltip">Your text content</div>

これなら後で導入も可能ですし、CSS変数が使われているのでカスタマイズもしやすい点もメリットです。

対話タイプのUIは結構便利なので覚えておくと重宝するかもしれませんね。

CSS Generators: Tooltips & Speech Bubbles