menu

WEB制作に便利なツールやコード

2021年9月1日 ウェブサイト制作

ずらしや影を作る時

.text{text-shadow:0px 0px 0 #fff}

.box{box-shadow:30px 30px 0 #fff}

.picture{filter:drop-shadow(10px 10px 10px #fff}

背景と画像をなじませるコード

.Box{mix-blend-mode:multiply}※一例

.Box{mix-blend-mode:overlay}白色を優先度低くする

.Box{mix-blend-mode:soft-light}背景となじませる

.Box{mix-blend-mode:exclusion}反転させる

.Box{mix-blend-mode:screen}文字を透過(黒を透過?)

clip-pathメーカー

https://bennettfeely.com/clippy/

画像の形状を自由自在に変化させる事ができるCSSコード

かわいいテキスト

.text{color:rgba(0 0 0 / 0);letter-spacing: .1em;-webkit-text-stroke: 3px #fff;text-shadow:4px 4px 0 #fff;}

WEB制作ツール

jp.eagle.cool

wordmark.it

CSS Triangle Generator

HTML5 入れ子チートシート

画像のアスペクト比を維持したまま拡大縮小させる

object-fit:cover を使うと画像のアスペクト比を維持した状態で拡大縮小ができる

img{display:block;width:100%;height:300px;object-fit:cover;}

ぼかし(Firefox未対応)

h3{background-color:rgba(255 255 255 / .2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(100px);}

gapを使って要素間のみの余白設定

gapは余白の間のみだけに設定されるコード

タイトルを追従させるコード

  1. position: sticky;
  2. top: 0;
  3. padding: 30px 0;
  4. background-color: #fff;