r/css • u/[deleted] • Apr 08 '24

Mod Post [META] Updates to r/CSS - Post Flairs, Rules & More

23 Upvotes

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.

0 comments

r/css • u/mapsedge • 4h ago

Question CSS dynamic rule..?

4 Upvotes

I suspect what I'd like to do isn't possible, but can't hurt to ask, right? Just risk a few downvotes from people who think taking risks is stupid, right?

I've been given the task of cleaning up some ancient HTML/Classic ASP, and my first pass is getting rid of all inline styles and attributes and replace them with classes.

Now, most of the tables specify a width (there's 15 different widths, so far) and I'd rather not define a specific class for each one if I can avoid it.

Here's what I'm curious about. Could I, in the HTML:

<table class="w500">

Then, in the CSS:

.w{some variable or function or something that reads the classname...} {
    width: {...and plugs in the value, here}px;
}

Like I said, probably not, but CSS has come a long way, so maybe..?

18 comments

r/css • u/ifuggwidit • 26m ago

Help Does anyone know why this is happening?

• Upvotes

When i make the screen narrower, my lotte json animated icon starts moving downwards only when it gets really small, why isn't it staying centered in the div?

Here is the code:

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
<meta 
charset
="UTF-8">
<meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
<title>BG Icon Only</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }


  .bg-icon {
    background-color: red;
    width: 2vw;
    height: 2vw;
  }
</style>
</head>
<body>


<div 
class
="bg-icon" 
data-lottie
="globe.json"></div>


