transition-property－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 div.prefix_sample { background-color:blue; width:200px; height:50px; -moz-transition-property: background-color, width, height; -webkit-transition-property: background-color, width, height; -o-transition-property: background-color, width, height; -ms-transition-property: background-color, width, height; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-tr
CSS3のtransitionプロパティでアニメーションを試してみた
このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。 今回はその中でもtransitionを使ってアニメーションをみてみようと思います。 webkitとOpera、Firefox4で動作 2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します（IE未確認）。ただし、それぞれのブラウザでベンダープレフィックス（接頭語）がないと動作しません。 まずはデモを まずは簡単に、ブロックが大きくなるデモから。 ■CSS .demo div{ background-color:#0000ff; width:100px; height:100px; color:#ffffff; /*以下アニメーションの設定（○○は
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
Bos138
Selamat datang di Bos138, situs games online terkemuka yang siap memberikan Anda pengalaman bermain terbaik dan paling menguntungkan. Sebagai salah satu situs games online yang paling terpercaya, kami menawarkan berbagai macam permainan mulai dari taruhan olahraga, kasino, poker, hingga permainan slot yang seru dan mengasyikkan. Kami memahami bahwa kenyamanan dan keamanan adalah prioritas utama ba
CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
どや！？css3のドロップシャドウ（box-shadow）に関する情報を掻き集めた | デザインどや！？
CSS3を使えば画像を使わずにドロップシャドウを表現する事が出来ます。 今更ですが、情報を集めたので記事にします。 ドロップシャドウを表現する 今まで画像でドロップシャドウを表現していた部分を box-shadow を使用する事で簡単にドロップシャドウを表現出来てしまうプロパティです。 CSS3 はまだ仕様が確定しているわけではないので、最近のモダンブラウザは独自実装という形で実装しています。そのため、Firefox なら -moz- の、Safari や Google Chrome なら -webkit- のプレフィクスを用いて指定します。 <div class="demo"> ドロップシャドウを表現する </div> .demo{ -moz-box-shadow: 5px 5px 10px #aaaaaa; /* firefox */ -webkit-box-shadow: 5px 5
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
background-size－CSS3リファレンス
background-sizeプロパティは、背景画像のサイズを指定する際に使用します。 長さやパーセンテージで指定する場合、値を２つ記述すると、それぞれ記述した順に幅と高さを表します。 １つだけ指定した場合には、もう１つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される（初期値） contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 長さ 背景画像の幅・高さを指定する パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル（sample.css）に記述 p.sample1 { width:300px; height:80px; padding:15px; bo
CSS3 を活用したボタン等の作り方 - WebOS Goodies
先週の Icon Creator Widget に続いて、本日も Opera の開発者向けサイトからのネタをひとつ。公開されたのは先月末なのですが、 CSS3 の text-shadow, box-shadow, border-radius などを活用して美しいボタンやボックスを作成する方法の解説記事が掲載されていました。今後の Web 制作でとても役立つテクニックだと思うので、その内容を簡単にご紹介します。 なお、この記事は CSS3 を使用しているため、ブラウザによっては正しく表示されません。たぶん Firefox, Google Chrome, Opera の最新版であれば大丈夫かと思います（Safari は box-shadow に未対応）。 text-shadow, box-shadow, border-radius について 元記事ではすぐに本題に進んでいるのですが、ここでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blog.calmbooks
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration
http://blog.e-riverstyle.com/2010/09/css3css-4.html
Buy Shoes, Sneakers and Multi-Brand Accessories | Overcube
