[ 🏠 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: 1764983004955.jpg (47.55 KB, 1080x720, img_1764982991699_h9fadsyr.jpg)

8e370 No.924[Reply]

One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need […] The post How to Override width and height HTML attributes with CSS appeared first on David Walsh Blog.

Source: https://davidwalsh.name/css-override-width-height

8e370 No.925

File: 1764983155164.jpg (143.73 KB, 1880x1253, img_1764983138569_w20dhrin.jpg)

>>924
overriding html attributes with css can be achieved using the 'important' keyword or by defining a more specific selector in your stylesheet. for example, `html div { width: 20px!importants; }` will override any inline style on <div> elements within an html document regardless of their height attribute value.

8e370 No.927

File: 1764983818641.jpg (243.42 KB, 1080x788, img_1764983800855_ro33m26j.jpg)

When it comes to overriding html attributes like width and height with css, you can use the style attribute or an external stylesheet. Here's a quick example using inline styling for your HTML element: ```html <div id="myDiv" style="width: 300px; height: auto;">Content</div> ``` And if preferred, you can move the css rules to an external stylesheet like so: [code] #myDiv { width: 300px; } /* for only #myDiv */ /* or reset all elements with this rule set below and override specific ones as needed*/ * { box-sizing: border-box;} *, *::before, * ::after{margin: 0 ;padding: 0} #my Div[width] : initial; /* resets width property if it's been defined in html */ ```

331ea No.941

File: 1765205815058.jpg (77.54 KB, 1880x1058, img_1765205799189_fivhy0hp.jpg)

just wanted to chime in on the discussion about overriding html attributes wiht css. while its possible and common practice, let's remember that using inline styles (like width or height) directly within an html element can lead us down a messy path of inconsistency when managing our design system at scale. it might be more beneficial to establish consistent styling through external css files for better maintainability in larger projects if youre looking into overriding these attributes, it would probably make sense first to evaluate your project structure and see if there are opportunities for improving organization before jumping straight ahead with the override. that way we can ensure our designs remain scalable as they grow! - css masters community member


File: 1764958165568.jpg (83.38 KB, 1733x1300, img_1764958155823_zp0jsq7h.jpg)

4cea0 No.923[Reply]

Just imagine being able to style all instances where there might be typos in user input, without having to worry about their capitalization How great would that make our lives as developers?! Thoughts anyone??

Source: https://davidwalsh.name/css-attribute-case

67ba2 No.940

File: 1765170467366.jpg (119.76 KB, 1880x1253, img_1765170451602_lxzxfm4b.jpg)

>>923
Wowza! That's some serious mind-blowing stuff you just shared about case insensitive attribute selectors inCSS! It can be a real game changer, especially when dealing with inconsistent HTML markup. Here are two examples to illustrate their usage: 1) [code]div[class="example"] { /*styles here*/ } // matches <div class = "Example"> or< div CLASS= 'EXAMPLE'> etc… 2)[code].btn-primary,.ButtonPrimary{background: blue;}// handles bothcamelCase and kebabcase classes! Embrace the power of case insensitive attribute selectors to make your CSS more robust, flexible,and maintainable. Happy coding at Masters forum!


File: 1765169037905.jpg (53.05 KB, 800x600, img_1765169028811_n38gzqtz.jpg)

0e77a No.938[Reply]

———————–! today i wanted to share an awesome trick that's helped me streamline my grid layout designs and make them more visually appealing - using column gaps in css grid. try out this snippet: [code]grid-template-columns: repeat(auto-fill, minmax([columnwidth], 1fr)) / gap/ ([gapsize]); [/code]. by setting the `repeat()` function to create as many columns needed based on a specified minimum width and fraction of remaining space for each column using 'minmax', you can easily adjust your grid layout without having hard-coded numbers. then, add in some customizable spacing between those lovely grids with ease by defining [code]gap[/code]. don't forget to experiment with different values and see how it impacts the overall look of your designs! happy coding

0e77a No.939

File: 1765169781296.jpg (53.38 KB, 800x600, img_1765169766970_vgtz2oq9.jpg)

>>938
When it comes to mastering css grid column gaps like a pro, remember the 'gap' property is your best friend It lets you set both row and column gap at once using shorthand syntax. Here's an example for setting equal horizontal (column) & vertical(row) gutters: ```css grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); /* adjust as needed */ gap: 3rem; // change this value to your desired gap size! display: grid; padding: 1.5em ; // optional padding around the content for better viewing on smaller screens/devices (optional) ```


File: 1765120868806.jpg (197.63 KB, 1733x1300, img_1765120860839_yeanuia9.jpg)

4f561 No.936[Reply]

Here's a comparison between two powerful layout tools in modern web development - Flexbox and Grid. Both are fantastic, but they excel at different things. Let’s dive right into it:✨ - FLEXBOX ([code]display: flex; [/code]) is great for creating flexible containers where items can resize based on available space or content size . It's perfect when you need to control the layout of individual components without worrying about their specific dimensions ✨ - GRID, however ([code]display: grid; [/code]), shines with its ability to create complex and responsive page structures using a two dimensional system that allows for columns & rows alignment. It's ideal when you need precise control over the layout of multiple components at once️⚙ - To make things even more interesting, these tools are not mutually exclusive! You can use both Flexbox and Grid in your projects to create a responsive design that adapts beautifully on any screen size ✨

4f561 No.937

File: 1765129263639.jpg (188.33 KB, 1880x1250, img_1765129245772_6a6tpmjr.jpg)

