Dave Woods - HTML, CSS, Web Design Simple CSS 3D Button Creating 3D buttons is usually dealt with by using images but within this very simple tutorial, I’ll explain how regular links can be styled to look like 3D buttons using just a little CSS. CSSでクールな3Dボタンを作ろう。 次のような３ＤのＣＳＳボタンを作ります。 マークアップは<a>タグのみ <a href="http://www.dave-woods.co.uk">Hover over me</a> のこりはCSSで実装（ＣＳＳの例はこちら） クリックして欲しいとき、目立たせたい時は使

Simple Round Corners in CSS (revisited) We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. 1個の画像でシンプルに角丸を実装するCSSサンプル。 使うのは次の1枚の300バイトの画像。 なるほど、これでポジションをずらしてあげれば、画像は1枚でシンプルに実装できるわけですね。 HTMLマークアップとCSSの紹介と解説がされてます。 関連エントリ CSSで角丸テ

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

Roxer - The easiest way to make a web page ブラウザ上で簡単にホームページが作れる「Roxer」。 ドラッグアンドドロップして要素を再配置したり、リアルタイムに編集したり色々と出来るようです。 ブラウザによってはエラーがでてうまく動作しなかったりするのですが、なかなか便利そうですね。 関連エントリ Ajaxを活用したブラウザ上でWYSIWYG編集できるCMS「Authenteo」 ブラウザ上で自由にデザインできるページ作成ツール『Noovo Communications』

woork: Digg-like navigation bar using CSS This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links. CSSでdigg風のナビゲーションを実装サンプル 次のようなクールなdigg風のメニュー部分のサンプルをダウンロードできます。 同ブログの「woork: Simple CSS vertical menu Digg-like」では、次のようなコンボボックスのサンプルも公開されています。 （ＩＥではうまく動作しないみたい） シンプルですが考え込まれたクールなＵＩになってますね。 HTMLマークアップも綺麗に実装できてます。 関連エントリ 使えるCSSメニューいろいろ CSSでお店

