はじめに z-indexプロパティは要素の重なり順を指定することができます。z-indexプロパティを扱う際に、その原理やハマりどころを理解しておくと、より安全なCSSを書くことができるようになります。 z-indexを扱う上でのハマりどころ z-indexとpositionプロパティを使用したレイアウトで、要素の重なり順序を指定した際に、意図した通りに配置されない、ということが過去にあった人は少なくないと思います。 意図した重なり 次のサンプルは、オレンジの親要素を上に、グリーンの子要素はその下に配置したいと考え、その通りの結果が得られたものです。 <div class="block"> <div class="block__bg"></div> </div> .block { position: relative; width: 100px; height: 100px; backgr
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。
Opera 11.10 の最新 weekly で CSS3 Columns なるものが使えるようになったので早速試してみた． CSS3 Columns は簡単にいうと今まで float や position などを使って行っていた段組を簡単に行えるプロパティたち． 導入したのはこのブログのフッタ部分. HTML <div id="footer"> <div class="section"> </div> <!-- 中略 --> <div class="section"> </div> </div> CSS #footer { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } #footer div.section { break-inside: avoid; } 解説 column-count プロパティでカ
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 以前ご紹介した、cssとHTMLのみで 擬似的な3D表示を実現するCSSと 同じサイトで、また素晴らしいテクニック を公開してくれました。今回のcssは 素晴らしい動きをする折鶴の影を実装 します。 以下がそのテクニックです。IE8, Safari 4, Firefox 3.5, Chrome3, Opera10などでご覧下さい。 CSS Paper Bird 縦横のスクロールバーを動かすと影が動くようになっています。素晴らしいアイデアとトリックですね。。 ソースはこちらでご覧下さい。本当にjs使ってないみたいです。ブログでの説明はこちら。 コカコーラのも凄い。。Roman Cortesというサイトのブログ、今後も注目したいところです。 Roman Cortes
GitHub - ofk/xcssjs デモ（オリジナルはCSSでアイコンをデザイン - Hail2uのDesign icon with CSS） デモの結果はオリジナルと同じでよく分からないかもしれませんが、CSSが違います。xcss.jsを読み込むとベンダープリフィックスは記述不要です。 つまり、どういうことかというと .rotate10 { transform: rotate(-10deg); } とCSSで書いておき、xcss.jsを読み込むと、 .rotate10 { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } というCSSを動的に追加するライブラリです（実際はブラウ
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves 'Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
嫁さんが iPhone 3G の遅さに我慢できないと言い出したので、 iPhone4 に買い換えました。やはり 3G とは快適さがぜんぜん違いますね。しかし、もうここまできてしまったので、私自身は来年夏まで我慢して次のモデルに賭けたいと思います（笑） それでは、週末恒例の「今週の話題」です。今週見つけたさまざまなネタをまとめてご紹介します。過去に掲載したネタはこちらのページから参照できますので、併せてご利用ください。 http://nicolasgallagher.com/pure-css-gui-icons/ CSS3 の border-radius や CSS Transform を駆使して、画像を使わずに CSS だけで作られたアイコンが公開されています。こんな使い方があるとは…！ CSS で背景のみを半透明にする方法 http://acidmartin.wordpress.com/
HTMLのマーキー マーキーの機能はInternet Explorerがバージョン2.0の時代に独自拡張したもので、<marquee>というHTMLタグで文字のスクロールを設定する仕組みになっている。現在でも、<marquee>タグはバージョン8（ベータ版）を含むInternet Explorerや、Firefox、Safari、Operaといった主要なブラウザでサポートされている。 しかし、W3CのHTMLやXHTMLの標準規格には含まれておらず、実際に利用される機会はほとんどないのが現状だ。 たとえば、<marquee>〜</marquee>でマークアップした文字は次のように右から左にスクロールを繰り返す。
Nicole Sullivan さんの素晴らしいプレゼン。 5 Mistakes of Massive CSSView more presentations from Nicole Sullivan. 内容は30分ぐらい。ビデオのほうが分かりやすいのでおすすめ。だいたいスライドの35ページ目まではあんまりおもしろくないので飛ばしてもいいと思う。 スライド中に出てくる衝撃的な統計は、Sullivan さんのブログにもまとめられているのでご一見を。 Top 5 Mistakes of Massive CSS | Stubbornella 要旨 CSS の「ベストプラクティス」は間違っている。 プレゼンでは Facebook の例を挙げているけど、例えばサーバー側のロジックでは、ページヘッダー、右コラム、中央、左コラム、フッター、のようにビューを分けるところだけど、CSS をそのような区分でデザ
Opera 10.10の overflow 周りの実装で遊んでいたら、バグっぽい箇所を見つけた。それの詳細を調べていたら、なんとW3Cの勧告の矛盾も発見した。更に他にもいろいろ変なものを見つけた。 ただ、フォーラムなどで書くにはまだリサーチが足りない気がするので、まずはブログで問題提起することにした。よっておかしなところは率直に指摘して下されw まず、W3Cの勧告がコンテンツのオーバーフロー(overflow)と切り取り(clipping)をどのように定義しているか確認する。 尚、議論がややこしくなるのを避ける為、前提として、ここで議論するブロックレベル要素は全て非置換要素で位置指定が static であるとする。 the 'overflow' property specifies whether a box is clipped to its padding edge, and
CSS Transitionsと呼ばれる機能で、CSSでアニメーションとかを実現する物。Safariには前からあった。 <style> body { -moz-transition: 5s all linear 0s; -webkit-transition: 5s all linear 0s; transition: 5s all linear 0s; text-align: center; text-shadow: 1px 1px 1px white; font-size: 10em; } </style> <script> setInterval(function () { var color = Math.random().toString(16).substring(2,8); document.body.style.color = "#" + color; document.bo
The JUI 2009 Returns で Paul が CSS Transforms をプッシュしていたので、それにつられてデモを一つ作ってみました。 http://gyu.que.jp/giftbox/google/ 見てのとおり、普通の検索ボックスです。 普通にクエリ入力できます 普通に検索結果を見られます 箱の中にまた箱があることもあります。 …という感じで、また3Dネタですが、単なる画像ではない「生きている」HTML要素がグリグリ画面上を動き回れるというのは、何か新しいことができるんじゃないかという可能性を感じます。Canvas のほうは環境マッピングとかやって見た目は派手でしたが、いずれ O3D やら 3D Canvas やらが普及するまでの「つなぎ」です（だから、ライブラリ化したりする気がおきなかったんですが） しかし、IFRAME を変形させながらネストしてもしっかりレン
SafariやGoogle Chromeで、style要素をdisabled=trueにしても、そのstyle要素のスタイルシートを無効にできない。 document.getElementsByTagName('style').item(0).disabled = true; 一方link要素で読み込んだ外部スタイルシートは、そのlink要素をdisabled=trueにすることで無効にできた。 解決策が分かるまで、はてなダイアリーで好きなテーマ(デザイン)を適用するブックマークレットはWebkit対応はおあずけ。使えないこともないけれど、ダイアリーによってはぐちゃぐちゃになる。 document.styleSheetsからなら無効化できた。 document.styleSheets.item(2).disabled = true; でもこれだと文書順でしかスタイルシートを特定できない。
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
