TOP  >  tab

Tag : tab

2010年09月11日

CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」

数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。


Sweet Tabbed Navigation Bar using CSS3

デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

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

2011年01月26日

ハイクオリティーなスライダー集「Top 20 Premium Quality Sliders 」

FLASHの代用として多くのサイトで取り入れられているスライダー。主にjavascriptなどで制作されており、管理のしやすさや、お手軽に導入できることから人気を集めています。今日紹介するのはハイクオリティーなスライダー集めたエントリー「Top 20 Premium Quality Sliders 」。


o’Slider

様々なタイプのスライダーがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:45  |  
Category: WebDesign   
2018年06月30日

WebデザインをオンラインでサポートしてくれるCSS作成オンラインツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」

Webデザインを構築するのに欠かせないCSS。基礎からアニメーションなどの特殊な効果まで、様々なことが行なえます。今回ご紹介するのは、そんなCSS構築の作業を手助けしてくれる、便利なWebツールまとめ「40 Free Web-Based Tools & Apps for Working With CSS」です。

40-free-web-based-tools
Palettes | Flat UI Colors 280 handpicked colors ready for COPY & PASTE

オンライン上で手軽に様々な効果や設定を試し、導入することができるツールが40種類紹介されています。その中から幾つかおすすめのツールをピックアップしましたのでご覧ください。

詳しくは以下

40-free-web-based-tools3
Clippy — CSS clip-path maker
Clippyは画像を切り抜くフレームの形を自由に調整することができるWebツールです。星や丸などベースとなる図形を27種類の中から選ぶことが出来、自由に編集できます。
 
 
 
40-free-web-based-tools1
CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
トレンドのグラデーションをCSSで表現できるWebツールです。背景にグラデーションを使いたいときなど、大きい面積でグラデーションを取り入れたいときに。
 
 
 
40-free-web-based-tools2
Trianglify.io · Low Poly Pattern Generator
流行のポリゴングラフィックをCSSで表現するためのツールです。目の細かさや角度、色味などをカスタマイズでき自由度も高いです。
 
 
最適なツールを利用することで、クオリティの高いコーディングを短時間で完結することができます。サイトには他にも活用する機会の多いWebツールが多数紹介されていますので、興味をお持ちになられた方は是非下記リンク先よりご覧になってみてください。

40 Free Web-Based Tools & Apps for Working With CSS

続きを読む
2009年08月30日

50の美しいポートフォリオサイト「50 Beautiful and Creative Portfolios」

デザイナーにとって顔ともなる自身の作品や経歴を紹介するポートフォリオサイト。記載されている作品だけではなく、その見せ方やページの構成などもその人のクリエイティブの力を見られる重要なツールの一つですが、今回紹介するのはそんなクリエイター達のポートフォリオサイト集「50 Beautiful and Creative Portfolios」です。

designport
Nathan Sanders

かなりの数のポートフォリオサイトが紹介されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:08  |  
Category: WebDesign   
tag: webdesign
2010年02月08日

グローバルナビゲーションのショーケース「A Showcase of Website Navigations with Serious Click Appeal」

WEBサイトのなかでも最も重要で、ユーザーが利用するナビゲーション、グローバルナビゲーション。今日紹介するのはそんなグローバルナビゲーションのショーケース「A Showcase of Website Navigations with Serious Click Appeal」です。

synthview01
SYNTHVIEW

海外のサイトにはなりますが、様々なナビゲーションが集められています。今日はその中から気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:50  |  
Category: Design , WebDesign   
2010年02月16日

シンプルで美しいWEBデザイン集「50 Beautiful Clean and Simple Web Designs」

シンプルなデザインほど、ごまかしがきかず、スペースの空き具合や、フォントの選び方等、様々なバランスが目立ってきて難しい場合が多いですが、今回紹介するのはバランスのとれたシンプルで美しいWEBデザイン集「50 Beautiful Clean and Simple Web Designs」です。

21-01_sofa01
SOFA

シンプルで無駄のWEBデザインが多数集められています。今回はその中からいくつか気になったページをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 01:22  |  
Category: WebDesign   
tag: webdesign
2010年11月18日

LED表示のようなデジタルフリーフォント20選「20 Best Useful Digital Fonts for LED Banner Designing」

世界中で様々なフォントが公開されていて、フォントと一口にいっても様々な種類のフォントがありますが、今回紹介するのはLEDに表示されているようなドットで構成される、デジタルチックなフリーフォントを集めたエントリー「20 Best Useful Digital Fonts for LED Banner Designing」です。

上記のようなフォントが全部で20個まとめられています。今日はその中からいくつか気になったフォントをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:27  |  
Category: Design , Font   
2016年02月20日

ラフな雰囲気を演出できる ハイクオリティなハンドクラフト素材セット「57 Handcrafted Fonts, 230 Textures & 100s of Design Extras」

いろいろなテイストの素材が配布されていますが、ラフ感のある雰囲気を演出できる素材は持っているととても便利。いろんなシーンで活躍してくれます。そんな中今回紹介するのは、ハイクオリティなハンドクラフト素材セット「57 Handcrafted Fonts, 230 Textures & 100s of Design Extras」です。

hand16_1

同テーマで、フォント、textureなど、さまざまな種類の素材をまとめてダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

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

水のような動きが鮮やかで目をひくエフェクト「Liquid Distortion Effects」

Webデザインの中でもユーザーの目を簡単に引くことを可能にするエフェクト。動きがつくだけでサイト内がぱっと華やかになります。今や様々なエフェクトをつけることが可能ですが、ついついワンパターン化してしまいがち。そんな方におすすめできる、水のような動きに焦点をあてた「Liquid Distortion Effects」を今回はご紹介致します。

LiquidDistortion_Featured

水のような動きは優雅さと洗練された雰囲気を与えてくれます。下記にデモをいくつかピックアップ致しましたので、ご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: javascript , Tool , WebDesign   
2010年04月17日

ハイクオリティなベクターデータ集「35 High-Quality Free Vector Packs」

制作するうえで非常に便利なベクターデータ。かなり自由度が高くカスタマイズが用意なため、様々なカスタマイズが可能で、デザインの素材としてはかなり使い勝手が良いものです。今日紹介するのはハイクオリティなベクターデータ集「35 High-Quality Free Vector Packs」です。

vectorepack01
35 High-Quality Free Vector Packs

シルエットから、背景素材に使えそうなベクターデータなど、様々なベクターデータが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:28  |  
Category: Design , vector   
tag: Design vector
2010年10月13日

シンプルなwebデザイン実例集「40 Fresh Examples of Minimal Web Design」

WEBデザインにもさまざまなテイストがありますが、今回はシンプルなwebデザインを集めた実例集「40 Fresh Examples of Minimal Web Design」を紹介したいと思います。


hauser lacour

要素が少ない分、意外に頭悩ませることも多いであろうシンプルさをテーマにしたWEBデザインが多数収録されています。今回はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:59  |  
Category: Design   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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