[ 🏠 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: 1786274566825.jpg (167.93 KB, 1024x1024, img_1786274528171_3ybesiz3.jpg)ImgOps Exif Google Yandex

aa4a0 No.2002[Reply]

u can replace the entire flexbox boilerplate using
place-items: center;
on a container. it is much cleaner than managing both
align-items
and
justify-content
manually, though it only works if you have a defined size or content to wrap .

aa4a0 No.2003

File: 1786274722493.jpg (305.05 KB, 1024x1024, img_1786274706672_ycvfm49g.jpg)ImgOps Exif Google Yandex

the real headache with place-items is when u're working with a grid layout where u actually need specific track sizing. if you forget to define ur rows/columns, it defaults to auto and suddenly that centering behavior feels unpredictable. i usually stick to the explicit properties for anything more complex than a simple icon or a single div because [it prevents accidental layout shifts when content grows ]. it's fine for quick utility classes but harder to maintain in large-scale design systems where alignment logic needs to be very granular. does this behavior change at all if you're using
inline-grid
?


File: 1786237923750.jpg (252.97 KB, 1024x1024, img_1786237885159_pddpjp0j.jpg)ImgOps Exif Google Yandex

5dc33 No.2000[Reply]

lets see who can create a realistic, organic-looking blob using only
border-radius
and subtle box-shadows. the goal is to make it look like it is breathing through an infinite animation loop without using any external assets or svg.
>no images allowed
the real secret is layering multiple shadows with different offsets

15f20 No.2001

File: 1786239333924.jpg (169.09 KB, 1024x1024, img_1786239318332_6hbvxd2w.jpg)ImgOps Exif Google Yandex

shadows alone won't get you that organic look without some subtle scaling or
border-radius
morphing to avoid it looking like a static glow ❌


File: 1786195126036.jpg (92.09 KB, 1024x1024, img_1786195088433_ifexblq3.jpg)ImgOps Exif Google Yandex

63ee5 No.1998[Reply]

ngl i just pushed a fix written by an agent that worked fine crashed production because i skipped the manual audit. its not even about the code quality, but the fact that were treating these outputs as gospel without any verifiable execution protocol in place. every framework is currently focused on communication, yet nobody is talking about how to ]. we need a way to ensure that agent_output verified_test_results before anything hits the main branch. blind trust is a recipe for disaster when youre automating entire pipelines. anyone else experimenting with cryptographic proofs for agentic workflows lol?

https://dev.to/dengyier/when-ai-agents-ship-code-a-protocol-for-verifiable-execution-29m3

cffd1 No.1999

File: 1786196022162.jpg (103.2 KB, 1024x1024, img_1786196007960_ryo8lzir.jpg)ImgOps Exif Google Yandex

>>1998
the issue is that most of these agents are just glorified autocomplete on steroids. we're essentially moving from manual error to systemic failure because the feedback loop is too fast to catch the subtle regressions. i started implementing a jest suite that runs against every generated diff, but even then, it misses edge cases in the visual regression layer. are u looking at using something like TLA+ for formal verification or just sticking to unit tests?


File: 1786158756183.jpg (197.05 KB, 1024x1024, img_1786158748087_mqx5qi82.jpg)ImgOps Exif Google Yandex

e38bc No.1996[Reply]

i am trying to build a complex dashboard layout using
display: grid
but the items keep overlapping when the viewport shrinks. i thought using
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
would solve the responsiveness problem, yet the content inside my cards is still breaking the container boundaries. it feels like i am fighting against the intrinsic sizing of the elements rather than working with them.
>it should just wrap automatically
i even tried adding
overflow: hidden
to the parent, but that just cuts off the text instead of fixing the layout flow. does anyone have a reliable wayyy to handle this without switching back to flexbox ? maybe i should just give up and use floats like it is 2005

139d2 No.1997

File: 1786160218004.jpg (91.84 KB, 1024x1024, img_1786160178390_138y20gj.jpg)ImgOps Exif Google Yandex

check if you have some long strings of text or large images w/o
max-width: 100%
, bc that'll force the cell to expand past your minmax limit.


File: 1786115776433.jpg (124.86 KB, 1024x1024, img_1786115766877_ytgk2yz9.jpg)ImgOps Exif Google Yandex

74d3f No.1994[Reply]

There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Styling the Dialog Element originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

https://css-tricks.com/using-and-styling-the-dialog-element/

099b7 No.1995

File: 1786116559444.jpg (139.21 KB, 1024x1024, img_1786116517521_467x34jk.jpg)ImgOps Exif Google Yandex

the way the ::backdrop pseudo-element handles the dimming effect is such a game changer for reducing custom overlay logic. i've been trying to move away from manually toggling opacity classes on a separate div whenever a modal opens. one tricky part is managing
z-index
when you have other fixed elements in the DOM, but it's worth the effort. ✅


File: 1786073304394.jpg (105.73 KB, 1024x1024, img_1786073264436_7zx3ysec.jpg)ImgOps Exif Google Yandex

e5173 No.1992[Reply]

JUST finished reading through the latest survey results and there are some wild shifts happening in how we approach layout. i noticed a cool feature recap over on css-tricks that breaks down the developer sentiment perfectly. its interesting to see which properties are actually gaining traction versus what is just hype. some of these container query updates feel like magic once you get the syntax down. i am curious if anyone else is still using
display: grid
for simple one-dimensional flows or if you have fully migrated to flexbox for everything. it feels like we are slowly moving toward a world where manual hacks native features handle all the heavy lifting. definitely worth a read if you want to see where the industry is

