CSS3 Menu. Free CSS Menu Maker
Fancy Drop Down Menus with Pure CSS! Create responsive, mobile-friendly web menus with CSS only. Light, fast, gorgeous menus - completely code-free. FREE download More demos Overview CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amaz
[CSS]スクリプト無しで、クリックで画像を拡大するスタイルシート
Lightboxなどのスクリプトを使用しないで、スタイルシートで実装する画像を拡大するテクニックをCSSplayから紹介します。 画像を拡大表示 拡大画像を消すのは、右上のアイコンです。 仕組みは簡単に説明すると、サムネイル画像と拡大画像（テキスト含む）をインライン要素として配置し、focusとactive時にdisplayやpositionなどを変更しています。 対応ブラウザは、Safari(PC), Google Chromeとのことですが、上記キャプチャはFirefox3.5です。 IE6でも動作するバージョンは「CSS Light Box - Click version」です。 このテクニックは画像ギャラリーだけでなく、商品写真の拡大などにも応用がきくものとなっています。
[CSS]ハック無しで、不透明なパネルをドロップダウンするナビゲーション
IEをはじめとするクロスブラウザ対応の不透明なスタイルを適用したドロップダウン型のナビゲーションをCSSplayから紹介します。 IE6でのキャプチャ ナビゲーションはJavaScriptやtableは使用しておらず、スタイルシートもハックや条件付きコメントは使用していません。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(Win), Chromeとのことです。 また、同様に垂直型のナビゲーションも公開されています。
[CSS]テキストを画像の下に回り込ませないようにするスタイルシート
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
[CSS]既存のボタンのデザインをセクシーに美しくするスタイルシート -Sexy Buttons | コリス
ブラウザごとに異なる味気ないデザインのボタンをアイコンやグラデーションを使用してセクシーに美しくするCSSのフレームワークを紹介します。
[CSS]CSSアニメーションを使用したポップでキュートなボタン
Radioactive Buttons demo 上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。 Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。 個人的にはデザインはこれで充分のような気もします。 <textarea name="code" class="css" cols="60" rows="5"> @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color:
[CSS]透過画像を使用して幻想的な背景をつくりだすスタイルシート
スクロール後 仕組みは、透過PNG画像を固定配置し、レッドからブラックへのグラデーション画像がスクロールされると、ブラックになった時点で絵柄が浮き上がるものとなっています。 グラデーション画像は「gradient-tile.jpg」を使用しています。 IE6では透過PNG画像の背景が固定配置で繰り返すことができないため、シンプルな解決方法として透過PNG画像の背景を非表示にしています。 スタイルシートもシンプルです。 <textarea name="code" class="css" cols="60" rows="5"> * html #wrapper {background-image: none;} </textarea>
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
CSSだけでポップアップ
このサイトのテクはJavaScriptを使いません。「CSSだけでリモートロールオーバー」の説明に、ポップアップ？といれたら、間違えて検索してこられる方が相当数おられます。それで、ポップアップのページも作る事にしました。Operaでは上手く作動しません。没ネタばかりですみません。 CSSだけでポップアップ説明・画像 おなじみの問題からです。 動作確認で問題なしは、Win のIE6/Firefox1.5・2。 問題ありは、Opera9はまったく作動せず、8.5では、残像が残ったりします。 Operaの多いサイトさんは絶対に使わないで下さい。 CSSだけでポップアップの作り方（簡単編） 純粋に文字だけ・画像だけなら、リンクさせたい文字の後ろに span でクラスを付けて最初は display:none。hover の時は display:block; とすれば浮かび上がります。後は､位置
CSSだけでプルダウンメニュー
このページのTipsはJavaScriptを使いません。スタイルシートのみで作成しました。せっかくがんばって考えたのに、没になったテクニックです。問題アリのTipsです。今回の問題は大したことないです。 プルダウンメニュー・ツリーメニュー・階層メニュー・ドロップダウンメニュー色んな別名をもつ折りたたみ式のナビゲーション。これもＣＳＳだけでやってみました。マウスがスイッチの上に乗ると、下に垂れ下がってくるメニューのことです。普通はJavaScriptを使うようなのですが、JavaScriptなしで作りました。html+css で動きます。でも、ちょっと問題ありなので使いませんでした。そんなのばっかりですが、楽しんでくだされば嬉しいです。セキュリティを気にしない客層の場合は、問題なく使えると思います。 プルダウンメニューの作り方 1.html部分は 親に a 要素を使います。これは IE の
*LOVE IS DESIGN* - 誰でも簡単にCSSカスタマイズができちゃうサイト
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc カスタマイズに便利なサイトを、またまたはてブで見つけました。 やっぱりはてブサマ様！ありがとうブックマーカーたち！ ■Dynamic Drive CSS Library …というわけで、さっそく Sliding Doors Tabs MenuというMac風味のタブメニューを設置してみました。 サイドバーに使えるたて型もあります。 このサイトなら誰でもプロのデザイナーのようなオシャレなメニューバーにカスタマイズができちゃいますよ。タブメニュー以外にも、CSSを使ってドロップシャドウをつけたり、ポップアップする写真などのサンプルもあります。 海外のサイトですが、まったく英語
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
CSS Spriteを活用しよう - DesignWalker
*LOVE IS DESIGN* - ちょっとしたメモ風のCSSデザイン