webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

radial-gradient

radial-gradient + background-blend-mode =vignette effect

vignette effect 周辺光量落ちをcssで再現する。 使うのは、radial-gradientとbackground-blend-mode 下の二枚の画像をブレンドする。 楕円形のグラデーションをこんな風に指定すると、、、 #ffffff 0%, #ffffff 50%, #000000 50% マスクになってしまいます。

radial-gradient 放射状のグラデーション

放射状のグラデーションを作ってみます。 「end color」は要素の外に置けるみたいです。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>background-blend-mode test</title> <style> .left{ width :50%; height: 560px; float: left; background:radial-gradient(#ffffff 0%, red 100%); } .right{ width: 50%; height</meta></head></html>…