【CSS3】Transform（変形）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。 transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。 ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。 jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。 transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。 解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。 検証する場合は、一読して全てのプロパティ
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
グラデーション背景用のCSSを自動生成してくれるサービス「CSS Gradient Background Maker」 : 二十歳街道まっしぐら
「CSS Gradient Background Maker」はグラデーションを表現するCSS3を自動生成してくれるサービスです。 IE10, Firefox, Opera, Webkit用のコードをそれぞれ生成してくれますよ。 グラデーションの種類を選択して、色を決めれば完了。 非常に簡単にグラデーション背景が作成できます。 以下に使ってみた様子を載せておきます。 まず「CSS Gradient Background Maker」へアクセスしましょう。 グラデーションの種類が3種類あるので、好きなものを選びましょう。 そして色を選択します。 プレビューはその場に表示されますよ。 最下部にCSSがはきだされているので、コピペで使いましょう！ 一昔前ならグラデーション用の画像を使っていましたが、 CSSで簡単にこういうのが作れちゃうのでオススメです。
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
The Shapes of CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circle
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
CSSでグラデーションを表現する - builder by ZDNet Japan
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
Latest topics > CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - outsider reflex
Latest topics > CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Ubuntu 9.10からUbuntu 10.04にアップグレードした Main タブバーの縦置き・横置きをタブの数に応じて自動で切り替えたい（A new option to switch the position of the tab bar by the number of tabs.） » CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - May 02, 2010 いろんな人がいろんな解説を既に書いてるみたいだけど、ツリー型タ
HTML5の可能性を伝えるデモ５つ「5 awesome HTML5 demos」
様々な機能や可能性を秘めたHTML5。各所で取り上げられ、様々なチュートリアルやデモが公開されてはじめて来ていますが、今回紹介するのはHTML5の可能性を伝えるデモを集めたエントリー「5 awesome HTML5 demos」です。 いままでHTMLでは出来なかった様々な機能が実現されています。今日はその一つ一つを簡単にご紹介したいと思います。 詳しくは以下 ■APIrocks HTML5 slideshow 位置情報を取得させたり、ドラッグでソースコードを表示させたり、様々なHTML５の機能をスライドショーにまとめたページ。色々な可能性を提示してくれます。 ■Jilion – SublimeVideo プラグインを必要としないHTML5で作る動画プレイヤー。一般的な動画プレイヤーにできることは備わっています。 ■Blowing up HTML5 video 動画を3Dオブジェクトにテク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
TypeSquare×ヘテムル
http://www.designwalker.com/2010/05/css3.html
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集