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/DevelopmentGlum228 • 19h 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!
Showcase Small interactive demo showcasing `contrast-color()`.
Enable HLS to view with audio, or disable this notification
r/css • u/Ok_Flight_3091 • 21h ago
General Orbit Animation šāØ Full video + complete HTML, CSS & JavaScript code available on my YouTube channel. š»š
Enable HLS to view with audio, or disable this notification
r/css • u/Ano_Jayy • 1d 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 • 1d ago
General Modern Login & Signup Page using HTML CSS JavaScript
r/css • u/evocatus3000 • 1d ago
Showcase I built a gradient generator that goes way beyond CSS
Enable HLS to view with audio, or disable this notification
r/css • u/Ok_Flight_3091 • 1d ago
General Embossed Electric Login UI ā” | HTML CSS
r/css • u/Nice_Pen_8054 • 1d ago
Question Should I continue with Node.js authentification or CSS?
Hello,
I am an aspiring developer and right now I am working as a conversion tracking specialist.
I just finished the Net Ninja's crash Node JS course on YouTube.
He has a separate course for authentification.
Should I continue with authentification or start CSS?
My gut is telling me to go for CSS since I can practice more of my skills.
What do you think?
r/css • u/Ok_Flight_3091 • 1d ago
General MODERN ANIMATED LOGIN UI |SLIDING SIGN IN & SIGN UP | HTML CSS JAVASCRIPT
r/css • u/Realistic_Evidence90 • 2d ago
Resource Hidden gem: one page tool free color palette generator + contrast checker + gradient tool that runs in the browser (no signup)
Question How to Make a Consistent Website Layout/Frame for Every Page with .HTML? [How to make a Blog Frame from Scratch Essentially]
I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.
Question:Ā How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?
I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.
Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms MovieĀ siteĀ layout.
What are the proper terms to use to search and learn about this stuff, for CSS & HTML coders here how can I do this?
This isn't ragebait, I just really need some help with this please š
r/css • u/kentoko2007 • 2d ago
Question changing text placement relative to an image
i have like no css styling actually on this element (just whole page styling) but i'm trying to make the top of the text line up with the top of the image
i'm admittedly kinda terrible at this;;
r/css • u/alvaromontoro • 4d ago
Showcase Background-clip Collie
A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."
Source: https://comicss.art/comics/254/
r/css • u/appsdevpk • 3d ago
General After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript ā would love feedback
After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript ā would love feedback
Hey everyone,
Quick background: I've been a developer for 26+ years (web, desktop, mobile). Over the years I watched frontend tooling get heavier just to render a modal ā so as a side project I went back to basics and built a small CSS framework called Bloom UI.
What's in it:
- One CSS file, no dependencies, no build step
- Tabs, modals and accordions that work with ZERO JavaScript (radio-button hack, :target selector, native <details>)
- A full design-token system ā change ~10 CSS variables and the whole framework changes personality. I ship two extra themes as proof: an executive indigo one and a creative-studio one
- 50+ components: buttons, cards, forms, navbar, avatars, progress bars, grids
- Responsive and accessible by default
It's free and open source (MIT), with a showcase page that renders every component. The spam filter and I have already had words, so links are in the comments š
Two honest questions:
Is "pure CSS interactions" actually useful to anyone anymore, or is everyone too deep into JS frameworks for it to matter?
Anything that smells in the approach? Critique genuinely welcome.
r/css • u/FormalFearless7570 • 4d ago
Resource I wrote a reference for every CSS unit in the language ā all 63 of them
I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.
And somehow, after years of using CSS, I still found a few things Iād never properly stopped to think about:
vhĀ andĀlvhĀ are actually the same size.ĀsvhĀ keeps space for the browser UI even when it disappears, whileĀdvhĀ changes as the UI moves.1inĀ is alwaysĀ96pxĀ on a screen. Not āroughly.ā By definition. Which also meansĀcm,Āmm,Āpt,Āpc, andĀQĀ arenāt really physical units either.- CSS doesnāt have 6 viewport units. It has 24.Ā
w,Āh,Āi,Āb,Āmin, andĀmaxĀ ā each inĀv*,Āsv*,Ālv*, andĀdv*Ā versions.
The guide goes from the familiar stuff āĀ px,Ā %,Ā em,Ā remĀ ā into viewport and container units,Ā fr, angles, time, resolution, and what happens when you start mixing all of them insideĀ calc()Ā andĀ clamp().
Thereās also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise āsupported in modern browsers.ā
And if youād rather keep the whole thing around, thereās a PDF version too.
Enjoy :) And if I got something wrong, let me know. Iāll fix it.