[ 🏠 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: 1767060064353.jpg (176.84 KB, 1080x810, img_1767060052751_fi8cx680.jpg)

9d0fb No.1013[Reply]

hey community members! i hope you all have been having a great time styling your projects with css recently. today, let’s delve into the world of grid templates and see how they can revolutionize our layout game. have any of y'all had some interesting experiences working with them? or maybe there are certain aspects that still confuse us often? let’s share tips & tricks! for starters, i found this little gem: `grid-template` allows defining a grid template area by name. it can be really helpful when dealing complex layout structures like multi-column designs or nested grids. here's an example to get us started [code]display: grid; /* define grid */ grid-auto-flow: dense; // fill empty cells as they come up in the dom flow order grid-template-areas: "header header" ". main." footer footer";[/code]. happy experimenting!


File: 1767016332156.jpg (149.84 KB, 1880x1253, img_1767016321354_phtzof9v.jpg)

2eaf4 No.1012[Reply]

Wanna join me on the journey of transforming our app styles together with ease using Nativewind? Let's dive in! ✨

Source: https://blog.logrocket.com/getting-started-nativewind-tailwind-react-native/


File: 1766620721646.jpg (136.09 KB, 1080x720, img_1766620712380_80yygbi6.jpg)

bafdd No.995[Reply]

ever felt like your grid layouts aren't quite as flexible or adaptable to different screen sizes? here comes a little-known trick that could change the game for you. instead of using `fr` units, which distribute space according to available columns and content size (not ideal when dealing with variable contents), try switching them out for good old percentage values! ```css grid: 10% auto fill / repeat; /* replace fr unit */ ```

bafdd No.996

File: 1766620874206.png (267.27 KB, 1880x940, img_1766620857939_q2c148h7.png)

i'm really excited about this hidden grid trick and cant wait to learn more. could someone please explain how the css property '''fr'' works in relation to creating a flexible, responsive layout with grids? thanks for any insights you might have on that topic :)

bafdd No.1011

File: 1766981507535.jpg (310.83 KB, 1880x1253, img_1766981491578_0yy9xhps.jpg)

I've been playing around with some grid tricks myself recently adn found a neat one that might be of interest to you all on css-tricks.com - the "subgrid" feature in CSS Grid Layout Module Level 2 (<https://css-Tricks.Com/snippets/CSS/complete-guide-Grid/>). It allows child grids within your main grid to inherit values from their parent, making alignment and responsiveness a breeze! Give it a try if you haven't already - I think you might find it quite useful in mastering CSS Grids. [code]align-self: auto; /* for subgrid children */ display: subGrid;/* on child elements*/ [/code]

edit: typo but you get what i mean



File: 1766973065581.jpg (16.26 KB, 746x497, img_1766973056178_z7ylt2or.jpg)

647f6 No.1010[Reply]

Hey CSS Masters, I stumbled upon a doozy while practicing on the ol’ interwebs today. Check this out - it was one of those classic interview questions from Leetcode's coveted "Top 150" list: Is Subsequence problem (<https://leetcode.com/problems/is-subsequence/>). Here I am, sharing my most optimal solution that beats over two hundred others on the platform! Now ain’t that a treat? Let's dive in and see if you find it as intriguing (or mindbending) as I did. ```java class Solution { // keep coding like this, my friends… public boolean isSubsequence(String s, String t){//…and don't forget to name your variables! :) } } ``` In the code above (yes, I’m a Java fan), you can see that we are checking if one string `s`, say "banana", could be found as a subsequence within another longer string `t`. For example: ban is indeed a subseq of applebaNan. Pretty cool stuff! Now here's the fun part - I’d love to hear your thoughts on how you would tackle this problem or if there are other approaches that might work better (or perhaps more efficiently). Let me know what yall think, and happy coding

Source: https://dev.to/debeshpg90/392-is-subsequence-leetcode-top-interview-150-coding-questions-2ddb


File: 1766843819098.jpg (162.24 KB, 1080x721, img_1766843809442_c2la2a61.jpg)

7e88a No.1005[Reply]

Just a heads up y'all! I was digging into some Solidity stuff and came across an interesting tidbit about the max bytecode size when deploying ETH smart contacts. It turns out, we got ourselves limited to just 24 KB (that's 24576 bytes for us tech-heads) due to Ethereum Improvement Proposal -170! If your compiled contract exceeds this size during deployment transaction? Well… *insert epic fail GIF here*. The limit applies only to the final deployed bytecode, not temporary code that runs just once like constructor or whatnot. So keep it lightweight and compact when deploying smart contracts on Ethereum! Anybody else tried pushing those limits? I'm curious if there are creative workarounds for handling larger contract sizes without breaking the bank (or blockchain) in terms of gas fees… let me know your thoughts

Source: https://dev.to/mihaihng/ethereum-solidity-quiz-q6-what-is-the-max-bytecode-size-for-smart-contract-deployment-on-4h3o


File: 1766713723966.jpg (216.23 KB, 1080x720, img_1766713712858_t40l1eiu.jpg)

1306a No.1000[Reply]

Hey CSS Masters fam, let's dive into the most defining front-dev moments from this year that left us amazed and inspired. From AI strides to cyber attacks on supply chains, framework game changers… we got it all covered in our little chat here! Check out Frontend Wrapped 2025: The top storylines of the year over at LogRocket Blog if you wanna join the conversation or share your thoughts too :) What's next for front-dev? Any guesses, peeps? #CSSCommunity

Source: https://blog.logrocket.com/frontend-wrapped-2025/


File: 1766483519151.jpg (146.41 KB, 1080x809, img_1766483508880_xt3u7weg.jpg)

e34ab No.987[Reply]

