Interpolating Numeric CSS Variables | CSS-Tricks
We can make variables in CSS pretty easily: :root { --scale: 1; } And we can declare them on any element: .thing { transform: scale(var(--scale)); } Even better for an example like this is applying the variable on a user interaction, say :hover: :root { --scale: 1; } .thing { height: 100px; transform: scale(var(--scale)); width: 100px; } .thing:hover { --scale: 3; } But if we wanted to use that va
CSSでホバー位置によって要素を傾けるチルトエフェクトを実装する方法 - NxWorld
チルトエフェクトと呼ばれる、イメージにホバーするとマウス（カーソル）の位置によってイメージが傾く動きをCSSのみで実装したものです。 普段こういった動きを実装する場合はJavaScriptを使っていますが、ふとCSSだけでできないかなと思い試してみたもので、全体的にもう少しシンプルにできそう感あったりHTMLがごちゃごちゃしてしまうのが気になるものの、CSSでもそれっぽい動きになっているかなとは思います。 チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。 HTMLは実際に表示させ傾けたい要素は.box-contentsになり、その上にある.hover-pointはそれぞれどこがホバーされているかの判別に使う要素になります。 <div class="box"> <div class="hover-point"></
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
clip と transform との組み合わせ - 職業プログラマの休日出勤
この記事は SVG Advent Calendar 2014 の１日目の記事です。 SVG とは？ SVG Advent Calendar の初日ということで、簡単に SVG そのものの紹介をしておきましょう。 WikiPediaの記事 → http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics SVG 1.1 Second Edition の厳密な定義 → http://www.w3.org/TR/SVG/（英語） 手書きする人向けの日本語での解説 → http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_01.htm なお、この記事には SVG画像 を直接記述しています。ブラウザによっては正しく表示されないことがあるかもしれません。特に古いやつとか。予めご了承下さいませ。 実演に使う画像 こ
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
CSS的・ウェブ標準的
Vertical align anything with just 3 lines of CSSと横に水平線のあるテキストというCSSテクニックを扱った記事を最近読んだ。どちらも有益なテクニックだが、前者はCSS的で後者はウェブ標準的という印象を持った。 最初に軽く前者のテクニックについて書いておく。後者は日本語の記事なので読めばわかる。 .element { position: relative; top: 50%; transform: translateY(-50%); } Vertical align~はこのようにtransformプロパティーでtranslate()を利用して、縦方向のセンタリングを実現するテクニック。topプロパティーが親要素の高さが基準になるのに対して、transformプロパティーのtranslate()では要素の高さが基準になることを上手く利用している。
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
ある案件とかある案件とかある案件とか（笑）でCSS Transformsを実装してみました。ついでに、このサイトを更新したときにもCSS 3D Transformsを実装しています。そこで得られた5つのTipsを備忘録を兼ねて書いてみようと思います。そこで得られた5つのTipsを備忘録を兼ねて書いてみようと思います。 transform:rotate() などでa要素やlabel要素を傾けると、リンクがクリックしにくくなります。傾けた要素の子要素にa要素やlabel要素があっても同じです。 クリックしても反応しない部分が出てきます。 対処方法は、親要素にa要素やlabel要素を配置し、その子要素のみを傾けるか、要素がマウスオーバーしたときに要素の傾きを解消することです。 要素がマウスオーバーしたときに要素の傾きを解消することで、インタラクティブな演出もできます。 モーダルウインドウなど、絶
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html