Categories
CSS HTML Web development

CSS diamond ring (open/ close on click)

CSS engagement ring

To learn how to create the CSS diamond ring (open/ close on click) follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="jewellery-box">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
  <div class="bottom"></div>
  <div class="inner-top"></div>
  <div class="inner-bottom"></div>
  <div class="text">Will You Marry Me?</div>
  <div class="diamond-ring">
    <div class="diamond"></div>
    <div class="band"></div>
    <div class="inner"></div>
    <div class="details"></div>
  </div>
</div>

Step2.

Add CSS

Import the font (optional):

Font source: Goole Fonts. To see how to import the google font into an HTML document click here.

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

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

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

.jewellery-box {
  position: relative;
  filter: drop-shadow(0 0 30px rgba(0,0,0,0.4));
}
.diamond-ring {
  position: relative;
}

Hide the input checkbox:

input#open {
  display: none;
}

Style the diamond ring:

.diamond {
  position: relative;
  border-style: solid;
  border-color: transparent transparent #27c3f3 transparent;
  border-width: 0 5px 5px 5px;
  height: 0;
  width: 15px; 
  z-index:1;
}
.diamond:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #27c3f3 transparent transparent transparent;
  border-width: 15px 12.5px 0 12.5px;
}

.diamond:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: #7fd4f9 transparent transparent transparent;
  border-width: 15px 7px 7px;
  width:0;
  height:0;
  left:0.5px;
  top:5px;
}

.band {
  position: absolute;
  width:45px;
  height:45px;
  border: 5px solid #fed53f;
  border-radius: 50%;
  top:15px;
  left:-15px;
  z-index:1;
}

.band:before, .band:after {
  content:"+";
  position: absolute;
  color:rgba(255,255,255,.5);
}

.band:before {
  left:5px;
  top:-15px;
  font-size:7px;
  text-shadow: 20px -12px;
  animation: shine .5s linear infinite;
}

.band:after {
  left:32px;
  top:-12px;
  font-size:9px;
  text-shadow: -19px -18px;
  animation: shine .5s linear infinite .2s;
}

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

Style the jewellery box:

.inner {
  position:absolute;
  background-color: #cf7b4a;
  width:70px;
  height:15px;
  z-index:3;
  left:-20px;
  top:55px;
  border-radius:20px 20px 0 0;
}

.open {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width: 170px;
  height:40px;
  border-radius: 30px 30px 0 0;
  left:-70px;
  top:-10px;
  transition: .1s;
  cursor: pointer;
}

.bottom {
  position: absolute;
  z-index:5;
  background-color: #81171b;
  width:170px;
  height:40px;
  box-shadow: 0 -10px #540804;
  border-radius: 0 0 15px 15px;
  top:40px;
  left:-70px;
  transition: .1s;
}

.bottom:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:10px;
  height:10px;
  background-color: #ad2e24;
  top:13px;
  left:13px;
  box-shadow: 15px 0 #ad2e24, 30px 0 #ad2e24, 45px 0 #ad2e24, 60px 0 #ad2e24, 75px 0 #ad2e24, 90px 0 #ad2e24, 105px 0 #ad2e24, 120px 0 #ad2e24, 135px 0 #ad2e24;
}

.inner-top {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #912820 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-top:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 50px 10px;
  border-color: transparent transparent #ad2e24 transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.inner-bottom {
  position: absolute;
  width:150px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #732019 transparent;
  transition: .1s;
  transform-origin: top;
  left:-70px;
  top:40px;
  transform: rotateX(85deg);
}

.inner-bottom:before {
  content:"";
  position: absolute;
  width:130px;
  height:0;
  border-style: solid;
  border-width: 0 10px 60px 10px;
  border-color: transparent transparent #cf7b4a transparent;
  transition: .1s;
  transform-origin: top;
  left:0;
  top:0;
}

.details {
  position: absolute;
  width:132px;
  background-color: #cf7b4a;
  border-radius:20px 20px 0 0;
  height:10px;
  left:-51px;
  top:35px;
}

Make the box open and close:

#open:checked + .open {
  transform: translateY(-40px);
}

#open:checked ~  .bottom {
  transform: translateY(45px);
}

#open:checked ~  .inner-top {
  transform: rotateX(180deg);
}

#open:checked ~  .inner-bottom {
  transform: rotateX(-40deg);
}

Style and animate the text:

.text {
  position: absolute;
  color: white;
  font-family: 'Mochiy Pop P One', sans-serif;
  font-size: 30px;
  transition: .3s;
  width:300px;
  text-align: center;
  top:-165px;
  left:-130px;
  opacity:0;
}

#open:checked ~  .text {
  opacity:1;
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Heart in Envelope

CSS Valentine’s Day Card

CSS Heart Shape & Heartbeat Animation

Categories
CSS HTML Web development

CSS Heart in Envelope

CSS Heart in Envelope

To learn how to create the CSS Heart in Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="valentines-day">
  <div class="envelope"></div>
  <div class="heart"></div>
  <div class="text">HAPPY </br>VALENTINE'S </br>DAY!</div>
  <div class="front"></div>
  <div class="text2">- hover over the envelope - </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: #f1e3d3;
  overflow: hidden;
}
.valentines-day {
  position: relative;
  cursor: pointer;
}

Style the envelope:

.envelope {
  position: relative;
  filter: drop-shadow(0 0 25px rgba(0,0,0,.3));
}

.envelope:before {
  content:"";
  position: absolute;
  width:254px;
  height:254px;
  background-color: #ff9494;
  transform: rotate(-45deg);
  border-radius: 0 15px 0 0;
  left:-37px;
  top:-82px;
}

.envelope:after {
  content:"";
  position: absolute;
  background-color: #ff9494;
  width:360px;
  height:225px;
  left:-90px;
  top:45px;
}
CSS Envelope Animation

Add and style the heart:

.heart {
  position: relative;
  background-color: #e01911;
  display: inline-block;
  height: 180px;
  top:50px;
  left:0;
  transform: rotate(-45deg);
  width:180px;
  filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3));
  transition: .5s;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: #e01911;
  border-radius:50%;
  height: 180px;
  width: 180px;
  position: absolute;
  }
  
.heart:before {
  top:-100px;
  left:0;}
  
.heart:after {
  left:100px;
  top:0;}
CSS Heart in Envelope Animation

Add the front part of the envelope:

.front {
  position: absolute;
  width:0;
  height:0;
  border-right: 190px solid #fbd2d2;
  border-top: 113px solid transparent;
  border-bottom: 113px solid transparent;
  top:44px;
  left:80px;
  z-index:4;
}

.front:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 190px solid #fbd2d2;
  border-top: 113px solid transparent;
  border-bottom: 113px solid transparent;
  top:-113px;
  left:-170px;
}

.front:after {
  width:0;
  height:0;
  position: absolute;
  content:"";
  border-bottom: 150px solid #fce7e9;
  border-right:180px solid transparent;
  border-left: 180px solid transparent;
  top:-36px;
  left:-170px;
}
CSS Heart Animation

Style the text:

.text {
  position: absolute;
  font-family: arial;
  letter-spacing:5px;
  text-align: center;
  color: white;
  z-index:2;
  top:80px;
  left:15px;
  transition: .5s;
}
.text2 {
  position: absolute;
  top:275px;
  color: white;
  font-family: brush script mt;
  text-align: center;
  width:195px;
  font-size:20px;
}

Add transition on hover:

.valentines-day:hover .heart {
  transform: translateY(-50px) rotate(-45deg);
}

.valentines-day:hover .text {
  transform: translateY(-50px);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Valentine’s Day Card

CSS Heart Shape & Heartbeat Animation

CSS Valentine’s Day Animation (Heartbeat)

Categories
CSS HTML Web development

CSS Neon Button/ Neon Effect

CSS Neon Button/ Neon Effect

To learn how to create the CSS Neon Button/ Neon Effect follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Neon Button on the website click here.

Step1.

Add HTML

<div class="button">HOVER ME</div>

Step2.

Add CSS

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

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

Style the button:

Note: You can achieve the neon effect by using CSS filter property or CSS box-shadow property/ text-shadow property.

.button {
  color: #db3eb1;
  border: 6px solid #db3eb1;
  border-radius:15px;
  padding: 15px 25px;
  font-size: 30px;
  font-family: tahoma;
  letter-spacing:5px;
  cursor: pointer;
  font-weight: bold;
  filter: drop-shadow(0 0 15px #db3eb1) drop-shadow(0 0 50px #db3eb1) contrast(2) brightness(2);
  transition: .5s;
}

.button:hover {
  color: black;
  background-color: #db3eb1;
  filter: drop-shadow(0 0 20px #db3eb1) contrast(2) brightness(2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Shiny Button

CSS Button Fill Effect on Hover

Scroll To Top Button (smooth scroll effect)

Categories
CSS HTML JQuery Web development

CSS Text Drop Animation

CSS Text Drop Animation

To learn how to create the CSS Text Drop Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="text-drop">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l2">l</div>
  <div class="o">o</div>
  <div class="smile">:)</div>
</div>

Step2.

Add CSS

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

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

Style and animate the text:

#text-drop {
  position: relative;
  display: flex;
  font-size:100px;
  font-family: arial;
  font-weight: 900;
}

.h {
  opacity:0;
  animation: drop .4s linear forwards;
  color: #9b5de5;
}

.e {
  opacity:0;
  animation: drop .4s linear forwards .2s;
  color: #f15bb5;
}

.l {
  opacity:0;
  animation: drop .4s linear forwards .4s;
  color: #fee440;
}

.l2 {
  opacity:0;
  animation: drop .4s linear forwards .6s;
  color: #00bbf9;
}

.o {
  opacity:0;
  animation: drop .4s linear forwards .8s;
  color: #00f5d4;
}

@keyframes drop {
  0% {transform: translateY(-200px) scaleY(0.9); opacity: 0;}
  5% {opacity: .7;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-17px) scaleY(.9); opacity: 1;}
  75% {transform: translateY(-22px) scaleY(.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

.smile {
  opacity:0;
  animation: drop .4s linear forwards 1.2s;
  color: #9b5de5;
  font-size:90px;
  margin-left:15px;
}

Step3. (optional)

Add jQuery

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#text-drop').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Slide Effect

CSS Bouncing Text Animation

CSS Mirror/ Reflection Text Effect

Categories
CSS HTML Web development

CSS Happy New Year Animation (fireworks)

CSS Fireworks

To learn how to create the CSS Happy New Year Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Happy New Year Animation (fireworks) on the website click here.

Step1.

Add HTML

<div class="happy-new-year">
  <div class="circle">
    <div class="clock-bottom"></div>
  </div>
  <div class="clock-middle">
    <div class="clock-face"></div>
  </div>
  <div class="clock-top">
    <div class="roof"></div>
    <div class="deco"></div>
    <div class="sides"></div>
  </div>
  <div class="clouds"></div>
  <div class="fireworks">
    <div class="one"></div>
  </div>
    <div class="fireworks-2">
    <div class="two"></div>
    </div>
      <div class="fireworks-3">
    <div class="two"></div>
      </div>
   <div class="fireworks-4">
    <div class="one"></div>
      </div>
  <div class="text">Happy 2022!</div>
    </div>

Step2.

Add CSS

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

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #1d3557;
  overflow: hidden;
}

.happy-new-year {
  position: relative;
}

Add the circle and clouds (background):

.circle {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #000814;
}

.clouds {
  position: absolute;
  top:0;
  left:0;
}

.clouds:before, .clouds:after {
  content:"";
  position: absolute;
  background-color: #001d3d;
}

.clouds:before {
  width: 100px;
  height: 40px;
  border-radius: 30px;
  top:130px;
  left:-40px;
  box-shadow: 275px 40px #001d3d;
}

.clouds:after {
  width:50px;
  height: 50px;
  left:-10px;
  top:110px;
  border-radius:50%;
  box-shadow: 270px 40px #001d3d;
}
CSS Fireworks

Style the clock:

.clock-bottom {
  position: absolute;
  width: 100px;
  height:100px;
  background-color: #dd904a;
  top:240px;
  left:95px;
  border: 5px solid #333;
}

.clock-bottom:before {
  content:"";
  position: absolute;
  background-color: #333;
  width: 20px;
  height:100px;
  border-radius:30px;
  top:10px;
  left:10px;
  box-shadow: 30px 0 #333, 60px 0 #333;
}

.clock-bottom:after {
  content:"";
  position: absolute;
  background-color: #9c5221;
  width:12px;
  height:100px;
  border-radius: 30px;
  left:14px;
  top:14px;
  box-shadow: 30px 0 #9c5221, 60px 0 #9c5221;
}

.clock-middle {
  position: absolute;
  width:100px;
  height:100px;
  background-color: #dc8f4a;
  border: 5px solid #333;
  top:135px;
  left:95px;
  z-index:1;
}

.clock-middle:before {
  content:"";
  position: absolute;
  border: 5px solid #333;
  width:80px;
  height:80px;
  top:5px;
  left:5px;
}

.clock-middle:after {
  content:"";
  position: absolute;
  border-radius:50%;
  border: 5px solid #333;
  height:75px;
  width: 75px;
  top:7px;
  left:7px;
  background-color: #f9fcc5;
}
.clock-top {
  position: absolute;
  width:100px;
  height:20px;
  border: 5px solid #333;
  background-color: #d88e4a;
  top:110px;
  left:95px;
}

.clock-top:before {
  content:"";
  position: absolute;
  width:71px;
  height:0;
  border-top: 30px solid transparent;
  border-bottom: 50px solid #333;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  top:-80px;
  left:-5px;  
}

.clock-top:after {
  position: absolute;
  content:"";
  border: 5px solid #333;
  background-color: #d88e4a;
  width:63px;
  height:25px;
  top:-80px;
  left:14px;
}

.roof {
  position: absolute;
  height:0;
  width:0;
  border-bottom: 100px solid #333;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  top:-175px;
  left:15px;
}

.roof:before, .roof:after {
  content:"";
  background-color: #333;
  position: absolute;
}

.roof:before {
  width:2px;
  height:20px;
  left:-54px;
  top:150px;
  box-shadow: 106px 0 #333, 18px -75px #333, 88px -75px #333;
}

.roof:after {
  border-radius:50%;
  width:5px;
  height: 5px;
  left:-55.5px;
  top:145px;
  box-shadow: 106.5px 0 #333, 18px -75px #333, 88px -75px #333;
}

.deco {
  position: absolute;
  background-color: #965123;
  width: 10px;
  height: 10px;
  top:5px;
  left:7px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123, 60px 0 #965123, 75px 0 #965123;
  z-index:3;
}

.deco:before {
  content:"";
  position: absolute;
  background-color: #965123;
  width:10px;
  height: 13px;
  top:-75px;
  left:15px;
  box-shadow: 15px 0 #965123, 30px 0 #965123, 45px 0 #965123;
}

.sides {
  position: absolute;
  background-color: #333;
  width:30px;
  height: 100px;
  left:-30px;
  top:25px;
  box-shadow:130px 0 #333;
}

.sides:before {
  content:"";
  position: absolute;
  width:20px;
  height: 90px;
  background-color: #dc904c;
  left: 5px;
  top:5px;
  box-shadow:130px 0 #dc904c;
}
CSS Clock New Year

Style and animate the clock face:

.clock-face {
  position: absolute;
  background-color: #333;
  border-radius:50%;
  width:15px;
  height:15px;
  left: 50%;
  top: 50%;
  z-index:2;
  transform: translate(-50%, -50%);
}

.clock-face:before, .clock-face:after {
  content:"";
  position: absolute;
  background-color: #333;
  border-radius:30px;
  transform-origin: right;
}

.clock-face:before {
  width:30px;
  height: 5px;
  top:5px;
  left:-23px;
  transform: rotate(-50deg);
  animation: rotate 3s linear forwards;
 
}

@keyframes rotate {
  from {transform: rotate(-50deg);}
  to {transform: rotate(450deg);}
}

.clock-face:after {
  content:"";
  position: absolute;
  width: 25px;
  height:5px;
  top:5px;
  left:-18px;
  animation: rotateTwo 3s linear forwards;
}

@keyframes rotateTwo {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

Add fireworks:

.fireworks, .fireworks-2, .fireworks-3, .fireworks-4 {
  position: absolute;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.fireworks {
  top:-60px;
  left:-70px;
}

.fireworks-4 {
  left: 330px;
  top:170px;
  transform: scale(1.3);
}

.fireworks-3 {
  top:-100px;
  left:250px;
  transform: scale(0.7);
}

.fireworks-2 {
  top:50px;
  left:-150px;
  transform: scale(1.2);
}

.one, .one:before, .one:after, .two, .two:before, .two:after{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left:50%;
  top:50%;
  opacity:0;
  transform: translate(-50%,-50%);
}

.one {
  border: 5px dotted #ffd166;
  animation: show 1.2s ease infinite 3s;
}

.two {
  border: 5px dotted #118ab2;
  animation: show 1.2s ease infinite 3.2s;
}

@keyframes show {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:100px; width: 100px;opacity:1;}
}

.one:before {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-2 1.2s ease infinite 3.2s;
}

.two:before {
  content:"";
  border: 5px dotted #ffd166;
  animation: show-2 1.2s ease infinite 3.4s;
}

.one:after {
  content:"";
  border: 5px dotted #118ab2;
  animation: show-3 1.2s ease infinite 3.4s;
}

.two:after {
  content:"";
  border: 5px dotted #ef476f;
  animation: show-3 1.2s ease infinite 3.6s;
}

@keyframes show-2 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:130px; width: 130px;opacity:1;}
}

@keyframes show-3 {
  0%, 100% {height:10px;width:10px;opacity:0;}
  50% {height:160px; width: 160px;opacity:1;}
}

Style and animate the text:

.text {
  width: 300px;
  text-align: center;
  color: white;
  font-size: 40px;
  position: absolute;
  top:305px;
  z-index:10;
  font-family: tahoma;
  left:0;
  opacity:0;
  white-space: nowrap;
  animation: text 4s ease forwards 4s;
}

@keyframes text {
  0% {opacity:0;}
  100% {opacity:1;}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Champagne Glass Animation

CSS Party drinks

CSS Birthday Animation

Categories
CSS HTML Web development

CSS Christmas Animation

CSS Christmas Animation

To learn how to create the CSS Christmas Animation follow the steps below.

Demo:

*to see the CSS Christmas Animation on the website click here.

Step1.

Add HTML

<div class="merry-christmas">
  <div class="window">
    <div class="christmas-tree">
      <div class="star"></div>
      <div class="christmas-lights"></div>
      <div class="balls"></div>
    </div>
    <div class="curtains"></div>
    <div class="window-details"></div>
  </div>
  <div class="snow">
    <div class="snowflakes"></div>
    <div class="snowflakes-2"></div>
    <div class="snowflakes-3"></div>
    <div class="snowflakes-4"></div>
    <div class="snowflakes-5"></div>
  </div>
  <div class="bricks"></div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height:100vh;
  align-items: center;
  justify-content: center;
  background-color: #00111c;
  overflow: hidden;
}

.merry-christmas {
  position: relative;
}

Style the window:

.window {
  position: relative;
  overflow: hidden;
  width:300px;
  height:220px;
  border: 10px solid #001523;
  background-color: #001a2c; 
}
.window-details {
 position: absolute;
 z-index:3;
 width:300px;
 height:5px;
 background-color: #001523;
 top:115px;
}

.window-details:before, .window-details:after {
  content:"";
  position: absolute;
  background-color: #001523;
  height: 220px;
  top:-115px;
}

.window-details:before {
  width:20px;
  left: 135px;
}

.window-details:after {
  width:5px;
  left:65px;
  box-shadow: 160px 0 #001523;
}
CSS Christmas Tree Window

Add Christmas Tree and curtains:

.christmas-tree, .christmas-tree:before {
  position: absolute;
  width:100px;
  height:0;
  border-bottom: 50px solid #242c1d;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}

.christmas-tree {
  top: 170px;
  left:120px;
}

.christmas-tree:before {
  content:"";
  top:-40px;
  left:-30px;
}

.christmas-tree:after {
  content:"";
  height:0;
  position: absolute;
  border-bottom: 90px solid #242c1d;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  top:-130px;
  left:-20px;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 18px solid #ffba08;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-140px;
  left:25px;
  z-index:1;
    }

.star:before {
      border-bottom: 18px solid #ffba08;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -10px;
      left: -17px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 18px solid #ffba08;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

.christmas-lights, .christmas-lights:before, .christmas-lights:after {
  position: absolute;
  width:5px;
  height: 5px;
  background-color: #ffba08;
  border-radius:50%;
}

.christmas-lights {
  top:-80px;
  left:7px;
  z-index:1;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08;
  animation: light 17s linear infinite;
}

.christmas-lights:before {
  content:"";
  top:55px;
  left:-20px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08, 45px 18px #ffba08, 50px 20px #ffba08, 55px 22px #ffba08, 60px 24px #ffba08, 65px 26px #ffba08, 70px 28px #ffba08,75px 30px #ffba08, 80px 32px #ffba08, 85px 34px #ffba08, 90px 36px #ffba08, 95px 38px #ffba08, 100px 40px #ffba08, 105px 42px #ffba08, 110px 44px #ffba08, 115px 46px #ffba08, 120px 48px #ffba08, 125px 50px #ffba08;
}

.christmas-lights:after {
  content:"";
  top:110px;
  left:-28px;
  box-shadow:5px 2px #ffba08, 10px 4px #ffba08, 15px 6px #ffba08, 20px 8px #ffba08, 25px 10px #ffba08, 30px 12px #ffba08, 35px 14px #ffba08, 40px 16px #ffba08;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
  50% {filter: drop-shadow(0 0 10px #fff) brightness(2) hue-rotate(360deg) saturate(7);}
  100% {filter: drop-shadow(0 0 8px #fff) brightness(1.2) hue-rotate(0) saturate(7);}
}

.balls {
  position: absolute;
  border-radius: 50%;
  height:15px;
  width: 15px;
  background-color: #b62922;
  box-shadow: 40px 30px #003488, 75px -15px #b62922, 45px -40px #b62922, 10px -55px #003488, 30px -95px #b62922, 65px -80px #003488;
  z-index:2;
}

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

.curtains:before, .curtains:after {
  content:"";
  position: absolute;
  background-color: rgba(0, 33, 55,0.6);
  width: 200px;
  height: 250px;
  top:-15px;
}

.curtains:before {
  border-radius: 0 0 50% 0;
  left:-100px;
}

.curtains:after {
  border-radius: 0 0 0 50%;
  left:200px;
}
CSS Christmas Tree Window

Add some snow and bricks:

.snow {
  position: absolute;
  z-index:5;
}

.snow:before, .snow:after {
  content:"";
  position: absolute;
  background-color: white;
  width:30px;
  height:5px;
}

.snow:before {
  top:-120px;
  left:10px;
  border-radius: 0 20px 0 0;
  box-shadow: 230px 105px white;
}

.snow:after {
  border-radius:10px;
  top:-245px;
  left:280px;
  box-shadow: -15px 0 white, -40px 0 white, -85px 0 white, -170px 0 white,-195px 0 white;
}

.bricks {
  position: absolute;
  background-color: #001523;
  width: 80px;
  height: 25px;
  left:100px;
  top:250px;
  box-shadow: 100px 0 #001523, 240px -50px #001523, -240px -100px #001523, -220px -150px #001523, 300px -200px #001523,-150px -300px #001523;
}
CSS Christmas Animation. Window.

and create the snowfall:

.snowflakes, .snowflakes-2, .snowflakes-3, .snowflakes-4, .snowflakes-5 {
  position: absolute;
  border-radius:50%;
  background-color: rgba(255,255,255,0.5);
  width:5px;
  height:5px;
  top:-500px;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px ;
  box-shadow: 100px -100px rgba(255,255,255,0.5), -100px -150px rgba(255,255,255,0.5), -200px -100px rgba(255,255,255,0.5), 0 -100px rgba(255,255,255,0.5), 200px -300px rgba(255,255,255,0.5), 100px -350px rgba(255,255,255,0.5), 150px -100px rgba(255,255,255,0.5), 70px -200px rgba(255,255,255,0.5), 300px -100px rgba(255,255,255,0.5), 400px -100px rgba(255,255,255,0.5), 450px -300px rgba(255,255,255,0.5), 500px -300px rgba(255,255,255,0.5), 600px -400px rgba(255,255,255,0.5), 550px -250px rgba(255,255,255,0.5), -200px -300px rgba(255,255,255,0.5), -100px -400px rgba(255,255,255,0.5), 700px -500px rgba(255,255,255,0.5),-400px -500px rgba(255,255,255,0.5), -350px -100px rgba(255,255,255,0.5), -500px -300px rgba(255,255,255,0.5), 800px -200px rgba(255,255,255,0.5), 750px -250px rgba(255,255,255,0.5), 680px -150px rgba(255,255,255,0.5), 900px -100px rgba(255,255,255,0.5), -700px -300px rgba(255,255,255,0.5),950px -310px rgba(255,255,255,0.5);
}

.snowflakes {
  animation: fall 7s linear infinite
}

@keyframes fall {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(-100px);}
}

.snowflakes-2 {
  left: 100px;
  animation: fall-2 7s linear infinite;
}

@keyframes fall-2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px) translateX(100px);}
}

.snowflakes-3 {
  left:-200px;
  animation: fall-2 7s linear infinite 5s;
}

.snowflakes-4 {
  left:50px;
  animation: fall 7s linear infinite 2s;
}

.snowflakes-5 {
  left:-50px;
  animation: fall 7s linear infinite 4s;
}

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

Pure CSS Snow Globe

CSS Christmas Tree

Categories
HTML Web development

HTML style Attribute

HTML style Attribute

The HTML style attribute defines a style for an element (can be used on all HTML elements).

The HTML style attribute overrides any style set globally (for example styles defined in the <style> tag).

Example:

<!DOCTYPE html>
<html>
<body>

<p style="color:#e76f51; text-decoration: underline;">This is a paragraph.</p>
<h4 style="color:#264653; background-color: #e9c46a;">This is a header.</h4>

</body>
</html>

Output:

This is a paragraph.

This is a header.


Read also:

HTML Attributes

HTML List Tags

HTML Media

Categories
HTML Web development

HTML src Attribute

HTML src Attribute

The HTML src attribute defines the location (URL) of the external resource.

The HTML src attribute applies to the following elements:

Examples:

An audio player with the source file:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:


An iframe element embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:


An image element:

<!DOCTYPE html>
<html>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2019/12/avatar.jpg" alt="avatar" width="640" height="480">

</body>
</html>

Output:

avatar

The HTML <input type=”image”> defines an image as a submit button:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br>
  <input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>

</body>
</html>

Output:





Play a video:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Read also:

HTML Attributes

HTML Media

HTML Form Elements

Categories
HTML Web development

HTML caption tag

HTML caption tag

The HTML caption element specifies a table caption.

The HTML <caption> tag has to be inserted immediately after the <table> tag.

To align and place caption you can use CSS caption-side property or CSS text-align property.

Example:

<!DOCTYPE html>
<html>
<head>
<style>   
table, th, td {
        border-collapse: collapse;
        border: 1px solid black;
    }

</style>
</head>
<body>
<table>
<caption>List of employees:</caption>
  <tr>
    <th>Name</th>
    <th>Job Title</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Adam White</td>
    <td>IT Coordinator</td>
    <td>white@example.com</td>
  </tr>
  <tr>
    <td>Tom Brown</td>
    <td>Web Developer</td>
    <td>brown@example.com</td>
  </tr>
  <tr>
    <td>Matt Smith</td>
    <td>Network Administrator</td>
    <td>matt@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

List of employees:
Name Job Title e-mail
Adam White IT Coordinator white@example.com
Tom Brown Web Developer brown@example.com
Matt Smith Network Administrator matt@example.com

Enjoy coding!

Read also:

HTML Table

HTML Table Headers

CSS border-collapse Property

Categories
HTML Web development

HTML Table Headers

HTML Table Headers

Table headers are specified with <th> tag (each th element represents a table cell).

Demo:

Name Surname Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber
Name Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber
Customer details
Name Surname e-mail
Joe Doe joedoe@example.com
Martha Brown brown221@example.com

The HTML table can have headers for each column/row.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Matt</td>
    <td>Smith</td>
    <td>Plumber</td>
  </tr>
 <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>Teacher</td>
  </tr>
</table>

</body>
</html>

Output:

Name Surname Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber

You can create a header that spans over two columns (or more).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>Teacher</td>
  </tr>
   <tr>
    <td>Matt</td>
    <td>Smith</td>
    <td>Plumber</td>
  </tr>
</table>
</body>
</html>

Output:

Name Occupation
John Doe Web Developer
Martha Brown Teacher
Matt Smith Plumber

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th {
text-align: center;}

</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="3">Customer details</th>
  </tr>
   <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>e-mail</th>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Doe</td>
    <td>joedoe@example.com</td>
  </tr>
  <tr>
    <td>Martha</td>
    <td>Brown</td>
    <td>brown221@example.com</td>
  </tr>
</table>
</body>
</html>

Output:

Customer details
Name Surname e-mail
Joe Doe joedoe@example.com
Martha Brown brown221@example.com

Enjoy coding!

Read also:

HTML Table

CSS border-collapse Property

CSS border-spacing Property