CSS Gradient Text Effect Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). CSSのみでプレーンテキストにクールなグラデーション効果を付けるテクニック。 テキストと画像を使って、テキストの背景に画像を混ぜて次のようなテキスト効果を得るCSSテクニックが紹介されています。 JavaScriptやFlashなどは一切使用していない、PureCSSになっているそうです。 デモページはこちら(FireFox等

Facebox 1.0 Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」。 リンクをクリックで次のように画像をポップアップしてくれます。 これはFacebookでも使われているポップアップ方法のようで、知っている人は知っている、ポップアップの仕方のようです。 コードは次のように非常にシンプルです。 rel="facebox" でポップアップしてくれるみたいです。 <a href="/facebox/remote.html" rel="facebox">text</a> jQueryベースなので軽量な点もうれしいところ。 ちょっと気分を変えたい方は導入

使えるCSSメニューいろいろ 1. Advanced CSS Navigation Menu Example まず、ホバー時以外は文字をぼやかせるCSSメニュー。 次のようにマウスホバー時は文字がクッキリするメニューのサンプルです。 JavaScript レスで実装できるので JavaScript なしがいいという方にはオススメ。 ただし、動かないブラウザもあるようなので注意が必要ですね。 2. Suckerfish Dropdowns - Perciformes! 次にCSSとJSで階層メニュー。やはりこのＵＩは直感的に操作できますね。 類似：CSSのみでクールな階層メニュー作成サンプル、CSSベースの階層メニュー作成ライブラリ 他にも色々と掲載されています メニュー関連エントリ PHP＆CSSで動的にドロップダウンメニュー作成 ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成

InnerFade with jquery InnerFade is a small plugin for the jQuery-JavaScript-Library. 要素の中身をアニメーションしながら切り替えられる「InnerFade with jquery」。 スライドショーのように、要素内がアニメーションしながら切り替わるパーツが作れます。 便利なのは、画像が切り替わった際に、画像からのリンク先も切り替わる点。 実際には、次のように、ul 要素内の li を順にアニメーションするという仕様になっているようで、その実装も簡単です。 <ul id="portfolio"> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"> <img src="images

jqzoom | allows you to realize a small magnifier window close to the image or images on your web page easily.画像のマウスポインタ上をズームしてくれる「jqzoom」。 次のように、マウスポインタ上の画像を右部分でズームしてます。 小さい画像と大きな画像を指定するので、拡大しても解像度が悪いということはありません。 jQuery ベースで、(1)ライブラリ読み込み (2) img タグ定義 (3) スクリプト初期化 というステップで実装も簡単。 サイトの仕掛けとして覚えておいた方がよさそうなライブラリですね。

Nice and Free CSS Templates This site contains free css templates for your website - Just copy and paste and there you have a stunning website ! 使えるCSSレイアウトテンプレート集「mycelly.com」。 次のように、サムネイルから選んで好きなCSSテンプレートを１２種類入手できます。 ２カラム、３カラムレイアウトの他、センターボックスのレイアウトもあります。 センターボックスのレイアウトは他サイトではありそうでなかったりするのでこのサイトで参考にできそうですね。 関連エントリ ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 12のフリーC

Coda-Slider 1.1.1#5 タブ型でスライドアニメーションするパネルＵＩを作れる「Coda-Slider」。 次のように、タブ型で、タブをクリックでページがアニメーション遷移するＵＩが作れます。 ページ左右の、＜＞ボタンでもページ遷移させることが出来ます。 ちょっとしたウェブ上のプレゼン資料なんかに使うと見やすくていいかもしれませんね。

Google Chart API.を超簡単に扱えるラッパークラスライブラリ「gchartphp」が登場 2007年12月14日- gchartphp - Google Code A simple PHP Object wrapper for the Google Chart API. Google Chart API.を超簡単に扱えるラッパークラスライブラリ「gchartphp」が登場。 昨日、「PHPで「Google Chart API」を扱う」で出てこないかな、と言ってたものが早くも登場。 次のようなオブジェクト指向な分かりやすいコードでGoogle Chart API を扱うことが可能です。 $piChart = new gPieChart; $piChart->addDataSet(array(112,315,66,40)); $piChart->valueLabels = arr

cl.pocari.org - PEAR::Pager で Digg っぽいページャを作る UI Patterns で紹介されているように Digg のページャは見た目にも綺麗だし、わかりやすいと思います。 以下の画像が Digg のページャです。 PEAR::Pager で Digg っぽいページャを作成するサンプルが公開されています。 次のようになかなかクールです。 手っ取り早くカッコいいPager デザインを作る際に参考にできそうですね。 関連エントリ ページ送り部分のデザイン研究

CSS: The All-Expandable Box In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. 文字のサイズに応じて拡大/縮小するCSSボックス実装。 ブラウザの文字のサイズ変更によって、次のように、テキストを囲むボックスのサイズを変更するCSSテクニックが公開されています。 ブラウザの文字サイズを変更しても、ボックスのサイズはそのままだと文字が読みにくいというケースがあると思いますが、この仕組みでやれば、そういったことも解消されそうですね。 実際のデモはこちら このデモを解析、応用することで、拡大、縮小にも対応したページ作りの参考となるでしょう。 関連エントリ フォントサイズの変更をJavaScriptによ

Ruminations: Flot 0.1 released! It draws on inspiration from Plotr and PlotKit, and several other commercial packages. But also from venerable old gnuplot - there's nothing more boring than hand-picking axis scales so I wanted the default algorithm to be smart. jQueryベースの滑らかなグラフ描画ライブラリ「Flot」。 Flotを使えば次のようなグラフをJavaScriptで描画することが可能です。 コードは次のように書くみたいです。 <div id="placeholder" style="width:600px;height

CSS Text Wrapper The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle.テキストを自由な位置で折り返せる「CSS Text Wrapper」。 テキストを円形等、好きな形の範囲内に収める仕組みが考案されたようです。 次のように、円形の中にテキストを並べる等、まさに自由自在です。 昔はこういった形でのテキストは空白を挟んだりして実現は難しいと思っていましたが、実現できるんですね。 デザイン系のサイトなんかで活用できそうな仕組みです。 こんな仕組みがあるとは知らない人に見せたらアッと驚くこと間違いないでしょう。 ちょっとしたサプライズを与えたい場合に使えますね。

Blur Highlight 画像の特定部分にフォーカスを当ててハイライトできる「Blur Highlight」。 ファイルを選択して、画像部分をドラッグ＆ドロップでハイライトできます。 ハイライト部分のぼかし度合いや周りの明るさなどもパラメータで簡単に指定可能。 エフェクトをかけた後はダウンロードが可能で、ブログ等に活用できそうです。 Flexで出来ているようなのですが、軽くていいですね。

CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem