[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET
こんにちは、最近新しいゲーム作りに仕事が変わった@yoheiMuneです。 新しい案件で、「display:-webkit-box」という見慣れないスタイルを発見。聞いてみると横並びにしたりするのにすごく便利なようで。 その具体的な使い方を今回はブログに纏めました。 まず始めに display:boxは、横並びレイアウトを行うために大変便利な機能ですが、2013/01現在はまだ使用策定中です。 最新の情報は、以下よりご参照ください。 - http://dev.w3.org/csswg/css3-flexbox/ また良くある疑問で「便利だけど動くブラウザあるのー？」という疑問については、以下のようなサポート状況のようです。 引用元：http://caniuse.com/#feat=flexbox ベンダープレフィックス付きで、だいたいのブラウザで動きそうな感じです。 特にスマホ用のマークア
![[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa200920a849841c6a264659958eecc12570ae15/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F202.jpg)
何番目系の便利なCSSまとめ - Qiita
#最初 ##:first-child 最初の要素（親要素から見て、子要素すべての最初） デモ ##:first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ #最後 ##:last-child 最後の要素（親要素から見て、子要素すべての最後） デモ ##:last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ #1個だけ ##:only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ ##:only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ #X番目 ##:nth-child(X) X番目 デモ：５番目 ##:nth-of-type(X) ある要素のX番目 デモ：５番目 ##:nth-child(Xn) Xの倍数 デモ：2の倍数 ##:nth-of-ty
:nth-last-child() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
box-shadowのジェネレーターとプロパティについて | bad-company
要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張 以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。 この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
transition-timing-function－CSS3リファレンス
transition-timing-functionプロパティは、変化のタイミング・進行割合を指定する際に使用します。 変化が継続している際に、その変化速度の割合を変更して調整することで動きを滑らかにすることができます。 これは一般的にイージング機能と呼ばれるもので、 グラフィックソフトで曲線を描く際などに利用されるベジェ曲線と呼ばれる数学的な関数を使います。 transition-timing-functionプロパティでは、変化の進行割合を3次ベジェ曲線で指定します。 3次ベジェ曲線は、以下の図のような4つのコントロールポイント（P0、P1、P2、P3）で定義されます。 P0が変化の開始ポイント、P3が変化の完了ポイントで、 横軸が変化継続時間がどこまで経過したのか、縦軸が変化がどの程度実行されたのかを表します。 仮にP0→P3までが直線なら、変化は一定の割合で進行することになります。
CSS3 でふわふわナビゲーション - 一角獣は夜に啼く
『超次元ゲイム ネプテューヌmk2』 の公式サイト を見てたら、ナビゲーションリンクがふわふわしてておしゃれな感じだったので、似たような動きをするものを CSS3 で実装してみた。 (元は Flash ぽい。) ↑ こんなの デモ 実際のコード JSFiddle にあるので興味があればどうぞ。 ふわふわナビゲーション - jsFiddle 使ってるもの 以下のような CSS の機能を使ってみた。 CSS Animations : CSS Animations CSS アニメーション - Web developer guide | MDN CSS Transitions : CSS Transitions transition - CSS | MDN CSS Transforms Level 1 *1 : CSS Transforms transform - CSS | MDN メモ ふわふ
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
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3streamer.net
CSS Gradient Background Maker