ricopinxのブックマーク / 2015年9月30日

ricopinx id:ricopinx

2015年9月30日のブックマーク (9件)

CSS：オンマウス（hover）で画像をフェードする | design Edge
CSS HTML Web コーディング CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過（フェードイン）できますが、マウスアウトした時にフェードアウトする方法です。 HTMLのソースは以下の通りです。 HTML
ricopinx 2015/09/30
css3

アニメーション
リンク
CSS3 のみで display: none からフェードインさせる - Qiita
CSS3 のみで display: none; の状態からからフェードインさせる方法を調べてみました。たとえば特定のクラスがついたときにフェードインさせるには下記のようにすればできました。 display の animation はできないので、下記のように 1% のキーフレームを追加して表示かつ opacity: 0; としておくのがポイントです。 Gist 動作サンプル <!DOCTYPE html> <html> <head> <meta charst='utf-8'> <title>TEST</title> <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <style> .box { background: #000000; display: none; h
ricopinx 2015/09/30
css3

アニメーション
リンク
cssのanimationでフェードイン/アウト : (*x).b=z->a+y/c
CSSでアニメーションするにはtransitionもありますが今回は animationを使う方法ですこのページでは手抜きのためベンダープレフィックスは-webkitだけ書いてますが必要に応じて-mozなどをつけてください animationの使いかた /* キーフレームを作成 */ @-webkit-keyframes fadein { 0%{ opacity:0; } 75%{ opacity:0.5; } 100% { opacity:1; } } /* キーフレームをanimationプロパティで指定 */ div#in{ -webkit-animation: fadein 3s linear 0s 1; } key-framesは0%や100%などの%ごとにスタイルを指定します 0%が最初で100%最後のフレームです 0%から100%の間で途中経過を指定できます 50%ならち
ricopinx 2015/09/30
アニメーション

css3
リンク
CSSのopacityとtransition を使ってフェードイン・フェードアウトの効果を作ってみよう！ | 9ineBB
WEBサイトにアニメーションを設定すると、WEBサイトが少しリッチになります(過剰な演出はちょっとウザくなります)、ということで今回はopasityを使って、画像やテキストがスーーーっと消えたり現れたりするアニメーション効果を作ってみようということです。 transitionの書き方 CSSのtransf ormの書き方です各ブラウザに対応させるためにベンダープレフィックスとうのをそれぞれつけています、基本形は一番下の行のものです all ですべての変化をアニメーションの対象にします。0.3sで0.3秒かけて変化します、さらに変化の具合も追加出来ますベジュ曲線で指定することもできるし、最初から準備されたアニメーションを指定する事もできます。また省略可能です。上のコードでは省略しています省略している場合は初期値のeaseが使われます ease、ease-in、ease-out、linea
ricopinx 2015/09/30
アニメーション
リンク
REDLINE MAGAZINE | CSS3アニメーションが簡単に追加できる CSS3 Animate It 試してみた
メニューをスキップして本文へ旧ブログナビ (open/close)
ricopinx 2015/09/30
animate.css
リンク
[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る
単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。完成サンプル下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの
ricopinx 2015/09/30
css3

アニメーション
リンク
[CSS3,animate.css,sass]sassを使ってanimate.cssでhoverアニメーション（きっと完全版） | Maku_zin Ver2.1.1
2回続けてアニメーションネタですよ。こんに千葉。鹿児島からこんに千葉。むかしこんな挨拶でスタートするAction Script BegenersっていうFashのサイトやってたのを思い出しました。 animate.cssの基本今回もアニメーションネタなんですが、animeta.cssを使いたいと思います。 animate.cssの使い方はいろんなサイトに掲載がありますので簡単に。 animate.cssをダウンロード html<link rel="stylesheet" href="css/animate.css"> <div class="animated shake">ブルブル</div>これだけで「ブルブル」という文字はブルブルします。 classのanimatedはそのままにしてshakeをbounceやflashなどにするとはねちゃったりチカチカしたりします。これだけじゃツマ
ricopinx 2015/09/30
animate.css
リンク
クリックしても何も起こらないダミーのa要素 - Qiita
制作途中など、リンクを張る予定だけどURLは決まっていないという時に、ダミーのa要素を作っておきたいことがある。というわけで、クリックしても何も起こらないダミーのa要素を3パターン書いてみた。 HTML5のプレースホルダー・リンク HTML5ではJavaScriptなどによって動的にリンク先を設定するケースを考慮し、a要素にhref属性が必須とされていないので、以下のような書き方ができる。href属性がないa要素を「プレースホルダー・リンク」と言う。ただし、ブラウザの標準スタイルでは文字色も下線もマウスポインタもデフォルトのままになるので、必要に応じて別途スタイル指定をする必要がある。
ricopinx 2015/09/30
javascirpt:void(0);

リンク

ダミーリンク
リンク
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest techno logies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
ricopinx 2015/09/30
box-shadow

写真

css3
リンク
- 2015年10月1日
- 2015年9月30日
- 2015年9月29日