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

webかたつむり

ウェブデザインを勉強中

2016-10-30から1日間の記事一覧

HUE

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…

gradation のついての覚え書き

グレーのグラデーションを作るときは、グレーの単色を作るよりも黒と白のアルファを加減してミックスすると綺麗なのかもしれない。 rgba(0, 0, 0, 0.3)=#b3b3b3; #777777;=nutral gray(18%)=rgba(0, 0, 0, 0.53) 18%のグレーは、rgba(0, 0, 0, 0.53)の相…

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>…

blend mode / background-blend-mode

<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>