まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
Styling Underlines On The Web | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post. There are a bunch of different ways to style underlines. Maybe you rem
Transition Effect with CSS Masks | Codrops
Keep in mind that Firefox has only partial support (it only supports inline SVG mask elements) so we’ll have a fallback for now. Hopefully, we can welcome support in all modern browsers very soon. Note that we’re adding Modernizr to check for support. So let’s get started! Creating the Mask Image In this tutorial we’ll be going through the first example (demo 1). For the mask transition effect to
Textured Gradients in Pure CSS
We’re going to create a background like this in pure CSS: Of course, the simple version would be to simply create a CSS gradient (and there are tools that make creating them easy): But it just doesn’t look that great, simply because we can only create linear or radial gradients. We want more randomness, something that looks less geometric and predictable. A common method is to choose a real-life p
Squigglevision - CSS-Tricks
Funny word, right? It’s a visual effect that makes an element kinda wiggle squiggle jiggle in place giving it a sort of uneasy, but extremely unique feel. Squigglevision a (real!) term for animation where the lines appear to squirm around, even when the object/scene is at rest. It’s part of the iconic look of shows like Dr. Katz, remember that? Quite a unique look! It’s even patented. But the pate
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
svgの印刷結果をクロスブラウザ化する
svgはxml記述で自由にグラフィックを描くことが出来る上，今日ほとんどのwebブラウザで表示・印刷することが可能であるなど，使い勝手が良いのが魅力です． そこで，レポート用紙などの用紙テンプレートをsvgで作ることを考えてみました．一般のテンプレートファイルはオフィスアプリケーションで作られていたりpdfで配布されているため，専用のツールを利用する必要があります．これをsvgで作っておけば環境を選ばずに出力可能となるためより利便性が高まるはずです． しかし実際に試してみるとwebブラウザ毎に出力結果が異なる等，中々思い通りには行かないようです．そこで，今回はsvgをwebブラウザで印刷する際の挙動についてまとめて見ました． svgを印刷用途で用いる svgは一般にディスプレイ上にグラフィックを描画するものとして考えられていますが，かつてのsvg1.2ではsvg printとして印刷用途と
asamuzaK.jp : IEのインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法
この記事はSVG Advent Calendar 2014 - Adventarの11日目の参加記事です。 実は、この記事のきっかけとなったのも、SVG Advent Calendarに投稿されていた@_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」という記事でした。 記事を読んだとき、直感的に「IEの問題というよりもSVGやCSSの記述方法に問題がありそう」という印象を持ち、簡単にテストしてみてツイッターでつぶやいたら、ご本人からリプライがあっていろいろやりとりをしていました。 この記事は、その一連のやりとりをまとめなおしたものです。 ただ、自分の思い込みなどから見当違いなツイートがアレやコレやとあったりもしたので、この記事は、その一連のやりとりにおける自分の発言に対する訂正の意味合いも兼ねていますw インラインSVGでIEがFirefoxやChromeと表示が異なる
色覚多様性を再現するSVGフィルター
多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。 Repository: Color Blindness Emulation filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version
Motion Blur Effect with SVG | Codrops
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter. Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements. Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural. Motion blur is the apparent streakin
Glitch Effect On Text / Images / SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafide CSS trick if t
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element Published on 08 Jul, 2014 | Takes approximately 13 min to read CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go
The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS
The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS Vector graphic formats such as SVG are great for high-density displays since their lines are clean at any zoom level. However, not all browser support SVG and there is not an obvious way to provide a fallback (using png, jpg or gif instead) for those browsers not supporting vector graphics. These days I
Protip: All browsers that support SVG background... - German for black
You’re about to read articles on the subject of building for the web by Ben Schwarz. Say you want SVG with PNG fallback for IE8? Do this: Extra credit: Heres a mixin for SASS to make it even gnarlyer. Update: Awesome people (@xavier_ho, @kylebarrow) from the internet have verified that the browser will only make a single HTTP request when using this technique. Update: Argh. Android 2.x browser wil
Scaling of SVG backgrounds - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
レスポンシブなsvgを作ったら背景画像を追加してみよう
svgを単なる画像ファイルだと考えていたら大間違いなんです．そこで今回はsvgに背景画像を追加して，画像の大きさを変えても固定位置に画像が表示されるというサンプルを紹介します． ※2014/3/22 補足を追加 通常svgグラフィックはサイズ固定な場合が多いのですが，下の作業を行うだけでレスポンシブなsvg（サイズ可変なsvg）に変化します． ルートとなるsvg要素のwidth，height属性を削除する viewBox属性，preserveAspectRatio属性を追加する ただこれだと，画像全体が拡大・縮小されてしまうためグラフィックの一部を固定位置・サイズとしたいケースに対応できません． ところで，svgではcssを使ったスタイル指定が出来ます．であれば，cssのbackground-imageプロパティを利用できないかと考えます．svgグラフィックはルートとなるsvg要素の設定（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
SVG Country Flags | flag-icon-css
WordPress › Error
CodePen - CSS and SVG Masks
