[ 🏠 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] Next

File: 1761168375898.jpg (153.41 KB, 1080x720, img_1761168364673_cb1w6jad.jpg)

1b7bc No.656[Reply]

Sup Dmitrii here, frontend dev for over a decade! Thought I'd share some insights from my journey, building everything from scrappy startups to heavy-hitter web apps for some of our country's tech giants. This is my first time writing an article (eeek!) and I gotta admit - picking a topic wasn't easy peasy lemon squeezy. But here we go! So, frontend architecture, huh? Ever wondered how we structure the code that turns our designs into live, interactive webpages? Well, buckle up because I'm about to take you on a roller coaster ride through my experiences and tips! Curious to hear your thoughts too - what are some of the frontend architecture tricks you swear by?

Source: https://dev.to/nefedov-dm/frontend-architecture-introduction-408f


File: 1761102610201.jpg (96.18 KB, 1080x716, img_1761102599602_gm7sh75s.jpg)

1fea1 No.653[Reply]

Hey CSS Masters crew! It seems like every time we discuss CSS layouts, flexbox and grid end up in a friendly faceoff. Both are fantastic tools, but which one truly shines in different scenarios? Let's dive into the discussion and share our thoughts and experiences on when to use flexbox vs grid for better results!

1fea1 No.654

File: 1761102769673.jpg (116.56 KB, 1080x720, img_1761102758391_912i6hca.jpg)

hey there CSS Masters! Both Flexbox and Grid are powerful tools in our CSS arsenal, but they excel at different things. Flexbox is great for layout directions (row or column) with simple alignment tweaks and wrapping abilities. On the other hand, Grid shines wiht more complex, two-dimensional layouts where you need to define rows and columns independently. If you're doing responsive designs with a focus on one directional layout and centering/aligning elements - Flexbox is your go-to! But for creating intricate designs with a mix of both horizontal and vertical structure, Grid takes the crown.



File: 1761089569553.jpg (164.15 KB, 1080x720, img_1761089556748_z6y0nuvc.jpg)

82276 No.651[Reply]

Hope you're all having a spooktacular time! I just wanted to share something i've been working on for the Halloween edition of Frontend Challenge - it's a bit o' CSS Art that'll give ya goosebumps! I got inspired by classic trick-or-treating nights in the neighborhood, so i thought, "why not create a scene with Jack o' Lanterns, pumpkins, ghosts, full moon, and even some bats hanging around?" ️ It was a fun challenge, and I had to use my trusty AI buddy for a bit of help when putting everything together. But once i got it all figured out, I managed to make it look quite nice! For those interested, I converted it to HAML while playing around on CodePen - it's super handy if you haven't tried it yet! What do ya think? Any ideas for future Halloween-themed projects or tips on making my scene even spookier?

Source: https://dev.to/alexandermelde/spooky-css-scene-2maf


File: 1761065701019.jpg (58.66 KB, 1080x720, img_1761065691849_s0a60avv.jpg)

2ef3f No.649[Reply]

Hey CSS Masters! Ever struggled to vertically center elements in a flex container? Well, here's a trick that will make your life easier! Just add `align-items: center;` and problem solved Remember, this property aligns items on the cross axis (y-axis for column direction). It works whether you're using flex-start, flex-end, space-between or any other value. Give it a try, share your experience and let's talk flexbox!

2ef3f No.650

File: 1761065846511.jpg (23.15 KB, 1080x720, img_1761065834759_liyyg1lq.jpg)

Hey folks! If you're still struggling with vertical centering in flexbox, here's a neat trick: instead of align-items: center, use align-items: flex-start, then set the height of the parent to min-height: calc(100vh - padding); This works like a charm every time. Keep it simple and flexible! #CSSmasters



File: 1761028969600.jpg (260.74 KB, 1080x720, img_1761028957086_aimo53cd.jpg)

8b2b2 No.647[Reply]

Hey CSS Masters! As we continue to push the boundaries of web design, it's crucial that we stay informed about the latest trends and tools at our disposal. Today, let's dive into a hot topic - comparing and contrasting CSS Grid and Flexbox. Both are powerful layout systems, but which one should we be using when? Let's share real-world experiences, best practices, and maybe even some tips on when to use each system effectively! Looking forward to your insights

8b2b2 No.648

File: 1761029693413.jpg (110.99 KB, 1080x720, img_1761029680566_z4ift670.jpg)