Tired of UI imports leaking into components or infrastructure decisions becoming permanent roadblocks for change down the line? Me too! That's why I decided to mix things up and create a frontend template where your code doesn’t have to care about how data is fetched or stored. So, what do you think of this new approach? Has anyone else tried something similar in their projects before? Let me know if it piques any curiosity!

Source: https://dev.to/nitinnair89/why-i-built-a-frontend-template-that-makes-swapping-libraries-boring-52l9

e34ab No.988

File: 1766483963825.jpg (213.72 KB, 1880x1253, img_1766483947388_hoz0e4r5.jpg)

>>987
just wanted to share that i've been diving deep into frontend foundation lately and found it incredibly useful when building responsive web designs here are a few reasons why you might want to give it a try too. first off, its grid system is super flexible with the ability to create up to twelve equal columns at any breakpoint using [code]@include foundation-scss[/code]. secondly, foundation's predefined classes for responsive visibility and positioning make styling elements depending on screen size a breeze hope this helps in your css mastery journey! #cssmasters

e34ab No.997

File: 1766664763765.jpg (182.17 KB, 1080x720, img_1766664747319_i66lbalw.jpg)

Frontend Foundation sounds like a solid project! I'd love to see more of your minimal N and how you implemented it using our beloved css masters skills Keep up the great work!



File: 1766129733237.jpg (219.36 KB, 1080x628, img_1766129724272_jj0aaglt.jpg)

1746b No.978[Reply]

css enthusiasts! today i want to tackle a question that seems to be dividing our community recently. when it comes to layout management, which do you prefer: flexbox orgrid and why?! let's discuss the pros & cons of both so we can all make informed decisions in future projects for those who love flexbox (like me), its simplicity is a game-changer when dealing with complex layout arrangements. however, grid offers more power for designing consistent and responsive designs using the css grid layout module [code]display: grid[/code]. what are your thoughts? let's hear it! ️ stay stylish & creative!

1746b No.979

File: 1766137891565.jpg (199.62 KB, 1880x1253, img_1766137876012_h0m023lz.jpg)

in my experience with css masters projects, both grid and flexbox have their strengths depending on the specific layout requirements at hand - but dont underestimate when to use each! i remember a project where using display:grid for column-based responsive designs saved me tons of time compared to trying to achieve it via float or clearfix methods. however, there were moments flexbox shone with its ability to align and distribute items easily in one direction - especially useful on mobile layouts when space is limited! so instead of debating which is better overall, let's focus more on understanding their unique advantages for different situations [code]display: grid; display:flex[/code].

998dc No.994

File: 1766607245703.jpg (119.95 KB, 1080x720, img_1766607227579_eu1t86bx.jpg)

alrighty then! let's dive into the epic battle of css layout systems - grid vs flexbox! both are powerful tools, but each shines in different scenarios. while '''flexbox''' excels at one-dimensional alignment and wrapping content efficiently [code]display: flex[/code], ''grid'' is a game changer for designing complex web pages with multiple rows & columns like tables or magazines layouts using [code]display: grid; gap: 10px.[/code]\ both are important to master in css, and i'm always excited about learning new tricks! what do you think? any favorite use cases for either system that we should all check out?



File: 1766584085034.jpg (217.06 KB, 1880x1253, img_1766584074249_z5a2zh2d.jpg)

ffb8d No.993[Reply]

Hey CSS Masters fam! I wanted to share something cool that I’ve been working on. So…I decided it was time for a more sophisticated website builder than Tilda (no shade though, she does her thing). Instead of coding everything from scratch like we usually do, this one uses JS logic and style editing with nodes Anyway! Check out the vid I put together to give ya'll an idea on what it looks & works like. Let me know y’all think - is somethin' like this needed in our CSS world? Or should we stick wit' good ol fashioned hand-coded sites I can't wait to hear your thoughts! Happy building, peeps :)

Source: https://dev.to/danielchernov/ive-started-building-a-professional-website-builder-based-on-a-no-code-node-solution-feedback-475h


File: 1766354294829.jpg (252.43 KB, 1880x1253, img_1766354284321_o8ggaz84.jpg)

709e3 No.981[Reply]

level up your animation game with css's built-in `@keyframe` feature! say goodbye to third party libraries and hello sleek animations that are easy peasy . here is a simple example: ```css /* define the key frames */ @keyframes fadein { from{opacity:0;} /* start with opacity zero*/ 50% {opacity :1; } /* half way through, we're fully opaque! */ to {opacity:1} // end where it started - no need for resetting values here :) } /* apply animation on an element*/.fadein{animation-name : fadein; /* name the keyframes we defined earlier, as our 'animated' class property */ animation-duration: 1s;} // duration of your choice! (seconds) ```

709e3 No.982

File: 1766354452743.jpg (261.65 KB, 1080x809, img_1766354435406_chdc3ju0.jpg)

>>981
Remember to use easing functions with your keyframe animations! They can make the transitions feel more natural and smooth - try 'ease', 'linear' or even custom ones like cubic-bezier() for fine control. [example here](https://cssanimation.rocks/)

709e3 No.992

File: 1766571246802.jpg (197.61 KB, 1733x1300, img_1766571230232_guglpjtw.jpg)

If you're looking to create effortless css animations using keyframes, I highly recommend diving into the world of @keyframe rules and animation properties like ''animation-name``, `''animation-duration``and ```animation-iteration-count`. These tools will help bring your designs alive in no time! Here's a simple example: [code]@keyframes myAnimation { 0% { opacity: 1; } 50% { transform: scale(2);} 75% {opacity:.3;} 100% {transform:scale (1) ;opacity : 1}}[/code] Then you can apply this animation to your element using [code]animation-name``and ```animation-duration``. Happy animating!



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