Category: Web development

Web development

CSS Fortune Wheel/ Conic-gradient/ Random Result

Post author By Lena Stanley
Post date September 2, 2023

CSS & JavaScript Fortune Wheel — Spin the Wheel!

To learn how to create the CSS Fortune Wheel follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="fortune-wheel">
  <div id="wheel" class="wheel">
    <div class="ring">
      <div class="label"><span>1</span></div>
      <div class="label"><span>2</span></div>
      <div class="label"><span>3</span></div>
      <div class="label"><span>4</span></div>
      <div class="label"><span>5</span></div>
      <div class="label"><span>6</span></div>
      <div class="label"><span>7</span></div>
      <div class="label"><span>8</span></div>
      <div class="label"><span>9</span></div>
      <div class="label"><span>10</span></div>
      <div class="label"><span>11</span></div>
      <div class="label"><span>12</span></div>
    </div>
  </div>
  <div class="back-wheel"></div>
  <div class="holder"></div>
  <div class="shadow"></div>
  <div class="arrow"></div>
  <button id="spin" class="spin">SPIN</button>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);}

.fortune-wheel, .wheel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

Style the wheel:

.wheel {
  width:250px;
  height:250px;
  border-radius:50%;
  background-image:
 conic-gradient(
      #00acc3 0deg 30deg, #79af3e 30deg 60deg, #fd8b00 60deg 90deg, #e53935 90deg 120deg, #465a65 120deg 150deg, #00abc1 150deg 180deg, #7db343 180deg 210deg, #f98b00 210deg 240deg, #e53935 240deg 270deg, #00acc3 270deg 300deg, #7db343 300deg 330deg, #fd8b00 330deg 360deg);    
    }    

.back-wheel, .back-wheel:after {
  position: absolute;
  border-radius: 50%;
}

.back-wheel {
  width: 270px;  height: 270px;
  background-color: #333;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  z-index:-1;
}

.back-wheel:after {
  content:"";
  border: 5px dotted yellow;
  width: 260px;
  height: 260px;
  animation: light .5s linear infinite;
}

@keyframes light {
  0% {filter: hue-rotate(0);}
  50% {filter: hue-rotate(130deg);}
  100% {filter: hue-rotate(0);}
}
.holder {
  position: absolute;
  background-color: #333;
  width:100px;
  height: 100px;
  overflow: hidden;
  z-index:-2;
  top:220px;
  left:32%;
}

.holder:before {
  content:"";
  position: absolute;
  width: 270px;
  height: 270px;
  background-color: rgba(0,0,0,.4);
  top:-218px;
  left:-85%;
  border-radius:50%;
}

.shadow {
  position: absolute;
  width:250px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.3);
  top:320px;
}

.shadow:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:200px;
  height: 30px;
  border-radius: 100px 100px 0 0;
  left:30px;
  top:-15px;
  box-shadow: inset 0 -10px rgba(0,0,0,.3);
}

.shadow:after {
  content:"";
  position: absolute;
  width:30px;
  height: 30px;
  background-color: yellow;
  border: 5px solid #333;
  border-radius: 50%;
  box-shadow:inset -5px -5px rgba(0,0,0,.2);
  top:-215px;
  left:105px;
}

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

.arrow {
  border-color: #333 transparent transparent transparent;
  border-width: 50px 20px 0 20px;
  top:-15px;
}

.arrow:before {
  content:"";
  border-color: #9e2a2b transparent transparent transparent;
  border-width: 38px 13px 0 13px;
  top:-46px;
  left:-13px;
}

Add the numbers:

.ring {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 100%;
  transform: rotate(-15deg);
}

