[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法

CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。

スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。

サイトのキャプチャ

How to create a Sticky Hero section
by CodyHouse

続きを読む

今年一番の最安値!Adobe CC コンプリートプラン12か月版が31%オフで、20,000円以上もお得です

令和初となる、アドビセールがAmazonで開催しています!
30%オフ超えは年に1,2回しかないので、Adobe CCの期間が残り少ない人は、絶好のタイミングだと思います。

セール期間は、5/24(金) 23:59まで。
Amazonのセールにはプライム会員限定とかもありますが、今回のセールはプライム会員限定ではありません!

サイトのキャプチャ

参考: Adobe Creative Cloud

続きを読む

Remove.bgからWin, Mac, Linux対応のアプリがリリース!複数画像の切り抜きもドラッグ&ドロップでまとめてできる優れモノ

先日紹介した「Remove.bg」ついにPhotoshopに対応も便利でしたが、なんと今度は、Windows, macOS, Linux対応の無料アプリがリリースされました!

単体アプリなので、ブラウザもPhotoshopも不要。しかも、複数の画像をドラッグ&ドロップして、背景だけを画像から切り抜くこともできます。

サイトのキャプチャサイトのキャプチャ

写真: ぱくたそ

人物が2人でもできるかなと思いましたが、問題なくできました。食べかけの苺もキレイに残っています。

続きを読む

Adobe Premiere Proの使い方がこの本一冊でよく分かる!初心者でも動画編集のテクニックが身につく解説書

最近は企業も個人も、映像がさまざまなシーンで利用されるようになりました。動画コンテンツ、動画広告、そして動画でのプレゼンや説明ムービー、個人でもSNSに映像をアップロードしたり、YouTuberも個人クリエイターが活躍しています。
動画編集のスキルは、日に日にニーズが高まっています。

プロ・アマ問わず広く利用されている「Premiere Pro」の基本機能から、動画編集作業の流れ、そしてワンランク上のテクニックまで習得できる解説書を紹介します。

本の表紙

続きを読む

CSSでレイアウトする際、z-indexが効かない時の4つの理由と対応方法

CSSでレイアウトする際、z-indexが期待通りに機能しない時がありませんか?
z-indexは重なり順を定義するプロパティですが、単なる重なり順だけでなく、いくつか複雑なルールがあります。

z-indexがうまく効かない時の主な4つの理由とその対応方法について紹介します。

z-indexが効かない時の4つの理由と対応方法

4 reasons your z-index isn’t working (and how to fix it)

続きを読む

イラストや同人誌に使えるデザイン素材が盛りだくさん!20万円分の素材が、驚異の98%オフで3,200円です

クライアントのプロジェクトでも、販売するイラストや同人誌にでも安心して利用できる、さまざまなプロジェクトにぴったりなテクスチャ、パターン、ブラシ、フォントなどのデザイン素材計204,769円分が、98%オフの3,200円で購入できる期間限定の特大セールを紹介します。

販売期間は、5月28日12時までとなっています。
こういうのを待ってた!という人も多いと思います。

セットに含まれてるデザイン素材

The Creator’s Inspiring Artistic Collection

続きを読む

これ知ってた? base要素にtarget="_blank"を加えると、ページ内のすべてのリンクに適用できる

リンクを新しいタブで開くには、a要素に「target="_blank"」を加えます。
実はこの「target="_blank"」はbase要素にも使用でき、ページ内のすべてのリンクに「target="_blank"」を適用することができます。

サイトのキャプチャ

<base> element

続きを読む

商用利用無料!自分のデザインに合わせてカスタマイズができるSVGのアイコン素材 -Ikonate

デザインにぴったりなアイコンを探すのは、なかなか大変です。カラーの変更であれば簡単かもしれませんが、ストロークの太さ・角丸などは、普通の無料アイコンでは調整するのはできないでしょう。

アイコンのスタイルをカスタマイズして利用できるSVGアイコンを紹介します。

サイトのキャプチャ

Ikonate
Ikonate -GitHub

続きを読む

top of page

©2019 coliss