【CSS】clip使ってみた & アニメーションサンプル作ってみた | バシャログ。
GWはこもります。さがさないでくださいhakoishiです。 さて、本日はCSSのclipプロパティで実験してみたまとめ。画像をトリミングするやつですね。 どこまでできるか、アニメーションバナーっぽいものも作ってみました。 使い方 切り抜きたい画像に対し、position:absolute;を指定した上、各辺までの距離を指定します。 marginなどとは右辺、下辺までの距離の取り方が違うので、注意したいところです。 また、IE7以下にも対応させる場合は、各値の区切りはカンマではなくスペースで。（各ブラウザもこの記述に対応しています。） アニメーションなし サンプル html <div class="sample-clip"> <a href="#"> <img src="img/img01.jpg" alt="" width="500" height="330"> <dl> <dt>タイト
CSSで卵形と星形に切り抜く
CSSグラデーションを使った画像切り抜きの続編。卵形と星形では六角形みたいな三角形で端をカットすれば切り抜ける形と違ってもうちょっと工夫が必要になる。その工夫というのはbackground-sizeプロパティーでのサイズの制限。 Demo: CSS Egg Clip radial-gradient()では楕円は描くことができるけど、それを歪めるようなことはできない(と思う)。ので、径の違う楕円を半分ずつ組み合わせて卵形を作ることになる。基本的な部分は六角形のものと同じ。 background-image: radial-gradient( ellipse farthest-corner at 50% 100%, transparent 0, transparent 70%, #fff 70%, #fff 100% ), radial-gradient( ellipse farthest-c
asahi.com（朝日新聞社）：５秒ＣＭに存在感 定型破り、ひと声で勝負 - 社会
日本コカ・コーラ「ジョージア」のＣＭから 放送時間わずか５秒のテレビＣＭが最近、相次いで登場している。１５秒や３０秒のテレビＣＭの「定型」を破って印象的だ。インターネットに押され、広告媒体としてテレビの影響力が低下する中での新たな試みが注目されている。 民放キー局のＣＭを分析しているＣＭ総合研究所（東京都港区）によると、昨年６月以降、３銘柄の５秒ＣＭが登場した。最初に放送されたのは、シャープの空気浄化技術「プラズマクラスター」のＣＭで、俳優の水川あさみさんらが「プラズマクラスターはシャープだけ」と歌う。シャープは、この技術を搭載したエアコンが前年同期比２〜３割の売り上げ増となったのに貢献したとみている。 昨夏放送されたキリンビバレッジのコーヒー飲料「ファイア」のＣＭや、この１月に放送された日本コカ・コーラのコーヒー飲料「ジョージア」のＣＭも、宣伝文句がひと声流れるだけだ。 ＣＭ総研
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