.label {
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-origin: 50% 0;
  position: absolute;
  //transform:rotate(0deg) translate(0, -50%);
  font-size: 20px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.label span {
  display: inline-block;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  line-height: 70px;
}

.label:nth-child(1) {
  transform: rotate(0deg) translate(0, -50%);
  //transform: rotate(360deg) translate(0, -50%);
}

.label:nth-child(2) {
  transform: rotate(30deg) translate(0, -50%);
}

.label:nth-child(3) {
  transform: rotate(60deg) translate(0, -50%);
}

.label:nth-child(4) {
  transform: rotate(90deg) translate(0, -50%);
}

.label:nth-child(5) {
  transform: rotate(120deg) translate(0, -50%);
}

.label:nth-child(6) {
  transform: rotate(150deg) translate(0, -50%);
}

.label:nth-child(7) {
  transform: rotate(180deg) translate(0, -50%);
}

.label:nth-child(8) {
  transform: rotate(210deg) translate(0, -50%);
}

.label:nth-child(9) {
  transform: rotate(240deg) translate(0, -50%);
}

.label:nth-child(10) {
  transform: rotate(270deg) translate(0, -50%);
}

.label:nth-child(11) {
  transform: rotate(300deg) translate(0, -50%);
}

.label:nth-child(12) {
  transform: rotate(330deg) translate(0, -50%);
}

Style and animate the button:

.spin {
  position: absolute;
  top:-80px;
  width: 150px;
  height:50px;
  background-color: transparent;
  border: 5px solid red;
  border-radius: 50px;
  color: red;
  font-weight:900;
  font-size: 30px;
  transition: .1s;
  cursor: pointer;
}

.spin:hover {
  background-color: red;
  color: yellow;
}

.spin:active {
  width:200px;
  color: #affc41;
}

Step3.

Add JavaScript

let wheel = document.querySelector("#wheel");
let button = document.querySelector("#spin");

button.addEventListener("click", spinWheel);

function spinWheel(evt) {
  let spin = Math.round(Math.random() * (2220));
  wheel.style.setProperty("transition", "ease 1s");
  wheel.style.transform = 'rotate(' + spin + 'deg)';
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

CSS & JavaScript Memory Game

Heads or Tails? Toss a Coin!

Tags CSS, JavaScript

Web development

CSS Chocolate box

Post author By Lena Stanley
Post date January 25, 2023

To learn how to create the CSS Chocolate box follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website, click here.

Step1.

Add HTML

<div class="chocolate-box">
  <div class="chocs">
    <div id="top-left" class="top-left"></div>
    <div id="top-right" class="top-right"></div>
    <div id="bottom-left" class="bottom-left"></div>
    <div id="bottom-right" class="bottom-right"></div>
  </div>
  <div class="box-bottom"></div>
  <div class="cover"></div>
  <div id="white">White Chocolate</div>
  <div id="milk">Milk Chocolate</div>
  <div id="truffle">Chocolate truffle</div>
  <div id="truffle2">Chocolate truffle</div>
</div>

Step2.

Add CSS

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

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

.chocolate-box {
  position: relative;
  height: 300px;
  width: 300px;
  cursor: pointer;
}

Style and animate the box:

.chocolate-box:before, .chocolate-box:after {
  content:"";
  position: absolute;
}

.chocolate-box:before {
  width: 160px;
  height: 160px;
  background-color: #4b301b;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  box-shadow: 10px 10px #392312;
}

.chocolate-box:after {
  width: 68px;
  height: 68px;
  background-color: #2b0900;
  top:81px;
  left: 80px;
  box-shadow: 70px 0 #2b0900, 70px 70px #2b0900, 0px 70px #2b0900;
}

.chocs {
  position: absolute;
  z-index:1;
}

.top-left {
  top:92px;
  left:90px;
}

.top-left:hover {
  transform: rotate(25deg);
}

.top-left:active {
  opacity:0;
}

.bottom-right {
  left:162px;
  top: 162px;
}

.bottom-right:hover {
  transform: rotate(25deg);
}

.bottom-right:active {
  opacity:0;
}

.top-left, .bottom-right {
  position: absolute;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #d12511;
  box-shadow: 20px 0 #d12511;
  filter: drop-shadow(2px 2px #ab1503) drop-shadow(-2px 2px #ab1503);
  transition: .2s;
}

.top-left:after, .top-left:before, .bottom-right:before, .bottom-right:after {
  content:"";
  position: absolute;
}

.top-left:before, .bottom-right:before {
  width: 30px;
  height: 30px;
  background-color: #d12511;
  transform: rotate(-45deg);
  top:10px;
  left:10px;
}

.top-left:after, .bottom-right:after {
  border-radius: 50%;
  background-color: rgba(255,255,255,.3);
  width:10px;
  height: 10px;
  top:5px;
  left:35px;
}

.top-right {
  position: absolute;
  border-radius: 50%;
  background-color: #fee8c0;
  width:45px;
  height: 45px;
  top:92px;
  left: 162px;
  filter: drop-shadow(2px 2px #ceb587) drop-shadow(-2px 2px #ceb587);
  overflow: hidden;
  transition: .2s;
}

.top-right:before, .top-right:after {
  content:"";
  position: absolute;
  background-color: #93522b;
  width:100px;
  height: 3px;
  left:-5px;
}

.top-right:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #93522b;
}

.top-right:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #93522b, 0 30px #93522b;
}

.bottom-left:hover {
  transform: rotate(25deg);
}

.bottom-left:active {
  opacity:0;
}

.top-right:hover {
  transform: rotate(25deg);
}

.top-right:active {
  opacity:0;
}

.bottom-left {
  position: absolute;
  border-radius: 50%;
  background-color: #503520;
  width:45px;
  height: 45px;
  top:162px;
  left: 92px;
  filter: drop-shadow(2px 2px #342010) drop-shadow(-2px 2px #342010);
  overflow: hidden;
  transition: .2s;
}

.bottom-left:before, .bottom-left:after {
  content:"";
  position: absolute;
  background-color: #fde7c7;
  width:100px;
  height: 3px;
  left:-5px;
}

.bottom-left:before {
  top:15px;
  transform: rotate(-35deg);
  box-shadow: 0 -15px #fde7c7;
}

.bottom-left:after {
  top:0;
  transform: rotate(-15deg);
  box-shadow: 0 17px #fde7c7, 0 30px #fde7c7;
}

.box-bottom {
  position: absolute;
  background-color: #392312;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  left:222px;
  top:73px;
  z-index:-1;
  box-shadow: 0px 211px #392312;
}

.cover {
  position: absolute;
  background-color: #cf2611;
  width:150px;
  height: 150px;
  border: 5px solid #ae1605;
  z-index:2;
  top:70px;
  left:70px;
  transform-origin: top;
  transition: .2s;
  overflow: hidden;
}

.chocolate-box:hover .cover {
  transform: rotateX(170deg);
  box-shadow: 5px -5px 20px rgba(0,0,0,.5);
}

.chocolate-box:hover .cover:before {
  display: none;
}

.cover:before {
  position: absolute;
  content:"Hover Me";
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 35px;
  transform: translate(-50%,-50%);
  left:50%;
  top:50%;
  text-align: center;
  border: 2px double;
}

.cover:after {
  position: absolute;
  content:"";
  background-color: #ffead2;
  height:10px;
  width: 100px;
  transform: rotate(-45deg);
  left:-20px;
  box-shadow: -5px 165px #ffead2;
}

#white, #milk, #truffle, #truffle2 {
  position: absolute;
  width: 100%;
  display: none;
  color: #ffead2;
  font-family: "Brush Script MT", cursive;
  font-size: 25px;
  transition: .1;
}

#white {
  top:100px;
  left: 250px;
}

#milk {
  top:170px;
  left:-70px;
}

