CSSアニメーション、animation-play-state。
CSSアニメーション、作り方。 2020.04.17 webアニメーションを１から学ぼう♪ ⬆︎CSSアニメーションについてのまとめページはこちら。 こんにちは、「ふ」です。 これまでCSSアニメーションのプロパティについて紹介してきましたが、いよいよ最後の１つ。animation-play-stateについてお伝えします。 animation-play-stateはCSSアニメーションの再生/一時停止を指定するもので、動画playerのpauseボタンのような働きをします。 きっかけありきのプロパティ。 これまで紹介してきた他のプロパティとは違い、animation-play-stateは何らかのきっかけとのセット〜例えば、 ・ボタンを押す + 一時停止 ・スクロール + アニメーション再開 のように実装することで、はじめて効果を発揮するものです。 記事内では、サンプルをいくつか紹介して
【CSS】スマホで幅100％で要素がはみ出してしまう原因と対策 - Web.fla
考えられる原因と対策 いくつか考えられる原因として下記に記載してみました。 そもそも幅の指定をpx（ピクセル）にしてしまっている たまにやってしまいまいますが、要素の幅がピクセルでスマホの画面の幅を超えてたりCSSで間違えてピクセルで指定すると横にスクロールが発生したりします。 その場合の解決方法としては、スマホの場合は基本的にはCSSで幅を「100%」にする。これで横幅に収まると思います。 #wrapper{ max-width:100%; } 注意点として表示する端末の幅に合わせて適切なサイズで表示する為にヘッダーのメタタグに下記を記載してます。 余白（padding)や枠線(border)を設定している 割とここは忘れがちなんですが、CSSで幅を100%にしていても、marginやpaddingは幅に含まれません。あくまで幅の解釈は枠線（border）や余白（padding）を含まな
画面遷移 | 動くWebデザインアイディア帳
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください！
CSSでスマホの長押し禁止【画像保存禁止方法】
CSSだけでスマホの長押し画像保存を禁止する方法をご紹介します。 PCでは少しだけダウンロードされにくくなるだけなので、スマホだけ有効にすべきです。 （右クリックで画像をダウンロードすると、画像が保存されるのではなくページで利用されているソース全て（画像含む）がダウンロード出来てしまいます。） CSSだけで画像保存を禁止する この記述でiPhone、Androidの長押し画像保存を禁止することができます。 スマホで【DEMO】の画像を長押し保存してみてください。 （このページの画像はすべて長押し保存できなくしてあります。） 【CSS】 img { pointer-events: none; } 【DEMO】 jQueryだけでも画像保存を禁止する こちらも、CSSと同等のことができます。 全ての画像にjQueryでstyleを追加しています。 一部の画像だけに利用したい場合は、「$(“im
lazylinepainterをつかって簡単SVGアニメーション
BLOG SVGアニメーションといえばCSSのみでもいけますよね？ 例えばこんな感じで( -`д-´)ｷﾘｯ <style> #cloud { stroke: salmon; stroke-dasharray: 2000; stroke-dashoffset: 2000; stroke-width: 2; -webkit-animation: cloud_line 10s linear 0s infinite; animation: cloud_line 10s linear 0s infinite; } @keyframes cloud_line { 0% { stroke-dashoffset: 2000; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes cloud_line { 0% { stroke-dashoffset:
YUIのCSSライブラリとは
リセットCSSを使ってみる JavaScriptライブラリと聞くと、デザイナーやマークアップエンジニアの方には無縁のものと思われるかも知れません。しかし、Yahoo! UI Library（YUI）にはもう一つ「CSSライブラリ」というものがあります。今回は、CSSライブラリの使い方を紹介します。 まずは、CSSや装飾用のタグを一切使わず、次のようなシンプルなHTMLをWebブラウザで表示してみます。サンプルソースをこちらからダウンロードできますので、ご覧ください（813_1.zip/1.96 KB）。 sample1.htmlをWebブラウザでプレビューしてみると、見出しが非常に大きな文字で表示され、リストには黒丸が表示されています（図1-1）。これは、Webブラウザが文書を見るための最低限のスタイルを標準で持っているためで、デザインを施すためにはこのスタイルを一度無効にしてから、スタイ
CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。 - nanndemoiikara’s diary
マークアップエンジニアの です。 CSSだけでRadioボタンの作り方みたいな内容の記事をよくお見かけしますが殆どのマークアップが気持ち悪く感じるのは僕だけでしょうか？ 大体が <section> <input type="radio" name="hoge" value="テストRadio" id="radio_item" checked /> <label for="radio_item" class="radio">TestRadio</label> </section> 繰り返す様ですが コレって気持ち悪いし使いづらいと思うのは僕だけでしょうか？ 気持ち悪いと思う点 labelタグの使い方 チェックさせる為にid属性をわざわざ振っちゃう radioボタンに紐づくtextが存在しない場合にどうする気ですか？ Tab移動意識してますか？ で、気持ち悪い気持ち悪いと言っていても問題は解
ネガティブマージンを使うなら position: relative; を併記 – かめめねっと
レイアウト上、margin:-20px; などと表記したいときもあるんだけど、IE6は言うことを聞いてくれない。。。 ネガティブマージンとは「マイナス値のマージン」のことですが、IE6ではこのマイナス値を読み取ってくれないためにこのようなことが起こる。 そのため、margin:-20px; とするなら、 .要素{ margin-left:-20px; position:relative; } とするか、marginはdiv上でfloatプロパティを使うと値が2倍になってしまうバグもIE6にはあるので、 .要素{ position:relative; left:-20px; } とするのが良いかも知れない。 ただ、親要素の位置などによっては、計算が異なる場合があるので、必ずしも同じ位置になるとは限らないと思うので、その場に応じて使いやすい方を使おう。 私は position 好きなので、後者
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
四隅を切り落とした枠線（八角形フレーム） ::: コーダー日誌 ::: coder's log :::
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現