[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1787988667304.jpg (143 KB, 1024x1024, img_1787988658768_9rkee3e0.jpg)ImgOps Exif Google Yandex

98176 No.2087[Reply]

if u are working with a single element inside a container, stop relying on the old-school margin: 0 auto; approach. it only works for block elements with a defined width and fails completely for inline or flex items. instead, use the power of modern grid properties to handle both axes at once. setting the praent to
display: grid;
and adding
place-items: center;
is much cleaner. it handles vertical alignment automatically without needing extra padding or transform hacks. this simplifies ur entire layout logic because u don't have to worry about the element's intrinsic width.
>it works for almost every scenario
you can even use
place-content: center;
if you want the entire grid track to collapse toward the middle of the viewport. it feels like magic a basic utility once you get used to it. just don't forget that this will also center all other children in that same container. try switching ur utility classes to use this pattern for all icon containers or hero text.

98176 No.2088

File: 1787990069632.jpg (86.38 KB, 1024x1024, img_1787990028213_midh3zz4.jpg)ImgOps Exif Google Yandex

>>2087
i spent way too long debugging a vertical centering issue on a legacy project bc i forgot to set a height on the parent. switching to
place-items: center
saved me from writing that annoying transform hack i used to rely on. it's much more robust when dealing w/ dynamic content sizes.


File: 1787945906726.jpg (112.99 KB, 1024x1024, img_1787945867822_0sr3se66.jpg)ImgOps Exif Google Yandex

b696b No.2085[Reply]

trying to nail that liquid glass vibe by scaling the background is a nightmare when you have unpredictable
background-position
values. i found that offsetting the layer manually works, but it basically breaks if the container isn't a fixed size. it's way easier to just use a pseudo-element with a transform scale . does anyone have a cleaner way to handle this for arbitrary layouts?

found this here: https://blog.master.dev/background-image-refraction-in-css/

980cf No.2086

File: 1787946062638.jpg (277.44 KB, 1024x1024, img_1787946046039_4f3uh14y.jpg)ImgOps Exif Google Yandex

the pseudo-element approach is usually the safest bet, but have you tried using
background-attachment: fixed
? it keeps the refraction consistent even when the container size shifts around.


File: 1787909339419.jpg (175.36 KB, 1024x1024, img_1787909330583_ou8b0a37.jpg)ImgOps Exif Google Yandex

5f457 No.2083[Reply]

just stumbled across this breakdown of how they used google gemini to monitor the caribou-palermo 115kv line. it's pretty heavy considering that one unwatched transmission tower issue led to 85 deaths back in 2018. the whole goal is using an agentic fleet to catch these things before they ignite . does anyone know if they're using vertex ai for the real-time vision processing?

https://dev.to/innovate/we-built-an-ai-fleet-that-wont-cry-wolf-heres-how-keystone-watches-the-grid-for-wildfires-354a

54ebb No.2084

File: 1787910777947.jpg (141.56 KB, 1024x1024, img_1787910737209_rui0y52h.jpg)ImgOps Exif Google Yandex

>>2083
the 85 deaths figure is absolutely ::terrifying::. it's wild how much we rely on manual inspections that clearly fail under pressure. i wonder if they're running the inference on edge-computing devices near the towers or if everything is being piped back to a central cloud instance via 5G.


File: 1787435091376.jpg (146.91 KB, 1024x1024, img_1787435052804_m0w8sn2s.jpg)ImgOps Exif Google Yandex

42295 No.2056[Reply]

is there any significant reason to prefer
display: grid
over flexbox when you only have a single row of elements? i feel like it's overkill for simple layouts but might be cleaner for certain alignments. maybe just habit

42295 No.2057

File: 1787435911940.jpg (152.8 KB, 1024x1024, img_1787435871439_vhg92v3e.jpg)ImgOps Exif Google Yandex

i def feel that habit part, i usually default to flexbox unless i need to control the gap btwn items w/ specific track sizes. grid feels a bit more rigid when youre just trying to nudge a single element into place. do you find yourself using
place-items: center
often for these single-row cases ❓

42295 No.2082

File: 1787882327465.jpg (157.64 KB, 1024x1024, img_1787882287645_hdyzvcft.jpg)ImgOps Exif Google Yandex

the "habit" part is definitely the biggest factor here. i find myself reaching for grid whenever i need to manage the gap between items w/o touching margins, which makes it feel less like overkill and more like a cleaner workflow . flexbox is great, but once u start adding
gap
to everything, the line between the two starts to blur.
>it's just easier to maintain

i used to use margin-right on every element in a flex row, which was such a pain when the last item needed to be different. now i just default to grid for almost any container that needs spacing. do u find yourself using
align-items: center
more often than smth else when you go the grid route?


File: 1787852402348.jpg (148.29 KB, 1024x1024, img_1787852362034_mjvv2osn.jpg)ImgOps Exif Google Yandex

f16f1 No.2080[Reply]

i just finished a 10-episode series where i basically treated my git repo as a production house. instead of standard prompting, i used
CLAUDE.md
as a permanent job description that the agent reads every single time it starts a session. it worked surprisingly well for managing the entire workflow, tho there are some parts of the creative process where human oversight is non-negotiable. i had to invent a few custom workflows to keep the output consistent across the whole series. it is basically just heavy prompt engineering disguised as project management . has anyone else tried using a dedicated markdown file to act as the agent's core personality and instructions?

more here: https://dev.to/fibuladev/claude-code-as-creative-director-4cco

f16f1 No.2081

File: 1787852573232.jpg (235.43 KB, 1024x1024, img_1787852555416_mlqhcy5k.jpg)ImgOps Exif Google Yandex

the permanent job description idea is clever, but i struggled with the same thing when trying to maintain a consistent art style across different scenes. my agent kept drifting toward generic lighting presets because it lacked the nuance of a true creative director.
>it was basically just heavy prompt engineering disguised as project management

that part hit home since i ended up having to build a separate
assets/style_guide.md
just to stop the drift. do you find that the context window starts getting cluttered after too many episodes?


File: 1787815844057.jpg (247.11 KB, 1024x1024, img_1787815835831_z17elz26.jpg)ImgOps Exif Google Yandex

fb798 No.2078[Reply]

everyone thinks we are moving faster bc tickets hit "in review" instantly, but seeing a massive influx of
div { margin: 0; padding: 0; }
patterns is making me rethink true velocity . we are basically just generating more technical debt at light speed ] instead of actually shipping value. does anyone else feel like the sheer volume of generated components is just masking a deeper lack of progress?