#truffle {
  left: 250px;
  top: 170px;
}

#truffle2 {
  left: -70px;
  top: 100px;
}

Step3.

Add jQuery

*to read how to add jQuery to HTML click here.

$(document).ready(function(){
    $("#top-right").on('mouseenter',function() {
        $("#white").show();
    });
    $("#top-right").on('mouseout',function() {
        $("#white").hide();
    });
});

$(document).ready(function(){
    $("#bottom-left").on('mouseenter',function() {
        $("#milk").show();
    });
    $("#bottom-left").on('mouseout',function() {
        $("#milk").hide();
    });
});

$(document).ready(function(){
    $("#bottom-right").on('mouseenter',function() {
        $("#truffle").show();
    });
    $("#bottom-right").on('mouseout',function() {
        $("#truffle").hide();
    });
});

$(document).ready(function(){
    $("#top-left").on('mouseenter',function() {
        $("#truffle2").show();
    });
    $("#top-left").on('mouseout',function() {
        $("#truffle2").hide();
    });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Heart in Envelope

CSS diamond ring (open/ close on click)

CSS Valentine’s Day Card

Tags #Valentine's Day, chocolate, CSS, hover

Web development

CSS Christmas Card/ Santa Claus – open to play

Post author By Lena Stanley
Post date December 15, 2022

To learn how to create the CSS Christmas Card/ Santa Claus – open to play, follow the steps below.

Demo:

*to see the animation on the website, click here.

*music source: (free music) youtube audio library – Jingle Bells (by Jingle Punks).

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

  <div class="christmas-card">
             <audio id="player" name="jingle-bells">
  <source src="https://lenadesign.org/wp-content/uploads/2022/12/Jingle-Bells-Instrumental-Jingle-Punks.mp3" type="audio/mpeg"/></audio>
        
      <input id="open" type="checkbox">
      <label class="open" for="open"></label>
      <div class="card-front">
          <div class="santa-claus"></div>
          <div class="front"></div>
          <div class="pompon"></div>
      </div>
      <div class="card-inside">
      </div>
    </div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

Style and animate the Christmas Card:

  .christmas-card {
            width:220px;
            height: 300px;
            position: relative;
            cursor: pointer;
            transform-style: preserve-3d;
	        transform: perspective(2000px);
            transition: .3s;
        }
                input#open {
            display: none;
}
        .card-front, .card-inside {
            width:100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
        }
        .card-front {
            transform-origin: left;
            transition: .3s;
            box-shadow: inset 0 120px #c1121f,inset 0 150px #fff, inset 0 165px #f9dcc4,inset 0 200px #fff,inset 0 240px #c1121f, inset 0 290px #333, inset 0 300px #c1121f;
        }
        .card-front:before, .card-front:after {
            content:"";
            position: absolute;
        }
        .card-front:before {
            background-color: #333;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            top:150px;
            left:95px;
            box-shadow: 20px 0 #333;
        }
        .card-front:after {
            background-color: #fcd5ce;
            width:20px;
            height: 10px;
            border-radius:50px;
            top: 160px;
            left: 100px;
        }
        
        .santa-claus {
            position: absolute;
            width: 60px;
            height: 30px;
            border: 10px solid #ffba08;
            top: 240px;
            left:70px;
        }
        .santa-claus:before, .santa-claus:after {
            content:"";
            position: absolute;
        }
        .santa-claus:after {
            background-color: #333;
            width: 20px;
            height: 10px;
            border-radius: 0 0 50px 50px;
            top:-75px;
            left:20px;
        }
        .santa-claus:before {
            background-color: white;
            border-radius: 50%;
            width:130px;
            height: 40px;
            top: -70px;
            left:-35px;
        }
        .front {
            position: absolute;
        }
        
        .front:before, .front:after {
            content:"";
            position: absolute;
            background-color: #003e1f;
            width: 350px;
            height: 350px;
            z-index:1;
        }
        
        .front:before {
            transform: rotate(-65deg);
            left:-268px;
            top:-90px;
        }
        .front:after {
            transform: rotate(65deg);
            left:138px;
            top:-90px;
        }

        .pompon {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: 50px;
            left:100px;
            z-index:10;
        }

        .open {
  position: absolute;
  width:220px;
  height: 300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
}

.card-inside {
  background-color: #f2e8cf;
  z-index:-1;
}

.card-inside:before {
  content:"Merry Christmas my dear friends, may you feel the love this special day! May this festive season brings lots of joy and happiness in your life. May all of your wishes and dreams come true, and may you feel this happiness all year round. Merry Christmas!";
  position: absolute;
  font-size: 15px;
  text-align: center;
  top:40px;
  padding:15px;
  line-height:150%;
}

Step3.

Add JavaScript

let input = document.getElementById("open");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS Happy New Year Animation (fireworks)

CSS Snowfall

Tags Christmas Card, CSS, CSS animation, Santa Claus

Web development

CSS Christmas Card Animation/ CSS filter Property

Post author By Lena Stanley
Post date December 10, 2022

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

Demo:

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

Step1.

Add HTML

    <div id="christmas-card" class="christmas-card">
        <div class="christmas-tree"></div>
        <div class="snow"></div>
        <div class="wishes">
            <div class="wish"></div>
            <div class="merry"></div>
            <div class="xmas"></div>
        </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;
        }

