CSS3のみで袋文字ができるジェネレーター

   

 
CSS3だけで袋文字をつくれる、とても便利なジェネレーターがありましたので紹介します。
 
CSSのみで袋文字を実現する – CSS3で遊んでみる3
 
DEMOのURLをクリックすると、とてもシンプルなジェネレーターページに遷移します。
 
 
シンプルなので、説明する必要がないかもしれませんが、、
 
数字を入力するフィールドがあるので、そこにアウトラインのサイズを入力します。
5pxなら「5」と入力して、「適用」をクリック。
 
すると、赤の袋文字が表示され、下にはCSSが表示されます。
 
赤以外の色にしたい場合には、
cssの「red」と記載されているところを、任意の文字色に変更しましょう。
 
 
Sassを使っている方は、mixinスニペットにしておくと便利ですね。
 

 - ウェブデザイン, ホームページ紹介