TOP  >  CSS3

Tag : CSS3

2017年09月08日

CSS3でつくるボタンの最新チュートリアルまとめ「50 CSS3 Button Tutorials For Designers [2017]」

WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。

50_CSS3_Button_top
Off-registration button

すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

Webデザイナーやデベロッパーの大きな手助けになるCSS3チュートリアル集「10 Pure CSS3 Tutorials And Examples」

CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。

CSS3tutorials_top
How to Code a Homepage Template with HTML5 and CSS3 | Medialoot

最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
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   
このエントリーをはてなブックマークに追加
2017年01月02日

CSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」

近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。

voxelcss02

空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。

詳しくは以下

(続きを読む…)

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

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

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

csspin

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

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
1234...10...

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

2010年08月20日

タイピングした瞬間の表情が楽しめるフリーフォント「Typing Art」

フォントにはさまざまなデザインが存在しており、デザインが出来上がった状態は一つのグラフィックとして完成されていますが、今回はタイピング=打ち込みをする際の表情に注目しデザインされたフリーフォント「Typing Art」を紹介したいと思います。


Typing Art|オドリコ 文字がクルクルと踊ります。

タイピングした瞬間に、それぞれのデザインをイメージさせる動きを見せるというとてもユニークなフォント。もちろん、デザインフォントとしても魅力溢れるシリーズとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:01  |  
Category: Design , Font   
2011年01月18日

デザインを華やかに演出するフリーブラシセット「25 Most Popular Photoshop Brush Sets from BrushLovers.com」

photoshopのブラシは手軽にデザインに彩りを与えることができる優れた機能として、多くのデザイナーに愛されています。そこで今回は、デザインを華やかに演出するフリーブラシセット「25 Most Popular Photoshop Brush Sets from BrushLovers.com」を紹介したいと思います。


Pop Dots – Photoshop Brushes – BrushLovers.com

デザインがパッと明るくなるような、POPなデザインのブラシがさまざまなバリエーションで展開されています。気になったブラシを選んでみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2013年03月02日

ベクターで利用できるシンプルなアイコン200個セット「200 Free Glyphs」

アプリにしてもWEBにしても非常に利用頻度が高い、アイコン素材。それだけに様々なアイコンセットが素材としてWEBでは提供されていますが、今日紹介するのはベクターで利用できるシンプルなアイコン200個セット「200 Free Glyphs」です。

シンプルで簡潔なアイコンが全部で200個まとめられています。顔文字的なものから、矢印やタグソーシャルメディアまでWEBで利用できそうなアイコンがほぼ揃うアイコンセットになっています。

詳しくは以下

200icon2

アイコン素材はセットが変わるとどうしても調整が必要なため、種類が少ないと、自分で作る部分が増えたり、制作したものと合わせる作業が必要になります。こちらのアイコンセットは、利用頻度の高そうなアイコンが網羅されていますので、その点はこのアイコンセットのみで、制作も完結することができそうな気がします。

配布形式はpsdとなり「Dribbble – 200 Free Glyphs by Joel Siddall」の「free-download.psd」というテキストリンクからダウンロード可能です。

Dribbble – 200 Free Glyphs by Joel Siddall

続きを読む
posted 08:52  |  
Category: Design , WebDesign   
2013年11月13日

すぐに使える実用的なjQueryテクニックとチュートリアル集「15 Useful jQuery Techniques and Tutorials for Developers」

以前に比べWebサイトはよりクリエティブな仕掛けや見せ方が求められるようになってきていますが、実際に一からJSを組んでいくとなると時間が掛かってしまうものです。今回はそんな時に役立つ、すぐに使える実用的なjQueryテクニックとチュートリアルをまとめたエントリー「15 Useful jQuery Techniques and Tutorials for Developers」を紹介したいと思います。

15ujtatfd_3
Flyout Image Slider Using jQuery & CSS3 – Webstuffshare – Learn and share. The simplest harmony.

どれもすぐに取り入れることができる実用的なものばかりですが、その中でも特に気になったものをピックアップして紹介したいと思います。

