Categories
Web development

HTML summary Tag


HTML summary Tag

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

Categories
Web development

HTML open Attribute


HTML open Attribute

The HTML open attribute defines that the information should be visible by default.

The HTML open attribute can be used on the following element:

<details>

Syntax:

<details open> 

Example:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output:

The example shows a details element that is visible by default:

HTML

HTML defines the structure of the web page.

Read also:

HTML progress tag

HTML pre tag

HTML caption tag

Categories
Web development

HTML details Tag


HTML details Tag

The HTML <details> tag defines additional information that the user can open and close on demand.

Note: The HTML <summary> element is used in conjunction with the <details> tag to define a visible heading for the information.

Example:

<!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.

Attributes:

open – defines that the details/ information should be visible to the user.

Read also:

HTML datalist tag

HTML picture Tag

HTML Select, Option and Optgroup tags

Categories
Web development

CSS Printer Animation


To learn how to create the CSS Printer 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="printer-animation" class="printer-animation">
  <div class="printer">
  <input id="button" type="checkbox"> 
    <label class="button" for="button"></label>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="trace"></div>
    <div class="paper">
    </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;
  background-color: #ffe5cc;
}

input#button {
  display: none;
}

.printer-animation, .printer {
  position: relative;
  top:-35px;
}

Style the printer:

.top {
  position: absolute;
  background-color: #282c30;
  width: 160px;
  height:70px;
  border-radius: 20px 20px 0 0;
  border:5px solid black;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 20px 0 #1e2124;
  z-index:-1;
}

.middle {
  position: absolute;
  background-color: #4a4f55;
  border: 5px solid black;
  width: 250px;
  height:100px;
  border-radius: 20px;
  top:30px;
  left:-130px;
  box-shadow: inset 20px 0 #373b3d;
  z-index:5;
}

.trace, .trace:before {
  position: absolute;
  background-color: #282c30;
}

.trace {
  border:5px solid black;
  width: 160px;
  height: 80px;
  border-radius: 10px;
  left:-85px;
  top:110px;
  box-shadow: inset 0 35px #1e2124;
  z-index:2;
}

.trace:before {
  content:"";
  width: 60px;
  height: 20px;
  border-radius: 0 0 10px 10px;
  top:80px;
  left:45px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  border-left: 5px solid black;
}

.trace:after {
  position: absolute;
  content:"";
  width: 5px;
  height: 50px;
  background-color: black;
  left: 20px;
  top:15px;
  box-shadow: 60px 0 black, 115px 0 black;
}

.paper {
  position: absolute;
  border: 5px solid black;
  background-color: white;
  width:120px;
  height: 140px;
  top:-70px;
  left: -65px;
  z-index:3;
}

.button {
  position: absolute;
  z-index:30;
  border-radius: 50%;
  border: 5px solid black;
  background-color: #fd6e49;
  width:15px;
  height: 15px;
  left: 90px;
  cursor: pointer;
  top:45px;
  animation: pulse 1.5s infinite;
}

.button:active {
  background-color: #52dc97;
}

.button:hover {
  animation: none;
}

.paper:before {
  content:"Don't forget to smile :)";
  position: absolute;
  font-family: arial;
  text-align: center;
  top: 50px;
  transform: scaleY(-1);
  opacity:0;
}

Animate the button and the paper:

input#button:checked ~ .paper {
  animation: print 2.2s linear forwards;
}

input#button:checked ~ .paper:before {
  animation: display 2.2s linear forwards;
}

@keyframes print {
  0% {transform: translateY(0);z-index:3;}
  50% {transform: translateY(200px);z-index:3;}
  79% {transform: translateY(200px);z-index:3;}
  90% {transform: translateY(200px) rotateX(-90deg);z-index:3;}
  95% {transform: translateY(50px) scale(2);z-index:50;}
  100% {transform: translateY(50px) scale(2);z-index:50;}
}

@keyframes display {
  0% {opacity:0; transform: scaleY(-1);}
  28% {opacity:0; transform: scaleY(-1);}
  40% {opacity:1; transform: scaleY(-1);}
  80% {opacity:1; transform: scaleY(-1);}
  95% {opacity:1; transform: scaleY(1);}
  100% {opacity:1; transform: scaleY(1);}
}

@keyframes pulse {
  0% {
    transform:scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(253, 110, 73,.3);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(253, 110, 73,.3);
  }
}

Step3. (optional)

Add jQuery

To repeat the animation on double click add jQuery:

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

