サイト制作メモ

スライドショーの画像を切り抜いたように表示する

投稿日:2017年8月24日 更新日:

よくあるスライドショーで
上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと
フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。

次回制作時に忘れないようにメモ。

サンプルページ

1.まずは全てを囲むdivを作成
2.中の要素は2つ(上下切り抜く場合は3つ)
 切り抜いたpng画像とスライドショー
3.それぞれにスタイルシートを適応

スタイルシート。
全体の指定はこれ。

上に置く画像のスタイルシートはこちら
下に置きたい場合、top:0;をbottom:0;に変更

これで1つのdivの中に
スライドショー・画像の順番に重なっているので
切り抜いた間からスライドショーが見えます。

あ、スライドショーの.jsや.cssはあらかじめ設定しておいてください。

- サイト制作メモ
-,

関連記事

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、 CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かって …

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか? 私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてし …

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml 一般的な入れ …

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。 例えば、このサイトのレイアウト。 クロームで見るとこんな感じ まぁまぁ均等に並んでいるよ …

翻訳する