読者です 読者をやめる 読者になる 読者になる

保育士していた学生が起業してビジネスの成功者になるまで...

保育士の働く環境、学童と児童館で教育を受けれられる環境を作るために活動。ビジョンは「子どもに人生の糧をつくる」である。ここではそんな活動の経緯と自分のアイデアをまとめていきます。

Codepenで見つけた|コピペできちゃうおしゃれなタイトルデザイン11選!|CodeDoIt.com

サイトにおいてタイトルデザインは非常に重要ですよね!

ここでは、簡単にすばらしいテキストデザインをご紹介します!

どうぞご覧ください!

f:id:hajime0308:20170201182409p:plain

 

scssをcssに変換して利用したい方はこのサイトをご利用ください。

www.sassmeister.com

1.CSS Glitched Text

See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.

2.[CSS3] Neon Glow

ホバーすると光ります!コピペで再現できます!

See the Pen [CSS3] Neon Glow by Felix Rilling (@FelixRilling) on CodePen.

3.Text hover effect

ホバーするとBuzzの文字に変化が・・・!コピペで再現できます。

See the Pen Text hover effect by Nick Pearson (@nckprsn) on CodePen.

4.80s Typography

80年代のようなオシャレなh2タグですね!コピペで動きます!

See the Pen 80s Typography by David Parker (@boldfacedesign) on CodePen.

5.Elastic stroke CSS + SVG

常に動き続けるので少し見づらさもありますが、デザインとしてはおしゃれですね!コピペで動きます!

See the Pen Elastic stroke CSS + SVG by yoksel (@yoksel) on CodePen.

6.Text-mask background moving on MouseMove - v2

ホバーすると切り抜き文字の中身の星が動きます!コピペでも動きます!文字も変更が容易なので汎用性ありですね!

See the Pen Text-mask background moving on MouseMove - v2 by Robert Borghesi (@dghez) on CodePen.

7.Rotating text

書いた文字が順番におしゃれに表示されていきます。コピして使うこともでき、文字も自分で編集することが可能です!

See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen.

8.Jumping Animation

文字がバウンドし続けます!コピペで動きます。

See the Pen Jumping Animation by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

9.Masked Text-Shadow

自分で文字を変えても同じように影をつけてくれます!コピペで動きます!

See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.

10.PENROSE

h2タグを変えても同じように効果がつけられます。コピペで再現できます!

See the Pen PENROSE by Scott Kellum (@scottkellum) on CodePen.

11.Animated CSS Intro - Day 01

編集が簡単です。コピペで再現できます!

See the Pen Animated CSS Intro - Day 01 by clovis neto (@clovisneto) on CodePen.

12.xgqYYB

編集が簡単です。コピペで再現できます!

See the Pen xgqYYB by Manuel Schulz (@tornography) on CodePen.

Codepenではpickupされたのがただただ並べられているだけなので、こうした素晴らしいデザインを見つけるのって大変なんですよね。まさにキュレーションする意義があると思っています。

http://codedoit.com/

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com