CSS snipets

content goes here

Simple clover

:root{
  --leaf-colour:#75976a;
  --leaf-width:50px;
  --leaf-copy:-50px; /*the SAME as above but negative aka to FLIP*/
}

.clover-container{
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  width: calc(var(--leaf-width)*4);
  height:calc(var(--leaf-width)*4);
  margin:-25px; /*naturally have a lot of gap so adjust to liking*/
}

.clover {
  position:absolute;
  display:grid; /*grid is used to align leaves*/
  grid-template-columns:repeat(2, calc(var(--leaf-width)*2));
  grid-template-rows:repeat(2, calc(var(--leaf-width)*2));
  width: calc(var(--leaf-width)*4);
  height:calc(var(--leaf-width)*4);
}

.clover-container>.content {
  z-index:5;
  width: calc(var(--leaf-width) + 20%);
  height:calc(var(--leaf-width) + 20%);
  background-color:var(--leaf-colour);
  padding:2%;
  justify-self:center;
  align-content:center;
  text-align:center;
  color:black;
  overflow-y:auto;overflow-x:hidden;
}

.leaf-one, .leaf-two, .leaf-three, .leaf-four{
  position:relative;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 60% / 60% 0% 60% 60%;
}

.leaf-one::before, .leaf-two:before, .leaf-three:before, .leaf-four:before {
  content:"";
  position:absolute;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 60% / 60% 0% 60% 60%;
  top:var(--leaf-copy);left:0px;
  rotate:90deg;
}

.leaf-one {
  rotate:90deg;
  justify-self:start;
  align-self:start;
  left:50%;
  top:25%;
}

.leaf-two {
  rotate:180deg;
  justify-self:end;
  align-self:start;
  top:50%;
  left:-25%;
}

.leaf-three {
  rotate:0deg;
  justify-self:start;
  align-self:end;
  top:-50%;
  left:25%;
}

.leaf-four {
  rotate:-90deg;
  justify-self:end;
  align-self:end;
  top:-25%;
  left:-50%;
}

Flower with stem

:root{
  --leaf-colour:#75976a;
  --flower-colour:#cc5b76;
  --leaf-width:50px;
  --leaf-copy:-50px; /*the SAME as above but negative aka to FLIP*/
}

.flower-n-stem {
  display:grid;
  align-items:center;
  width: calc(var(--leaf-width)*2);
  height:calc(var(--leaf-width)*3);
}

.flower-leaf {
  position:relative;
  width:var(--leaf-width);
  height:var(--leaf-width);
  rotate:90deg;
  background-color:var(--leaf-colour);
  border-radius: 90% 0% 70% 10%;
}

.flower-leaf::before {
  content:"";
  position:absolute;
  width:var(--leaf-width);
  height:var(--leaf-width);
  background-color:var(--leaf-colour);
  border-radius: 70% 0% 90% 10%;
  top:var(--leaf-copy);left:0px;
  rotate:90deg;
}

.flower-leaf::after {
  content:"";
  position:absolute;
  width:calc(var(--leaf-width)*2);
  height:calc(var(--leaf-width)/5) ;
  background-color:var(--leaf-colour);
  top:-4px;left:var(--leaf-copy);
}

.flower-petals {
  z-index:1;
  border-radius:100%;
  position:relative;
  left:25%;
  height:var(--leaf-width);
  width:var(--leaf-width);
  rotate:-17deg;
  background-color:var(--flower-colour); /*this is the centre colour, change if you want*/
  box-shadow:
  20px 0px var(--flower-colour),
  6px 19px var(--flower-colour),
  -16px 12px var(--flower-colour),
  -16px -12px var(--flower-colour),
  6px -19px var(--flower-colour);
}

/*OPTIONAL: make the petals spin*/
/*DELETE if not needed, there's 2 options*/

.flower-n-stem:hover .flower-petals{
  animation:spin 10s infinite linear;
/*this makes the petals spin ON HOVER*/
}

