CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳
どのように表示するのか 以下のような感じで、Divとclassによって何の装飾もない画像に、ワンポイントのアクセサリーをつけるというもの。 サンプルデモが以下。 CSS Decorative Gallery クリップや、映像マーク、セロハンテープ、光沢など、様々な装飾が可能。 セロハンテープ テープで写真を貼り付けたように見せてくれる装飾。 サンプルデモ ビデオマーク Diggなんかでよく見かけるような小さなアイコンを画像に付加できます。 サンプルデモ ポインタを合わせると吹き出しが出る ポインタを合わせると吹き出しが画像から出てきます。 サンプルデモ 付箋付きクリップ 付箋とクリップの装飾。 サンプルデモ 光沢の演出 透Png画像を使って写真に色々な演出も。 サンプルデモ IE7のPng透過問題も解決するものが同梱されています。 様々なブラウザに対応しているようで、実用性も高いかも。 以
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
スライドするドアのように使いやすいボタンをCSSで作る方法『Make fancy buttons using CSS sliding doors technique』 – creamu
DiaryTechnology スライドするドアのように使いやすいボタンをCSSで作る方法『Make fancy buttons using CSS sliding doors technique』 汎用性のあるボタンが作りたい。 そんなあなたにおすすめなのが、『Make fancy buttons using CSS sliding doors technique』。スライドするドアのように使いやすいボタンをCSSで作る方法だ。 このエントリーでは、↑のようなボタンをCSSで実装する方法が紹介されている。 画像を2つ使い、テキストの長さによってスライドするドアのように縮小・拡大するというものだ。 HTMLとCSSがすべて公開されているのですぐに実装可能だろう。 スライドするドアのように使いやすいボタンをCSSで作る方法、チェックしてぜひ使ってみてはいかがだろうか。 先輩とジムで会ったので
無料で使えるCSSテンプレート配布サイト『CSS 4 Free』 | CREAMU
かっこいいCSSテンプレートで簡単にサイトを作りたい。 そんなときにおすすめなのが、『CSS 4 Free』。無料で使えるCSSテンプレート配布サイトだ。 『CSS 4 Free』では、GPL、あるいはCreative Commonsライセンスのもと、たくさんのCSSテンプレートが配布されている。 テンプレートを投稿することも可能で、templates@css4free.comにURLを送ることでギャラリーに追加してくれる。 ページング機能あり、タグクラウドありと、シンプルで使いやすいギャラリーサイトではないだろうか。 無料で使えるCSSテンプレート配布サイト、チェックしてぜひ使ってみていただきたい。 昨日も先輩とジムで会ったので飲み。楽しかったな。 あと仕事でActionScript 3をやり始めたので本を購入。どちらもとてもわかりやすい！ デジタル時計作成完了、xml取得完了、となかな
CSSを使ってファンシーなボタンを作成するテクニック:phpspot開発日誌
Make fancy buttons using CSS sliding doors technique This article will show you how to create fancy buttons using CSS sliding doors technique. CSSを使ってファンシーなボタンを作成するテクニック。 ２枚の画像を組み合わせて、横に伸縮するCSSボタンを作成するテクニックが紹介されています。 自由なサイズに伸縮可能 ボタンのテンプレートも色々 サイトパーツに便利に使えそう。 関連エントリ CSSでクールな3Dボタンを作ろう CSSでクールなINPUTフォームを作成するサンプル クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」 CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集
フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」:phpspot開発日誌
フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 サムネイルクリックでLightBoxでサンプルを確認できます。 テンプレートの投稿もできるみたい。 クールにデザインされているものが多く、色々使えそうです。 関連エントリ 使えるCSSレイアウトテンプレート集「mycelly.com」 シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 管理者ページのテンプレートが配布 ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 12のフリーCSSテンプレート集 １カラムのクールなテンプレート集４０＋ 用途別に使えるフォームのテンプレート集「The Wufoo FORM Gallery」 CSSベースのクールなリストが作れ
素晴らしいAjax + CSSフォーム47選『47+ Excellent Ajax CSS Forms』 – creamu
Ajax + CSSでさくっとフォームを実装したい。 そんなあなたにおすすめなのが、『47+ Excellent Ajax CSS Forms』。素晴らしいAjax + CSSフォーム47選だ。 以下にいくつかご紹介。 » Uni Form セマンティックでカスタマイズも可能なフォーム » AJAX Contact Form アクセシブルなAjaxフォームの好例。↑のキャプチャはこのサイト » FancyUpload using Mootools Mootoolsを使った美しいファイルアップロード » Really Easy Field validation with Prototype とても簡単に使えるフォームバリデートスクリプト » Live Validation リアルタイムでバリデートしてくれるオープンソースのjavascript 素晴らしいAjax + CSSフォーム、チェック
便利なＣＳＳテクニック３０選:phpspot開発日誌
30 Exceptional CSS Techniques and Examples | Six Revisions In this article, I’ve pieced together 30 excellent CSS techniques and examples 便利なＣＳＳテクニック３０選ということでエントリがまとまっていたので紹介。 特に気になったものを以下にまとめました。 Hoverbox Image Gallery - 画像ギャラリー上でマウスホバー時に画像拡大 デモはこちら CSS Photo Zoom - 文書に添付の画像にカーソルを合わせると画像拡大。テキスト位置も自動調整 デモはこちら whatever: hover - windowsのスタートメニュー風の階層メニュー デモはこちら Content Overlay with CSS - オーバーレイでdescr
クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and
DiaryTechnology クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』 クリエイティブなCSSを実装したい。 そんなあなたにおすすめなのが、『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』。クリエイティブなCSSサンプル&チュートリアル50選だ。 以下にいくつかご紹介。 » Better Ordered Lists (Using Simple PHP and CSS) ↑のキャプチャはこちら。今までのリストとは違った見せ方をしたいときに。 » List Based Calendar リストでカレンダーを作成する方法。 » Create Custom Search Bars C
100個近いCSSギャラリーサイトをまとめて閲覧できる「GALLERY GALLERY」
CSSによってデザインされたサイトをまとめるサイトはかなり多く、それらすべてを網羅しようにもなかなか大変だったわけですが、そういったCSSギャラリーサイト自体をまとめたサイトが出現しました。その名は「GALLERY GALLERY」、さまざまな条件で並び替えることも可能で、100個近いサイトを見ることができます。 詳細は以下から。 GALLERY GALLERY http://www.triangling.net/gg/ この記事の執筆時点では98個のサイトが登録されており、それぞれのサイトについてRSSはあるか、タグによる分類はあるか、ユーザーによる投票は可能か、などの情報が簡潔にアイコンで示されています。 また、各種条件で並び替えることも可能となっているため、自分の入手したい情報をまとめたCSSギャラリーサイトを見つけることも簡単にできます。なかなかいい感じです。
階層ナビゲーション実装ライブラリ集:phpspot開発日誌
Multilevel Drop Down Navigation Menus: Examples and Tutorials Navigation menus are the most important element one should pay attention when designing a website. 階層ナビゲーション実装ライブラリ集をまとめたエントリが公開されていたので気になったものをいくつか紹介。 JavaScriptなどを活用して、マウスホバー/クリック時に開閉するおなじみのＵＩがいっぱいです。 Drop Down Tabs (5 styles) Professional Dropdown FastFind Menu- Mootools Unlimited Drop Menu Creating an Outlook Navigation Bar 全部見る デザイン
時間を節約してくれるCSSツール14選『14 CSS Tools to Save you Time』 – creamu
CSS周りのツールを使ってみたい。 そんなあなたにおすすめなのが、『14 CSS Tools to Save you Time』。時間を節約してくれるCSSツール14選だ。 以下にいくつかご紹介。 » CSS Optimizer CSSのファイルサイズを減らしてくれる。 » Em Calculator pxのフォントサイズをemで計算してくれるプチツール。 » CSS Buttons CSSボタン&テキストフィールドジェネレータ。 » CSS Menu Generator テキストベース、かつ魅力的なナビゲーションメニューのCSSとHTMLコードを生成。 » Web 2.0 Generator ボタン1発でWeb2.0風のフルレイアウト（HTMLとCSS）を生成してくれる。 時間を節約してくれるCSSツール、チェックしてぜひ使ってみてはいかがだろうか。 昨日はチームの飲みでぐだぐだに。。楽
CSSでデザインされたツールチップボックスいろいろサンプル:phpspot開発日誌
woork: CSS Message Box collection Message boxes are useful elements to display status messages after or during a specific user request.CSSでデザインされたツールチップボックスいろいろサンプルがダウンロード可能になっています。 どのツールチップも、<div>を１、２回ほど重ねた程度のシンプルなHTMLになっています。 ツールチップ関連エントリ カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々 script.aculo.usベースのクールなツールチップライブラリ「Effect.Tooltip」 JavaScriptツールチップライブラリ24個 CSSだけでメニューにツールチップヒントを付けるテクニック Java
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
使えるCSSメニューいろいろ:phpspot開発日誌
使えるCSSメニューいろいろ 1. Advanced CSS Navigation Menu Example まず、ホバー時以外は文字をぼやかせるCSSメニュー。 次のようにマウスホバー時は文字がクッキリするメニューのサンプルです。 JavaScript レスで実装できるので JavaScript なしがいいという方にはオススメ。 ただし、動かないブラウザもあるようなので注意が必要ですね。 2. Suckerfish Dropdowns - Perciformes! 次にCSSとJSで階層メニュー。やはりこのＵＩは直感的に操作できますね。 類似：CSSのみでクールな階層メニュー作成サンプル、CSSベースの階層メニュー作成ライブラリ 他にも色々と掲載されています メニュー関連エントリ PHP＆CSSで動的にドロップダウンメニュー作成 ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成
PHP＆CSSで動的にドロップダウンメニュー作成:phpspot開発日誌
Building a dynamic drop down menu Not so long ago I was in a big search for a solution like this and my search didn't lead to any positive results. PHP＆CSSで動的にドロップダウンメニュー作成。 PHPで階層的にデータ設定をして、次のようなドロップダウンメニューが描画できます。 IEで動かない点が気になりますが、PHPで動的に階層メニューを作る際には便利そうです。 関連エントリ CSSのみでクールな階層メニュー作成サンプル CSSでちょっと変わっているピル風の形をしたナビゲーションを作成 SlashDot風のサイトメニューを作る「Slashdot Menu」 階層的でクールなメニューを作るためのJSライブラリ「FastFind Menu」
[CSS]いろいろなデザインのメッセージボックスのチュートリアル | コリス
woorkのエントリーから、シンプルなもの、アイコン付き、ツールチップタイプなどのメッセージボックスを作成するスタイルシートのチュートリアルの紹介です。 CSS Message Box collection wooksのエントリーでは、下記の5種類のメッセージボックスが紹介されています。 シンプルタイプ アイコン付きタイプ ソリッドタイプ 角丸タイプ ツールチップタイプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの外部ファイル化
IDEA * IDEA
[CSS]アイデア満載のスタイルシートのテクニック30選 | コリス