知らなきゃ損！CSSのmaskとSVGを駆使して画像を自在に切り抜く方法
CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せたい部分のみを表示するテクニックです。Webデベロッパーは、CSSのmaskプロパティとSVGのmask要素を使うことで、画像編集ソフトを使わずにブラウザー上でマスクをかけられます。 この記事では、ブラウザーのサポート問題も含め、CSSとSVGを実際に試してみましょう。 記事を執筆している時点では、ほとんどのサンプルコードはWebKit系ブラウザーでのみ動きます。ただし、SVGベースのマスクは、より
Free Gradients Collection by itmeo.com
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
table-cell はmarginが無効。それでも簡単に隙間を作る方法 | KSK-soft.com
先日、table-cellはmarginが無効。でも隙間を作る方法をUPしましたが、もっと、直感的で、より分かり易い方法を考えました。 DEMO 先日の方法はbackground-colorの代わりにbox-shadowで背景を見せるアイデアでしたが、これだと以下の点で使いにくい欠点がありました。 box-shadowによる背景色の見せ方が、直感的ではなく分かりにくい paddingでcontentをズラしているのも、直感的ではない table-cellにした各要素、およびその親要素のwidthが相対幅のケースでは使えない（固定幅ならOK） 透明のborderで隙間をあける という訳で、今回は透明のborderで隙間をあける方法です。これなら背景は通常通りのbackground-colorやbackground-imageが使えます。paddingもトリッキーな指定は不要です。 backg
word-break－スタイルシートリファレンス
word-breakプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、 表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、文の改行の仕方について指定する際に使用します。 単語の途中で改行するかどうかを指定するword-wrapプロパティとの使い分けについてですが、 word-wrapプロパティは、文の改行というより、 長い英単語を途中で改行させたくない場合に使用するもののようです。また、日本語の単語に対しては無効なようです。 word-breakプロパティは、CSS3で標準採用されるかもしれません。 ■値 normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改
パララックスをサクッと作れるskrollr
「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロードしましょう。skrollrはGitHubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 jQuery本体と「dist」フォルダに入っている「skrollr.min.js」を、利用するWebページのbodyの閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="skrollr.min.js"></sc
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
jQuery bgScroll | ライブラリ | KANTENNA.COM
HOME > ライブラリ > jQuery bgScroll jQuery bgScroll シンプルな背景アニメーション用のjQueryプラグイン。 使い方 jQuery本体とbgscroll.jsが必要となります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
z-indexを負の数にしたリンクを選択できない - [Opera/バグ集] ぺんたん info
http://www.css-lecture.com/log/css3/css3-gradient.html