Can i get this shape with gradients on one element?
https://codepen.io/Miss-Fox/pen/MWRGMZe (this pen has changed, didnt mean to overwirte it)
trying to use one background property with gradients sans the pseudo element. Breaking my brain because i need one gradient to go to the right to have that break on top and seemingly one to go to the bottom to get the solid bottom border. Right now i have the bottom border as a pseudo element but i'm curious if it can be achieved all on the .box background property?
48 Replies
could the bottom border just literally be a
border-bottom: solid red 10px; to cover up the hole. Other thought is maybe a conic-gradient with the hard stops?Oh conic is a good idea . Hmm I didn’t try border-bottom
Wow that worked. I thought it would overwrote the border-box bg property for the whole thing. That does solve this particular example.
I was curious more about gradients in general and having one gradient go to the right with also one that goes to the bottom, and how to accomplish that. I’ve seen the guys in this channel do amazing things with gradients
did one with conic and one with layered linear, have a look: https://codepen.io/jsnkuhn/pen/poBVMVr
Oh gosh it’s that easy (the layered)?! Thank you so much
I did it using 3 linear gradients. https://codepen.io/chooking/pen/qBwKWbe
a hacky option with fieldset/legend
(with this you could even have a border-radius really easy)
interesting, does the legend get a bg of white anywhere or does aligning it center and giving it a width just auto matically make that tranparent space for it?
oh gosh that bacground-size property has my head spinning a bit!
So does each entry before a comma refer to each gradient , in order? so the first
100% var(--border-size) refers to the first gradient, the next to the next gradient, etc? I forget about the background-size and background-position properties so often unless its background-size: cover;it is just transparent, by default it aligns to the left, but as it is an inline-elelement, you can just center it.
https://codepen.io/MarkBoots/pen/gOyKbGO
yea each comma is a layer. from top layer to bottom
Yes. They are in order. Note that when you have multiple backgrounds, the first one is on top and the last one is on the bottom.
I did notice that, about how they layer. I’m so intrigued with gradients and how many ways you can use them but I’m terrible at putting it into practice . Really appreciate everyone’s time and effort 💜
Gotcha I would have never thought to use this element this way. Thank you so much MarkBoots!! 💜
Mark since youve been my hero these last couple days with all my questions, im wondering if youd be able to answer this question about gradients:
in this example https://codepen.io/Miss-Fox/pen/OJGEVVW?editors=0100
i have two boxes. One i define the bg all on the bg property, box-2 i define the gradients on the bg property and the bg-clip values on the background-clip property. why does the second one have a completely green border-top and completely blue border-bottom? when it should be giving me the same result as Box-1? what am i missing?
Yea, that's a strange one. On first sight it looks like it should work the same. But i am on mobile right now, so it's a bit hard to dive into it. I'll come back to this later today
no rush, thank you so much
have a look at
background-origin for the explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-originMDN Web Docs
background-origin - CSS: Cascading Style Sheets | MDN
The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
background-origin: border-box; indeed does the trick, but am still wondering why it isn't necessary in the background shorthand
not sure that i'm following the question. Maybe this is the explanation you're looking for:
Yep, that's it!
Aha that explains it!
Mark, gradient issue again...I've got this solution but i cant figure out why theres that light line around the "transparent" areas. Trying to fiddle with the background position and size but it keeps giving me a repeating gradient. Tried with a conic gradient but i couldnt get the straight lines where i needed the breaks . https://codepen.io/Miss-Fox/pen/ZEZXgWd?editors=1100 attached the reference of what it ShOULD look like.
yea, that happens some times. the green tips are laying on top of the yellow, sometimes there is some spillage. (think that may be a rounding issue or something. nothing much we can do about it really. (if you remove the rotate you'll see it does not happen)
btw, you could add the size and position also to the background shorthand as well.
and a gradient between the same colors could be written differently with only having to declare the color once:
i did the challenge myself as well. but I did it with box-shadows,
codegolved 136 chars
box-shadow was what i first thought of but since im trying to get better with gradients, i figured i should challenge myself.
interesting, i thought i had tried using just one colour before in a gradient and it hadnt worked; mustve been doing something wrong.
and i get confused using everything on the background property right now, i can never get the order right or ill forget the '/' between position and size so still breaking it up into extra props. Not good enough to use cssbattle for min-vhars; just trying to get the thing to look right
youre the best thank you
on this https://cssbattle.dev/play/TcULOISsIjEsam2LQsT1 challenge, i eventually figured it out but was trying to do the left to right gradient then a top to bottom gradient but my bg-size property wasnt working. something like this https://codepen.io/Miss-Fox/pen/ExJeJBw?editors=0110 ; i eventually just flipped the order of the gradients but im wondering why the bg-size didnt work for the first.
The background size is working, but by default backgrounds repeat.
with a background-repeat: no-repeat. it should work as you intended;
But in this scenario i do think swapping the order is easier. in that case the left to right gradient can just fill up the full space and the top layer can cover it top to bottom. So background-sizing is not nessesarry anymore
This is my solution with a single conic background (taking advantage of default background repeat)
codegolfed 68chars
Swapping snd removing size is what I ended up doing I was just baffled why the size wasn't working... of course bg repeat. I am just awful with the bg property , cannot write it as a shorthand or remember/understand all the props.
Like how bg clip and bg origin are different
.
Thanks I struggle with conic gradients when I need psttslrl lines because conic come from the center. I'm on mobile right now but gonna three your solution on a pen later to see how it would work.
Thanks Mark, youre my gradient guru 🤣
ahh okay i see how you used the conic-gradient now, took advantage of the bg repeat and made the conic gradient have a straight line bc of the 75% value.
did you do the latest cssbattle? i assume it can be done with a radial gradient somehow but not sure how.
yea i did, but not only with gradients (only the center circle)
It can be done only with gradients, but you;'ll need a lot
maybe later today i will try it that way
i find its so hard to get the border-radii right in these css battles, this is impressive that youre one of these cssbattle wizrds that can match it without elements. the translate and box shadow is blowing my mind. i dont even know how to read it, looks like you have
how does that selector work? is the first * selecting the html tag and the second selecting the body?
Yep html and body
i played with it a bit, very interesting. so basically before you put any elements in the body, you have 6 elements you can style: html + body, html::before, html::after, body::before, body::after ? or does the html element not have pseudo-elements?
Yea it has.
i did it with gradients, as said, it requiers a lot of them
🤯 woah. Gradient guru 👑 gonna play with this now and see if I can reverse engineer
tried to do todays all on the body with a lot of gradients but the kept messing up the size and position and padding-box, content-box, border etc. But closer than i was last week so thank you for your assistance
Edit: I did it!! i didnt need the clip or origin properties on the body duh and i used the bg property instead of all the individual background-repeat, background-size etc. Thank you Mark!! If you see anything glaringly wrong or bad habits lmk
well done!
the only obvious thing i see it that the nesting is not nessessary. you can just do
ah gotcha makes sense. I also am not good enough to worry about char count on cssbattles, i just try to make the thing work but i did remove all the
no-repeats and just put it into a background-repeat: no-repeat bc theres prob less characters overall. Im so happy, i cant thank you enough ive been struggling with gradients and the bg property for ages, and im finally making some progress now that ive been paying more attention to it.no problem at all.
owh btw, when you have a 100% 100% size, you don't need to set it at all, and you can leave the position off as well. (center by default) it will just will up the available space
Oh awesome good to know , I knew center and 100% was the default but wasn’t sure if setting multiple bgs and using position and size on those would then require an explicit declaration for all. Good to know for sure.
I’ll get there one day. Gonna try for one of those inverted curved pieces that everyone’s always asking about. I always recommend clip-path but cubiq has demonstrated using gradients before. To clarify , the kind of curved inverted menu in this https://youtu.be/SkML640BcoA?si=0ICwKaVgqyC_I428
Kevin Powell
YouTube
Create a clean, modern navigation with HTML & CSS
Looking to step up your CSS game? I have free and premium courses: 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=funkynavigation
🔗 Links
✅ Chrome Canary: https://www.google.com/intl/en_ca/chrome/canary/
✅ Finished code: https://github.com/kevin-powell/funky-nav
✅ Finished version live site (animation will ...
Is it valid syntax to use a
calc() within a background-position or background-size?yea, you can use it everywhere
cool. im getting comfortable using
background w gradients but if im not using fixed pixel sizes like in css battle im wondering how to keep it responsive as the screen size moves. assuming using percentages anc calcs will be the answer
i dont suppose you can use gradients within gradients? something like:
?No, that is not a thing
didnt think so , but would be cool 🤣 struggline with the values on how to make the semi circles take up 100% of the width of the background-size. I have
background-size: 50px 100px; radial-gradient(0% 50%, #F180B6 0 50%, transparent 0) no-repeat); but with the aspect-ratio i cant figure it outsorry i thought i pasted this, i ws actually wondering about the sem-circles in this kind of challenge https://cssbattle.dev/play/fg9g3K0GVSIdaUaIeqL6
I'm close but I cant get the visible half circle part to take up 100% of the width (when the background size is 50px 100px)
CSSBattle
The funnest CSS game for web designers & developers
ah okay
i would just make all background sizes the same (100px 100px) but set the center of the circle at the left / right edge
That’s what I started with, just was wondering if there was a way to make the circle for the width AND height when it’s a 1/2 aspect ratio. Its hard to do calculations when the exact size of the visible semi-circle is not the exact size of the bg-size but if I suppose it’s easier if you know it’s half the width.
I did something where it was almost the right width but not quite and that discrepancy was a pain to calculate
is there a way to get rid of this aliasing on my radial-gradients?
yes, you can make the colorstop a bit les harsh. now we do it on exactly 50%.
now we have 1px to make the color switch happen
btw you can do it with a repeat-x, then you only have to use the gradient once at the bottom position.
and in the shorthand, you can also just use a color without a gradient if you want to fill the whole thing
Ahh minus 1px and yes good point on repeat x.
Ohh I didn't even think of using the orange as part of the radial grade