[CSS3]border-radiusほぼ最終まとめ(IE対応) | Maku_zin Ver2.1.1
border-radiusって？手っ取り早く説明すると角を丸くするためのプロパティです。 書き方html<div class="b-radius-a"> 角丸ですー。 </div> .b-radius-a { border:1px solid #000; border-radius:10px; }もっと細かく基本、値を1つ指定すると4つの角を丸くしてくれますが、他にも以下のような指定方法があります。 ●半角スペースで区切って値を4つ：4つの角を個別で指定できます。 border-radius:左上 右上 右下 左下;●半角スペースで区切って値を3つ：左上 右上と左下 右下を個別に指定できます。 border-radius:左上 右上と左下 右下;●半角スペースで区切って値を2つ：左上と右下 右上と左下を個別に指定できます。 border-radius:左上と右下 右上と左下;水平、垂直を個
![[CSS3]border-radiusほぼ最終まとめ(IE対応) | Maku_zin Ver2.1.1](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2e1b90f4e81d4ab5fa95a28be5f40e77fb42b2b/height=288;version=1;width=512/https%3A%2F%2Fmakurazaki.org%2Fsystem%2Fwp-content%2Fuploads%2F2022%2F01%2Flogo2.png)
[CSS3] Transformを用いて3D立方体を表示する、アニメーションさせる - YoheiM .NET
こんにちは、@yoheiMuneです。 最近リリースされた、聖戦紀ブレイブナインというソーシャルカードゲームで、Webアプリで3Dでいい感じに動いているのを見て、自分も作ってみたいなーと思いました。 ブレイブナインのコードを読んでるとどうもCSS3のTransformを使っている模様。 今回はそれを使って、立方体（キューブ）を作ってみました。 CSS3のTransformとは CSS3のTransformは、対象HTML要素に対して、移動／回転／拡大縮小を行うことが出来るCSSプロパティです。 例えば以下のように使う事が出来ます。 <div class='target1'></div> <style> .target1 { transform: translateX:(100px); -webkit-transform: translateX:(100px); } </style> 上記例
![[CSS3] Transformを用いて3D立方体を表示する、アニメーションさせる - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/f45c0a4ad7d73bd250ec72028b3952e934596466/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F184.jpg)
[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ
CSS3のanimationプロパティ使うと、なんでも点滅させることができます！ （現在、Chrome3以降、Safari4以降でしかサポートされていません） とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。 @-webkit-keyframes pulse { from { opacity: 1.0;/*透明度100%*/ } to { opacity: 0.8;/*透明度80%*/ } } .blinking{ -webkit-animation-name: pulse;/* 実行する名前 */ -webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */ -webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */ -webkit-animation-tim
![[CSS3]なんでも点滅させる小ワザ ｜ しらさかブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Fshirasaka.tv%2Fimg%2Fogp.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS3] アニメーション(3):開始、終了状態のコントロール(animation-fill-mode) | Rayuela.kr/jp