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   
このエントリーをはてなブックマークに追加

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

2014年02月06日

レゴブロックの質感を取り入れたグラフィックを作り出せるpsd「LEGOlize yourself Free PSD」

世界中で愛され続けている玩具の一つ、レゴブロック。組合せ次第でいろいろなオブジェクトを作り出すことができるクリエイティブ性の高い玩具として、子ども世代だけでなく大人からも人気を集めています。今回はそんなレゴブロックの質感を取り入れたグラフィックを作り出せるpsd「LEGOlize yourself Free PSD」を紹介したいと思います。

lego1

「LEGO」というロゴが入ったブロック状のビジュアルを簡単に作り出すことができるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:09  |  
Category: Photoshop   
2008年04月17日

ユニークなフリーRSSアイコン集「Fresh, Free and Gorgeous RSS/Feed Icons」

もうすっかりWEBの世界ではお馴染みのRSSアイコン。お馴染みになっているだけに様々な形にリメイクされたり、デザインされたりしていますが、今回紹介する「Fresh, Free and Gorgeous RSS/Feed Icons」はかなり斬新な切り口でデザインされたRSSアイコンです。

上記のように飲み物だったり、新聞風だったり、看板だったりとRSSの本来の意味を汲みながらユニークに表現されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:14  |  
Category: WebDesign   
2018年02月25日

多くの投稿の中で一際目を惹くことができるInstagramテンプレートキット「Mono Instagram Templates Kit」

近年幅広い世代でSNSが活用され、日常生活に欠かせないものになってきています。中でもインスタグラムに投稿される写真の数は数え切れないほど。そんな中今回紹介するのは、多くの投稿の中で一際目を惹くことができるInstagramテンプレートキット「Mono Instagram Templates Kit」です。

MonoInstagram_01

POPなカラーが魅力的な120種類の豊富なインスタグラム用のテンプレートがセットになったアイテムです。

詳しくは以下

(続きを読む…)

続きを読む
2008年12月31日

タブナビゲーションからフォトギャラリーまでCSSのTips集「20 Ultimate CSS Tutorials」

WEBデザインでは欠かす事ができないCSS。CSSも奥が深く、工夫しだいで様々な表現ができるようになっていますが、今回紹介するのはそんなCSSのテクニックを集めたテクニック集「20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com」です。


Expandable CSS Tabs Tutorial

タブナビゲーションから、角丸、フォトギャラリーに影付けなどなど様々なCSSのテクニックが全部で20個、それぞれのジャンルに分けて公開されています。今日はその中からいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:19  |  
Category: WebDesign   
tag: CSS webdesign
2016年02月02日

豊富な種類がまとめられたベストフリーアイコン選「Best of 2015: 100 Great Free Icon Packs」

webデザイナーの方ならば、常にチェックしておきたいアイコン。非常にいろいろな種類のものが配布されていますが、今回紹介するのは、豊富な種類がまとめられたベストフリーアイコン選「Best of 2015: 100 Great Free Icon Packs」です。

icon0202_0
90 Free Line Icons on Behance

2015年にピックアップしたアイコンの中からチョイスされたさまざまな種類のフリーアイコンが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:04  |  
Category: Design   
2011年05月22日

HTM5スニペットの共有サイト「HTML5 Snippets」

だんだんと対応するブラウザも増えてきて業界の中では利用され、案件も増えてきたHTML5。もうすでにいくつか仕事として利用している方もいれば、これからという方もいると思いますが、今日紹介するのはHTM5スニペットの共有サイト「HTML5 Snippets」です。

スニペットとは、よく利用する短いコードの断片に分かりやすい名前を付け、ソースに利用しやすくするためのもの。「HTML5 Snippets」では、基本的なフレームから、細かなパーツまで、様々なスニペットが共有されています。いくつか気になったスニペットをピックアップしてご紹介致します。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:30  |  
Category: WebDesign   
2013年06月13日

アレンジ次第でさまざまなデザインに利用可能なフリーコンクリートテクスチャ「9 Free High-Res Concrete textures」

webやグラフィックのデザイン制作に欠かすことができない素材の中でも、使用頻度の高い写真テクスチャ。シンプルなもの程アレンジの幅が広く、非常に重宝するのではないでしょうか?今回はそんなコレクションに是非加えたい、フリーコンクリートテクスチャ「9 Free High-Res Concrete textures」を紹介したいと思います。

concrete3

比較的シンプルなタイプのコンクリートを撮影したテクスチャが9種類収録されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:47  |  
Category: Design   
2008年03月29日

サイトのギャラリーに最適なスマートなギャラリーライブラリ「Galleria」

WEBで画像を表示するようなギャラリーはよく見かけるし、作品紹介や、写真紹介など様々な用途で使われる場合が多いです。Flashなどを使ってギャラリーページを作っても良いのですが、もっと手軽にかっこいいギャラリーを作りたいそんな時におすすめなのが、今回紹介するJavaScriptベースのライブラリ「Galleria」です。

gallryjquery02.jpg

「Galleria」はJQueryを使ったライブラリで、シンプルながらも画像表示にフェードをかけたり画像の表示もスマートで、導入も比較的簡単にできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:24  |  
Category: WebDesign   
2017年11月02日

ベクターで書かれた幾何学模様パターン素材10「10 Free Geometric Pattern Swatches in AI, PAT & PNG Format」

花柄やドット、幾何学図形などの画面を華やかに見せてくれるパターン素材は、デザインのワンポイントやアクセントなど利用する場面も多いもの。今回ご紹介するのは、そんなデザインに大活躍のパターン素材をまとめた、幾何学模様パターン素材まとめ「10 Free Geometric Pattern Swatches in AI, PAT & PNG Format」です。

10-free-geometric-pattern-swatches

シームレスな幾何学模様素材が10種類も揃う、大変使いやすいパターン素材セットです。

詳しくは以下
(続きを読む…)

続きを読む
posted 09:00  |  
Category: vector   
2013年03月26日

染みや色の塗り重ねなど 独特の雰囲気の中に美しさを感じられるテクスチャセット「Seven Ethereal Stained Textures」

テクスチャをデザイン制作に利用することも多いと思いますが、アナログ感のあるテクスチャは制作するのにも時間がかかるので、イメージにぴったりのテクスチャを見つけられると嬉しいものではないでしょうか?そんな中今回紹介するのは、染みや色の塗り重ねなど 独特の雰囲気の中に美しさを感じられるテクスチャセット「Seven Ethereal Stained Textures」です。

コーヒーをこぼしたようなテクスチャから、色を塗り重ねたようなテクスチャまで、7枚のテクスチャがセットになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:41  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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