TOP  >  メニュー

Tag : メニュー

2014年01月21日

CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」

殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。

jqmenu1
Responsive Multi-Level Menu – Demo 1

シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。

詳しくは以下

(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2013年09月10日

CSSで実現できる15の美しいナビゲーションメニュー「15 Beautiful and Creative CSS Navigation Menus」

ナビゲーションメニューを作る時、いつも似たようなデザインになってしまってはいないでしょうか?そんな時に是非利用したい、CSSのみで実現できるナビゲーションメニューをまとめた「15 Beautiful and Creative CSS Navigation Menus」を今回は紹介したいと思います。

nav_0
UAE, Dubai- Sharjah based web & designer, Front-end developer S.M.Riyaz

プルダウンのついた便利なメニューや、デザイン性を重視したハイクオリティなメニューまで、さまざまなCSSナビゲーションメニューが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

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

2010年06月10日

CSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」

角丸、ドロップシャドウ、グラデーションなど今までは画像と組み合わせたり、様々な工夫を用いて表現してた手法が簡単に実装できるCSS3。対応ブラウザも増えてきて、すでに利用されていると言う方も多いと思いますが、今日紹介するのはCSS3のみで実現する先進的なフォトギャラリー集「10 Pure CSS3 Image Galleries and Sliders」です。

css3g01
Turn Your Images Into Polaroids with CSS3

FLASHのような派手なアクションなどはありませんが、CSSだけでここまで表現できる、CSS3の良さを感じることができます。全部で10個のCSS3ギャラリーが公開されていますが、今日はその中から幾つか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:20  |  
Category: WebDesign   
2007年10月27日

YouTubeの貼付タグをXHTML 1.0に最適化するGreasemonkeyスクリプト

ブログを運営していたり、WEBを運営したりしているとYouTubeの貼付けタグにお世話になる機会も多いかと思います。WordPressやMovabletypeを始めとする多くのブログツールは「XHTML 1.0」が利用されていますが、実はYouTubeの貼付けタグは「XHTML 1.0」準拠していないそうでW3Cを気にされている方にとっては以前からちょっと話題になっていました。

現状のYouTube貼付タグで「XHTML 1.0」に準拠していない所は以下の通り

* `&rel` は不明な実体参照です。
* 空要素タグは <param /> と書くようにしましょう
* <embed> は Mozilla、MSIE または doti 用のタグです。
* </embed> は Mozilla または MSIE 用のタグです。
* <object> には等価な内容を書くようにしましょう。

手動でも修正できますが、YouTubeを利用するたびに書き直すのは非常に面倒。そこで今回紹介するのはその貼付けタグを自動的に最適化し、XHTML validの状態にしてくれるGreasemonkeyスクリプト「YouTube better embed」です。

変換等の面倒な作業は必要なくインストールするだけで、自動的に変換してくれるのでとても便利です。「XHTML 1.0」準拠にこだわってブログを書いている方はとても便利なスクリプトだと思います。

※このツールを使用するにはfirefoxにGreasemonkeyがインストールされている必要があります。

YouTube better embed – Userscripts.org

続きを読む
posted 03:31  |  
Category: Greasemonkey , Tool   
tag: Tool
2013年10月06日

CSS3・HTML5を利用したナビ・タブメニューチュートリアル「15 Fresh Navigation Menu Tutorial using CSS3 and HTML5」

CSS3やHTML5で表現できる動きや変化は確実に広がってきており、重宝されるシーンも非常に多く見られます。そんな中今回はCSS3・HTML5を利用したナビ・タブメニューチュートリアル「15 Fresh Navigation Menu Tutorial using CSS3 and HTML5」を紹介したいと思います。

css3_1
CSS3 Menu – Impressionist UI – by Valeriu Timbuc for Design Modo

デザインにエフェクトを加えたい時には是非参考にしたい、独特な動きのあるナビゲーションやタブメニューがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:01  |  
Category: Design   
2008年10月06日

ロゴデザインのリソースとなりうるサイトTOP10「Top 10 Sources of Logo Design Inspiration」

前回「ロゴデザインのリソースサイト集「105+ Logo Design Tuts And Resources」」という記事でロゴデザインのためのインスピレーションサイトを紹介しましたが、今回もロゴデザインのリソースとなりうるサイトを集めた「Top 10 Sources of Logo Design Inspiration」と言うエントリーを紹介したいと思います。


Carbonmade

以前紹介したWEBサイトと、一部被るサイトもありますが、今回は前回紹介していないものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:19  |  
Category: Design   
tag: Design
2014年03月22日

フラットデザインの制作に活用したい PSD UIキット「15 Latest PSD Flat UI Kits for Designers」

現在主流のフラットデザイン。シンプルなデザインが特徴ですが、これまでに制作したことがない方にとっては、コツをつかむまでに時間を要することもあるのでは?今回はそんな制作シーンに活用したい、PSD UIキット「15 Latest PSD Flat UI Kits for Designers」を紹介したいと思います。

ui140322_1
EAMEJIA | Premium and free graphic design resources | Flat UI Kit PSD

フラットデザインテイストの、さまざまなwebデザインで利用できるUIがセットになって紹介されています。

詳しくは以下

ui140322_2

Free Spark Flat UI Kit | Vector Chameleon
エメラルドグリーンのカラーリングが特徴のUIキット。クリーンな印象のデザインにおすすめ。
 
 
 
 
 
ui140322_5

Robotic UI
フラットテイストの中にも、デザイン効果で立体感もところどころに取り入れたUIキット。デザインを印象的に仕上げたい時に。
 
 
 
 
 
ui140322_4

Flat User Interface Kit on Behance
4つのカラーパターンがまとめられています。デザインするベースカラーに合わせて使い分けることができるのでは。
 
 
まずはUIキットを使ってフラットデザインのイメージをつかみとり、さらにデザインに応用を加えてみるのも方法かもしれません。是非活用してみてください。

PSD Flat UI Kits Free Download | Design | Graphic Design Junction

続きを読む
posted 09:52  |  
Category: Design   
2015年07月31日

最新の魅力あふれるフリーリソースを集めた「50 incredible freebies for web designers, July 2015」

豊富に配布されるフリー素材の数々。その中からすぐれたものを探し出すのは、なかなか大変な作業です。今回はそんなシーンに是非参考にしたい、最新の魅力あふれるフリーリソースを集めた「50 incredible freebies for web designers, July 2015」を紹介したいと思います。

designers0731_0
Bukhari Script – Free Font on Behance

フリーフォントからアイコン、UI、JS、アニメーションなど、デザイナー側・開発側どちらにも便利なフリーツールが多数紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:05  |  
Category: Design   
2011年12月09日

日本のさまざまな模様を描けるPhotoshopブラシまとめ「20 Sets of Japanese-Themed Photoshop Brushes」

世界からも高い評価を受ける日本の古き良きデザインは、和を基調としたデザイン制作の必須アイテム。そこで今回紹介するのが、桜や紋など、日本を象徴する模様を描けるPhotoshopブラシをまとめた「20 Sets of Japanese-Themed Photoshop Brushes」です。


Cherry blossoms PS brushes by =Lileya on deviantART

日本らしさを感じるブラシが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:55  |  
Category: Design , Photoshop   
2014年05月30日

アウトラインデザインのフリーアイコンセットまとめ「1000+ Free Outline Stroke Icons For Designers」

一口にアイコンといっても、フラットタイプや立体感のあるリアルなタイプなど、いろいろなテイストのものが存在していますが、今回紹介するのは、アウトラインデザインのフリーアイコンセットまとめ「1000+ Free Outline Stroke Icons For Designers」です。

icon140530_1
Dribbble – Free Icon Set by Catalin Fertu

ラインで描き出されたアイコンセット、いろいろな種類が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2012年12月24日

【商用可】クリエイティブな雰囲気を演出するブラーテクスチャ100「100 Free Blurry Textures」

素材感や質感をデザインに与えてくれる背景テクスチャ、グラフィック・WEBデザイン問わず非常に便利な素材の一つですが、今日紹介するのはクリエイティブな雰囲気を演出するブラーテクスチャ100「100 Free Blurry Textures」。

全部で100種類のブラーテクスチャがzipファイルにまとめられており、シンプルなものから、カラフルなものまで、幅広い質感のものがセットになっています。

詳しくは以下

ファイル形式はjpgで、サイズは2592×1936ピクセルと比較的大きなサイズになっています。さらにありがたいことに、個人利用、商用利用ともに許可されており、広告などの受託のクリエイティブワークにも利用できます。

ダウンロード元には「ビールをおごる」ボタンも設置されているので、本当に役に立ったという方はそちらも是非。

100 Free Blurry Textures | PEPSized

続きを読む
posted 10:00  |  
Category: Design , Photoshop , WebDesign   
2011年07月25日

テクノロジーデザインが手軽に表現できるフリーPhotoshopブラシ集「Huge Collection of Free Tech Brushes for Photoshop Users」

数多くのPhotoshopブラシが世界中で発表されており、制作に利用しているというデザイナーの方も多いと思います。そこで今回は、テクノロジー系のデザインに使いやすいPhotoshopブラシを集めた「Huge Collection of Free Tech Brushes for Photoshop Users」を紹介したいと思います。


Technical by ~Raven03 on deviantART

実用的なデザインから、近未来のようなデザインまで、さまざまなブラシが紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:05  |  
Category: Design , Photoshop   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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