http://blog.sakurachiro.com/2013/04/table-padding/
【css】文字カラーに透明色を指定
CSSで文字色を透明にする文字の色を透明にして見えなくしたい場合は、colorを下のように指定します。 color: transparent;これで背景色が何色であっても文字が見えなくなります。ただDOM要素としては存在しているため、選択、コピーすることはできます。 ちなみに transparent は「透明な」という意味らしいです。 また、下のように透明度を指定することでも見えなくなります。 opacity: 0;opacityは0~1の間で値を指定し、0が完全に透明、１が完全に見えた状態となります。この場合、指定した要素内がすべて透明になります。 transparent, opacityについての詳細は下記を参照してください。
animation - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
モダンブラウザで blink - Qiita
CSS の text-decoration プロパティの設定値として、blink というものがかつて存在しました。 これは、かの有名な BLINK タグと同じく、「テキストを点滅させる」というとっても素敵な効果を実現するためのものでした。 いや、正確にいうと、現在の CSS でも blink は有効な設定値の一つとして残ってはいますが、非推奨となっていて、blink による点滅を実装したブラウザは今ではもう存在しません1。 blink が使えないことは大抵の人にとってはどうでもいいことだと思われますが、中には「点滅しない Web なんてクリープしていないコーヒーみたいなもんだ」という人もいるかも知れません。そういう人のために、CSS3 Animation を利用してかつての BLNK タグのような点滅を実現する方法を紹介します。 @keyframes blink { 75% { opaci
【ネタ】blinkタグをCSS3で再現する（文字を点滅）
asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。 トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー（bgcolor="#c0c0c0"）で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。 Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch（Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch） 画像出典：Asahi NewsPaper Index（Asahi.com） 懐かしいですね。灰色の背景と
blink「ブリンク・点滅」のCSS作成
htmlには<blink>タグがありますが、ブラウザ独自仕様のため一部のブラウザしか動作しません。このため、HTML5の規格では廃止されました。 ブラウザ(html)で、ブリンクを実現するためには「JavaScript」や「CSS(style)」を使用します。 当ページでは、IEやChromeでも動作するCSSを使用したサンプル生成を行っています。（古いブラウザなど一部では動作しません） JavaScriptでブリンクする場合は、以下を参照ください。 JavaScriptで文字列を整形
animation-timing-function－CSS3リファレンス
animation-timing-functionプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーションのタイミング・進行割合を指定する際に使用します。 animation-timing-functionでは、アニメーションが継続している際に、 そのアニメーションの進行速度の割合を変更して調整することで動きを滑らかにすることができます。 これは一般的にイージング機能と呼ばれるもので、 グラフィックソフトで曲線を描く際などに利用されるベジェ曲線と呼ばれる数学的な関数を使います。 animation-timing-functionプロパティでは、アニメーションの進行割合を3次ベジェ曲線で指定します。 3次ベジェ曲線は、以下の図のような4つのコントロールポイント（P0、P1、P2、P3）で定義されます。 P0がアニメーションの開始ポイント、P3がアニメーションの完了ポイ
CSSアニメーション 入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせる
How to make blinking/flashing text with CSS 3
Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears
ザ・ベストテンのようなパタパタ表現の作り方 - Qiita
/* アニメーション最後の100%の位置だと「0」が表示されるので 何ステップ目で止まって欲しいかを指定 */ .fix_num1{ background-position: 0 (- $koma_num * 6 * 1); } .fix_num4{ background-position: 0 (- $koma_num * 6 * 4); } .fix_num7{ background-position: 0 (- $koma_num * 6 * 7); } /* アニメーション書き換え infiniteを外す */ .stop_numbers{ animation: flip_num 1s 4 steps($steps_num); } .stop_percents{ animation: flip_percent 0.2s 20 steps($steps_percent); } /*
animation-direction－CSS3リファレンス
animation-directionプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションを交互に反転再生させるかどうかを指定する際に使用します。 値にalternateを指定すると、 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返します。 アニメーションが逆再生される最中には、 animation-timing-functionプロパティで指定されたタイミング・進行割合も逆方向になります。 例えば、animation-timing-functionプロパティの値にease-in（ゆっくり始まる）が指定されたアニメーションが逆再生される最中には、 ease-out（ゆっくり終わる）が指定されたようになります。 ■値 normal 普通方向の再生でアニメーションサイクルを繰り返す（初期値） alternate 奇数回では普
animation-duration－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 div.sample { animation-name: anime1; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes anime1 { 0% {width: 50px; height: 50px; background-color: aqua;} 100% {width: 200px; height: 50px; background-color: blue;} } HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div c
css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社
css3のanimationをwebサイトでちょこちょこ見かけるようになったので試してみました。 デモを作ってみましたので、ご覧下さい。 DEMO 横に動かしつつ、縦にもちょっと動いていてフワフワと動いているイメージです。 animationの設定方法 こちらでは説明を簡単にするため、DEMOの一番したのアニメーションの説明をします。 liにanimationを設定します。 position: absolute; animation: moveY 2s infinite alternate linear; -ms-animation: moveY 2s infinite alternate linear; -webkit-animation: moveY 2s infinite alternate linear; -moz-animation: moveY 2s infinite alte
【CSS3】 animation と keyframes でお手軽アニメーション 【簡単コピペ】
animationプロパティと@keyframes animationプロパティでkeyframes用の設定をして、keyframesで動きとか設定していくってイメージです。ここでは簡単なものを書いていきたいと思っています。ちなみに設定できるのは animationで設定できること * @keyframes（アニメーション用）用の名前設定 * アニメーション一回分の時間の長さ * アニメーションのタイミングや進行速度の指定 * ディレイタイミング（いつアニメーション開始するか） * アニメーションの繰り返し回数 * アニメーションを交互に反転再生させるかどうか という６つあります。それぞれ、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count
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 …… ボーダー画像の
CSS3のtransition-timing-functionの動きをサンプルで理解しよう
<div id="transition">マウスを乗せてみてください <div id="ease">ease</div> <div id="linear">linear</div> <div id="ease-in">ease-in</div> <div id="ease-out">ease-out</div> <div id="ease-in-out">ease-in-out</div> </div> transitionはまとめて指定しています。transition-propertyとtransition-delayは省略しています。省略した場合、transition-propertyは「all」、transition-delayは「0s」になります。 #transition{ width:510px; padding:10px 20px; background:#f1f6fc; bo
【CSS3】Transition（変化）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から変化するまでの時間などを指定できる、transition （トランジション）プロパティが追加されました。 ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです。 transitionプロパティについて transition（トランジション）は、直訳すると変化や移り変わりという意味です。 変化するまでの時間を設定するプロパティです。 transitionは、ショートハンドプロパティを含め5つのプロパティがあります。 ショートハンドプロパティのtransitionで一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます。 No プロパティ名 読み方 説明
transition - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS3】@keyframes と animation 関連のまとめ - Qiita
