サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
www.puzzle-web.jp
ホバー時にバックグラウンドはズームさせ、バナー画像は透過させるエフェクトを作成しましたので、備忘録も兼ねて掲載させて頂きます。バナーはただブランドのロゴ画像にリンクを貼っているだけでは、クリックされる可能性が低いと思い、バックグラウンドにブランドの商品画像などを差し込んで、ひと手間かけたバナーリンクを制作しました。 HTMLは下記 <div class="contaner"> <div class="banner_1"> <div class="inner"> <a href="#"><img src="images/banner.png" alt=""></a> </div> </div> </div> CSSは下記 .banner_1 { position: relative; overflow: hidden; text-align: center; width: 350px; te
レスポンシブに強く様々なレイアウトが揃っているslick sliderは多くの方がご存知だと思います。この度、slick sliderのカルーセル・スライダーで矢印を素材に変更し両サイドの少し見えている部分を透過するという案件が出ましたので、備忘録をかねて掲載致します。 まずは、デモをご確認く頂き、必要があればslick.jsを配布元からファイルをダウンロードしてください。ファイルの設置などGimmick logさんのページで詳しく紹介されていますので、ご参考ください。 両サイドの画像を透過するCSS 両サイドの画像を透過する事でアクティブ画像に目が行くようになります。 .slick-slider .slick-track, .slick-slider .slick-list{ background: #fff; } .slick-initialized .slick-slide{ opa
このページを最初にブックマークしてみませんか?
『山口県山口市・広告・ホームページ制作|Puzzle(パズル)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く