2016-10-30から1日間の記事一覧
https://www.behance.net/gallery/30067997/Hue-Free-Promo-Backdrops-and-Gradients What is it Hue is a huge pack of photorealistic gradients that you can use as content backdrops. Since creating Hue about half a year ago, I've used it for sev…
グレーのグラデーションを作るときは、グレーの単色を作るよりも黒と白のアルファを加減してミックスすると綺麗なのかもしれない。 rgba(0, 0, 0, 0.3)=#b3b3b3; #777777;=nutral gray(18%)=rgba(0, 0, 0, 0.53) １８％のグレーは、rgba(0, 0, 0, 0.53)の相…
vignette effect 周辺光量落ちをcssで再現する。 使うのは、radial-gradientとbackground-blend-mode 下の二枚の画像をブレンドする。 楕円形のグラデーションをこんな風に指定すると、、、 #ffffff 0%, #ffffff 50%, #000000 50% マスクになってしまいます。
放射状のグラデーションを作ってみます。 「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>…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>background-blend-mode test</title> <style> .container{ width: 80%; height: 560px; margin: 50px auto; background-color: red; background-image: url(../common/images/photo.jpg); background-blend-mode: multiply; } </style> </head> </html>