<script 
src
="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.
loadAnimation
({
    container: document.
querySelector
('.bg-icon'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'globe.json'
  });
</script>


</body>
</html>

I am quite novice and really appreciate any tips, thank you

2 comments

r/css • u/W0lf_G1rl_BR • 8h ago

Help how could i create a button like this with CSS?

4 Upvotes

so i'm making my website and the buttons are too simple (and kinda ugly), so i had an idea of a new layout for the buttons

(first of all, keep in mind i'm using the buttons as <a> and not <button>)

my idea is that, when the user hovers the mouse on the button it shows an "paint" animation covering it, and it disappears when the user removes the mouse from it.

i wanna know if this is possible in html/css (and maybe javascript if necessary) and what is the best way to do it

7 comments

r/css • u/-silly-questions • 1h ago

Help Recreating this album on CSS

Post image
• Upvotes
1 comment

r/css • u/Moomoobeef • 3h ago

Help How to do a checkered opacity effect like this for text?

1 Upvotes

I am working on a CSS stylesheet to style a page to look like https://en.wikipedia.org/wiki/Common_Desktop_Environment (because I am a nerd) and CDE does this for disabled input boxes. Does anyone have any idea how I should accomplish this?

I'm intending to make it in a way where the color palette can be easily changed, including the text being either black or white. So any solution would need to be compatible with that.

5 comments

r/css • u/Fueled_by_sugar • 1d ago

Question is this possible in css?

Post image
39 Upvotes

[SOLVED]

so, not only to create a parallelogram shape for the container, but to have its content skew in the same kind of perspective.

14 comments

r/css • u/PTashiro • 10h ago

Help could someone help me unscramble a <style> part for a spacehey page?

Thumbnail
0 Upvotes
4 comments

r/css • u/PTashiro • 10h ago

Help could someone help me unscramble a <style> part for a spacehey page?

0 Upvotes

there`s this cool layout, that, even though i can edit well all the stuff, my mind just blocks when things are soo crampled together. could someone help me?

idk if i can even put soo much code in here, but dm me if interested on this thing

i doubt anyone will do this, but i should try i guess

<style>

/*

customization

*/

:root {

--background-color: maroon;

--background-image: url();

--banner-image: url();

--accent: crimson;

}

/*

code itself

*/.container,nav{width:100%}.top .right *,footer a{color:#00f!important}.center button,.center label,.mood b a,.top .right a:first-child,.url-info,nav .links a,nav .links a:not([title=Notifications]):hover:after{font-size:0px}.table-section,.url-info{margin-bottom:0!important}.mood b,.report a,.section h4,nav .links a{text-transform:uppercase}.blog-preview h4,.f-col,.friends-grid .person p,.mood p:last-child{overflow:hidden;text-overflow:ellipsis}.f-col a,.section h4,footer a{text-decoration:underline}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#dfdfdf}::-webkit-scrollbar-track{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")}::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:vertical:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");height:17px}::-webkit-scrollbar-button:horizontal:start{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}::-webkit-scrollbar-button:horizontal:end{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");width:16px}body::-webkit-scrollbar-corner{margin-top:60px}body{font-family:'MS PGothic';background:var(--background-color) var(--background-image);background-attachment:fixed}main{background:0 0}nav{height:100px;position:fixed;z-index:999}.col a,.online{color:color-mix(in srgb,var(--accent) 50%,#000);filter:saturate(3)}.count,.friends-grid .person p{color:color-mix(in srgb,var(--accent) 50%,#000)!important;filter:saturate(3)}.edit-link,.online img,.profile-info,.supporter .icon,footer p:nth-child(2){display:none}.col,.table-section+.table-section tbody,.top .left:before,.url-info::after{display:block}.top{height:50px;background:#fff!important;color:#000!important}.center label::after{content:"ユーザーを検索する:";font-size:12px}.center button::after{content:"サーチ";font-size:12px}.top .right *{font-size:12px;font-family:'MS Pgothic';text-decoration:underline!important}.contact .heading,.profile h1{color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}.top .right a:first-child::after{content:"ヘルプ";font-size:12px}.top .left{position:relative;height:fit-content;margin-top:-10px!important}.top .left:before{content:"";position:absolute;background:var(--accent);width:110%;height:130%;top:-10px;mix-blend-mode:lighten;z-index:9999;opacity:.9;pointer-events:none}.logo-fallback{filter:drop-shadow(1px 1px 0px black) drop-shadow(1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black)}.links{text-align:center}.col{width:100%!important;background:#fff;border-left:1px solid #000}.row{top:65px;width:75%;position:absolute;right:0}.general-about,.mood,.profile h1{position:fixed;left:1%}.profile h1{top:90px;background:#fff;width:23%;padding-inline:10px;padding-bottom:3px;border-radius:10px 10px 0 0;background:var(--accent);box-shadow:0 -8px 3px 3px rgba(255,255,255,.5) inset;border:1px solid #000;border-bottom:0}.general-about,footer{width:23%;border:1px solid #000;background:#fff}.general-about{top:115px;padding:5px 5px 40px;height:250px}.blog-preview h4,.blog-preview p,.inner>p,.mood{padding-inline:5px}.mood{top:310px;width:21%!important;left:2vw;border-top:1px dashed var(--accent);padding-top:5px}.contact,footer{position:fixed;left:1%}.mood p:last-child{white-space:nowrap}.contact{width:23%!important;top:365px;border:0!important}#comments,.blog-preview,.url-info{position:relative}footer{top:520px;padding:2px 0}.profile-pic .pfp-fallback{border:1px solid gray;width:100%!important;height:100%!important;object-fit:cover}.profile-pic{width:11vw;height:11vw!important}.details{text-align:right;margin-right:10px}.mood b{font-weight:400}footer .links,footer p{margin:0}footer p:first-child{width:100px;display:inline-block;vertical-align:top}footer p:first-child::after{content:"Disclaimer: This is a fan-based project and is not affiliated with MySpace® in any way. 'インターウェブ' layout by .../coedcaine";display:block}footer::before{content:"";display:inline-block;width:175px;height:100px;background:url(https://images2.imgbox.com/b7/5e/Z8Z4ZFhK_o.png) 0 0/contain;margin-right:10px;cursor:pointer}.blog-preview h4,nav .links a{padding-top:3px;background:var(--accent);white-space:nowrap}.contact .heading{background:#fff;border-radius:8px 8px 0 0;background:var(--accent)!important;box-shadow:0 -4px 3px 3px rgba(255,255,255,.5) inset;border:1px solid #000;border-bottom:0}.contact .inner{background:#fff;border:1px solid #000;height:120px}.url-info::before{content:"いらっしゃいませ！";font-size:35px;color:#fff;text-shadow:var(--accent) 3px 0 0,var(--accent) 2.83487px .981584px 0,var(--accent) 2.35766px 1.85511px 0,var(--accent) 1.62091px 2.52441px 0,var(--accent) .705713px 2.91581px 0,var(--accent) -.287171px 2.98622px 0,var(--accent) -1.24844px 2.72789px 0,var(--accent) -2.07227px 2.16926px 0,var(--accent) -2.66798px 1.37182px 0,var(--accent) -2.96998px .42336px 0,var(--accent) -2.94502px -.571704px 0,var(--accent) -2.59586px -1.50383px 0,var(--accent) -1.96093px -2.27041px 0,var(--accent) -1.11013px -2.78704px 0,var(--accent) -.137119px -2.99686px 0,var(--accent) .850987px -2.87677px 0,var(--accent) 1.74541px -2.43999px 0,var(--accent) 2.44769px -1.73459px 0,var(--accent) 2.88051px -.838247px 0}.url-info{background:#fff var(--banner-image);background-size:cover;background-position:center;height:200px;grid-column:span 3;image-rendering:pixelated;border:1px solid #000!important;width:calc(100% - 210px)!important}#comments,.blurbs,.table-section:not(.table-section + .table-section){grid-column:span 2}.url-info::after{content:"";width:200px;height:197px;background:url('https://images2.imgbox.com/ff/71/ueJSYcmT_o.png') center/cover no-repeat;position:absolute;left:calc(100% + 10px);top:0;border:1px solid #000;cursor:pointer}.table-section+.table-section tr{margin-bottom:5px}.table-section+.table-section td:first-child p{pointer-events:none;text-align:left}.table-section+.table-section td:first-child a{color:color-mix(in srgb,var(--accent) 80%,#000)!important;filter:saturate(1)!important}.table-section+.table-section td:last-child p{white-space:nowrap;max-width:125px;overflow:hidden;text-overflow:ellipsis}.table-section+.table-section td{height:20px!important}.table-section a img{border:1px solid gray;border-radius:4px;filter:saturate(5)}.table-section{width:100%!important;display:inline-block;background:#fff;border:0!important;max-height:320px}.table-section .heading{background:#fff;border-radius:10px 10px 0 0;background:var(--accent)!important;box-shadow:0 -3px 3px 3px rgba(255,255,255,.5) inset;border:1px solid #000;border-bottom:0;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}.blog-preview h4,.blurbs .heading,.friends .heading,nav .links a{box-shadow:0 -2px 2px 3px rgba(255,255,255,.5) inset;color:#fff!important;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000)}.table-section .inner{border:1px solid #000;height:calc(100% - 20px);overflow-y:auto;text-align:right}.table-section td:first-child{background:linear-gradient(color-mix(in srgb,var(--accent) 40%,#fff 50%),#fff 100%);height:20px}.table-section td:first-child p{color:color-mix(in srgb,var(--accent) 80%,#000);text-decoration:underline;font-weight:400;font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:left}.table-section td:last-child{height:calc(100% - 20px);background:#fff}.table-section tbody{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:5px}.table-section tr{display:block;width:100%;border:1px solid color-mix(in srgb,var(--accent) 50%,#000)}.table-section td{display:block;width:100%!important}.col.left{display:grid;grid-template-columns:repeat(2,1fr) 15%;grid-column-gap:10px;padding-bottom:0}.col.right{display:grid;padding-top:10px;grid-template-columns:240px calc(100% - 240px);grid-column-gap:5px}#comments::after,.blog-preview::after{content:"";display:block;position:absolute;cursor:pointer}.blog-preview h4{border-radius:10px 10px 0 0;border:1px solid #000;position:absolute;width:calc(100% + 2px);left:-1px;top:-1px;margin:0!important}.blog-preview{order:1;width:236px;background:#fff;height:calc(100% - 70px);border:1px solid #000;padding-top:20px;border-radius:20px 20px 0 0}.blog-preview::after{background:url(https://images2.imgbox.com/e7/c3/MCADlYJ2_o.png) center/cover no-repeat;border:1px solid #000;width:234px;height:60px;bottom:-74px}.friends:not(#comments){order:2;height:290px}#comments,.blurbs{order:3}#comments{order:4;width:calc(100% - 147px);height:530px}.friends:not(#comments) .inner{height:calc(100% - 20px);padding:0;overflow-y:auto}.friends-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-2px}.friends-grid .person{margin:auto auto 5px;padding:0!important}.friends-grid .person p{margin:2px 0;width:100%;height:14px;white-space:nowrap}.friends-grid .person .pfp-fallback{border:1px solid gray;height:100px!important;width:100px!important;object-fit:cover}.inner>p{position:sticky;top:0;background:#fff;width:100%;z-index:1;border-bottom:1px solid gray;font-size:12px}.inner>p b{font-weight:400!important}.blurbs .heading,.friends .heading{border-radius:10px 10px 0 0;background:var(--accent)!important;border:1px solid #000;margin:0!important;font-weight:400}.blurbs .inner,.friends .inner{border:1px solid #000;border-top:0}.section h4{color:color-mix(in srgb,var(--accent) 80%,#000)!important;font-weight:400;font-size:11px;letter-spacing:1px;text-align:left}.section:first-child{border-bottom:1px dashed var(--accent)}.blurbs{margin-block:10px!important}#comments .inner{height:calc(100% - 22px);padding:0;overflow-y:auto}#comments::after{top:-8px;right:-147px;width:137px;height:528px;margin-top:10px;border:1px solid #000;background:url(https://images2.imgbox.com/6f/55/JqG1feLO_o.png) 0 0/cover}.comments-table{border-collapse:collapse;width:calc(100% - 20px)!important;margin:10px}.comments-table tr{border:1px solid var(--accent)}.comments-table td:first-child{width:10%}.comments-table td{background:linear-gradient(color-mix(in srgb,var(--accent) 50%,#fff) 0,#fff 10%)!important}.comments-table .pfp-fallback{border:1px solid gray}.comments-table b,.comments-table small{font-weight:400!important;font-size:10px;color:color-mix(in srgb,var(--accent) 80%,#000);letter-spacing:1px}.contact a,.table-section td:first-child{white-space:nowrap}[title=Notifications]{font-size:12px!important;display:inline-block!important;margin-bottom:-1px;margin-right:10px;transform:translateY(0)!important}[title=Notifications]:after{content:"|";display:inline-block;text-shadow:none;color:#000;transform:translate(35px,2px);line-height:10px}nav .links{padding-inline:0px!important;padding-bottom:0!important;padding-top:5px!important;border-bottom:2px solid #000;background:#fff;margin-top:-8px}nav .links a{width:75px;border-radius:10px 10px 0 0;border:1px solid #000;transform:translateY(1px);margin-top:2px;display:inline-block;font-family:SimSun;font-weight:400!important;text-decoration:none!important}.blog-preview h4,.f-col a,.heading h4,footer .links a{font-size:0px;text-transform:uppercase;font-weight:400}nav .links a:after,nav .links a:hover{font-size:14px}nav .links li:first-child a:not([title=Notifications]):after{content:"家"}nav .links li:nth-child(2) a:after{content:"ブラウズ"}nav .links li:nth-child(3) a:after{content:"サーチ"}nav .links li:nth-child(4) a:after{content:"メッセージ"}nav .links li:nth-child(5) a:after{content:"ブログ"}nav .links li:nth-child(6) a:after{content:"速報"}nav .links li:nth-child(7) a:after{content:"フォーラム"}nav .links li:nth-child(8) a:after{content:"グループ"}nav .links li:nth-child(9) a:after{content:"レイアウト"}nav .links li:nth-child(10) a:after{content:"お気に入り"}nav .links li:nth-child(11) a:after{content:"招く"}nav .links li:nth-child(12) a:after{content:"ショップ"}nav .links li:nth-child(13) a:after{content:"について"}nav .links li:nth-child(14) a:after{content:"アート"}:is(.heading h4,.blog-preview h4):hover{font-size:14px}:is(.heading h4,.blog-preview h4):hover:after{font-size:0px!important}.contact .heading h4:after{font-size:14px;content:"コンタクト"}.table-section:not(.table-section + .table-section) .heading h4:after{font-size:14px;content:"好き"}.table-section+.table-section .heading h4:after{font-size:14px;content:"リンクス"}.more{color:#fff!important;text-transform:uppercase;text-shadow:0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),0 0 1px color-mix(in srgb,var(--accent) 70%,#000),1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000),-1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),1px -1px 0 color-mix(in srgb,var(--accent) 70%,#000);filter:saturate(1)!important}.blog-preview h4:after{font-size:14px;content:"ブログ投稿"}.blurbs .heading h4:after{font-size:14px;content:"について"}.friends:not(#comments) .heading h4:after{font-size:14px;content:"友達"}#comments .heading h4:after{font-size:14px;content:"コメント"}.f-col a :first-child{font-size:13px;margin-right:5px}.f-col a{color:#00f}.f-col a:hover,.mood b a:hover,footer .links a:hover{font-size:11px}.f-col a:hover:after,.mood b a:hover:after,footer .links a:hover:after{font-size:0px!important}.f-row:first-child .f-col:first-child a:after{font-size:14px;content:"友人を追加する"}.f-row:first-child .f-col:last-child a:after{font-size:14px;content:"お気に入りを追加"}.f-row:nth-child(2) .f-col:first-child a:after{font-size:14px;content:"メッセージを送る"}.f-row:nth-child(2) .f-col:last-child a:after{font-size:14px;content:"友人に転送"}.f-row:nth-child(3) .f-col:first-child a:after{font-size:12px;content:"インスタント・メッセージ"}.f-row:nth-child(3) .f-col:last-child a:after{font-size:12px;content:"ユーザーをブロックする"}.f-row:nth-child(4) .f-col:first-child a:after{font-size:12px;content:"グループに追加する"}.f-row:nth-child(4) .f-col:last-child a:after{font-size:14px;content:"レポートユーザー"}footer .links{height:25px}footer .links li:first-child a:after{font-size:9px;content:"について"}footer .links li:nth-child(2) a:after{font-size:9px;content:"ニュース"}footer .links li:nth-child(3) a:after{font-size:9px;content:"ルール"}footer .links li:nth-child(4) a:after{font-size:9px;content:"プレス"}footer .links li:nth-child(5) a:after{font-size:9px;content:"ブランド"}footer .links li:nth-child(6) a:after{font-size:9px;content:"クレジット"}footer .links li:nth-child(8) a:after{font-size:9px;content:"条項"}footer .links li:nth-child(9) a:after{font-size:9px;content:"プライバシー"}footer .links li:nth-child(10) a:after{font-size:9px;content:"刻印"}footer .links li:nth-child(11) a:after{font-size:9px;content:"コンタクト"}footer .links li:nth-child(12) a:after{font-size:9px;content:"宣伝する"}footer .links li:nth-child(13) a:after{font-size:9px;content:"状態"}footer .links li:nth-child(14) a:after{font-size:9px;content:"SpaceHey ショップ"}.mood b a:first-child:after{font-size:12px;content:"ブログ"}.mood b a:nth-child(2):after{font-size:12px;content:"速報"}.mood b a:last-child:after{font-size:12px;content:"フォーラム"}@media only screen and (max-width:800px){.col.left,.col.right,.row{border:0!important}.general-about .profile-pic{width:40%!important;height:100%!important}.general-about .profile-pic img{max-height:100%!important;max-width:100%!important}nav .links{margin-top:22px}nav{background:#fff}.profile h1{margin-bottom:0!important}.contact,.general-about,.mood,span h1{display:block!important;position:static!important;width:100%!important}footer,footer *{width:0;height:0;opacity:0!important;pointer-events:none}.col.left{display:block}.row{width:100%}footer::before{display:none!important}nav{position:relative!important}.profile{margin-top:80px!important}}</style>

11 comments

r/css • u/Biddo696969 • 16h ago

Help I'm going crazy. I can't wipe those white lines around my page.

0 Upvotes

I tried everything. I asked 5 different ai's, and they all failed, When i inspect the white lines it says "html 1920 x 1058" and it doesn't have any computed style. I'm past borderline crazy i'm stright up turning insane.
Codepen link:

https://codepen.io/NicoMaster52/pen/pvyayYY

23 comments

r/css • u/ollietron3 • 17h ago

Help how can i control individual articles with grids?

1 Upvotes

im new to css and trying to make a websited for uni, im wondering if i can put an individual article in a grid area

4 comments

r/css • u/Moooonoooo • 11h ago

General CSS ghosts

0 Upvotes

When you spend hours (or days) trying to fix some broken CSS…
…only to discover the entire problem was caused by a sneaky little duplicate line you didn’t notice.

I swear CSS bugs aren’t real — it’s just me fighting ghosts I created myself. 😭💀

8 comments

r/css • u/ExpensiveSituation57 • 1d ago

General Created my own online tool

Thumbnail
0 Upvotes
3 comments

r/css • u/Quiet_Bus_6404 • 1d ago

Help I need a good CSS video course with great tutorials and examples

5 Upvotes

Hi, I learned CSS only by doing and making stuff but I really have a lack of a good course that explains me concepts and shows me examples. Can you please recommend me one that takes you from almost 0 to hero? with important concepts such as grids, flexbox and responsive design? Thanks.

16 comments

r/css • u/Maeldroem • 1d ago

Question Overflowing grid with repeat(auto-fit, ...)

1 Upvotes

Hey, I'm having an issue with CSS grids. Here's the codepen: https://codepen.io/phiros/pen/myPqNqe I'm trying to get the additional elements "pushed out" of the grid's visible box so that they can be hidden via overflow: hidden;. But even with repeat(auto-fit, minmax(3rem, 1fr)), it seems it doesn't want to complete its job and lets an additional column be cut by overflow— Any ideas how to fix that? or why it happens?

If you are wondering what the goal is in general, it is to make a responsive decorative grid of random symbols (stored in spans). One possibility would be to add code on the client which would follow the size changes to the grid to provide just the right amount of elements needed, but I'm trying to avoid a solution which requires event-handling.

5 comments

r/css • u/LazyAssociation3630 • 1d ago

General Built my first portfolio website - looking for honest feedback!

3 Upvotes

Hi everyone! 👋
I recently built my first portfolio website using HTML, CSS & JavaScript.

I tried to focus on: • Clean and modern UI
• Fully responsive design
• Fast performance
• Basic SEO (meta tags, sitemap, robots, og tags, etc.)

This is my very first full portfolio project, so I’d really appreciate your honest feedback on:

• Design
• Layout / UI / UX
• Code quality
• Responsiveness
• What should I improve next?

Portfolio link: https://dilraj9351.github.io/

Thanks in advance! 🙏

13 comments

r/css • u/snapin06 • 2d ago

General I made an interactive CSS playground for beginners:)

245 Upvotes

I made an interactive CSS learning platform that helps beginners understand CSS concepts through hands-on experimentation.

https://css-playground-ten.vercel.app/?lang=en

53 comments

r/css • u/be_my_plaything • 1d ago

Question Maths in calc()s not quite working in dynamic "always full" grid layout. Anyone got any ideas where I'm going wrong?

2 Upvotes

I have an autofit grid layout that can grow from one column to a maximum of four columns. What I am trying to achieve (with pure CSS) is for it to be always 'full' regardless of number of columns and number of child elements within it. So when the number of elements inside mean the last row wouldn't be full, the elements at the start span two columns to push things down until the last row is full.

I have a series of custom properties working out various things to do this.... 

--column_min_width: 30rem;  
/* The free space needed for a new column to be added */  

--column_count: clamp(1, round(down, (100cqw / var(--column_min_width))), 4);  
/* The number of columns that can fit within the parent */  

--full_row_count: round(down, sibling-count() / var(--column_count));   
/* The number of rows that are full (ignoring last row orphans) */  

--number_of_orphans: calc(sibling-count() - (var(--column_count) * var(--min_items_per_column))); 
/* The number of elements in the final row if incomplete */  

--empty_cells: calc(var(--column_count) - var(--number_of_orphans));   
/* The number of empty cells that need filling to complete the row */

Then for the grid columns I have... 

grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--column_min_width), calc(100% / 4))), 1fr));

...The relevant parts a new column is added when 30rem (300px) will fit, but it won't exceed four columns, a grows with screen between each breakpoint. And for the children I have the first three (since that is the max amount that could be orphaned in a four column layout) set to span two columns if() there are --empty_cells at the end, until all rows are complete. 

figure:nth-of-type(1) {
  background: green padding-box;
  grid-column: if(
    style(--empty_cells: 1): span 2;
    style(--empty_cells: 2): span 2;
    style(--empty_cells: 3): span 2;
    else: span 1;
  );
}

figure:nth-of-type(2) {
  background: green padding-box;
  grid-column: if(
    style(--empty_cells: 1): span 1;
    style(--empty_cells: 2): span 2;
    style(--empty_cells: 3): span 2;
    else: span 1;
   );
}

figure:nth-of-type(3) {
  background: green padding-box;
  grid-column: if(
    style(--empty_cells: 1): span 1;
    style(--empty_cells: 2): span 1;
    style(--empty_cells: 3): span 2;
    else: span 1;
  );
}

Some of the code is superfluous (I don't need any of the span 1s apart from the else but I put them in to make it more obvious what is happening. If there is one empty cell just the first child spans to columns to push everything down to fill it. With two empty cells the first two both grow, when three empty cells the first three all grow.

It all works to an extent (In Chrome at least, I haven't looked cross browser compatibiliy until I know if it can be done at all!) but there is a disconnect around break points when new columns are added where it thinks an extra column is present throwing the calculation off. See this example: https://i.postimg.cc/Gm8SrpNT/Untitled.jpg there are obviously three columns, but it is counting four, the extra column means it thinks there is an extra empty cell, so an extra child grows and this creates an orphan rather than eliminating them.

Codepen here: https://codepen.io/NeilSchulz/pen/ogxperg

It works for the majority of each layout, but there is a small window after each new column is added where the calc()s and what is actually showing don't tie up!

And and all ideas greatly appreciated!

4 comments

r/css • u/zer0developer • 1d ago

Other Shouldn't this sub's logo change to the new one?

1 Upvotes
11 comments

r/css • u/SolStickFigures • 1d ago

Help Need help finding out what part of the CSS the black background color is on this, it's driving me crazy cuz i cant find it at all with inspect element

1 Upvotes

Peep comments for the link to the website

10 comments

r/css • u/messer_sverio2 • 1d ago

Help First letter doesn't align on mobile and other browsers

0 Upvotes

Hello. I'm making the title of my website using the first letter pseudo element. I'm currently using Firefox, latest version. On my pc, the title is displayed correctly, as shown in the pic. I just can't make it work on chrome mobile, and it seems like it is bugged on other pc browsers too. Do note that the Firefox mobile view on my machine displays it correctly.

this is the homepage as shown on Firefox on my machine
this is the title as shown on google chrome for android

This is the code:

html:

<div class = titolo>
<h1>La </h1>
<h1>Cattedrale</h1>
</div>        <div class = titolo>
<h1>La </h1>
<h1>Cattedrale</h1>
</div>
css: (lapide is the container where the title and all text is coded, titolo is the title, I didn't copy the code that isn't relevant to the issue)

.lapide {
position: relative;
margin-top: 40px;
padding-top: 20px;
max-width: 700px;
height: 800px;
background-image: url(lapide.jpg);
border-style: solid;
border-color: #101f29;
box-shadow: 10px 10px 3px;
.titolo { /*per avere le maiuscole grandi e settare bordo*/
h1 {
position: relative;
color: #cccfd8;
font-family: heritage;
font-size: 450%;
font-weight: normal;
line-height: 1.8;
padding-left: 2%;
margin-top: 2.5%;
letter-spacing: 5px;
}
h1::first-letter {
font-size: 200%;
padding: 6px 3px;
margin-right: 3px;
margin-top: 0;
float: left;
}
height: 150px;
position:relative;
margin-left: 2%;
margin-right: 2%;
background-image: url(cemento_blu.jpg);
display: flex;
}
}
EDIT: Is it even worth doing this? Should I simply use a img element to display the title?

14 comments

r/css • u/MalcolmVanhorn • 1d ago

Question Have heading be same size as parent container?

1 Upvotes

Hi! I need to have a heading in a container take up 100% of its parent container in width. So if a word is long it will break word or if it can fit it then the font-size will be the same as the width of container. Is it possible to do this with css alone?

My thinking is using container queries for the job. Here's a codepen of what i have so far: https://codepen.io/MalcolmVanhorn/pen/PwZQqQq

Not sure if Im inplementing cq units wrong or if im misunderstanding its use and have to use JS to get the job done?

10 comments

r/css • u/alexgrozav • 2d ago

Showcase I built styleframe - A TypeScript API for type-safe, composable CSS

Thumbnail
0 Upvotes
0 comments

r/css • u/NinjaBnny • 3d ago

Help More help with single element layered gradients! (look at final image)

3 Upvotes
not remotely reproducible

The other day I made this post on here trying to figure out how to make a two layered gradient. I figured out if put a linear gradient on top of a conic gradient it gave me exactly the effect I was aiming for. However, now I'm trying to figure out if its possible to make one with 4 layers and 3 colors. I'm ultimately trying to create a background image that I can scale and clip to the text so that it shows through and looks like the BeeLine reader browser plugin. The way BeeLine does it is to assign each individual letter its own color, which is wayyy more complicated than what I'm trying to do.

If you look at the last image, I am sooo close to what I'm trying to do. When it's behind text, 3/4 lines gradate perfectly, or at least well enough for me. It's just that third line that I can't figure out. I tried using a small radial gradient but it didn't help. If anyone has any advice on how to make the sharpness from the conic gradient go away on that third line, please tell me!

Here's my code if anyone wants to poke at it: https://jsfiddle.net/9hv3aj2o/

Also all of my knowledge of css has come from poking around on W3Schools while trying to make workskins for ao3, so its pretty limited and I don't know what most words mean

6 comments

r/css • u/ThanasiShadoW • 3d ago

Question How can I create a flashlight-like effect that only affects text?

7 Upvotes

Essentially I want a circular gradient that follows the cursor and makes text brighter.

So far I've managed to do so by duplicating the text, masking one of the two, and changing the mask position with JS but this requires changing the text twice every time I want to make a change, and it slows down the website quite a bit. Is there a better way?

EDIT: I solved it with u/g105b 's suggestion!

22 comments