40 Replies
what have you tried?
if you're just talking about the highlighted secion, where the border is cut off, you can do that like this https://codepen.io/jochemm/pen/xbZzgYJ
but if you're talking about the glass effect, I'm sure there's a thousand tutorials on youtube on how to achieve it. The basics are to use layered box shadows, though you can probably get away with using a background gradient in .outer and putting a few px padding on it. The same corner cutting technique works for box shadows, though
yeah, i have tried using linear gradient approach + pseudo selector (before,after)
jochem's solution is what i had in mind
yeah i'm trying to modify the codepen to make it work for my cases
seems not working
i have also prepare to export it as a background if nothing is working
it doesn't work with opacity
Create a responsive container with a red border and rounded corners...
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
this version works with transparent backgrounds
jochem's version uses the background to hide the corners, mine uses
overflow: hiddenit's working
jochem's version could work too, but you would have to fake the transparency
i'm wondering why the border on below is gone
height
you're also in the wrong boxing model
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing <-- you need the
border-box value
need to reset that first to become content-box ?
you should do it for everything, but you at least need it for the
.outerok yeah added this
*, *::before, *::after {
box-sizing: border-box;
}
owh i understand if we don't use border-box it will count the padding outside from the box
it will not count the border for the size as well
hmm how to do that ?
pre-calculate the color you need
or, if it is for a gradient, you just use the background color of the page
instead of using transparent
owh ok wait i still don't really get it, but i just got it about ur approach so yeah u use overflow hidden to hide top-right & bottom-left by intenationally make them don't use border radius so it will got cut by the overflow
yes, that's my approach
jochem approach covers the corners you want to show with the background color
by having a smaller border radius, the inner border extends past the outer border (since the overflow is visible by default)
hmmm
so do you mean i should make the body bg color same as the inner color ?
with jochem's version, you must
with my version, you do whatever you want
owh ok, yeah but i think my case need have black bg coloron body and transparent bg color in inside
so i think more suitable using ur approach
i think it is the more suitable one
but his solution is absolutely valid as well
ok
anyway sir i have a lot of question about css
it seems there are other's source better than w3school css, do you have any idea/recommendation any kind of website to learn css concept ?
mdn
literally anything is better than w3schools
maybe not ai
eh, yeah, maybe
though it is probably trained on both w3schools and mdn, so it has a decent shot of being better
you're right
ok
@kamekameha please don't send random friend requests to people
yeah i have more question anyway, should i ask on dm
or create new help channel ?
you can ask by opening a new post in #help
do not randomly DM people just because they've helped you before, always ask first
ok2 understand