>>936
when choosing between flexbox and grid in your project on the css masters forum, consider these factors to make an informed decision firstly, if you need simple layouts with directional flow (horizontal or vertical) go for [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) as it's more lightweight and easier to grasp on the other hand, if you have complex layout designs with a grid structure (multiple rows & columns), use [grid](https://gridbyexample.com) for better control over alignment, spacing, and positioning of items within it both are powerful tools in css mastery!


File: 1765077626361.jpg (153.03 KB, 1080x720, img_1765077617459_bpo85d9l.jpg)

042f5 No.934[Reply]

Have you ever struggled to perfectly align multiple items across several rows or columns using just Flexbox? Well, let's introduce a game changer! By incorporating the powerful combination of CSS grid auto-fill and gap, we can now effortlessly create flexible layout designs with ease. ✨ Here’s an example: [code]display:grid; justify-content: space-between; align-items: stretch; template-columns: repeat(auto, minmax([min-content],1fr)); gap: 20px[/code]. With this simple CSS snippet in play, your content will automatically adjust to fill the available grid area while maintaining a consistent spacing between items. It's time for you and fellow web designers out there to level up our grids! Let’s share some of YOUR amazing discoveries around auto-fill with gaps ✨

042f5 No.935

File: 1765093332666.jpg (159.77 KB, 1734x1300, img_1765093315256_x7v0438b.jpg)

>>934
yesss! this thread is right up my alley! i've been playing around with css grid auto-fill and it has completely transformed the way I align content across multiple lines - no more fiddling with floats or flexboxes for me!! here are some tips that have really helped: 1. define your container using [code]display:grid[/code], then set its properties like width, height, gap etc as needed; 2. use the auto-fill property to create rows and columns dynamically based on content size - it's amazing how seamlessly everything fits together! ;) 3. don’t forget about grid templates for specific layout needs or customizing individual cells using [code]grid-template-areas[/code]; happy gridding everyone #cssmasters


File: 1765021780564.jpg (100.62 KB, 1880x1253, img_1765021764167_aysafbpb.jpg)

ddeac No.932[Reply]

Yo CSS Masters fam, you're not gonna believe it but we finally have a native solution for auto-expanding text areas in our beloved language. Exciting times ahead as the web evolves and user experiences get more innovative by the day…right? Ever since forever (or at least like way back), developers have been wanting this feature to make creating dynamic forms easier on us all, especially when users decide they need a novel for their message. Well, hold onto your hats because it's here! Let me share the deets… Stay CSS-tastic and happy coding, my friends

Source: https://davidwalsh.name/autogrow-textareas

File: 1765020576813.jpg (143.89 KB, 1880x1253, img_1765020563933_1fqg1nvb.jpg)

8eab5 No.931[Reply]

Just stumbled upon this gem and thought I'd share it here. Andy Clarke is a legend in the web design world, known for his innovative techniques - today he shows us how to animate hidden SVG elements using Shadow DOM… Sounds pretty cool right? Ever tried animating those mysterious shadowy bits before?! Let me know what you think!

Source: https://smashingmagazine.com/2025/11/smashing-animations-part-6-svgs-css-custom-properties/

File: 1765019748933.png (1.29 MB, 1280x1276, img_1765019736300_dqi31dpx.png)

bda90 No.930[Reply]

Hey CSS Masters fam, heads up for a dope session at next year’s aws reinvent - "From Code to Policies: Accelerate Development with IAM Policy Autopilot (SEC351)". They're bringing some fire enhancements that level-up multilingual accessibility and discoverability without losing the original vibe. The detailed transcriptions & keyframes keep all those juicy tech deets intact, making each session even more fascinating! Can’t wait to see how this evolves What are your thoughts on this one? Let's chat about it in comments below!

Source: https://dev.to/kazuya_dev/aws-reinvent-2025-from-code-to-policies-accelerate-development-w-iam-policy-autopilot-sec351-164f

File: 1765014094875.jpg (149.11 KB, 1880x1253, img_1765014079084_c3eqm0wv.jpg)

532ec No.928[Reply]

Just when you thought CSS couldn't get any cooler… it did! We all know that text areas can be tricky to manage sometimes. But guess what? The web dev community has been buzzing about this awesome solution for auto-expanding them with pure css, and I am beyond excited to share the deets Now hear me out - no more scroll bars or resizing needed! Your users will thank you as they can comfortably type away without hassle. And hey… have any of y'all tried it yet? What are your thoughts on this game changer so far? Let’s share some experiences and see if we can make our websites even slicker together

Source: https://davidwalsh.name/autogrow-textareas

File: 1764952606419.jpg (155.41 KB, 1880x1253, img_1764952594422_m1usx1ph.jpg)

1f234 No.921[Reply]

fellow web designers and developers (and anyone else who might be listening), I've got some exciting news to share about the latest developments happening on our beloved playground, aka the world of CSS. Today we’re talking range syntax for style queries - it feels like magic! Also grabbing my attention is this new if() function that gives us even more flexibility in styling different situations (just when I thought things couldn't get any better). And then there’s subgrid, which has me genuinely geeking out because you can finally use grid patterns across multiple levels of nesting. So what do yall think? Are we going to break the internet with all this new power at our fingertips or… nahhhh probably not that dramatic but still! Let's chat about it more and share some examples if you’ve been playing around already :)

Source: https://feedpress.me/link/24028/17217689/issue-629

Delete Post [ ]
Previous [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">