CSS小技✨ 背景画像を２行で透過させる🎶 background: url(画像) center/cover rgba(); background-blend-mode: lighten; #Codejump #Web制作 #デイトラ pic.twitter.com/iryLk06Gb7

CSS小技✨ 背景とtext-clipの位置を合わせanimation🎶 div { url(画像) p { url(画像) background-clip: text; color: transparent; -webkit-text-stroke: 4px #fff; clip-path: inset(100%); backdrop-filter: blur(10px); keyframes { clip-path: inset(0); #Codejump #デイトラ pic.twitter.com/SmXHznMGWw

CSS小技✨ ２枚の画像で朝焼けをimage🎶 .parent { url(画像1) .parent::after { url(画像2) opacity: 0; anime opacity: 0.4; .child { backdrop-filter: brightness(50%); anime backdrop-filter: brightness(200%); p { clip-path: inset(0 100% 0 0); #Codejump #デイトラ pic.twitter.com/vxNmfqrvPo

CSS小技✨ 要素にfilterを適用すると、全ての子要素（疑似要素を含む）に適用される。 ::beforeの疑似要素も要素の一部と見なされるため、 filterの影響を受ける💻 対策(右が対策済) 1️⃣疑似要素を親要素の外に出す 2️⃣backdrop-filterに変更する #Codejump #デイトラ pic.twitter.com/e9rbM9PV5N

CSS小技✨ maskがとれていく🎶 div { background: #000; animation: bgAnime 1s linear 3.8s forwards; p { color: #fff; height: 1em; animation: p1... p::after { height: 1.2em; background: #000; animation: p2...; #Codejump #Web制作 #デイトラ pic.twitter.com/yyzbO1KlSr

CSS小技✨ 狐の嫁入り🎶 div { background: url(画像1) center/cover; div::before { position: absolute; background: url(画像2) center/cover; inset: 0; opacity: 0.2; animation:  opacity 4s 2s ease-out forwards; keyframes { 100% { opacity: 0.7; #Codejump #デイトラ pic.twitter.com/7jrfoByCpg

CSS小技✨ clip-pathとbackdrop-filter🎶 div { background: url(画像) center/cover; .p-1 { backdrop-filter: blur(3px); div::before { background: url(画像) center/cover; clip-path: ellipse(37% 30% at 50% 55%); .p-2 { color: #fff; background: rgba( );... #Codejump #デイトラ pic.twitter.com/IUdiKgsI0E

CSS小技✨ 縦書き＆ふりがな🎶 body { writing-mode: vertical-rl; <p><ruby>地名<rt>ふりがな</rt></ruby></p> #Codejump #Web制作 #デイトラ pic.twitter.com/cCndgSkTmL

CSS小技✨ 切り取り🎶 div { background: url() no-repeat center/contain #000; background-blend-mode: luminosity; div::before { background: inherit; clip-path: circle(0% at 50% 30%); keyframes... clip-path: circle(16% at 50% 30%); scale: 3 1; #Codejump #デイトラ pic.twitter.com/4ttxLCElDT

CSS小技✨ Solid ColorとGradientの融合🎶 div { background: url() no-repeat center/cover; div::before { background-color: rgba(255,0,0,0.5); background-image: linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0), rgba(255,255,255,0.8)); #Codejump #デイトラ pic.twitter.com/vSqnI0vEaS

CSS小技✨ min-height: 100svh🎶 min-height: 100vh; を使用すると、 フッターがコンテンツの下に表示されなくなる 可能性あり💻 browser window全体：min-height: 100vh; contents領域のみ：min-height: 100svh; #Codejump #Web制作 #デイトラ pic.twitter.com/mlTByjlQG0

CSS小技✨ 文字にぼかしを入れる🎶 左 p { filter: blur(3px); 右 p { position: relative; p::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(3px); 左がメジャー、右は悪趣味💻 #Codejump #Web制作 #デイトラ pic.twitter.com/CeoRSmYPLq

inner、wrapper、content、container等は、どういった使い分けをするのか検証しているのですが、どうも決め手に欠けます。😵‍💫 innerクラス単体では、display:flex;は使っていないようですが、まあこれは当然か。 うーん、規則性ってないのかな？🤔 #今日の積み上げ #デイトラ #web制作 #Codejump pic.twitter.com/ubZyHVYZ3v

CSS小技✨ 背景をぼかす２つの方法🎶 1️⃣div { background: url()...; div::before { background: url()...; filter: blur(3px); 2️⃣div { background: url()...; p { height: 100%; backdrop-filter: blur(3px); 2️⃣が省力化 #Codejump %Web制作 #デイトラ pic.twitter.com/Agr6uP0ZMH

CSS小技✨ ２つの画像でanime🎶 .box { background: url(画像1)...; .box::before { content: "bình Minh"; position: absolute; background: url(画像2)...; mix-blend-mode: color-dodge; opacity: 0; transition: 0.5s;... #Codejump #Web制作 #デイトラ pic.twitter.com/YfWj1qL3jd

CSS小技✨ css変数をtransition🎶 1️⃣--color: #c00; background: var(--color); transition: --color 1s; &:hover { --color: #00f; } 2️⃣1️⃣に加えて 　@property --color { syntax: "<color>"; inherits: true; initial-value: transparent; } #Codejump #デイトラ pic.twitter.com/Ws536mv1XA

テキストの頭だけ出して折り返し方法をまなびました😁 #webデザイン初心者 #codejump pic.twitter.com/1TRBuWtO4M

CSS小技✨ グラデーションボーダー🎶 border-imageは疑似要素要らず 簡単に完成👍 border-image: linear-gradient border-style: solid でも角丸は出来ない🤔 ::after { background-image: linear-gradient height: border-radius: 高さの1/2以上 content: ""; display: block; #Codejump #デイトラ pic.twitter.com/9V5Tiw0Bnd

CSS小技✨ ２つの画像を重ねる🎶 1️⃣background: linear-gradient(-3deg, #000 0% 40%, #fff 60% 100%); 2️⃣background: #000; 3️⃣2️⃣に1️⃣を重ねてmix-blend-mode: difference; 二枚の画像の違いを可視化💻 #Codejump #Web制作 #デイトラ pic.twitter.com/XAQpbG84TD

レスポンシブ対応として学んだこと。 ①flex-direction:column; を使う ②flex-wrap:wrap; で改行してしまう ③grid-template-columns: で、 repeat(4,1fr); → repeat(2,1fr); なんてやってしまう。 他にもやり方ありますが、今はこんなところかな。😇 #今日の積み上げ #Codejump #web制作 #Figma pic.twitter.com/XbigsAleHD

CSS小技✨ z-indexとmix-blend-mode🎶 画像を重ねて重なった部分を透過... したように見せる 1️⃣■角画像 z-index: 1; 2️⃣〇画像 z-index2; mix-blend-mode: difference; #Codejump #Web制作 #デイトラ pic.twitter.com/6hY9f7UIiG

少し寄り道コーディング🤏 Codejumpの【初級編】簡単な練習サイトでコーディング！ ソースコードは見ずにイチからやってみたけど、ヘッダーからつまづいてなかなか手が進まなかった😅けど、弱点と学習ポイントたくさん見つけられた気がする◎ #Codejump #デイトラ #Web制作 pic.twitter.com/hL8TkzLcmr

CSS小技✨ position & slider🎶 display: flexやposition相対値 sliderをレスポンシブ💻 #Codejump #Web制作 #デイトラ pic.twitter.com/vcg4kjcT4X

CSS小技✨ linear-gradientにcolor-mixでカラーパレット🎶 background: linear-gradient(90deg, hotpink, color-mix(in lch, purple 20%, lime)); #Codejump #Web制作 #デイトラ pic.twitter.com/9Qe7Ugquco

CSS小技✨ border-image でグラデーションのボーダー🎶 ::before, ::afterでbackground-imageより簡単👍 <p>Gradation</p> p { border-image: linear-gradient( 90deg, #ea0032, #ef0061, #e4008f, #c835b9,#9956db ) 1 / 0 0 6px; border-style: solid; #Codejump #デイトラ pic.twitter.com/rfYykqrNhE

CSS小技✨ solid colorとgradientの融合🎶 テキストを読みやすくするためのテクニック💻 div { background: url(画像)...; div::after { background-color: rgba(0,0,0,0.4); background-image: linear-gradient( to top, rgba(),rgba() 60%,rgba() 100%); #Codejump #Web制作 #デイトラ pic.twitter.com/8UmbFLCAc8

カンプに「パス」という名の波形の画像があることを発見💡 根本的に画像のズレがなんなのか意味不明だったんだけど解決したっぽい。微調整がムズイけど後回しにします😝 #webデザイン初心者 #codejump pic.twitter.com/viZxPgF5aL

CSS小技✨ イタリアンレシピ🎶 font-family: "Carattere", cursive;💻 #Codejump #Web制作 #デイトラ pic.twitter.com/bWJxYTzxL7

ulとli を使って階段状に表示することができました🎉 微調整はあとまわし。とりあえず満足です😙 しかし最近Macのファンが回りっぱなしで気が散る。いろいろ試してはいるんだけど解決しない😥 #webデザイン初心者 #codejump pic.twitter.com/aKJ1YkwXu5

CSS小技✨ ベトナム語fontが豊富なgoogle fonts🎶 日本語fontとは一味違った雰囲気を 表現できそう‼ #Codejump #Web制作 #デイトラ pic.twitter.com/k2StJbVc1P

CSS小技✨ ポンゾ錯視🎶 遠近感を感じるように描かれた線路 線路に沿って等間隔に配置された横棒 奥にある横棒の方が、手前にある横棒よりも長く見える 遠近法：線路が遠くにいくほど狭まっていくことから、奥にある横棒の方が遠くにあると脳が認識し、大きく見える💻 #Codejump #デイトラ pic.twitter.com/ybE6k64xdQ

CSS小技✨ 変形させる要素の起点を決めるtransform-origin🎶 1️⃣center(中央) デフォルト値 2️⃣top(上) 3️⃣right(右) 4️⃣bottom(下) 5️⃣left(左) 1️⃣～5️⃣の組み合わせや%、pxなどの設定も可💻 #Codejump #Web制作 #デイトラ pic.twitter.com/D7NByfEGvl

CSS小技✨ border-radiusで円弧🎶 ::before { border-radius: 0 0 4000px 4000px / 0 0 300px 300px; ::after { border-radius: 4000px 4000px 0 0 / 300px 300px 0 0; #Codejump #Web制作 #デイトラ pic.twitter.com/Mk35YIryeq

CSS小技✨ 2つのgrid-layoutの親要素を 無くし、画像が移動🎶 .container { display: grid; grid-template-columns: repeat(4,200px); grid-template-rows: 200px 200px; .box { display: contents; @media (max-width:) { .item:nth-child(1) { grid-area: 1/1/2/3; #Codejump #デイトラ pic.twitter.com/dhpWEcDSne

CSS小技✨ 簡略化したいmenuﾎﾞﾀﾝ🎶 <div class="button"> <div></div>... </div> .button { padding: 10px; height&width: 40px; display: grid; place-items: center; .button div { height: 10px; width: 100%; .box.open div:first-child { rotate: 45deg; #Codejump #デイトラ pic.twitter.com/taTiHHW3kE

CSS小技✨ flex box の横並びと縦並び🎶 定番のjustify-contentとalign-itemsが 横並びと縦並びでは機能が反対になる🤔 それだけではないflex: 1も💻 #Codejump #Web制作 #デイトラ pic.twitter.com/3NTyhMMmpV

CSS小技✨ NAV Menuの幅を揃える３つの方法🎶 💻共通 親要素 display: flex; text-align: center; 1️⃣子 width: 100%; 2️⃣子 flex: 1; 3️⃣子 width: calc(100% / 3); #Codejump #Web制作 #デイトラ pic.twitter.com/ILYLBzo1NO

ページを読み込む際のローディングが上手くいったかな？ まだまだ理解が難しいところはあるが、とりあえずは進めます。これから仕事なので今日はここまで。 #webデザイン初心者 #codejump pic.twitter.com/0kO3OpkhBw

CSS小技✨ flex: n;🎶 <div class="container"> <div class="item1">flex:1</div> <div class="item2">flex: 2</div> <div class="item3">flex: 3</div> </div> それぞれの要素は親要素幅の flex: 1; 1/6を占める flex: 2; 2/6を占める flex: 3; 3/6を占める #Codejump #Web制作 #デイトラ pic.twitter.com/Ax7yde1XEI

CSS小技✨ 基本中の基本🎶 要素には4つの領域があり、外側から 「margin」「border」「padding」「contents」 それぞれの領域には役割があり、 CSSでこれらの領域を変更してデザイン💻 #Codejump #Web制作 #デイトラ pic.twitter.com/z8G6sj9Azb