(続きを読む…)

続きを読む
posted 09:00  |  
Category: javascript , WebDesign   
2010年07月05日

モバイル用のHTML5フレームワーク「Sencha Touch」

開発者の間では次世代の規格として注目を集めているHTML5。様々な可能性を示してくれていますが、今日紹介するのはPCようでは無く、モバイル用のモバイル用のHTML5フレームワーク「Sencha Touch」です。

このフレームワークはWEBアプリに、iphoneアプリやアンドロイドアプリ並みのデザインと、操作感を可能にするフレームワークで、HTML5とCSS3を使って構築されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:52  |  
Category: WebDesign , WebService   
2008年12月14日

商用可!シックなクリスマスベクターアイコン「Christmas Black & Silver Vector Graphics」

クリスマスと聞くと真っ先に思い浮かぶカラーが赤と緑ですが、今回紹介する「Christmas Black & Silver Vector Graphics」は白と黒を基調としたシックな色使いのクリスマスベクターアイコンです。

上記のようにツリー、サンタクロース、プレゼント、モナメントなど様々なクリスマスのモチーフが収録されています。クリスマスカードを作ったりちょっと雰囲気の違う、クリスマスのデザインを制作するのに便利ですね。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:46  |  
Category: Design , vector   
tag: Design vector
2013年06月28日

いろいろな質感の紙を描くことができるPhotoshopブラシセット「A Collection Of Free Paper Brushes For Photoshop」

Photoshopで多彩なグラフィック表現を可能にするブラシは、デザイナーにとって非常に重宝する機能ではないでしょうか?そんな中今回紹介するのは、いろいろな質感の紙を描くことができるPhotoshopブラシセット「A Collection Of Free Paper Brushes For Photoshop」です。

pepar3

Old Paper PS Brushes by ~melodyofrain on deviantART

アンティークなテイストの紙を中心に、バリエーション豊富にブラシ素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:41  |  
Category: Photoshop   
2013年10月27日

フリーベクター素材セットとIllustratorのチュートリアル「20 Fresh Free Vector Sets and 5 Illustrator Tutorials」

ベクター素材は非常に使い勝手が良く、制作にはとても便利なデータ形式ですが、一から描くのは一苦労。WEBで探していもなかなかイメージ通りのものが見つからない時は困ってしまいますよね。今回はそんな時のために是非ご覧頂きたい、フリーベクター素材セットとIllustratorのチュートリアル「20 Fresh Free Vector Sets and 5 Illustrator Tutorials」を紹介致します。

free_vectors_14
Free Golden Badges Vector

可愛らしいものやリアルで高級感あるイラスト素材、またその作り方が幅広くまとめられています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebService   
2012年12月07日

サイト制作にそのまま使える!デザイン性の高いWordPressテーマまとめ「26 New Freebie WordPress Themes Released in 2012」

個人でWEBサイトを制作する方も増えていますが、専用のデザインソフトがなく、なかなか思い通りのサイトを作れないとお悩みの方も多いのではないでしょうか?そんな中今回紹介するのが、サイト制作にそのまま使える、デザイン性の高いWordPressテーマをまとめた「26 New Freebie WordPress Themes Released in 2012」です。


Classic Photography Theme for WordPress | Vandelay Design Blog

シンプルなテーマから個性を表現できるテーマまで、さまざまなWordPressテーマが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:56  |  
Category: WordPress   
2014年12月25日

クリスマスデザインに活用できるアイコンが豊富な「40+ Fresh and Free Christmas Icon Sets」

今日はクリスマス。すでにデザインの現場ではクリスマスをテーマにした制作は終了していると思いますが、今日のパーティー用のデザインや、毎年やってくるクリスマスのために是非参考にしたい「40+ Fresh and Free Christmas Icon Sets」を今回は紹介したいと思います。

christmasicon1225_1
Dribbble – Christmas Icon Pack Animation by Domagoj Kapulica

クリスマスデザインに活用できるアイコンが豊富に紹介されたまとめとなっています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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