I am one of those people, who like to think that knowing only HTML and CSS is not enough. I know, it is unfair and I don’t even need to prove anyth...
For further actions, you may consider blocking this person and/or reporting abuse
Clever trick with box shadows. I tried to make shorten the code with linear gradients:
body{background:linear-gradient(90deg,rgba(0,0,0,0) 50%,rgb(93,58,58)0),linear-gradient(rgb(181,224,186)200px, rgb(93,58,58)0)}</p>
Lol it's 2023 and I'm currently in the same boat (I just recently started my web dev journey). I like your post and will be following you and this series : )
Better solution with 54 Characters:
This is a great series; thanks for putting it together
My first solution is 80 Characters:
body bgcolor=#5d3a3a><div style="width:0;margin:-8;border:100px solid #b5e0ba"
when using img instead of div you can do without the "width" attribute.
72 Characters solution.
body bgcolor=#5d3a3a><img style="margin:-8;border:100px solid #b5e0ba"
Can anyone look into PILOT BATTLE?
body {background:#E3516E;display:flex;place-items:center;justify-content:center;}div {padding: 100px;border-radius: 50%;background: conic-gradient(#FADE8B 90deg,#E3516E 90deg 180deg,#F7F3D7 180deg 270deg,#51B5A9 270deg 360deg);}my solution is 249 characters
But i've found some one who did it in way less then that, any idea how?
great solutions. Are there any other sites where I can test my css skills.
Switch the
<img>out for an<a>-tag and you pitch off 2 chars.Thanks for sharing these. My initial answer was the first one. But I worked through the other answers just to see how they work.
Cool!
The more difficult the tasks get, the fewer variations I have. But I still try to find at least the second one.
When i started with the 1st challenge, my instinct was solution 2. After going through the other variations, it really opened my eyes. I got to improve a lot.
Appreciate your article a lot
Thanks! Check out the other challenges as well!
My with 106chars made me learn box-shadow though which will be useful in card
Use the html and body tags
html{background: #5d3a3a;}body{width:50vw;height:50vw;background:#b5e0ba;margin:0}
my solution. I simply style the bodytag, and use * instead of body.
90 char
*{background:#b5e0ba;margin:0;box-shadow:-150px -50px 0 50px #5d3a3a inset}
You can use the vw unit in the height to maintain a square ratio
width: 50vw;
height: 50vw;