Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide […] Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
twitter facebook hatena google pocket CSSのtext-shadowとJavaScriptを利用してテキストの影を非常に印象的にするテクニックです。 ※サポートブラウザはSafari、FF3.5、Operaなどです。 via：CSS text-shadow Fun sponsors 使用方法 まずはテキストを書きます。 <div id="text-shadow-box"> <div class="wall"> <p id="tsb-text">影を付けたいテキスト</p> <div></div> </div> <div id="tsb-spot"></div> </div> 上記を記述したら、CSSを以下のようにします。 <style type="text/css" media="all"> #text-shadow-box { position: r
Easy Display Switch with CSS and jQuery - DesignM.ag
This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
CSSでバブルタイプのblockquote『Bubble Quote』を作りました。 – creamu
先日のエントリーで紹介した『CSS Speach Bubbles』が好評だったこともあって、無性に作りたくなったので作りました。 CSSでバブルタイプのblockquote『Bubble Quote（バブルクオート）』です。 特長は以下の4点です。 1.クリーンHTML！CSSでデザイン、レイアウトしています。 2.カスタマイズも簡単！widthやカラーを簡単に変えることができます。 3.ブログにぴったり！引用をするならBubble Quote！CSSを追記してHTMLを書けば、すぐにクールで柔らかいblockquoteデザインのできあがりです。 4.CSSのclassがかぶらない！CSSのclass名が既存のものとかぶらないように、独自のネーミング（bubblequote）にしています。 ↓のようなデザインです。 copyrightは特に設けていません。自由にお使いいただいて結構です。
Safari 3対応のCSSを使ってデザインそのままに組み直し / TEA-WORKSのウェブログ
現在地は TEA-WORKS > TEA-WORKSのウェブログ > インターネット > Safari 3対応のCSSを使ってデザインそのままに組み直し です。 当サイトのCSSに、Safari 3の独自拡張や先行実装を加え、以前と同様のデザインを実現してみました。 box-shadowなどを試してみたかったということもありますが、もともと、レイアウト上いくつかの問題があったので、それらを解消したいという理由もあってのことです。 以前の表示状態 透過やボカシ影を表現するためにPNG画像を使っていたので、Internet Explorer 6（Windows）など一部のブラウザーでは、意図した表示になっていませんでした。 しかし、そのほかのメジャーブラウザーの最新版であれば、ほぼ、図1のように表示されていたと思います。（図1はOpera 9での表示） マークアップし直しでほとんどの画像ファイ
本blogをiPhone/iPod Touchフレンドリーに : 404 Blog Not Found
2008年07月29日03:00 カテゴリTips 本blogをiPhone/iPod Touchフレンドリーに Apple iPod touch アップルコンピュータ してみました。 具体的に行ったのは、以下の通りです。 以下をCSSに追加 @media screen and (max-device-width: 800px) { /* iPhone + small display friendly */ .amn { display:none } #links { display:none } #content { min-width:800px; max-width:1280px } } 以下をテンプレートに追加。charset指定の直下。 <meta name = "viewport" content="width=728" /> 解説すると、AMNのラージバナーとサイドバーを非表
Beautiful CSS Centered Menus. No hacks. Full cross-browser support.
27 Jul 2008 — Updated 16 Jan 2023 Table of contents Centered Menu Demo How To Center Menus With CSS Centered Menu Examples Centered Menu Features Centered Menu With Submenu Demo How Submenus Work Download A lot of people want centered menus on their website but for the CSS novice, this task seems almost impossible. If you search online you will find a few centering methods but most of these rely o
CSS Portal - Generators, Resources, Tools, HTML - CSS Portal
Support Us If you would like to support CSSPortal, please consider making a small donation. Donations CSS Portal Tools, Generators & Resources CSS Portal is home to many examples of CSS / HTML and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs. You will find hundreds of pages of tools, resources and generators to
Particletree » Rediscovering the Button Element
IntroductionCreating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elemen
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
[CSS]リンクの情報をサポートするスタイルシートのテクニック集
The Gift of Giving Advent Calendar - Market Blog
Google Code Archive - Long-term storage for Google Code Project Hosting.
http://www.caramel-tea.com/2008/03/reblog_notes/
Google Code Archive - Long-term storage for Google Code Project Hosting.
【icon】無料で使い放題！プロが作るホームページ素材集 イメージライフ
CSSでクールなボタンを作るまとめ:phpspot開発日誌