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個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。

詳しくは以下

(さらに…)

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

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

2017年12月17日

Javascriptで描く表現のパーティクルアニメーション「D Particle Explorations」

流行のwebサイトなどでよく見かけるパーティクルアニメーション。ゆらゆら、ぐるぐると動き回る不思議なグラフィックは見る人を引き込み、虜にします。今回はそんなパーティクルアニメーション3DをJavascriptで描いた「D Particle Explorations」を紹介したいと思います。

animation3

8パターンの種類の違うパーティクルアニメーションをデモサンプルで確認することができます。

詳しくは以下

(さらに…)

続きを読む
2014年07月09日

スマートフォンアプリ制作時に活用できるモックアップ素材まとめ「40 iPhone And Android Mockups Photoshop Files For Free Download」

スマートフォンのアプリを制作する際に、実際の機種にはめ込んでイメージを確認するといったシーンは多いのではないでしょうか?そんな時に活用できるモックアップ素材をまとめた「40 iPhone And Android Mockups Photoshop Files For Free Download」を今回は紹介します。

mock140709_1
iPhone 5C Psd Vector Mockup | Psd Mock Up Templates | Pixeden

iPhoneとAndroidの、さまざまな機種のモックアップが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2018年01月09日

フリーで使えるPSDモックアップテンプレート「Free PSD Mockup Templates (32 Fresh Mock-ups)」

Webサイトやアプリの制作はもちろん、商品パッケージなどにもモックアップが活用されます。完成のイメージを視覚的に確認するために使われ、クライアントへの提案などには欠かせないアイテムです。今回は、フリーで使えるPSDモックアップテンプレート「Free PSD Mockup Templates (32 Fresh Mock-ups)」を紹介したいと思います。

PSDmockup32_01
Stationery MOCK-UP on Behance

オフィスツールからPC、スマートフォン、パッケージ用まで様々なモックアップが集約されたサイトです。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , Tool   
2013年01月21日

最近発表されたPSD UIキットまとめ「20 New Free PSD UI KITs」

誰もが手軽にWEB制作を行えるようになっていきていますが、個人で制作する際に、ユーザーへの配慮が行き届いたWEBサイトを制作するのはなかなか難しいかもしれません。そんな中今回紹介するのが、最近発表されたPSD UIキットをまとめた「20 New Free PSD UI KITs」です。


Free PSD: Dark Gloss UI Kit | | FreeUIKits.comFreeUIKits.com

WEBサイトからアプリまで、さまざまなシーンで利用できるUIキットが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:20  |  
Category: Design   
2013年01月20日

シンプルでミニマルなアイコン素材144個セット「144 minimal icons package 12 A.M」

WEB制作で重宝するのがアイコン素材。ベクターで書くこともWEBデザイナーなら難なく可能だとは思いますが、アイデアから制作までの時間を考えると、フリーで利用できるアイコン素材はとても便利な素材の一つです。今日紹介するのはシンプルでミニマルなアイコン素材144個セットにしたアイコンセット「144 minimal icons package 12 A.M」です。

名前の通り非常にシンプルなアイコンなので、どんなサイトでも利用することができそうです。

詳しくは以下

(さらに…)

続きを読む
posted 09:30  |  
Category: Design , vector , WebDesign   
2013年01月22日

手書きの質感を楽しめるフォントまとめ「25 Useful Handwriting Fonts for Free Download」

デザイン制作の中では、デジタルな雰囲気や均一なデザインのフォントを利用することも多いかもしれませんが、手書きの雰囲気を少しプラスするだけでも、親しみやすさがアップするように思います。そんな中今回紹介するのが、手書きの質感を楽しめるフォントをまとめた「25 Useful Handwriting Fonts for Free Download」です。


Free Fonts – CatholicSchoolGirls font | UrbanFonts.com

ペンや筆など、さまざまな画材で描かれたフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 06:58  |  
Category: Design , Font   
2013年08月10日

アイコンやUIキットなどさまざまな素材が揃ったサイト「pixelkit」

web上に配布されている素材から、いろいろな素材を探すのは意外に時間がかかり大変なもの。今回はそんな時に便利な、アイコンやUIキットなどさまざまな素材が揃ったサイト「pixelkit」を紹介したいと思います。

pixelkit0

最新のデザインテイストのデザイン素材が収録されており、このサイトだけでいろんな種類を一度にダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:15  |  
Category: Design   
2014年01月09日

剥がれた素材感を切り取ったさまざまなテクスチャ「20 Peeling Paint Textures」

たくさん存在しているテクスチャ素材、作りたいデザインイメージによっていろんな質感のものを所持しておきたいもの。そんな中今回は、粗々しい印象やハードな雰囲気を表現するために是非利用したい、剥がれた素材感を切り取ったさまざまなテクスチャ「20 Peeling Paint Textures」を紹介したいと思います。

peeling1
A Desert Sky Stock Solarised Abstract Unpainting by aegiandyad on deviantART

木や劣化した鉄の盤面など20種類のテクスチャがまとめられています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 03:00  |  
Category: Design   
2018年11月29日

ボヘミアンスタイルの素材まとめ「Incorporate Bohemian Style Into Your Designs FEATURED」

デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。

gazou1
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers

ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下

(さらに…)

続きを読む
2007年11月26日

【tool】憧れのドメインを狙うためのツール「Domain Hunter」

インターネットが普及してきて、企業、個人でドメインを持つのが当たり前になってきて、世界中でドメインが取得されている中、希望どおりのドメインを取得するのは相当困難になってきました。一般的な言葉の組み合わせや、元々の言葉に意味のあるものだとほとんどの場合取れない事が多いです。

ドメインハンター

そこで今回紹介するWEBツール「Domain Hunter v0.1.0」はそんなドメイン取得を補助してくれるWEB上で動くアプリケーションです。現在取得済みのドメインの有効期限をドメイン名から表示してくれます。

詳しくは以下

(さらに…)

続きを読む
posted 12:03  |  
Category: Tool   
tag: Tool WEBtool

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る