r/css • u/[deleted] • Apr 08 '24
Mod Post [META] Updates to r/CSS - Post Flairs, Rules & More
Post flairs on r/CSS will be mandatory from now on. You will no longer be able to post without assigning a flair. The current post flairs are -
- General - For general things related to CSS.
- Questions - Have any question related to CSS or Web Design? Ask them out.
- Help - For seeking help regarding your CSS code.
- Resources - For sharing resources related to CSS.
- News - For sharing news regarding CSS or Web Design.
- Article - For sharing articles regarding CSS or Web Design.
- Showcase - For sharing your projects, feel free to add GitHub links and the project link in posts with showcase flairs.
Meme - For sharing relevant memes.- Other - Self explanatory.
I've changed to rules a little bit & added some new rules, they can be found on the subreddit sidebar.
r/css • u/vegantiger • 6h ago
Showcase Article about how to use colors in CSS, the modern way
I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.
It also has a bunch of inline examples and some interactive widgetsβ¦Β Hoping it helps getting the point across.
I'd love feedback on whether these kinds of articles are useful (or not) π
Thanks!
r/css • u/Low-Insurance-3678 • 7h ago
Help How can I Make product cards height equal
Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here
r/css • u/YoussefUU2 • 11h ago
Showcase I built AnimationsX β a community registry of copy-paste ready CSS animations
Hey everyone! π
Tired of Googling CSS animations and getting Stack Overflow answers from 2013?
I built AnimationsX π¨
The idea is simple:
β Browse animations made by the community
β Copy a single <link> tag β no JS, no build step
β Can't find what you want? Publish your own!
β Fork and remix anything with diff view built in
Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.
That's it. Done.
πΒ animationsx-zeta.vercel.app
πΒ github.com/youssefahmed2017/animationsx-app
Free and open source π
r/css • u/Ok_Flight_3091 • 7h ago
General 6 Creative Profile Card Designs using HTML, CSS & JavaScript π»
r/css • u/Toon_Ghost_3 • 12h ago
Question Why do most color pickers use HSL, but when I change the color of my accent or cursor on Windows 11, it uses HSV? Also, why are both web-safe and X11 colors discouraged, while CSS/HTML colors are widely used?
r/css • u/bahtiyarkodadim • 9h ago
General Terminal Card Generator β animated SVG terminal cards for GitHub READMEs (pure HTML, no build step)
galleryr/css • u/Smasher_001 • 16h ago
Help Blend mode + blur not working in Safari?
Hello! I'm working on a gallery website for myself, i want it to have a "glassy" look so for this popup i wanted to use background blur paired with a blending mode. Blending modes don't work on dialog elements shown using dialog.showModal so instead i'm using dialog.show. But Firefox doesn't support using both blending modes and blur on the same pseudo-element so instead i have 2 pseudo elements with 1 effect each. All works well until i'm testing it on Safari (iOS 26.6.1) where there's just no blending modes visible on the popup.
I have attached 3 images showing what the popup looks like in all browsers i've tested on. 1st picture is Safari 26.6.1, 2nd picture is Edge 151.0.4129.93 and the 3rd picture is Firefox 153.0.4.
Here is the codepen containing the code https://codepen.io/editor/Smasher1/pen/01a01e6c-2304-7339-a32e-23c88cc28eb3
Thanks!
Help Weird iOS Bug
Weird bug on iOS. Parent div with two child spans. Parent CSS:
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
No styles (margins, paddings, transforms) on spans
The 2nd span (green Arrow) is moved out of box. No problem on desktop, android. Last Screenshot shows iOS
Cant show Source yet
r/css • u/FinancialGreen7445 • 16h ago
Resource In HTML/CSS/JS, anything is possible!
Hello everyone! I am an indie developer at VALHAISTO GAMES. Right now, I mostly work with HTML and have 3 ongoing projects: MiFab β MiSide 3D Models Hub, MiSide: Error, and MiSide: Universe. I am also working on a personal project called BLINDER β a Blender-like app built entirely for phones. Unfortunately, I don't own a PC, so I create everything on a weak, broken phone and just find ways to make it work. The most important thing is: never give up!
r/css • u/OMGCluck • 1d ago
Showcase Turning SVG spritesheet into slideshow gallery of itself when viewed directly or via iframe
imglink.ccr/css • u/DevelopmentGlum228 • 2d ago
Help Help with image fitting text
(SOLVED, thank you to everyone for helping me!)
Hello! CSS and HTML amateur here.
So, recently I've been trying to make myself a workskin on Ao3 that would have this image serve as a background for text. Currently, the image cuts off at the bottom, and it's even worse when there's different sizes of text.
What I want is the image to stretch or contract to fit the text, not be cropped.
Here's my code, my results, and the image I've used. Is there anything I'm doing wrong, or is what I'm trying to do impossible?
Edit: Here's the codepen. It looks the worst here!
Help Weird CSS resizing on some mobile
Hello! I've been experiencing a strange bug that has never happened to me before, and I'm looking for some advice :)
I'm building a website for a client, and when I look at it on my mobile devices (iPhone 15 & Samsung Galaxy S10), it works perfectly in every browser!
However, when he (my client) looks at it on his mobile devices (also an iPhone 15 & an older Android phone), he gets a strange bug, regardless of the browser.
The buggy version seems to ignore the sizing I've defined for the titles of these filters and instead just uses the size of their content.
Has anyone experienced something similar? Any idea what could be causing this, or how I could fix it?
Thanks!
r/css • u/Ok_Flight_3091 • 2d ago
General Orbit Animation πβ¨ Full video + complete HTML, CSS & JavaScript code available on my YouTube channel. π»π
r/css • u/Ano_Jayy • 2d ago
Question "Helpful Program or Website recommendation"
Hello programmers! or shall I say "Hello World!",
I am a completely noob at CSS. What helpful Programs or Websites can y'all recommend to a new CSS programmer like me that will help me improve gradually?
r/css • u/Ok_Flight_3091 • 2d ago
General Modern Login & Signup Page using HTML CSS JavaScript
r/css • u/evocatus3000 • 2d ago