TOP  >  CSS3

Tag : CSS3

2016年11月22日

写真加工に使える!CSSで実現するイメージフェクト「20 Image Effects With CSS」

写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。

cssimage

水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。

詳しくは以下

(さらに…)

続きを読む
posted 11:40  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
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   
このエントリーをはてなブックマークに追加
2016年09月25日

CSS3で実現するラジオボタンアニメーション「radiobox css」

WEB上で何かを選択するときに用いるラジオボタン。様々な場所で実装されており、もはや当たり前のユーザーインターフェースの一つですが、今回紹介するのはそんなラジオボタンにアクセントを付けることができる、CSS3で実現するラジオボタンアニメーション「radiobox css」です。

radio01

ラジオボタンの選択時に特定のアニメーションをラジオボタン自体にかける事が可能です。

詳しくは以下

(さらに…)

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

CSSで実現するフィルタジェネレーター「CSSFILTERS.co」

写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。

cssfilter_01

このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。

詳しくは以下

(さらに…)

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

ローディングアニメなどに利用できるシンプルなCSSスニペット「SpinKit」

小気味の良いアニメーションはWEBデザインのアクセントとなり、よりクオリティを高めてくれますが、今回紹介するのはローディングアニメなどに利用できるシンプルなCSSスニペット「SpinKit」です。

animecss01

このアニメーション画像などは一切利用せずには全てCSSで書かれており、HTMLとCSSを書くだけ簡単に実装することが可能です。

詳しくは以下

(さらに…)

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

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

2014年10月31日

デザイン性を高める 最新のフリーフォントまとめ「20 Fresh Fonts and Typefaces for October 2014」

デザイン性の高いフリーフォントを使用することで、デザインのクオリティを高められるのと同時に、コストダウンもすることができます。今回はそんなフリーフォントを集めた、「20 Fresh Fonts and Typefaces for October 2014」を紹介したいと思います。

font1031_1
Paneuropa Neue – Free Typeface on Behance

比較的新しいフリーフォントが20種、厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:03  |  
Category: Font   
2015年07月18日

デザインをもっと楽しくしてくれる デザインフォント30種「30 Fun Fonts That Will Cheer You Up」

つねにいろいろなフォントをチェックされている方も多いと思いますが、なかなか良いものに出会えず、仕事がはかどらないと悩んでいる方もいらっしゃるのではないでしょうか?そんな中今回は、デザインをもっと楽しくしてくれる デザインフォント30種「30 Fun Fonts That Will Cheer You Up」を紹介したいと思います。

font0718_1
Gokú | Font on Behance

どれもデザイン性のある、魅力的なフォントばかりがピックアップされています。気になったものを以下よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 02:25  |  
Category: Font   
2018年09月10日

リアルタイムにデザインを編集できるWordPressプラグイン「The Divi Builder」

世界中で利用されているCMSの一つWordpress。国内でも多くのユーザーが利用しており、法人・個人問わず利用されていますが、今回紹介するのは、リアルタイムにデザインを編集できるWordpressプラグイン「The Divi Builder」です。

The-Divi-Builder

通常テーマはいくつかのファイルによって構成されており、テンプレートの修正やカスタマイズするとなると、多くの場合、コードを書いて修正しなければなりませんでした。この「Divi」はブラウザ上で自由にデザインカスタマイズやテンプレート側の修正が行えるというものです。実際の操作しているシーンを交えた、プロモーション動画が公開されていましたので以下からご覧ください。

動画は以下から

(さらに…)

続きを読む
posted 09:30  |  
Category: plugin , WordPress   
2017年08月28日

教育系フリーアイコンセット「30 Free Education Icons Sets」

Webサイトで情報を公開する学校はとても増えていますが、教育機関のWebサイトは比較的情報量が多く複雑になってしまいがち。そんな時におすすめなアイテムが、今回紹介する教育系フリーアイコンセット「30 Free Education Icons Sets」です。

calculator01
School Icon Collection Vector | Free Download

ポップなテイストからフラットなデザインまで、様々なアイコンがセットでダウンロードできるようになっています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:17  |  
Category: Tool , WebDesign   
2012年03月06日

