ろびー【CSS小技✨】
@Robby_WebDesign
【課金しないコーダー👉技術を語る初学者の味方🎶】/Program学習2020年10月～ /Codejump(旧Codestep)で理解深める/ CSS & SCSS.JavaScript.jQuery.Figma / #CSS小技✨/#阪神タイガース🐯
قد يعجبك
CSS小技✨ `mix-blend-mode` ではなく `background-blend-mode` を使うと、 背景色と画像が“同じレイヤー内”でブレンド🎨 だから透過せず、背景色ともちゃんと同期できる💡 opacity＋animationで溶けるような表現も可能🫧 #CSS #Codejump
CSS小技✨ 深緑から紅葉🎶 mix-blend-mode: color を使うと、画像の質感は そのままに“色だけ”を差し替えできる💻 hoverで緑の葉がじわっと紅葉に🍁 easingは cubic-bezier(0.25,0,0.15,1)。 自然な「染まり方」になるので相性バツグン！ #CSS #CSS小技 #Codejump
CSS小技✨ display: -webkit-boxとdisplay: inlineは 同じ要素では共存できない （ブロック要素とインライン要素）🤔 そこで 親要素に display: -webkit-box、 子要素（span）にdisplay: inlineで下線アニメを 担当させる構成にすると、複数行でもキレイに 引けます。👍 #CSS #CSS小技 #Codejump
CSS小技✨ grid-template-columns 25% と 1fr の違い🎶 25%×4 は gap を計算に含まない ので 合計が100%＋gap → 横スク💻 1fr×4 は gap を含めた残り幅を等分 するから はみ出さない❄️ この差だけで挙動が変わります ✨ #CSS #CSS小技 #Codejump
CSS小技✨ block要素にbackground-imageで下線を引くと 最後の行だけにしか引かれません💡 でも display:inline にすると、行ごとに背景が分割され、hoverで下線アニメが可能🎶 ※2行目以降の字下げはできなくなるので注意⚠ #CSS #CSS小技 #Codejump
CSS小技✨ 強めのparallax 背景はゆっくり、手前の文字は速くscroll💻 perspective:2px と translateZ(-◯px) scale(正)を 段階的にずらすだけで、JSなしで奥行きを作れます。 #CSS #CSS小技 #Codejump
CSS小技✨ perspective-origin はアニメーション非対応 なのに “動いてるように見える🤔 でも...前・中・後景のPNGを3D重ねして、 perspective-origin をアニメさせるだけで カメラが動くような奥行き表現が簡単に作れる😎 ※後景以外は透過PNG❄️ #CSS #CSS小技 #Codejump
CSS小技✨ easingの裏技🎶 CSSには ease-in-out-back みたいな名前は存在しない😳 でも cubic-bezier() なら同じ動きが作れる！ 少し“戻ってから進む” back系の動き🤔 ライブラリでは当たり前の Back easing CSSでも再現できるのでぜひ遊んでみてください🎄 #CSS小技 #Codejump
CSS小技✨ 3Danimation基本🎶 1️⃣親が perspective をもつ = カメラを置く カメラ位置はperspective-origin 2️⃣子が preserve-3d をもつ = 孫が Z方向に 動いたとき3Dが潰れない 3️⃣孫が translateZ(○px) をもつ = 実際に奥行きを 持って動く #CSS #CSS小技 #Codejump
CSS小技✨ CSSで重ねた画像に段階的にanimationをかけてみた🎶 左はグラデ＋clip-path で段階的に表示。 背景は自由に色やグラデを重ねられるのがポイント💡 右は mask を使って下から透過でFadeIn。 mask は色は選べず、透明・不透明でしか 制御できない不思議仕様🌀 #CSS #Codejump
CSSアニメ ✨ clip-pathで背景を左右に割り、 奥の背景がふわっと登場する演出。 疑似要素で2枚の背景を操作して HTML構造は実質<div>1つだけ😎 #CSS #CSS小技 #Codejump
CSS小技✨ 朝からちょっと立体感🎯 perspective × 斜め回転 × clip-path 💡奥に潜り込む立体テキスト 🔧アニメの滑り出しも自然に mix-blend-modeで背景と馴染ませ 光ってる感も演出✨ #CSS #CSS小技 #Codejump
CSS小技✨ 親要素のaspect比に応じて 子要素が変化💡 幅のみのmedia queryでは拾えないCaseに強い ✅ 横長なら横並び ✅ 縦長なら縦並び ✅ 背景・画像・文字・Button色も連動 ✅ transitionでSmooth-Animation container-type + @container(max、min-aspect-ratio) #CSS #Codejump
CSS小技✨ white-space: nowrap と width: max-contentは hover で「改行を解く演出」が可能😈 fit-content は 親幅を上限にするため横に広がらず 改行解除アニメにならない🤣 nowrapは元幅からはみ出る max-contentは元幅を無視して横に伸びるので、 改行が解ける演出になる👀 #CSS #Codejump
CSS小技✨ 初学者が悩むheight:auto と width:auto🎶 🟢 height:auto → 行が増えると高さが伸びる 🔵 width:auto → ・ブロック要素：親要素に合わせて幅決定(親依存) ・インライン要素：内容に合わせて幅決定 🟠 width指定 → 幅を超えると改行される #CSS #Codejump
阪神タイガース優勝パレード2025🐯 撮影ベストスポットは幅の広い交差点✨ 観客は2023年を上回るか？ これ見るためにアルバイト有給取ってしまった( ´∀｀ ) #阪神タイガース優勝パレード youtube.com/watch?v=gqAAwD…
youtube.com
YouTube
あす阪神優勝パレード 大阪・御堂筋で楽しむための攻略法を徹底解説 午前9時から交通規制も実施
CSS小技✨ 画像の縦横比の基本！ 画像の幅だけ変更なら height:auto が初期値なので 比率は崩れない→なのでobject-fit cover必要ない🤔 → これ初心者～中級者で誤解している人多い🎶 高さも指定して縦横比を変えると画像が潰れる💻 → そんな時だけ object-fit: coverが必要！ #CSS #Codejump
CSS小技✨ 上下左右中央寄せは display: grid & place-items: centerが万能ですが… 1行Text限定ならline-height & text-alignでも 中央っぽく可能🎶 hoverで高さ変えると中央固定gridと違い 遅れてスッと動かすようなアニメも設定できる 違いが直感的に分かるデモ👇 #CSS #Codejump
CSS小技✨ keyframesのeasingは「次の動き」に 適用されるって知ってた？ 0%-100%はスムーズでも 0%-50%-100%の刻みだと、全部同じeasingだと 不自然に見える… 🤔 各ステップごとに異なるanimation-timing-functionを 入れると一気に面白い動きになるよ👇 #CSS #Codejump
CSS小技✨ aspect-ratio でレイアウト切替🎶 画面の縦横比で flex方向を変えられるので 幅ベースの media query では拾えないケースに強い💡 スマホ横/縦・タブレットなど、デバイス差に超便利！ #CSS #Codejump
United States الاتجاهات
- 1. #GivingTuesday 18.8K posts
- 2. #twitchrecap 3,421 posts
- 3. Costco 43.6K posts
- 4. #csm222 3,900 posts
- 5. Susan Dell 4,128 posts
- 6. #AppleMusicReplay 6,121 posts
- 7. Lucario 19.2K posts
- 8. Michael and Susan 2,777 posts
- 9. NextNRG Inc. 2,076 posts
- 10. Trump Accounts 10.4K posts
- 11. #NXXT_NEWS N/A
- 12. King Von 1,340 posts
- 13. Pentagon 73.9K posts
- 14. Good Tuesday 43.1K posts
- 15. Hoss Cartwright N/A
- 16. Isack 25.7K posts
- 17. Gallo 10K posts
- 18. Tiki 2,825 posts
- 19. Dart 45K posts
- 20. Taco Tuesday 14.7K posts
قد يعجبك
-
ふくまる＠Webデザイナー営業の案内人
@fukumaru_story -
マサタカ｜Web制作フリーランス
@imstkay1123fn -
ジェットたか
@takapon_p7 -
りょー｜WEBフリーランス
@Ryo_web_cording -
ハクト@WEBエンジニア
@hakuto00 -
カイト@Webコーダー
@kaito80809 -
もり | Webコーダー
@MoRi_Coding -
SAKU＠Webコーダー
@saku_mora -
yuka
@yukalqqqozlz -
ぞでぃお🐼|WordPressで生きていく
@keexodia -
あつし＠つくばのWeb屋さん
@aworks_okubo -
たくや@双極性障害（躁うつ、うつ病）だった人
@taq8yam -
Shin@プログラミングチュートリアル
@Shin_Engineer -
きたしょー@WEB制作フリーランス
@KitamuraShohei -
ちこ🌻Webデザイナー
@Chiko256
Something went wrong.
Something went wrong.