Playing with CSS a bit
I played around with CSS a lot today and yesterday. I am not entirely sure why now, but I think it’s largely because I think I finally understood position:relative/absolute and overflow:hidden properly...
I wanna post two things here that came out of this. Neither is particularly impressive by itself, but only a few days ago I would not have thought this would be possible in HTML and CSS alone (no JavaScript, no SVG, no canvas).
#1: A rainbow. This uses a combination of box-shadow (with and without inset) and border-radius. (No need to comment on the fact that orange is missing, I already know.)
#2: A speech bubble. I would not have thought it possible to have an ellipse in CSS. There is indeed no direct command for ellipses, but an elliptical shape emerges if you use border-radius with differing border widths. overflow:hidden seems to allow me to clip anything to the shape of such an ellipse.
I wanna post two things here that came out of this. Neither is particularly impressive by itself, but only a few days ago I would not have thought this would be possible in HTML and CSS alone (no JavaScript, no SVG, no canvas).
#1: A rainbow. This uses a combination of box-shadow (with and without inset) and border-radius. (No need to comment on the fact that orange is missing, I already know.)
#2: A speech bubble. I would not have thought it possible to have an ellipse in CSS. There is indeed no direct command for ellipses, but an elliptical shape emerges if you use border-radius with differing border widths. overflow:hidden seems to allow me to clip anything to the shape of such an ellipse.