$(document).ready(function(){
  $('#printer-animation').mouseleave(function(){
    $(this).removeClass('clicked');
  }).dblclick(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Roll the dice!

JS Simple Signature Pad

HTML & CSS Birthday Card

Categories
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</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: #f07167;
  overflow: hidden;
}

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

.cake:before, .cake:after {
  content:"";
  position: absolute;
}

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

Categories
Web development

CSS Rainbow border/ button Animation


CSS Rainbow border/ button Animation

To create the CSS Rainbow border/ button Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="button"></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: black;
}

Create the border and style the text:

.button {
  position: relative;
  width: 250px;
  height:100px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  cursor: pointer;
}

.button:before {
  content:"";
  position: absolute;
  width: 240px;
  height: 90px;
  background-color: black;
  top:5px;
  left:5px;
}

.button:after {
  content:"Hover Me";
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  font-family: arial;
  font-weight: 900;
  font-size: 25px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Animate the text and the border on hover:

@keyframes move {
	to {
		background-position: 2500vh;
	}
}

.button:hover {
  animation: move 30s linear infinite;
}

.button:hover:after {
  animation: move 29s linear infinite;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Typing Effect

CSS flip text effect / animation

Categories
Web development

HTML value Attribute

HTML value Attribute

The HTML value attribute you can use on the following elements:

For <button>, <input> and <option> elements, the value attribute defines the initial value of the element.

Example1:

The button value attribute. Clicking a button submits its value:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <button name="number" type="submit" value="One">One</button>
  <button name="number" type="submit" value="Two">Two</button>
  <button name="number" type="submit" value="Three">Three</button>
</form>

</body>
</html>

Output:

Example2:

The input value attribute. An HTML form with default values:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="name" name="surname" value="Robert"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="name" name="surname" value="Johnson"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:



Example3:

The option value attribute. Choose a colour, and click the “Submit” button to send input to the server:

<!DOCTYPE html>
<html>
<body>

<form action="">
<label for="colors">Choose a colour:</label>

<select id="colors" name="colors">
  <option value="red">Red colour</option>
  <option value="blue">Blue colour</option>
  <option value="yellow">Yellow colour</option>
</select>
<input type="submit" value="Submit">
</form>

</body>
</html>

Output:

For meter elements, the value attribute defines the current value of the gauge.

Example4:

A gauge with a current value, min, max, high, and low segments:

<!DOCTYPE html>
<html>
<body>

<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="30" high="90" max="100" value="85"></meter></p>

<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="30" high="90" max="100" value="65"></meter></p>

<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="30" high="90" max="100" value="25"></meter></p>

</body>
</html>

Output:

For li elements, the value attribute settles the value of the list item (for ordered lists). The next list items will increment from that value.

Example5:

<!DOCTYPE html>
<html>
<body>

<ol>
  <li value="1">Sugar</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Flour</li>
  <li>Baking powder</li>
</ol>

</body>
</html>

Output:

  1. Sugar
  2. Milk
  3. Water
  4. Flour
  5. Baking powder

For progress elements, the value attribute defines how much of the task has been completed.

Example6:

<!DOCTYPE html>
<html>
<body>

<label for="bar">Downloading...</label>
<progress id="bar" value="46" max="100">46%</progress>

</body>
</html>

Output:

46%

Enjoy coding!

Read also:

HTML optimum Attribute

HTML width Attribute

HTML target Attribute

Categories
Web development

CSS flip text effect / animation


CSS flip text effect / animation

To learn how to create the CSS flip text effect/animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the text container and add characters:

<div class="flip-text">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l-two">l</div>
  <div class="o">o</div>
  <div class="mark">,</div>
  <div class="w">W</div>
  <div class="o-two">o</div>
  <div class="r">r</div>
  <div class="l-three">l</div>
  <div class="d">d</div>
  <div class="mark-two">!</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: #0fa3b1;
}

Style the characters:

.flip-text {
  position: relative;
  display: flex;
  font-size: 80px;
  color: #d9e5d6;
  font-family: arial;
  font-weight: 900;
  letter-spacing: -5px;
  text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

Animate characters:

@keyframes flip {
  0% {transform: rotateY(0) translateY(0)) scale(1,1);}
  10% {transform: rotateY(0) translateY(-30px) scale(.95,1.1);} 
  25% {transform: rotateY(90deg) translateY(0) scale(1.05,.95);}
  40% {transform: rotateY(0) translateY(0) scale(1,1);}
  100% {transform: rotateY(0) translateY(0) scale(1,1);}
}


.h, .e, .l, .l-two, .o, .mark, .w, .o-two, .r, .l-three, .d, .mark-two {
 animation: flip 1.7s ease-in-out infinite;
}

.e {
  animation-delay: .05s;
}

.l {
  animation-delay: .1s;
}

.l-two {
  animation-delay: .15s;
}

.o {
  animation-delay: .2s;
}

.mark {
  animation-delay: .25s;
}

.w {
  animation-delay: .3s;
}

.o-two {
  animation-delay: .35s;
}

.r {
  animation-delay: .4s;
}

.l-three {
  animation-delay: .45s;
}

.d {
  animation-delay: .5s;
}

.mark-two {
  animation-delay: .55s;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Bouncing Text Animation

CSS Gradient Stroke Effect

Categories
HTML Web development

HTML optimum Attribute



HTML optimum Attribute

The HTML optimum attribute defines the range where the gauge’s value is considered to be an optimal value.

The HTML optimum attribute can be used on the <meter> element.

Example:

<!DOCTYPE html>
<html>
<body>

<p><label for="o-val">The meter optimum attribute:</label>
<meter id="o-val" value="65" high="90" low="10" min="0" max="100" optimum="50"></meter></p>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML dir Attribute

HTML height Attribute

HTML srcset Attribute

Categories
HTML Web development

HTML low Attribute



HTML low Attribute

The HTML low attribute defines the range where the gauge’s value is considered to be a low value.

The low attribute value needs to be greater than the min attribute value, and it also needs to be less than the high and max attribute values.

The HTML low attribute can be used on the <meter> element.

Example:

<!DOCTYPE html>
<html>
<body>

<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="30" high="90" max="100" value="85"></meter></p>

<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="30" high="90" max="100" value="65"></meter></p>

<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="30" high="90" max="100" value="25"></meter></p>

</body>
</html>

Output:

Enjoy coding!

Read also:

HTML id Attribute

HTML src Attribute

HTML wrap Attribute