ろびー【CSS小技✨】
@Robby_WebDesign
【課金しないコーダー👉技術を語る初学者の味方🎶】/Program学習2020年10月～ /Codejump(旧Codestep)で理解深める/ CSS & SCSS.JavaScript.jQuery.Figma / #CSS小技✨/#阪神タイガース🐯
You might like
「backdrop-filter」と「filter」... 名前は似てるけど効果は正反対😳 backdrop-filter → 背景をボカす filter → 要素をボカす 一度ハマると抜け出せないフィルタの沼…笑 #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
CSS小技✨ hoverにanimationを書くと 「inだけ動いてoutは一瞬で戻る」仕様🎶 戻りの動きを作りたい時は keyframes＋transitionの合わせ技が最強🤔 inはanimationで複雑に、outはtransitionで自然に戻す👍 #CSS #Codejump
CSS小技✨ 文字に mix-blend-mode: difference を使って 背景と差分演出💡 色を合成するだけなので、文字の背後の背景が 反映されて透けて見えるようになる🎶 hoverでslideすることで、文字が一瞬で 反転するような効果に🎨 背景によって文字色が変わるので、差分演出が面白い！ #CSS #Codejump
United States Trends
- 1. Good Sunday 69.4K posts
- 2. #sundayvibes 5,114 posts
- 3. Ole Miss 41.9K posts
- 4. #MUFC 19.1K posts
- 5. Zirkzee 23.2K posts
- 6. Wirtz 8,125 posts
- 7. Gakpo 8,513 posts
- 8. #CRYMUN 8,911 posts
- 9. Amorim 42.9K posts
- 10. Crystal Palace 36.4K posts
- 11. #EMAnniversaryxWilliamEst 311K posts
- 12. Duke 34.9K posts
- 13. Stockton 32K posts
- 14. Mason Mount 9,177 posts
- 15. WILLIAMEST AT EMQUARTIER 309K posts
- 16. Licha 4,602 posts
- 17. Vidal 3,542 posts
- 18. #WHULIV 6,132 posts
- 19. Lane Kiffin 52.4K posts
- 20. Advent 31.3K posts
You might like
-
ふくまる＠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.