WEBを構成する要素で重要な要素の一つ、ナビゲーション。ユーザーが実際操作する所だけあってそのサイトの印象を決めると言っても過言ではない部分です。今日紹介するのはそんなシンプルなナビゲーションの素材をセットにしたPSD素材集「PSD website navigation menus set」を紹介したいと思います。 基本的には同じ構成、配置になっていますが、ナビゲーションバーの中のイメージが微妙に変わっています。 詳しくは以下 PSDファイルになっていますので、こちらをベースにカスタマイズしていく事が可能です。PSDファイルは各ナビゲーションバーでレイヤーに別れており、さらにテキスト部分はテキストデータになっておりますので、打ち変える事も可能です。WEB制作を初めて間もないと言う方には作り方の参考にもなるPSDデータです。 こういったナビゲーションをイメージしていた、もしくは近かったと言う
使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、ｃｓｓのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 ｃｓｓもＤＬ（コピペ）出来ます。 Dynamic 4 Column Layout Generator XHTML/CSS Markup Gen
Fig 1: 「jQuery と CSS を使った Apple 風パンくず」完成図 パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple 風のルックスに Delicious のチェーン状に繋がったタグのリスト的なロールオーバー効
イラレについてのシノゴノ1. w480px× h30px の四角を配置し、グラデーションを設定します。角度は90度、色は0%:#4ECA95 / 49%:#00685D / 51%:#007E79 / 100%:#00685D にそれぞれ設定。 2. 1で描いた四角の上端にぴったりつけて、w480× h10px の四角を配置し、グラデーションを設置します。角度は90度、色は0％:#CCCCCC / 100%:FFFFFF 3. 1で描いた四角の下端から1pxあけて、w480× h6px の四角を配置し、グラデーションを設置します。角度は-90度、色は2と同じ 0％:#CCCCCC / 100%:FFFFFF 4. 文字を乗せる白い板を描きます。幅480pxに w112px× h32px の板をx4配置し、板の間隔を6pxずつ。余った2pxは両サイドに1pxずつ振り分けます。アンチエイ
投稿日：2008年3月18日 レベル：中級者 ソフトウェア： このチュートリアルでは、多目的に使えるナビゲーションヘッダーを作ってみたいと思います。 Step1 ： タブの作成 Step2 ： タブの複製 Step3 ： 大きな長方形の作成 Step4 ： ロゴ窓の作成 Step5 ： ロゴ、メニューの挿入 Step6 ： 画像の追加 角丸長方形ツールで角丸長方形を作ります。 「Ctrl」を押しながらクリックすると角丸長方形を選択できます。 選択範囲を2ピクセル縮小します。 新規レイヤーを作成します。白のグラデーションに黒を適用します。 グラデーションのレイヤーの描画モードを「ハードライト」に変更し、レイヤーの不透明度を「50％」にします。 グラデーションのレイヤーを複製します。 数ピクセル上に移動します。 レイヤーパレットを使ってレイヤーの描画モードを「スクリーン」に変更します
Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style
A tutorial showing how overlapping tabbed navigation is possible in CSS and can be cross-browser compatible, accessible and javascript free. December 9, 2006 Updated September 19, 2024 Not interested in the explanation? You can find the demo and download the source code here. Overlapping Navigation Example Overlaps - a problem ¶ Overlapping navigation is a real problem in CSS with the box model an
Note: Modified March 29th, 08. Fixed IE7 drop down issue (only .css file updated). Description: This is a lean CSS vertical menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arro
jQuery » SuckerFish Style Purpose Replicate Suckerfish Menus. Original Code $(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this).fadeIn("fast"); }, function() { } ); if (document.all) { $("#nav-one li").hoverClass ("sfHover"); } }); $.fn.hoverClass = function(c) { return this.each(function(){ $(this).hover( function() { $(this).addClass(c); }, function() { $(this).rem
Script License Agreement You may use this script only if you agree that: You must EITHER: Donating Users: This script is "donation-ware". If you can make a donation to support this script, it may be used on a website without a crediting link. Please consider making a donation! I have spent a lot of time developing, debugging and documenting scripts, and any support is welcome. More info... Free Us
Navigation Skip navigation. Site search Site navigation How To Create home Tutorial links CSS tutorial This uses just CSS 2 to turn nested lists into a working menu and does not use any JavaScript (except in IE 5.5-6 on windows where I use the proprietary DHTML behaviours, because its CSS handling is not good enough to work this menu without script) This works in Mozilla 1+, Netscape 7+, Opera 7+,
Web Developer Lists : eConsultant Top links, resources, services and tools for web developers and web designers. Next Post : Top 14 CSS Must-Read Blogs Websites Previous Posts : Fonts IndexGoogle Search IndexGraphics IndexRSS Feeds IndexSite Tools IndexSoftware IndexSound IndexTypography IndexUsability IndexWeb Design Index 84 Responses to “Top 71 CSS Menus Navigation Tabs” Core Technologies Inde
Hint: due to my provider's problems this option was deactivated. Sorry for inconvenience. Aqua & Chrome by M.Samy Silva Orange, Blue by Daniel Constantin Blue & Red by V. Friedman Blue, Black, Pink by V. Friedman Make the world prettier! If you'd like to share your css navigation designs with other web-developers, use this template for creating the menus. Please make sure that your css-code valida
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