自然な雰囲気を感じられる葉をモチーフにしたパターン素材まとめ「70+ Leaves Pattern for Nature Inspired Designs」

新芽が芽吹く春が近づいてくると、自然を意識したデザイン制作も多くなってくるのではないでしょうか?今回は、そんな自然な雰囲気を感じられるデザイン制作にぴったりな、葉をモチーフにしたパターン素材をまとめた「70+ Leaves Pattern for Nature Inspired Designs」を紹介したいと思います。


Organic Black | Pattern8

グリーンの葉はもちろん、さまざまな季節を感じられるパターンが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 08:39  |  
Category: Design   
2011年08月02日

デザイン性を兼ね備えたショッピングサイトまとめ「25 Ecommerce Websites for Your Design Inspiration」

たくさんの人が、日常生活の中で利用しているショッピングサイト。機能や使いやすさはもちろん、デザイン性も兼ね備えたサイトがやはり求められます。今回はそんな時是非参考にしたい、デザイン性を兼ね備えたショッピングサイトまとめ「25 Ecommerce Websites for Your Design Inspiration」を紹介いたします。


Red Velvet — Welcome

パターン化してしまいがちなショッピングサイトのデザインが、さまざまなテイストでまとめられています。ピックアップしたデザインは以下より。

詳しくは以下

(さらに…)

続きを読む
2012年07月03日

さまざまな花のベクター素材が揃う「70+ Free Graphics: Vintage Vector Flowers and Floral Ornament Sets」

女性らしい雰囲気やデザインを華やかに演出したい時に利用しやすい花のモチーフですが、繊細な表現が多い花の素材を自ら制作するのは大変。そんな中今回紹介するのが、さまざまな花のベクター素材が揃う「70+ Free Graphics: Vintage Vector Flowers and Floral Ornament Sets 」です。


Free Flower Design Vector | QVectors Free Vector Graphics

レトロな雰囲気が楽しめる素材から花の美しさが感じられる素材まで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:41  |  
Category: Design , vector   
2017年08月13日

モバイル向けデザインテンプレートまとめ「8 Fresh & Free Mobile App PSD Templates」

国内外でも比率が年々増しているスマートフォン。ユーザーインターフェイスの設計は、PCとはまた違った観点の設計・デザインが求められます。今日紹介するのは、モバイル向けのデザインテンプレートをまとめたエントリー「8 Fresh & Free Mobile App PSD Templates」です。

mobileapp01
Clean & Modern iOS UI Kit by Sandeep Kasundra – Dribbble

ハイクオリティなモバイルデザインテンプレートがまとめられています。気になるものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 08:30  |  
Category: Tool , WebDesign   
2013年11月23日

シンプルで美しいpsdのWEBデザインテンプレート「10 Beautiful & Free Website PSD Templates」

デザインのクオリティを上げたくても、日々の仕事に追われてなかなか時間をかけられないデザイナーさんは多いと思います。今回はそんな方たちに向けて、Photoshopで作られた高品質なWEBデザインテンプレート集「10 Beautiful & Free Website PSD Templates」を紹介したいと思います。

10bfwpt_0
Webpaint Free Homepage PSD

海外でよく見られる1カラムデザインを中心として全部で10種類のテンプレートがまとめられています。今回はその中でも気になったテンプレートをピックアップして紹介したいと思います。

(さらに…)

続きを読む
posted 09:00  |  
Category: Photoshop , WebDesign   
2009年06月19日

フリーCSSテンプレート配布サイトのまとめ「35 Excellent Websites for Downloading Free CSS Template」

WEBサイトを制作する際とても便利なテンプレート。そこからカスタマイズしていったり、部分的に利用したりと様々な使い方があるかと思います。今日紹介するのはフリーCSSテンプレートをいくつかまとめて配布しているサイトをさらにまとめたエントリー「35 Excellent Websites for Downloading Free CSS Template」を紹介したいと思います。

csstmpmato01
Styleshout

全部で35個のフリーテンプレートサイトが紹介されていますが、今日はそのなかでも使えると思ったサイトをいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 11:01  |  
Category: WebDesign   
tag: CSS webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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