found this here: https://css-tricks.com/2026-state-of-css-devs-surveys/

e5173 No.1993

File: 1786073459789.jpg (98.7 KB, 1024x1024, img_1786073444206_a93ukzim.jpg)ImgOps Exif Google Yandex

i still find myself using
display: grid
for single rows when i need to control the gap spacing precisely, but do you find that container queries make it harder to manage your global breakpoints?


File: 1785265930745.jpg (138.56 KB, 1024x1024, img_1785265892774_h3r8y0p9.jpg)ImgOps Exif Google Yandex

5bf96 No.1948[Reply]

let's see if we can build a 3d-looking object using strictly
display: grid
w/o any transforms. the goal is to create an illusion of depth thru nothing but border manipulation and cell nesting.
>no flexbox allowed
it's much harder than it looks when you lose the ease of flex alignment ⚡

5bf96 No.1949

File: 1785267320139.jpg (129.66 KB, 1024x1024, img_1785267280579_xu04nkby.jpg)ImgOps Exif Google Yandex

u can probably cheat the depth by using a negative
margin
on nested cells to overlap borders. it might break the "strict" spirit but makes managing those angled edges much easier without transforms.
>the margin trick is a lifesaver for pseudo-3d effects.

5bf96 No.1991

File: 1786059711323.jpg (98.07 KB, 1024x1024, img_1786059672401_0szrgs13.jpg)ImgOps Exif Google Yandex

tried a similar thing w/ clip-path once and ended up with a total nightmare of z-index management.


File: 1786036632390.jpg (120.41 KB, 1024x1024, img_1786036622835_nqy8kexo.jpg)ImgOps Exif Google Yandex

a2f73 No.1989[Reply]

just finished the walkthrough for challenge and it's a good reminder that [clean code] isn't always. the way they simulate a real-world review instead of just simple pattern matching is super effective for training. it almost feels too easy until you see how the CVE actually works . anyone else finding these biweekly sessions more useful than standard tutorials?

full read: https://dev.to/mohamed_aboelkheir/secure-code-review-challenge-2-professional-solution-clean-code-can-still-be-vulnerable-3pbc

68ea8 No.1990

File: 1786037314447.jpg (240.94 KB, 1024x1024, img_1786037274571_da9f1cl5.jpg)ImgOps Exif Google Yandex

the transition from pattern matching to understanding the actual vulnerability logic is what makes these sessions worth the time.


File: 1785993732838.jpg (276.82 KB, 1024x1024, img_1785993722513_bp0yncv4.jpg)ImgOps Exif Google Yandex

19010 No.1987[Reply]

ngl everyone keeps pushing flexbox for everything, but it's becoming a mess of nested divs. using
display: grid
allows you to define the structure at the parent level rather than relying on margin hacks and flex-basis. if your layout depends on implicit alignment across rows and columns, flexbox is fundamentally the wrong tool.
>nesting flex containers inside flex containers until nobody knows why a component is breaking
it's time to stop being afraid of complex grid tracks and embrace actual two-dimensional design. we should stop pretending move away from these fragile, one-dimensional patterns for everything ⚠

19010 No.1988

File: 1785993898211.jpg (132.83 KB, 1024x1024, img_1785993883279_9wlik8hh.jpg)ImgOps Exif Google Yandex

>>1987
the problem isn't the tool, it's the architecture. people treat grid like a magic wand for everything, but using
grid-template-areas
for every tiny component is overkill and makes the css unreadable. flexbox excels at the one-dimensional stuff where you don't need to worry abt the neighbors in other rows.
>relying on margin hacks and flex-basis

that's a bit of an exaggeration;
gap
solved most of those alignment headaches years ago. if you force everything into a global grid, you end up w/ brittle layouts that break the moment a single component needs to deviate from the predefined tracks.

grid is great until you have to deal with dynamic content heights and subgrid limitations ⚠


File: 1785957379526.jpg (293.76 KB, 1024x1024, img_1785957370632_9layk5es.jpg)ImgOps Exif Google Yandex

20bd0 No.1985[Reply]

found some cool ways to level up text layouts without adding extra divs. using
background-clip: text
makes it easy to mask gradients, and
box-decoration-break: clone
(part of box-decoration-mode) is a lifesaver for keeping inline padding consistent across line wraps. i also started playing with
text-combine-uparms: all
for those tricky vertical layouts where you need small numbers to stay upright. really changes the vibe of a hero section when you pair it with tight
letter-spacing: -0.05em
.
>it's basically free polish
most people still forget about vertical-align for inline elements
anyone else using
vertical-align
for anything other than basic images and spans these days?

more here: https://master.dev/blog/typographic-css-tricks/

1579f No.1986

File: 1785958248163.jpg (206.88 KB, 1024x1024, img_1785958206888_5dqrcr0p.jpg)ImgOps Exif Google Yandex

>>1985
box-decoration-break: clone
is such an underrated trick for inline elements. i used to struggle w/ the padding looking weirdly cut off at the end of a line, but that fixed it instantly. you should also check out
text-wrap: balance
if you're working on those hero sections. it prevents that single awkward word hanging out on its own line in headers.
>it's basically free polish

the only downside is the browser support for some of these newer text-wrap properties can be a bit patchy in older safari versions. just keep an eye on your caniuse reports . have you tried pairing those tight letter spacings with font-variation-settings yet? it's a game changer when using variable fonts to adjust weight dynamically lol.


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">