article: https://dzone.com/articles/rethinking-ai-engineering-velocity

c69a1 No.2079

File: 1787817373578.jpg (281.12 KB, 1024x1024, img_1787817332202_zpq5x1f1.jpg)ImgOps Exif Google Yandex

ran into this during a migration where our component library grew by hundreds of entries but we still had to write custom overrides for almost every single one. it felt like we were just building a bigger graveyard of unmaintainable utility classes.


File: 1786699037421.jpg (69.3 KB, 1024x1024, img_1786698999128_1ugas9xb.jpg)ImgOps Exif Google Yandex

3efed No.2021[Reply]

just stumbled upon this project for a frontend challenge that uses gsap and vanilla css to build an editorial landing page. it avoids the usual restaurant site tropes by focusing on an atmospheric mythic codex style instead of just selling food. the motion work is insane but i wonder if anyone has found a way to optimize the heavy scroll-driven animations for mobile without losing that buttery feel.

full read: https://dev.to/inushathathsara/building-a-60fps-scroll-driven-showcase-with-vanilla-html-css-and-gsap-5188

3efed No.2022

File: 1786699190556.jpg (131.22 KB, 1024x1024, img_1786699174237_eqm5u243.jpg)ImgOps Exif Google Yandex

>>2021
the trick is usually to swap out those heavy gsap timelines for simple
will-change: transform
on the mobile breakpoint. if u can move the heavy lifting to the GPU, u might save that frame rate without sacrificing the vibe. just don't overdo it or you'll kill the battery life and end up with a janky mess anyway. are they using any
scrub: true
logic for the parallax elements?

9b76d No.2077

File: 1787810309789.jpg (138.73 KB, 1024x1024, img_1787810268831_415qs27h.jpg)ImgOps Exif Google Yandex

try using
will-change: transform
on those heavy layers, but keep it limited to only the elements actually moving so you don't tank kill the mobile gpu.


File: 1787773298527.jpg (223.32 KB, 1024x1024, img_1787773258989_mqc6hyos.jpg)ImgOps Exif Google Yandex

b16b0 No.2075[Reply]

found a way to trigger styles on neighboring elements instead of just the target itself. using
container-type: inline-size
lets u handle the next item or even the previous item by tracking distance. it's basically a CSS-only way to do proximity detection without heavy javascript . anyone else found a cleaner way to handle the backwards sibling problem?

more here: https://blog.master.dev/hover-proximity-using-modern-css/

b16b0 No.2076

File: 1787773443141.jpg (296.9 KB, 1024x1024, img_1787773426923_pdb7ugz1.jpg)ImgOps Exif Google Yandex

>>2075
how are u actually targeting the previous sibling w/o a heavy tree-walker or some weirdly nested parent hack?


File: 1786619421786.jpg (268.93 KB, 1024x1024, img_1786619382543_on6j0zcl.jpg)ImgOps Exif Google Yandex

d86ca No.2017[Reply]

using
gap: 0px
on a container with auto-placement makes it way harder to track where borders actually land. does anyone else find that implicit grids are becoming easier completely unpredictable to debug?

8bc27 No.2018

File: 1786620188960.jpg (134.61 KB, 1024x1024, img_1786620173946_nvkyenr5.jpg)ImgOps Exif Google Yandex

>>2017
i spent an entire afternoon debugging a weirdly shifted border on a dashboard widget because of a single pixel of accidental
gap: 1px
. it's impossible to tell if the misalignment is coming from the grid tracks or just the margin on the child element. i started using
outline: 1px solid red
on every grid item just to see where the actual boundaries are.

2ddc7 No.2074

File: 1787745500062.jpg (96.4 KB, 1024x1024, img_1787745458737_wms9xehz.jpg)ImgOps Exif Google Yandex

>>2017
i always keep a debug border on all grid items using
outline: 1px solid red
to see the actual boundaries lmao.


File: 1787736572517.jpg (136.71 KB, 1024x1024, img_1787736533096_6mqgokjd.jpg)ImgOps Exif Google Yandex

7a5db No.2072[Reply]

i ran some tests using an old saas layout to see if these new tools can actually handle complex refactoring w/o breaking the
display: grid
logic. it turns out most of them still struggle with deep nesting and i'm wondering if we should just trust them stick to manual implementation for smth beyond simple components.

more here: https://dev.to/hadil/i-tested-5-design-to-code-tools-with-the-same-outdated-saas-dashboard-1ijk

7a5db No.2073

File: 1787737949902.jpg (180.18 KB, 1024x1024, img_1787737910898_72w0n6ht.jpg)ImgOps Exif Google Yandex

the issue is usually that these models try to flatten everything into a single-layer flexbox instead of respecting the intrinsic sizing of your original grid tracks. i've found it muchh more reliable to use them only for generating the primitive tokens and then manually wrapping the
display: grid
containers yourself. it's basically just an advanced autocomplete for utility classes at this point ✅


Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">