[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
CSS Dock Menu
May 08, 2007 15,301 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get: Sliding doors Since we want our buttons to be über-flexible, we'll have to make the background image expand with the si
１つのファイルにJavaScriptとCSSをまとめて記述する方法:phpspot開発日誌
My experiments with .Net : Combine CSS with JS and make it into a single download! １つのファイルにJavaScriptとCSSをまとめて記述する方法。 まず、test.jscss というファイルを作って、次のように内容を記述します。 <!-- /* function t(){alert('test');} <!-- */ <!-- body { background-color: Aqua; } そして、次のようにJavaScriptとCSSを呼び出す際に先ほど作成したtest.jscssを指定することができます。 <html> <link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript"
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
ちょっと使えるかもしれないCSS(1) - 見出しを飾る | オトコのキモチ２
こちらのブログには認証がかかっています。 ユーザー名 パスワード Powered by Seesaa
hxxk.jp - CSS の記述ルール記事のまとめ
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
Most Inspired | Home
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE
WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1：WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2：Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3：Minitabs http://www.aplus.co.yu/adxmenu/exam
ページ作成のテクニックをまとめた「20 pro tips」が公開されています - PHPプロ！ニュース
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
移転準備中/画像をウインドウの中央に表示する - 王様の箱庭::blog
CSS 2.1のエッセンス -- 脱初心者をめざす人のためのホームページ作成講座
*{ margin : 0 } はもう古い!? | Emotional Web
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
CSS Tips：メモランダム