Style the card:

.christmas-card {
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 400px;
            background-color: #9ceaef;
            box-shadow: 15px 1px 50px rgba(0,0,0,.2);

        }
        
        .christmas-card:before {
            content:"";
            position: absolute;
            width: 400px;
            height: 150px;
            background-color: white;
            border-radius: 50%;
            top:290px;
            left:-25px;
            box-shadow: -130px -10px #f8f9fa, 80px -20px #e9ecef;
        }
        
        .christmas-card:after {
            content:"";
            position: absolute;
            background-color: rgba(0,0,0,.2);
            width: 100px;
            height: 20px;
            border-radius: 50%;
            top:300px;
            left:120px;
        }

Style and animate the Christmas Tree:

       .christmas-tree {
               position: relative;
               width: 20px;
               height: 40px;
               background-color: #bc6c47;
               top:270px;
            left: 160px;
               box-shadow: inset 0 25px rgba(0,0,0,.5);
              z-index:1;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  border-style:solid;
  border-color: transparent transparent #8fb440 transparent;
  border-width: 0 50px 60px 50px;
  height:0;
  width:0;
  top: -40px;
  left:-40px;
  filter: drop-shadow(0 -30px #8fb440) drop-shadow(0 -30px #8fb440);
}
        

        
        .christmas-tree:after {
            content:"";
            position: absolute;
            width:15px;
            height: 15px;
            background-color: #ae2012;
            border-radius: 50%;
            box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px #0a9396;
            animation: light 3s linear infinite 3s;
        }
        @keyframes light {
            0%, 20%, 40%,60%, 80%, 100% {
                box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px  #0a9396;
                background-color: #ae2012;
            }
            10%, 30%, 50%, 70%, 90% {
                box-shadow: -25px -20px #0a9396, 35px -30px #ee9b00, 10px -40px #0a9396, -15px -60px #ee9b00, 25px -70px #ae2012, 0px -85px  #e9d8a6;
                background-color: #e9d8a6;
            }
        }

Add snowfall:

  .snow, .snow:before {
            position: absolute;
            background-color: white;
            width:8px;
            height: 8px;
            top:-50px;
            border-radius: 50%;
            box-shadow: 30px -40px white, 100px 10px white, 150px -10px white, 200px -20px white, 300px -30px white, 40px -20px white, 330px 10px white;
            filter: drop-shadow(0 -100px white)drop-shadow(-20px -150px white);
            animation: fall 5s linear infinite 2s;
        }
        
        .snow {
            opacity:.7;
        }
        
        .snow:before {
            content:"";
            opacity: .5;
            animation-delay: 4.5s;
        }
        
        @keyframes fall {
  0% {top:-50px;}
  100% {top:400px;}
}

Add and animate the text:

     .wishes {
            color: white;
            position: relative;
            width:350px;
        }
        
        .wish, .merry, .xmas {
            position: relative;
            overflow: hidden;     
        }
        
        .wish {
            font-size: 20px;
            height: 20px;
        }
        .merry {
            top:0;
            height: 30px;
        }
        
        .xmas {
            top: 0;
            height:40px;
        }
        
        .wish:before, .merry:before, .xmas:before {
            text-align: center;
            width: 350px;
            position: absolute;
            
        }
        .wish:before {
            content: "WISH YOU";
            top:20px;
            animation: slideUp ease .4s forwards;
        }
        
        @keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-20px);opacity:1;}        
}
        @keyframes slideUpTwo {
  0% {transform: translateY(0);}
  100% {transform: translateY(-30px);opacity:1;}
        }
            
            @keyframes slideUpThree {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
        }
        
        .merry:before {
            content:"MERRY";
            font-size: 30px;
            top:30px;
            animation: slideUpTwo ease .4s forwards .4s;
        }
        
        .xmas:before {
            content:"CHRISTMAS";
            font-size: 40px;
            top:40px;
            animation: slideUpThree ease .4s forwards .8s;
        }

Step3.

Add jQuery (optional)

To repeat the animation on click add jQuery:

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

$(document).ready(function(){
  $('#christmas-card').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 Christmas Card (Open/ Close on Click)

CSS Christmas Tree Snow Globe

CSS Christmas Tree Animation

Tags Christmas, Christmas Card, Christmas Tree, CSS, CSS animation

Web development

CSS visibility Property

Post author By Lena Stanley
Post date September 30, 2022

The CSS visibility property defines whether or not an element is visible.

Demo:

Click the “Try it” button to set the visibility property of the DIV element to “hidden”:

Hi!

Note: Hidden elements take up space on the page. Use the display property to remove an element from the document layout!

Syntax:

visibility: visible|hidden|collapse;

visible (default) – the element is visible.

hidden – the element is hidden (but still takes up space).

collapse – this value removes a row or column, but it does not affect the table layout.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  visibility: visible;
}

.b {
  visibility: hidden;
}
</style>
</head>
<body>

<p class="a">This paragraph is visible.</p>
<p class="b">This paragraph is hidden.</p>

</body>
</html>

Output:

This paragraph is visible.

This paragraph is hidden.

Example2:

<!DOCTYPE html>
<html>
<head>
<style>

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid #333;
}

td {
  border: 1px solid #333;
}


</style>
</head>
<body>

<table>
  <tr>
    <td>1</td>
    <td class="collapse">2</td>
    <td>3</td>
  </tr>
  <tr class="collapse">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

</body>
</html>

Output:

1	2	3
1	2	3
4	5	6

Enjoy coding!

Read also:

CSS float Property

CSS @import Rule

CSS margin Property

Tags CSS, visibility

Web development

CSS display Property

Post author By Lena Stanley
Post date August 31, 2022

The CSS display property defines the display behaviour (the type of rendering box) of an element.

Syntax:

display: value;

Demo:

Click the “Try it” button to set the display property of the DIV element to “none”:

Hi!

none – the element is completely removed.

display: none;

block – displays an element as a block element. It starts on a new line and takes up the whole width.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: block;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

inline – displays an element as an inline element. Height and width properties will have no effect.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: inline;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

contents – causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself.

display: contents;

flex – displays an element as a block-level flex container.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  display: flex;
  border: 2px solid #333;
  justify-content: center;
  align-items: center;
}

.text {
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Outline:

Some text…

grid – displays an element as a block-level grid container.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #2a9d8f;
  padding: 5px;
}
.grid-item {
  background-color: #e9c46a;
  border: 2px solid #333;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div> 
</div>

</body>
</html>

Output:

inline-block – displays an element as an inline-level block container (you can apply height and width values).

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  border: 2px solid #333;
}

.text {
  display: inline-block;
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Outline:

Some text…

inline-flex – displays an element as an inline-level flex container.

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  position: relative;
  height: 200px;
  display: inline-flex;
  border: 2px solid #333;
  justify-content: center;
  align-items: center;
}

.text {
  width: 70px;
}

</style>
</head>
<body>

<div class="square">
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
  <p class="text">Some text...</p>
</div>

</body>
</html>

Output:

Some text…

inline-grid – displays an element as an inline-level grid container.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container2 {
  display: inline-grid;
  grid-template-columns: auto auto;
  background-color: #2a9d8f;
  padding: 5px;
}

.grid-item2 {
  background-color: #e9c46a;
  border: 2px solid #333;
  padding: 10px;
  font-size: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container2">
  <div class="grid-item2">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item2">3</div>  
  <div class="grid-item2">4</div>
</div>

</body>
</html>

Output:

inline-table – the element is displayed as an inline-level table.

<!DOCTYPE html>
<html>
<head>
<style>

.example {
display: inline-table;
border: 2px solid #333;
padding: 10px;
text-align: center;
}

</style>
</head>
<body>

<div class="example">
<img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg">
<p>Ghost</p>
</div>
</body>
</html>

Output:

Ghost

list-item – let the element behave like a li element.

<!DOCTYPE html>
<html>
<head>
<style>

.one {
display: list-item;
list-style-position: inside;
}

</style>
</head>
<body>

<div class="one">Some text...</div>

</body>
</html>

Output:

Some text…

run-in – displays an element as either block or inline, depending on context.

display: run-in;

table – let the element behave like a table element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…

Some text…Some text…

Some text…

table-caption – let the element behave like a caption element.

<html>
<body>
<div style="display:table;">
<h4 style="display: table-caption; height: 20px; background-color: #fefae0;margin:0; padding:10px;">Hello!</h4>
<div style="display: table-cell;width: 20%;background-color: #ccd5ae;" >Some text...</div>
<div style="display: table-cell;width: 80%;background-color: #faedcd;">Some text...some text...</div>
</div>
</body>
</html>

Output:

Hello!

Some text…

Some text…some text…

table-column-group – let the element behave like a colgroup element.

display: table-column-group;

table-header-group – let the element behave like a thead element.

display: table-header-group;

table-footer-group – let the element behave like a tfoot element.

display: table-footer-group;

table-row-group – let the element behave like a tbody element.

display: table-row-group;

table-cell – let the element behave like a td element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…

Some text…Some text…

Some text…

table-column – let the element behave like a col element.

<!DOCTYPE html>
<html>
<head>
<style>

.example-table {
  display: table;
}
.row-1 {
  display: table-row;
}
.cell-example {
  display: table-cell;
}
.column-1 {
  display: table-column;
  background-color: #ccd5ae;
}
.column-2 {
  display: table-column;
  background-color: #faedcd;
}

</style>
</head>
<body>

<div class="example-table">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="row-1">
    <div class="cell-example">Some text...some text...</div>
    <div class="cell-example">Some text...some text...</div>
  </div>
  <div class="row-1">
    <div class="cell-example">Some text...some text...</div>
    <div class="cell-example">Some text...some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…some text…

table-row – let the element behave like a tr element.

<!DOCTYPE html>
<html>
<head>
<style>

.col {
  border: 1px solid #333;
  padding:2px;
}

</style>
</head>
<body>

<div class="table" style="display: table; border: 2px solid #333;">
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="col" style="display: table-cell;">Some text...Some text...</div>
    <div class="col" style="display: table-cell;">Some text...</div>
  </div>
</div>

</body>
</html>

Output:

Some text…

Some text…Some text…

Some text…

Read also:

CSS position Property

CSS padding Property

CSS white-space Property

Tags CSS, display

Web development

CSS word-wrap Property

Post author By Lena Stanley
Post date July 21, 2022

The CSS word-wrap property let the long words be able to be broken and wrap onto the next line.

Demo:

Syntax:

word-wrap: normal|break-word;

normal (default) – break words only at allowed break points.

break-word – allows unbreakable words to be broken.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.a, .b {
  width: 140px; 
  border: 1px solid #333;
}

.a {
  word-wrap: normal;
}

.b {
  word-wrap: break-word;
}
</style>
</head>
<body>

<h4>word-wrap: normal;</h4>
<div class="a">CSSwordwrapProperty.</div>

<h4>word-wrap: break-word;</h4>
<div class="b">CSSwordwrapProperty.</div>

</body>
</html>

Output:

word-wrap: normal;

CSSwordwrapProperty.

word-wrap: break-word;

CSSwordwrapProperty.

Enjoy coding!

Read also:

CSS letter-spacing Property

CSS line-height Property

CSS overflow Property

Tags CSS, word-wrap

Web development

CSS word-break Property

Post author By Lena Stanley
Post date July 20, 2022

The CSS word-break property defines how words should break when reaching the end of a line.

Demo:

Syntax:

word-break: normal|break-all|keep-all|break-word;

normal (default) – uses default line break rules.

break-all – to prevent overflow, the word may be broken at any character.

keep-all – word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behaviour is the same as the value “normal”

break-word – to prevent overflow, the word may be broken at arbitrary points.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  width: 130px; 
  border: 1px solid #333;
}

