Tag: CSS Art

Web development

CSS Shiny Diamond

Post author By Lena Stanley
Post date January 21, 2022

HTML & CSS Shiny Diamond — Pure CSS Shiny Diamond

CSS Shiny Diamond

To learn how to create the CSS Shiny Diamond follow the steps below and watch the video tutorial:

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="diamond-container">
<div class="diamond">
  <div class="diamond-top"></div>
  <div class="diamond-bottom"></div>
</div>
  <div class="sparkles">
    <div class="one">✨</div>
    <div class="two">✨</div>
  </div>
</div>

Emoji source: Emojipedia

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh;
  background-color: #15616d;
}

.diamond-container {
  position: relative;
}

Style the diamond:

.diamond {
  position: relative;
  left:-100px;
  top:-50px;
  filter: drop-shadow(0 0 100px white);
}

.diamond-top {
  position: relative;
}

.diamond-top:before, .diamond-top:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-style: solid;
  top:0;
}

.diamond-top:before {
  border-color: transparent transparent #b4e3e6 transparent;
  border-width: 0 25px 30px 25px;
  filter: drop-shadow(50px 0 #94d7d9) drop-shadow(50px 0 #b4e3e6);
}

.diamond-top:after {
  border-color: #d8f8f9 transparent transparent transparent;
  border-width: 30px 25px 0 25px;
  left:25px;
  filter: drop-shadow(50px 0 #d8f8f9);
}

.diamond-bottom, .diamond-bottom:before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.diamond-bottom {
  left: 0;
  top: 30px;
  border-color: #70ced4 transparent transparent transparent;
  border-width: 100px 75px 0 75px;  
}

.diamond-bottom:before {
  content:"";
  border-color: #b4e3e6 transparent transparent transparent;
  border-width: 100px 25px 0 25px;  
  top:-100px;
  left:-25px;
}

.diamond-bottom:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 100px;
  height:10px;
  background-color: #b4e3e6;
  top:-135px;
  left:-50px;
}

Style and animate the sparkles:

.sparkles {
  z-index:2;
  position: absolute;
}

.one {
  position:absolute;
  font-size:40px;
  color: transparent;
  text-shadow: 0 0 white, -115px -75px white;
  animation: shine .5s linear infinite;
}

.two {
  position: absolute;
  color: transparent;
  font-size: 25px;
  left:-65px;
  top:45px;
  text-shadow: 0 0 white, 55px -115px white;
  animation: shine .5s linear infinite .25s;
}

@keyframes shine {
  from {opacity:1;}
  to {opacity:0;}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS diamond ring (open/ close on click)

CSS Paper Plane Animation

CSS Background Change Animation – Day & Night

Tags CSS, CSS animation, CSS Art, diamond

Web development

CSS Coffee Cup

Post author By Lena Stanley
Post date October 21, 2021

CSS Coffee Cup

To create the CSS Coffee Cup follow the steps below and watch the video tutorial:

Demo:

*to see the CSS Coffee Cup on the website click here.

Step1.

Add HTML

<div class="coffeecup">
  <div class="cup"></div>
  <div class="shadow"></div>
  <div class="label"></div>
  <div class="cover"></div>
  <div class="top"></div>
  <div class="steam"></div>
  <div class="logo"></div>
  <div class="eyes"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #faedcd;
}

.coffeecup {
  position: relative;
}

Style the cup:

.coffeecup:before {
  content:"";
  position: absolute;
  width: 200px;
  height: 10px;
  border-radius:10px;
  background-color: #d4a373;
  top:191px;
  left:-65px;
}

.cup {
  position: relative;
  height:0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 150px solid #fefae0;
  width: 120px;
}

.cup:before {
  content:"";
  position: absolute;
  background-color: #fefae0;
  width: 120px;
  height: 50px;
  border-radius: 0 0 15px 15px;
  top:-5px;
  left:0;
}

.cup:after {
  content:"";
  position: absolute;
  border-radius: 0 0 0 15px;
  background-color: rgba(0,0,0,0.09);
  width: 40px;
  height: 40px;
  top:5px;
}

.shadow {
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 2px solid transparent;
  border-top: 40px solid rgba(0,0,0,0.09);
  width: 40px;
  top:10px;
  left:0;
}

.label {
  position: absolute;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #e9edc9;
  width: 125px;
  top:35px;
  left:-4px;
}

.label:before {
  content:"";
  position: absolute;
  height:0;
  border-right: 0px solid transparent;
  border-left: 7px solid transparent;
  border-top: 130px solid #ccd5ae;
  width: 45px;
  top:-130px;
  left:-7px;
}

.label:after {
  content:"";
  position: absolute;
  width: 120px;
  background-color: rgba(0,0,0,0.09);
  height: 5px;
  left:2px;
}

.cover {
  position: absolute;
  width: 150px;
  height: 25px;
  background-color: #fefae0;
  top:-15px;
  left:-10px;
  border-radius:5px;
}

.cover:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width:130px;
  height:5px;
  top:25px;
  left:10px;
}

.cover:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  width: 47px;
  height: 25px;
  border-radius: 5px 0 0 5px;
}

.top {
  position: absolute;
  background-color: #fefae0;
  width: 130px;
  height: 20px;
  border-radius: 25px 25px 0 0;
  left:0;
  top:-35px;
}

.top:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.09);
  border-radius: 25px 0 0 0;
  width:34px;
  height: 20px;
}

CSS Coffee Cup

Add the steam:

.top:after {
  content:"";
  position: absolute;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  height: 20px;
  width: 40px;
  top:-40px;
  left:150px;
  box-shadow: -20px -80px rgba(255, 255, 255,0.5), -170px -40px rgba(255, 255, 255,0.5);
}

.steam {
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  border-radius:20px;
  top:-55px;
  left:70px;
  box-shadow: 0 -20px rgba(255, 255, 255,0.5), 10px -40px rgba(255, 255, 255,0.5), 0 -60px rgba(255, 255, 255,0.5), -25px -80px rgba(255, 255, 255,0.5);
}

.steam:before {
  content:"";
  position: absolute;
  width: 70px;
  height: 20px;
  background-color: #faedcd;
  border-radius:20px;
  left:-50px;
  box-shadow: 85px 0 #faedcd, 100px -40px #faedcd, 18px -40px #faedcd, 0px -80px #faedcd, 82px -80px #faedcd;
}

.steam:after {
  content:"";
  position: absolute;
  border-radius: 20px;
  width: 110px;
  height: 20px;
  background-color: rgba(255, 255, 255,0.5);
  top:-100px;
  left:-60px;
}

CSS Coffee take away

Add the logo:

.logo {
  position: absolute;
  overflow: hidden;
  background-color: #333;
  width: 40px;
  height: 20px;
  border-radius: 0 0 50px 50px;
  top:100px;
  left:75px;
}

.logo:before {
  content:"";
  position: absolute;
  background-color: #a4161a;
  width:30px;
  height: 20px;
  border-radius:50%;
  top:7px;
  left:2px;
}

.eyes {
  position: absolute;
}

.eyes:before, .eyes:after {
  content:"";
  position: absolute;
  width:18px;
  height: 18px;
  border-right: 5px solid #333;
  border-top: 5px solid #333;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius:100px;
  transform: rotate(-45deg);
  top:-70px;
}

.eyes:before {
  left:95px;
}

.eyes:after {
  left:65px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Coffee Express Animation

CSS Coffee To Go

CSS Steaming Coffee

Tags coffee, CSS, CSS Art, HTML