.flower-petals{
  animation:spin 10s infinite linear;
/*this makes the petals spin NO MATTER WHAT*/
}

@keyframes spin {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg)}
}

Ladybug

:root{
  --lady-height:30px;
  --lady-width:90px;
  --lady-radius:40px;
  --lady-bodco:black;
  --lady-wigco:red;
}
.ladybug {
  display:grid;
  grid-template-rows:repeat(2, 1fr);
	grid-template-columns:1fr;
	position:relative;
  margin-bottom:50px;
  margin-top:20px;
}

.lady-head {
	background:var(--lady-bodco);
	height:var(--lady-height);
	width:calc(var(--lady-width)/1.88);
	border-radius:var(--lady-radius);
  justify-self:center;
	align-self:end;
  display:flex;
  justify-content:space-evenly;
}

.lady-head>.antenna{
	background:var(--lady-bodco);
	height:var(--lady-height);
	width:calc(var(--lady-height)/3);
	position:relative;
	border-radius:var(--lady-radius);
  bottom:13px;
}

.lady-body {
	background:var(--lady-bodco);
	height:calc(var(--lady-height)*2.5);
	width:var(--lady-width);
  justify-self:center;
	align-self:start;
	position:absolute;
	top:calc(var(--lady-height) - 15%);
	border-radius:var(--lady-radius);
}

.lady-legs{
	background:var(--lady-bodco);
	height:calc(var(--lady-height)/2.88);
	width:calc(var(--lady-width)*1.15);
	border-radius:var(--lady-radius);
  position:relative;
  justify-self:center;
  top:10px;
  box-shadow:
  0px 20px var(--lady-bodco),
  0px 40px var(--lady-bodco);
  display:grid;
  grid-template-rows:1fr;
	grid-template-columns:repeat(2, 1fr);
}

.lady-wing-left {
	background:var(--lady-wigco);
	height:calc(var(--lady-height)*2.36);
	width:calc(var(--lady-width)/1.9);
	z-index:1;
	position:relative;
  border-radius:130% 10% 20% 100%;
	top:-6px;
  justify-self:end;
	align-self:center;
}

.lady-wing-left::before { /*this is the ladybug's dots*/
  content:'';
  z-index:5;
  background-color:var(--lady-bodco);
  width:calc(var(--lady-width)/4);
  height:calc(var(--lady-width)/4);
  border-radius:100%;
  left:3px;
  top:20px;
  position:absolute;
  box-shadow:
  17px 27px var(--lady-bodco),
  33px -25px var(--lady-bodco);
}

.lady-wing-right {
	background:var(--lady-wigco);
	height:calc(var(--lady-height)*2.36);
	width:calc(var(--lady-width)/1.9);
	z-index:1;
	position:relative;
  border-radius:130% 10% 20% 100%;
  top:-6px;
  justify-self:start;
	align-self:center;
  transform:rotateY(180deg);
}

.lady-wing-right::before { /*this is the ladybug's dots*/
  content:'';
  z-index:5;
  background-color:var(--lady-bodco);
  width:calc(var(--lady-width)/4);
  height:calc(var(--lady-width)/4);
  border-radius:100%;
  left:3px;
  top:20px;
  position:absolute;
  box-shadow:
  17px 27px var(--lady-bodco),
  33px -23px var(--lady-bodco);
}

/*OPTIONAL: ladybug wing move when hover*/
.ladybug:hover .lady-wing-left {
  animation:left-wing 1s infinite alternate ease-in-out;
}

.ladybug:hover .lady-wing-right {
  animation:right-wing 1s infinite alternate ease-in-out;
}

@keyframes left-wing {
  0% {rotate:0deg;top:-6px;}
  100% {rotate:10deg;top:-6px;left:-1.5px;}
}
@keyframes right-wing {
  0% {rotate:0deg;top:-6px;}
  100% {rotate:-10deg;top:-6px;right:-1.5px;}
}