[B! transform] IndigoHawkのブックマーク

IndigoHawk id:IndigoHawk

transformに関するIndigoHawkのブックマーク (2)

Ettrics. A full-stack creative agency.
We collaborate with early stage founders and industry leaders to design and develop scala ble web experiences, systems, campaigns and integrations.
IndigoHawk 2016/01/28
CSS

transform

JavaScript
リンク
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。画像を斜めクリップにする方法画像を斜めクリップするイメージは、こんな感じです。要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。要素を斜めにするCSSは、transf ormプロパティを利用します。 transf ormプロパティには、いくつかの関数が用意されており、主に﹁skewY()﹂を利用し、場合によっては﹁rotate()﹂も利用しました。 CSSの記述例 .foo { -webkit-transf orm: skewY(10
IndigoHawk 2015/04/29
レスポンシブで斜めにマスクとか鬼畜だと思ってたけど、意外となんとかなるもんなんだな。三角関数？ちょっと存じ上げませんが…。

webデザイン

css

cssテクニック

transform
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx