CSS Battle #68 – Bell #984
Narigo
started this conversation in
CSS Battles
Replies: 4 comments
-
I didn't know you can have pseudo elements on Code Source – 605.33 {453}<div></div>
<style>
body {
background: #191919;
display: grid;
place-items: center;
}
div {
position:relative;
width: 120px;
height: 120px;
background: #E08027;
border-radius: 50% 50% 10px 10px;
}
body::before {
content:'';
position:absolute;
height:170px;
width:50px;
background: linear-gradient(#F2AD43 50%, #824B20 0);
border-radius: 50px;
top: 65px;
left: 175px;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
-
Code Source – score {character count}<div class="top"></div>
<div class="bottom"></div>
<div class="rec"></div>
<style>
body {
background: #191919;
display: grid;
place-items: center;
}
.top {
position: absolute;
width: 50px;
height: 50px;
background: #F2AD43;
border-radius: 50%;
top: 65px;
}
.rec {
background: #E08027;
height: 120px;
width: 120px;
border-radius: 50% 50% 10px 10px;
z-index: 10;
}
.bottom {
position: absolute;
width: 50px;
height: 50px;
background: #824B20;
border-radius: 50%;
top: 185px;
}
</style>
<!-- OBJECTIVE -->
<!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->
<!-- SCORING -->
<!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->
<!-- IMPORTANT: remove the comments before submitting --> |
Beta Was this translation helpful? Give feedback.
0 replies
-
Code Source – 600.48 {706}<div class="b"></div>
<div class="c"></div>
<div class="a"></div>
<style>
body{
background-color: #191919;
margin:0;
width: 400px;
height:300px;
position: relative;
}
.a {
position: absolute;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
width: 120px;
height: 120px;
background: #E08027;
border-radius: 50% 50% 10px 10px;
}
.b{
position: absolute;
height: 52px;
width: 52px;
top: 66px;
left: 174px;
background-color: #F2AD43;
border-radius: 50%;
}
.c{
position: absolute;
height: 50px;
width: 50px;
top: 185px;
left: 176px;
background-color: #824B20;
border-radius: 50%;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
-
First attempt – 601.3 {601}<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
<style>
body {
background: #191919;
display: flex;
flex-direction: column;
place-items: center;
place-content: center;
margin-top: 66px;
}
div {
border-radius: 50%;
position: relative;
}
.top {
width: 50px;
height: 50px;
background: #F2AD43;
}
.middle {
width: 120px;
height: 120px;
background: #E08027;
border-radius: 50% 50% 8% 8%;
top: -76;
}
.bottom {
width: 50px;
height: 50px;
background: #824B20;
top: 69;
}
</style> Refactored – 606.33 {435}<p>
<p b>
<p m>
<style>
* {
background: var(--b, #191919);
border-radius: var(--r, 50%);
}
body {
display: flex;
flex-flow: column;
place-items: center;
margin: 50;
}
p {
width: 50;
height: 50;
position: relative;
--b: #F2AD43;
}
[m] {
width: 120;
height: 120;
--b: #E08027;
--r: 50% 50% 8% 8%;
top: -140;
}
[b] {
--b: #824B20;
top: 37;
}
</style> Minified – 629.09 {275}<p><p b><p m><style>*{background:var(--b,#191919);border-radius:var(--r,50%)}body{display:flex;flex-flow:column;place-items:center;margin:50}p{width:50;height:50;position:relative;--b:#F2AD43}[m]{width:120;height:120;--b:#E08027;--r:50%50%8%8%;top:-140}[b]{--b:#824B20;top:37 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Link to battle:
Let's battle! ⚔️
Copy the code block below to format your comment on the discussion thread:
What others will see:
This will result in a nice hidden bit like so:
Code Source – score {character count}
Beta Was this translation helpful? Give feedback.
All reactions