Tag : CSS

READ MORE

HTMLを組む際に「float」を使って回り込み指定を加えた要素に対して、回り込み終了(解除)の指示を与える「clearfix」。記述方法はいろいろあったりするのですが、可能な限りCSSの記述を抑えた形で構成され、最新版clearfixと言われている「A new micro clearfix hack」が、この先使えそ…

READ MORE

ログインエリアなどで、たまに見かけるラベルをクリックするとスライドしてパネルエリアが出てくるUI。jQueryなどJavaScriptで構成されているものが多いのですが、そのUIをCSSのみで作っている「Pure CSS Slide-out Interface」がおもしろそうだったので参考程度に紹介。Pure CSS …

READ MORE

CSS3だけで作られた画像ギャラリーやLightboxなどのモーダルウィンドウの動作系についてはサンプルもさまざま見かけるようになってきましたが、そんな中でもちょっと変わった3D風エフェクト+Lightboxエフェクトで構成されている画像ギャラリー「CSS3 Image Gallery with a 3D Lightb…

READ MORE

CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、何かアクションを付けることに使用する「:hover」要素。本来この指定はマウスオーバーしている要素のみに効果を利かすものですがマウスオーバーした要素の兄弟要素に対しても「:hover」の効果を付けることを可能とするチュートリアル「Hover on…

READ MORE

CSS3では「transform」プロパティの「rotateX」「rotateY」といった値を使って画像やテキストなどコンテンツの角度を制御することで、要素を立体的に表現することも可能になります。前にもここで「CSS3「transform」で3Dっぽく画像を重ね合わせてみる実験。」と題して画像を3Dっぽく重ね合わす方法…

READ MORE

CSS3の記述を簡単に生成してくれるジェネレーターやツールがWeb上のサービスとして徐々に増えつつありますがやはりCSS3を学ぶ上ではプロパティの一つ一つをきちんと理解しておかないといけないことは必須。そんなCSS3で追加となっている各プロパティを、記述方法と合わせて簡単なサンプルなどと共に解説しているリファレンスサイ…

READ MORE

今までは画像無しでは実現できなかった見た目(デザイン)をCSS3のみで実現させる方法はいろいろ紹介されていますが、そんな中でも、紙の質感をもの凄いクオリティで表現し、角のめくれ具合やセロテープで貼ったような見た目までをCSS3のみで実装可能とする「Advanced (yet awesome) pure CSS3 box…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner