CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
![[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c725ef9aa750bffbd7f88a5e9c7301be6838f4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082706.png)
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」:phpspot開発日誌
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作しませんが、そもそもスマホ等向けのサイトであれば活用できそう アニメーションの種類が実に様々。 Chromeなどで見るとアニメーションの滑らかさも素晴らしい。 関連エントリ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 テキストを燃え上がら
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
CSS3のハードウェアアクセラレーターを使ったビジュアルエフェクト生成用jsライブラリ・Alice.js
気になったので備忘録的に触って見ました。 ハードウェアアクセラレーターを使った CSS3の新機能を実装出来るjsライブラリ・ Alice.jsです。と、分かったような事を 書きましたが、まだちょっと勉強不足で いろいろ調査中です。ので内容にはあまり 期待しないで下さい。 アクセラレーターに関しては以下の記事がわかり易いです。 iOSのアクセラレーターが使えるCSS3 このアクセラレーターを使って高度なビジュアルエフェクトの生成をちょいと簡略化しよう、という意図で作られたライブラリみたいです。 サンプルを見たほうが早いと思いますので以下でChromeかiOSにてご覧下さい。6つ用意しました。 Sample01・TossSample02・WobbleSample03・RotateSample04・SpringSample05・BounceSample06・carousel出来ればiPhoneな
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
CSS3で綺麗なドロップダウンメニューを作る方法 | エンタープライズ | マイコミジャーナル
Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery. CSS3 Dropdown Menu - WebDesignerWallにおいてCSS3の機能を活用したマルチレベルドロップダウンメニューのテクニックが紹介されている。デモが提供されており、CSS3に対応したブラウザでアクセスすると丸カド影付きのマルチレベルドロップダウンメニューが表示される。IE8やIE7などCSS3に対応していないブラウザでアクセスした場合は角カド影なしのマルチレベルドロップダウンメニューが表示される。どちらの場合もグラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Text Depth Of Field Effect | CSSDeck