とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
120 Great CSS Menu Tutorials | The Jotform Blog
Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content. CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加える レタープレス効果 元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。 デモ 先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。） 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript,
CSS3で実装するApple.comのナビゲーションメニュー:phpspot開発日誌
The fancy Apple.com navigation menu created using only CSS3. CSS3で実装するApple.comのナビゲーションメニュー。 Appleのサイトで実装されているメニューをCSS３で実装してしまおうというデモ。 グラデーションが綺麗に表現されています。 検索ボックスも次のとおり 画像として使われているのはロゴと虫眼鏡のみ。 検索ボックスが伸縮しない部分は公式とちょっと違いますが自分で実装してみても面白いかもしれませんね。 関連エントリ 立体的なCSS3でデザインされた検索フォーム実装チュートリアル CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3で動くプログレスバー作成サンプル
レジュメやプロフィールページに使えそうなシンプルで綺麗なテンプレ「Azuka」:phpspot開発日誌
Azuka レジュメやプロフィールページに使えそうなシンプルで綺麗なテンプレ「Azuka」が公開されています。 シンプルなのでこれをカスタマイズして調整することで手っ取り早くプロフィールページなんかを作れそうです。もちろんそのまま使うことも可能。 CSS3の機能なんかも使われており、それでいてスッキリしたデザインのため嫌な印象は与えませんね。 ソースも綺麗に書かれているため、セクションの追加なんかも簡単のようです。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 フリーのCSSテンプレート＆テンプレート配布サイトまとめ
HTML と CSS のみでタブを作るサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 ul.tab { margin: 0; padding: 0; border-bottom: 2px #ddd solid; } ul.tab li { float: left; margin: 0 0 0 5px; position: relative; bottom: -2px; list-style-type: none; border: 1px #ddd solid; border-top: none; border-bottom: 2px #ddd solid; } ul.tab
CSS文字装飾のバリエーション(12パターン) - jsdo.it - Share JavaScript, HTML5 and CSS
<p>Normal</p> <p class="dropShadow">Drop Shadow</p> <p class="stroke">Stroke</p> <p class="outset">Outset</p> <p class="inset">Inset</p> <p class="block">Block</p> <p class="glow">Glow</p> <p class="blur">Blur</p> <p class="doubleStroke">Double Stroke</p> <p class="reflect">Reflect</p> <p class="deepInset">Deep Inset</p> <p class="gradient">Gradient</p> <p class="blind">Blind</p> body { background
CSS3のよく使いそうな１０個のテクニックのまとめ:phpspot開発日誌
The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな１０個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影を付ける効果 text-shadowによる影付きテキスト効果 ボックスのグラデーション 複数バックグラウンド指定 transformによる変形 transitionによるアニメーション テクニックのリストだけではなくて、対応していないIE等もカバーするための具体CSSも記載されていて親切です。 関連エントリ CSS3等を使ったサンプルや各種CSSリソース集 CSS3で立体的な3Dリボンを作成するチ
[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js
CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 Adapt.js - Adaptive CSS 左：ファイル名、右：スクリーンサイズ [ad#ad-2] スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid Systemとの相性がよいのではないでしょうか。 また、対応ブラウザの表記は見あたりませんでしたが、IE6でも動作しました。 スクリプトでは、上記キャプチャのようにサイズごとに異なるスタイルシートを指定し、ユーザーの環境に合わせて最適なレイアウトで表示することができます。 下記は、同サイトをブラ
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Gradient Background Maker
IDEA * IDEA
奥行きをうまく使ったサイトデザイン集３０:phpspot開発日誌
[Webデザイン]iPhone スマートフォンサイトのデザインのまとめ | CSS Lecture