Categories
CSS Web development

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

Categories
CSS HTML Web development

CSS Coffee Cup

 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