.a {
  word-break: normal;
}

.b {
  word-break: keep-all;
}

.c {
  word-break: break-all;
}
</style>
</head>
<body>

<h4>word-break: normal;</h4>
<p class="a">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: keep-all;</h4>
<p class="b">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

<h4>word-break: break-all;</h4>
<p class="c">CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.</p>

</body>
</html>

Output:

word-break: normal;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: keep-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

word-break: break-all;

CSSwordbreakProperty. CSS word-break Property. CSS-word-break-Property.

Enjoy coding!

Read also:

CSS white-space Property

CSS word-spacing Property

Tags CSS, word-break

Web development

CSS color Property

Post author By Lena Stanley
Post date July 14, 2022

The CSS color property defines the color of text.

Demo:

Click the “Try it” button to set the text color of the DIV element to “#ff006e”:

myDIV

Syntax:

color: color;

color – defines the text color (Hexadecimal, RGB, RGBA, HSL..).

Example1:

Set the text color with a HEX value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: #3a86ff;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example2:

Set the text color with an RGBA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: rgba(155, 56, 56, 0.9);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Example3:

Set the text color with a HSLA value:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: hsla(59, 43%, 61%, 0.8);
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

Read also:

CSS background-color Property

CSS border-color Property

CSS font-family Property

Tags color, CSS

Web development

HTML summary Tag

Post author By Lena Stanley
Post date June 29, 2022

The HTML <summary> element specifies a visible heading for the <details> tag. The heading can be clicked to view/hide the details.

Example1:

<!DOCTYPE html>
<html>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Example2:

Style with CSS details and summary elements:

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 5px;
  width: 200px;
  background-color: #f5f3f4;
  border: none;
  box-shadow: 2px 2px #333;
  cursor: pointer;
}

details > p {
  background-color: #f5f3f4;
  padding: 5px;
  margin: 0;
  box-shadow: 2px 2px #333
}
</style>
</head>
<body>

<details>
  <summary>HTML</summary>
  <p>HTML defines the structure of the web page.</p>
</details>

</body>
</html>

Output:

HTML

HTML defines the structure of the web page.

Enjoy coding!

Read also:

HTML caption tag

HTML input tag

HTML label tag

Tags HTML, HTML tag, HTML tags, summary