TOP  >  アニメーション

Tag : アニメーション

2017年01月09日

コピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」

WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。

cssbt01

このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。

詳しくは以下

cssbt02

登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。

カスタマイズできる項目としてはカラー6種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。

Bttn.css – Demo

続きを読む
posted 08:30  |  
Category: Design , WebDesign   
このエントリーをはてなブックマークに追加
2017年01月04日

CSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」

WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。

textloading0

通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2016年12月26日

サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」

WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。

RevealerEffect_800x600

「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:58  |  
Category: WebService   
このエントリーをはてなブックマークに追加
2016年12月03日

CSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」

WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。

csspin

全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2016年11月12日

クリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」

街はハロウィンからクリスマスへ変わり、クリスマスの話題も少しづつ出始めていますが、今回紹介するのはクリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」です。

CubesAdventCalendar_800x600

アドベントカレンダー(Advent calendar)は、クリスマスまでの期間に日数を数えるために使用されるカレンダーで、毎日一つづつ空けていくカレンダーとなります。今回の1つ1つがキューブとなっておりクリックすることで開封することが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:11  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2016年10月25日

CSSのみで制作されたローディングアニメーションセット「CSS Loader」

CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。

cssloder

ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:58  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2013年05月06日

制作に便利なphotoshopカスタムシェイプを集めた「Collections of Useful Photoshop Custom Shapes」

制作ツールのひとつで世界中のクリエイターに利用されているphotoshop。制作側の方であれば誰しもが利用された事があるツールだと思います。今日紹介するのはPhotoshopを利用した制作に便利なphotoshopカスタムシェイプを集めた「Collections of Useful Photoshop Custom Shapes」です。


Butterfly Custom Shape

シンプルなものから細部まで書き込まれたものまで様々なカスタムシェイプがまとめられていますが、今日はその中からいくつかピックアップしたものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:27  |  
Category: Design , Photoshop , WebDesign   
2010年04月13日

美しいスクリプトフォントを集めた「20 Beautiful Script Fonts for Your Designs」

筆記体のようなスクリプトフォント。手書き風だったり若干のアナログ感を出したりと様々なデザインに使えそうですが、今回紹介するのは美しいスクリプトフォントを集めたエントリー「20 Beautiful Script Fonts for Your Designs」を紹介したと思います。

script_fonts_01
Angel Tears

スクリプトフォントといっても細身で洗練されたものから少しPOPなものまで様々なです。今日はその中から気になったフォントをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:34  |  
Category: Design , Font   
tag: Design Font
2014年09月06日

汎用性の高い便利なグランジテクスチャ「Five High Quality Subtle Grange Textures」

素材の中でも特に活躍の場が多いテクスチャ。種類も非常に豊富で、さまざまなデザインシーンで活用することができます。そんな中今回紹介するのは、汎用性の高い便利なグランジテクスチャ「Five High Quality Subtle Grange Textures」です。

vintage1

独特の質感を持つ、シンプルなテイストのグランジ感が特徴のテクスチャがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2016年06月12日

手書き風のベクターサッカーアイコンセット「Soccer Icon Set」

世界では様々なアイコンセットが公開されており、スタンダードなものからちょっと変わったものまで様々ですが、今回紹介するのはかなりニッチな手書き風のベクターサッカーアイコンセット「Soccer Icon Set」です。

Soccer-Icons-excerpt-opt

このアイコンは上記のように、サッカーにまつわる様々なシーンがアイコンセットになっているというもので、全13種類となっており収録アイコンについては以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:06  |  
Category: Design , vector   
2007年11月19日

HTMLを崩壊させるJavascript「meltdown.js」

今回は少し変わったJavaスクリプト「meltdown.js」を紹介したいと思います。このJavaスクリプトはHTMLを崩して崩壊させてしまうと言うスクリプト。

このスクリプトを使うとページがアニメーションしながらガラガラと崩壊していきます。スクリプトはブックマークレットや特定のURLをアドレスバーに貼付けるだけで作動します。おもしろそうなので実際に試したものをスクリーンキャストで撮ってみました。

動画は以下から

(続きを読む…)

続きを読む
posted 02:06  |  
Category: WebDesign   
2011年06月05日

最近リリースされたクリエイティブなjQueryプラグイン集「8 Fresh and Useful jQuery Plugins」

WEB制作に便利なjQuery。プラグインも豊富にリリースされており、世界中でりよすされているjavascriptの一つです。今日紹介するのは最近リリースされたクリエイティブなjQueryプラグイン集「8 Fresh and Useful jQuery Plugins」です。


Isotype

全部で8つのプラグインが紹介されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:45  |  
Category: WebDesign   
2009年07月31日

クリエイティブなフォームの為のインスピレーション集「20 Creative Web Forms For Design Inspiration」

WEBに置いてユーザーと運営側を繋ぐフォーム。ログインフォーム、コンタクトフォームと色々と種類はあれど、現在、様々なサイトで導入されています。以前「クリエイティブなフォームをCSSで実現する為のTips「20+ Resources and Tutorials for Creative Forms using CSS」」と言う記事でも少しお伝えしましたが、今日紹介するのはクリエイティブなフォームの為のインスピレーション集「20 Creative Web Forms For Design Inspiration」です。

formcreative02
Five Cent Stand

一風変わった様々なフォームデザインが収録されて、クリエイティブなフォームを作るためのインスピレーションとして活用できるかと思います。全部で20ものフォームデザインが収録されていますが、今日はその中から以前紹介したフォームデザインとは違うもので、いくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:26  |  
Category: WebDesign   
tag: webdesign
2011年09月19日

インスピレーションを受けることができる新しいフリーフォント10選

日々多くのフォントが世界中でリリースされ、その中にはデザイン性が高く、デザインの質を引き上げてくれるフォントも多く存在します。今日紹介するのはインスピレーションを受けることができる新しいフリーフォントを集めたエントリー「10 New Free Fonts for Your Inspiration」です。


Bond is Dead

洗練されたものからアーティステックなものまで幅広いフリーフォントが紹介さいれていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design , Font   
2010年10月27日

ECサイトで活躍するアイコンセット「Freebie Release: Glossy E-Commerce Icon Set」

さまざまなショッピングを楽しめるECサイトは、サイトデザインももちろん重要ですが、やはり”使いやすさ”がかなり重要視されるのではないでしょうか?そこで今回は、ECサイトで活用できるアイコンセット「Freebie Release: Glossy E-Commerce Icon Set」を紹介したいと思います。

分かりやすいグラフィック表現が求められるECサイトに最適な、立体感でツヤ感のあるカラフルなデザインがとても印象的なアイコンセットとなっています。

詳しくは以下

(続きを読む…)

続きを読む
2012年06月08日

自然な風化の質感を楽しめるテクスチャパック「Metal: Texture Pack」

アンダーグラウンドなデザインによく利用される、メタルなどのハードなテクスチャは、自然な風化の雰囲気を表現するのが難しい素材。そんな中今回紹介するのが、自然な風化の質感を楽しめるテクスチャパック「Metal: Texture Pack」です。


free_metal_texture_07.jpg (JPEG 画像, 4252×2835 px)

錆や傷など、自然に風化してできた風合いが楽しめるテクスチャが8種類もセットになったテクスチャパックとなっています。中でも気になるテクスチャをいくつかピックアックしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:39  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る