[B! CSS3] deokisikunのブックマーク

deokisikun id:deokisikun

CSS3に関するdeokisikunのブックマーク (4)

[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
deokisikun 2014/04/14
CSS3

animation
リンク
スクロールバーをデザインする::-webkit-scrollbarに関しての覚え書き
Google Chrome、Safari、Lunascape Webkitなど、Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。これはその名の通り、スクロールバーをデザインするときに使います。基本的な説明はSafariのブログに書かれていますので、そちらを参考にしました。また、この記事で説明に使っているキャプチャ画像は、Safariのデモページのものです。 Surfin’ Safari - Blog Archive » Styling Scrollbars スクロールバーのパーツを構成する擬似要素これらを指定するときにはWebkit用のベンダープレフィクス-webkit-を忘れないようにしましょう。 ::-webkit-scrollbarwidthで縦スクロールバーの幅、heightで横スクロールバーの高さを指定します。パーセン
deokisikun 2013/09/13
CSS3

WebKit
リンク
Webkit独自拡張でスクロールバーのデザインを変更する | DevelopersIO
ChromeのスクロールバーをCSSで変更できることを知ったので試してみました。ちなみにこのブログのスクロールバーもChromeで見ると独自のデザインになっています。 Webkitの独自拡張なので、すべてのブラウザには適用されませんが、プログレッシブ・エンハンスメントを前提にサイトを構築するのであれば、利用するのもアリだと思います。このサンプルはChromeで確認してください。 Chromeで確認できない方へ使いやすさは置いておくとして、デザインに合わせて変更できるのは統一感がだせて良いですね。サンプルソース HTML <div id="scrollbar01" class="scrollbarSample"> <p class="inner">Sample 01</p> </div> <div id="scrollbar02" class="scrollbarSample"> <
deokisikun 2013/09/13
CSS3

Chrome
リンク
CSS3で作るあんなものやこんなものまとめ
さまざまな可能性を秘めたCSS3の登場から、いろんなエントリーが出てきましたので、一部をまとめてご紹介。ちなみにこの画像はこちらのもので、CSS3だけで画像を使わずにキュウべえを書いたそうです。 CSS3でどんなことができちゃうの系 CSS3のみでいろいろなオブジェクトの作り方を掲載されている。 CSSについて知っておきたいことまとめ。仕事で役立つ事もばっちり羅網。このまとめっぷりはすごいです。 CSS3の完全一夜漬けマニュアル。とりあえずこの記事のところにサンプルがありますので触ってみてください。すごく気持ちいい体験が待っていることでしょう。 CSS3のアニメーション効果を利用してちょっとダイナミックな404ページを表現しています。すっごいかっちょいい。サンプルデモはこちら。 CSS3だけで3Dを表現。とりあえずこれがCSS3だというものを見せてくれる。ぱない。chromeでも
deokisikun 2012/12/27
css3にも興味をもちはじめました

css3

css
リンク
1