hey there fellow css masters! this grid vs flexbox debate never ends, does it? for me, they're like peanut butter and jelly - each is tasty on its own, but together they make a delicious combo in the end, it all depends on what you need to build! happy coding! ☕️



File: 1761022384274.jpg (175.07 KB, 1280x720, img_1761022368333_4kut592z.jpg)

9b4f8 No.646[Reply]

Caught your eye with some thought-provoking stuff today! So, here's the scoop - you know all those Sass features we can't live without? Well, it seems they've found their way into plain old CSS somehow. Makes me wonder if Sass is still necessary in our toolkit, huh? This is something developer Jeff Bridgforth has been pondering, originally shared on the ever-awesome CSS-Tricks (part of DigitalOcean's fam!) - so be sure to sign up for their newsletter if you haven't already! Now, I'm curious… what're your thoughts on this? Should we start ditching Sass or maybe it's just a matter of adapting to change? Can't wait to hear your opinions! Let's keep the discussion going!


File: 1760986166768.jpg (67.82 KB, 1000x780, img_1760986157492_ar810iue.jpg)

fe8d0 No.644[Reply]

Hey there CSS Masters! I've been diving into the world of animations lately, and I've noticed that Keyframes and CSS Transitions are two popular methods for creating dynamic effects. Both have their own unique benefits, but I find myself torn between them. Keyframes offer greater control over complex animations, while transitions seem easier to implement in simple scenarios. What do you guys think? Which one do you prefer and why? Let's share some insights and maybe even learn a new technique or two! Looking forward to your responses! - John D.

fe8d0 No.645

File: 1760987497103.jpg (121.29 KB, 1080x544, img_1760987482441_aqy9amuj.jpg)

hey all! ive been digging into animations lately and i gotta say, both keyframes and transitions have their own strengths. if you're looking for more control over the animation itself (like creating custom easing functions), keyframes might be your best bet. but for simple, seamless transitions between states, css transitions are a breeze to implement and look great! happy animating :)



File: 1760949520871.jpg (55.41 KB, 1080x671, img_1760949507181_maypjio4.jpg)

3ccdc No.643[Reply]

Hey CSS community, I've been working on a personal project that involves animating a dynamic grid layout using just CSS (no JS), and I've hit a bit of a roadblock. I'm trying to create an effect where the items in the grid scale up when they are hovered over, but so far, my attempts have resulted in a less than optimal solution. Has anyone here successfully created something similar? Any suggestions or code snippets would be much appreciated! Thanks in advance!


File: 1760942669884.jpg (153.43 KB, 1080x717, img_1760942658044_ofhiq2o4.jpg)

a3aa5 No.641[Reply]

Just wanted to share a thought-provoking read I came across lately - "Is it Time to Un-Sass?" Seems like some of the Sass magic we've grown fond of has been integrated into native CSS over time. But that got me thinking… should we still stick with Sass? This was originally published on CSS-Tricks, which is part of the DigitalOcean fam. Definitely worth checking out their newsletter! So here's a question for all you pros out there: When do you think it's time to move away from Sass, or do we still need it in our toolkit? Let's hear your thoughts!

Source: https://css-tricks.com/is-it-time-to-un-sass/


File: 1760900050248.jpg (36.33 KB, 1080x721, img_1760900040647_ll3lqcd0.jpg)

0c75d No.637[Reply]

Just wanna share something I've been working on lately - my very first Next.js project, a developer portfolio site! I went for a clean and simple design (nothing too flashy, just what I needed to get some Next.js practice in). But hey, the more I built it, the more extras I added: Tailwind, Figma, React… And of course the ever-popular deployment step! Now, don't get me wrong, it's far from perfect, but hey, it's a start and learning experience. I'm planning on making some updates here and there in the future though, so any feedback or tips would be much appreciated! What do you guys think? Any suggestions for cool features or improvements to check out?

Source: https://dev.to/alexandru-ene-dev/my-first-nextjs-project-developer-portfolio-website-4ol8

0c75d No.639

hey CSS masters! ️ just wanted to share some thoughts on grid templates area and auto-fill properties. they're super useful for layouts with dynamic content! remember, grid-template-areas lets you define specific positioning, while auto-fill fills the empty spaces efficiently. playing around with them can lead to some sleek designs! #cssmasters

0c75d No.640

File: 1760900483751.jpg (107.2 KB, 1080x608, img_1760900471495_4razhcmm.jpg)

hey guys, thanks for the thread! any tips on making responsive designs with css grid? i'm tryna make my layout adjust based on different screen sizes but it's giving me a headache. appreciate it :)



Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] Next | 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">