CSS Images Level 4 cross-fade() example
CSS Images Level 4: cross-fade() example You need a WebKit Nightly in order to properly see this page! Displaying a single image. background-image: cross-fade( url("logo-box.png"), url("logo-bare.png"), 0%); Displaying halfway through the second image. background-image: cross-fade( url("logo-box.png"), url("logo-bare.png"), 50%);
Speed up CSS prototyping* »
Speed up CSS prototyping* This is a simple trick to overlay a grid or a mock-up over a page you’re styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text. These are the rules to include in the styles sheet you work on: body::before { content:""; position:fixed; background:url(https://css-101.org/wp-content/themes/pd
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
Centering In The Unknown | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable. Not too hard: Known Child If you know the height and wi
User action / Input Selector；フォーム関連要素の周辺に適用するセレクタ
※1：筆者が検索した限りではブラウザの実装例を見つけられなかった（表中では評価しない）。 ※2：:-ms-input-placeholderとして実装。 ※3：::-moz-placeholderとして実装。 ※4：::-webkit-input-placeholderとして実装。 ※5：一部属性値のみ対応。 ※6：妥当性判定にブラウザ間で差異あり。 ※7：HTML5のtype="number"属性値が実装されていない。 ※8：昔のCSS3-UI草案で定義されていたもの。 ユーザーアクション疑似クラス selector 4の9章にまとめて定義される疑似クラス群。 :hover、:active、:focus テスト： CSS2.1で導入された動的擬似クラス。マウスで操作することを前提にすると、入力欄にマウスポインタが重なったとき、入力欄でマウスボタンを押しているとき、入力欄に入力フォーカスを
iOS5なのにposition:fixed;が効かない時に確認すること | Culture27
なんだかんだでFirefoxメインで制作しているわけですが、とあるページでposition:fixed;が効いてないみたいだよ？と@e_luckさんに教えてもらいまして、、、でちょっと調べてみて気づいたことです。 HTML5 Rocks - Improving the Performance of your HTML5 Appの「The magic CSS bullet」で紹介されていた下記のコードは、指定するとGPUアクセラレーションが有効になるのでパフォーマンス向上の恩恵を受けることができるかもしれない、といったような事が言われています（アニメーションの描画がスムーズになる？）。 GPUアクセラレーションを有効にするスタイル
CSSでモーダル・ウィンドウ
pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！ デモのようにposition: fixed;とかしておくとよりら
text-rendering - CSS: Cascading Style Sheets | MDN
CSSBeginner's tutorialsYour first website: Styling the contentCSS styling basicsWhat is CSS?Getting started with CSSChallenge: Styling a biography pageBasic CSS selectorsAttribute selectorsPseudo-classes and pseudo-elementsCombinatorsThe box modelHandling conflictsCSS values and unitsSizing items in CSSBackgrounds and bordersOverflowing contentImages, media, and form elementsStyling tablesDebuggin
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
Space CaCSS - Animated CSS3 background patterns
How does it work? The basic technique is to use a CSS3 repeating-radial-gradient as a background and animate it by changing its background-size. That's all what's needed in the second example. Pretty hypnotic. If you want more variations you can use a second gradient with a different background-size. Or add a second animation for the background-position with a different timing. That makes it possi
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
prefixMyCSS
CSS3 Supported Properties Full support Partial support No support animation background-clip background-origin background-size border-radius box-shadow gradient (linear) gradient (radial) transform 2D transform 3D transition How it works It's easy, fast and free. You can now use powerful CSS3 techniques, and don't waste your time writing each properties. First, write your codefor your loved browser
CSSとSVG filterでガラスっぽい効果をつける
SVGのフィルタについては以前も少し書きましたが、今回はfeGaussianBlur要素を使って、ガラスのようなエフェクトを付けてみたいと思います。 デモページは以下ですが、たぶんFirefoxでしかちゃんと見れないと思います。 Glass effect with CSS & SVG filter デモファイルをダウンロード 背景にはrachel a. k.さんの「52. she’s gone where the goblins go」を使用しています。 この画像はCC BY-NC-SA 2.0でライセンスされています。 今回作ったSVGファイルにはこんな感じのが書かれています。 <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000
I ♥ BLUR - Once again, I got distracted... | simurai
I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur. color: tr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile HTML5
Leaverou | Latest Social Media Marketing Trends
CSS4セレクタ (Selectors Level 4) の新機能
css-eblog.com