#codejump search results
CSS小技✨ mix-blend-mode: difference;で hoverした部分だけ“色が反転”🌗 さらにborder-radiusをつけると、 反転エリアが丸く流れ込むように広がる💫 重なった部分だけ色が反転する、不思議なblend効果🎨 #CSS #Codejump
CSS小技✨ :empty は中身が空の要素を、 :has() は特定の子要素を持つ親を検知できる💡 空の.itemには「Coming Soon」表示、 hoverで画像が右からスライド🎬 他の要素は:has(:hover)でグレーアウト！ CSSだけで親子どちらも反応できるってスゴい😎 #CSS #Codejump
CSS小技✨ subgrid未対応でも、.card の中で justify-content: space-between; を使うと 高さが違っても子要素が上下そろって見える！ Grid内でも自然に整列してくれる✨ Grid × Flexの組み合わせが地味に最強💪 #CSS #Codejump
CSS小技✨ スマホだけ「段差付きの改行」にする方法👇 PCでは1行、スマホでは行ごとにずらして自然な改行！ brを消して、span＋padding-leftでコントロール🙆♀️ em単位なら文字サイズに比例して段差も自然に！ #Codejump #CSS #レスポンシブ
💡CSS小技✨ flex-shrink の動きを “逆に” 見せるデモ🎥 flex: 1 1 400px → grow:1（広がる） → shrink:1（縮む） → basis:400px（基準幅） hoverしたBarだけ flex-shrink:3 で縮み、 widthは変えてないのに 他のBarが相対的に広がって見える💫 ラベルは attr() で切り替え🎶 #CSS #Codejump
CSS小技✨ flex-wrapでgridっぽく最後の行だけ左寄せに💦 ::beforeと::afterで 見えないダミーを追加すると 偶数個のときは中央寄せっぽく整う🎯 (奇数では左寄り) .box::before, .box::after{ content:""; width:200px; } .box::before{order:1;} #CSS #Codejump
CSS小技✨ box-sizingをだましてtransitionさせる🎶 box-sizing は「幅の計算方法」を変える プロパティで、transitionが効きません❌ でも実は、2つのboxを重ねて opacityで切り替えると“滑らかに変化したように 見せる”ことができる💡 hoverで赤枠がborder-box風に変化👇 #Codejump #CSS
✨ CSS小技：画像オーバーレイカード🎶 マウスオーバーで名前スライド、本文フェード translate3d でGPU最適化し滑らか🎉 repeat(auto-fit,14rem) で横スクロール対応 word-break: break-word; で長い名前もOK🤔 #CSS小技 #Codejump
CSS小技✨ `mix-blend-mode` ではなく `background-blend-mode` を使うと、 背景色と画像が“同じレイヤー内”でブレンド🎨 だから透過せず、背景色ともちゃんと同期できる💡 opacity＋animationで溶けるような表現も可能🫧 #CSS #Codejump
CSS小技✨ ::beforeと::afterで改行位置を操作！ content:"\A";＋white-space: pre;で 改行したい部分を<span>で囲むと 🔹::before＝前で改行 🔹::after＝後で改行 #Codejump #CSS
CSS小技✨ 背景と前景の画像をシンクロさせて“奥行き”演出🪄 固定配置＋blurで背景を柔らかくぼかし、 同じ画像を前面に置くと立体感UP！ filter: blur() × position: fixed の組合せがポイント！ #Codejump #CSS
CSS小技✨ hoverで左右の画像が“入れ替わる”アニメ🎞️ translateX()＋cubic-bezier()で勢いをつけ、 さらにほんのわずかにdelayをずらして 動きに奥行きを💡 季節がスッと切り替わるような演出🍁❄️ #Codejump #CSS
CSS小技✨ 文章を行ごとにspanで分けると、 hover時に下線が1行ずつ順番に伸びる animationが作れます💡 「自動改行されたように見える文章」でも、 spanを手動で分ければ順番に線が追いかける 演出が可能です🎉 transition-delayだけで簡単にできるので見栄え◎ #Codejump #CSS
CSS小技✨ hoverで「変形＋色変化＋遅延アニメ」🎨 transform と cubic-bezier を組み合わせて 1枚のカードに動きを出す！ 📘使った主なプロパティ translate / scale / delay / cubic-bezier #Codejump #CSS
CSS小技✨ marginが左右どっちか混乱しがち😵💫 野球で考えるとスッキリ⚾️ 🏃♂️バッター視点＝右方向＝margin-right 💻CSS視点＝左方向＝margin-left hoverで走らせて覚えるのが早い！ #Codejump #CSS初心者 #Web制作
CSS小技✨ 文字が1文字ずつ浮かび上がるアニメ🎶 JSで文字を <span> に分割して translateY＋rotate() で登場アニメ🎨 背景は linear-gradient()＋background-clip: text 文字ごとに色と方向を変えてカラフルに✨ 最後は letter-spacing を広げて 余韻を残すフィニッシュ😌 #CSS #Codejump
CSS小技✨ 文字Sizeを clamp() でScale化📏 画面幅に合わせて自然にSizeが変化します。 それを「順番にFade In」させると、 Visual Type Scaleがより伝わりやすく👏 --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); みたいに少しずつ拡大していくのがPointです💡 #CSS #Codejump
CSS小技✨ :empty は中身が空の要素を、 :has() は特定の子要素を持つ親を検知できる💡 空の.itemには「Coming Soon」表示、 hoverで画像が右からスライド🎬 他の要素は:has(:hover)でグレーアウト！ CSSだけで親子どちらも反応できるってスゴい😎 #CSS #Codejump
11 / 6 (THU) ✅codejump「TOTALLY」3回目。PC版・レスポンシブ対応完了！ ✅codejump「Web～」2回目。PC版・レスポンシブ対応完了！ ✅codejump「創作」2回目。メインビジュアル途中まで #codejump #SHE捗
CSS小技✨ mix-blend-mode: difference;で hoverした部分だけ“色が反転”🌗 さらにborder-radiusをつけると、 反転エリアが丸く流れ込むように広がる💫 重なった部分だけ色が反転する、不思議なblend効果🎨 #CSS #Codejump
これの続き 🕰️2時間 モバイルファーストにするのに 55分 newsとcontactをお手本と違えて 記述リストを使わずに書くのに 50分 うまくいかないとこ質問して修正15分 作り始めてからはトータル5時間かかりました。 #codejump #webデザイン #コーディング
💡CSS小技✨ flex-shrink の動きを “逆に” 見せるデモ🎥 flex: 1 1 400px → grow:1（広がる） → shrink:1（縮む） → basis:400px（基準幅） hoverしたBarだけ flex-shrink:3 で縮み、 widthは変えてないのに 他のBarが相対的に広がって見える💫 ラベルは attr() で切り替え🎶 #CSS #Codejump
🍊CSS小技✨ オレンジが“パカッ”と割れるアニメーション🍊 閉じた果実が左右に開いて、 中央からジューシーな果肉が「ポンッ」と弾ける！ 最後に文字が現れる流れがSwitch風で気持ちいい🎮 cubic-bezier(0.22, 1.61, 0.36, 1) グラデ＋shadowでリアルな果実感も🍊✨ #CSS #Codejump
CSS小技✨ hoverで左右の画像が“入れ替わる”アニメ🎞️ translateX()＋cubic-bezier()で勢いをつけ、 さらにほんのわずかにdelayをずらして 動きに奥行きを💡 季節がスッと切り替わるような演出🍁❄️ #Codejump #CSS
CSS小技✨ CSSだけで“レース実況”してみた🎶 バーの高さと絵文字が同時に動く🏃💨🔥🥇 ::before + attr(data-label) で数字じゃなく 言葉や絵文字も自由自在🎵 JS不要でここまでできるのはちょっと感動💡 #CSS小技 #Codejump
Codejump 初級編 MyWork 🕰️3時間 パーツひとつずつhtmlとcssを交互に書いて自分で考え後に模写 他のことと並行してやってたらまとまった時間取れずに4日に分けてしてしまったけど これからレスポンシブにする まだ終わらないけどここまでの記録 #codejump #webデザイン #コーディング
CSS小技✨ 文章の一部を transitionで非表示にしたい？ opacity では見た目だけ、display はtransition NG… そこで transformを使えば滑らかに非表示に！ 1️⃣transform: scale(0) で消える 2️⃣transform: translateX() で追従 hoverで一部textをスムーズに入れ替える表現が可能👍 #CSS #Codejump
CSS小技✨ 文章を行ごとにspanで分けると、 hover時に下線が1行ずつ順番に伸びる animationが作れます💡 「自動改行されたように見える文章」でも、 spanを手動で分ければ順番に線が追いかける 演出が可能です🎉 transition-delayだけで簡単にできるので見栄え◎ #Codejump #CSS
CSS小技✨ 文字Sizeを clamp() でScale化📏 画面幅に合わせて自然にSizeが変化します。 それを「順番にFade In」させると、 Visual Type Scaleがより伝わりやすく👏 --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem); みたいに少しずつ拡大していくのがPointです💡 #CSS #Codejump
CSS小技✨ 文字幅よりちょっと長い「丸い下線」🎨 ::after の left と right にマイナス値を指定し、 文字より外まで下線を広げます💡 1️⃣文字はclip-pathで小刻みに表示 2️⃣線はtransform: scaleX() でスーッと滑らかに伸ばす 3️⃣border-radius: 9999pxで両端も丸く！ #Codejump #CSS
11月1日(7h) recipeサイト ジュエリーサイト一応コーディング完了。 codejump入門編完了したつもり笑 CSS(sass)で特に画像配置、 object-fit等は自分思っているように反映されてない点もあり、まだまだだなと感じてます！ 次は初級編から頑張ります👌 #codejump #デイトラ
Code JUMP has started the cbt today with sms chinese log in! The game have English Audio like double kill pentakill etc!! BIG POTENTIAL FOR GLOBAL LAUNCH!!!!!! #CodeJump
おはようございます⛅ 昨日は #Codejump 初級のプロフィールサイトを模写。 3度目の挑戦で完成できました💦 所要時間：1時間57分 さらっと出来そうな見た目でも時間かかりますな😅 でも復習してわからんとこはないけ、次進みます！ これから #朝活 開始🔥
#今日の積み上げ #Web制作 207日目 #codejump 上級FA EXHIBITION メインビジュアルアニメーション！ スクロール量に対応してwidthを変化させるのは、本で学んだスクロールバーを作るやつと似てるなと思って、本見ながらやったらできた😁 PCとSPとの動きの違いもSneakersの時の復習になってよかった✊
#今日の積み上げ #Web制作 205日目 #codejump 上級FA EXHIBITION ページ読み込み時に関数が実行されてるのがどうしようもなくて、結局ifでいろんな条件足して無理矢理実装…😖 こっちなおしたらあっちが変になるみたいなの繰り返して、結局紙にまで書いて流れを整理してやっとおかしな挙動を直せた😧
#今日の積み上げ #Web制作 203日目 #codejump 上級FA EXHIBITION 背景の表示・非表示アニメーション！ タイトルが画面に入った場合と消えた場合だけifで指定したらいいかと思いきや、画面が縦に短いときとか変な挙動になるので、それを防止するためにコード複雑化…大変だったけど何とかできたかな😖
Progateの連続学習日数100Daysを達成できました。 前回の31Daysから長かった～。 1つ目標にしていたことが達成できて、少し満足。 さて、この後はどうしようかな。Progateは12ヶ月プランなので、まだまだ学ぶことはできる。。。 でも、Codejumpもやりたいなぁ。 ＃progate #codejump
#今日の積み上げ #Web制作 208日目 #codejump 上級FA EXHIBITION レスポンシブも全部完了！ 最後スマホでもjsの動きおかしくないことを確認🔎 過去最高に難しかったし、苦戦したけど何とか持てる知識を総動員して、それでも分からないことは調べまくって作り上げられた！😁 明日はお手本みて学ぼう✊
2/12,2/11の記録 #irocode , #codejump ：2h+3h その他学習：1h+0.75h 一昨日の #よるごはん 主食：雑穀米 主菜：酒粕豆乳鍋 副菜：揚げ出し豆腐(残り物) 鍋で主菜と汁物を兼任してもらった。 豚肉と鮭、椎茸。冷凍にしていた残り物処分でボリュームを出してある。
Something went wrong.
Something went wrong.
United States Trends
- 1. $PUFF N/A
- 2. Good Friday 45.5K posts
- 3. $apdn $0.20 applied dna N/A
- 4. #FanCashDropPromotion N/A
- 5. $SENS $0.70 Senseonics CGM N/A
- 6. #FridayVibes 3,393 posts
- 7. $LMT $450.50 Lockheed F-35 N/A
- 8. Publix 1,224 posts
- 9. Happy Friyay N/A
- 10. #FridayFeeling 2,104 posts
- 11. #PitchYaGame N/A
- 12. RED Friday 2,848 posts
- 13. #fridaymorning 1,351 posts
- 14. Finally Friday 3,658 posts
- 15. Elise Stefanik 2,720 posts
- 16. yeonjun 299K posts
- 17. John Wayne 1,327 posts
- 18. Blockchain 197K posts
- 19. Kehlani 14K posts
- 20. Out The Window 11.1K posts