Categories
CSS Web development

Pure CSS Envelope (Open/Close on click)

Pure CSS Envelope (Open/Close on click)

To learn how to create the CSS Envelope (Open/Close on click) follow the steps below and watch the video tutorial:

Demo:

*to see the CSS Envelope (Open/Close on click) on the website click here.

Step1.

Add HTML

<div class="envelope-container">
  <input id="flap" type="checkbox">
  <label class="flap" for="flap"></label>
  <div class="envelope-back"></div>
  <div class="card">Thanks!</div>
  <div class="card-front"></div> 
</div>

Step2.

Add CSS

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9f5db;
}
.envelope-container {
  position: relative;
}

Style the envelope and the card:

input#flap {
  display: none;
}
.envelope-back {
  position: relative;
  width: 320px;
  height: 200px;
  background-color: #718355;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.07);
  width: 320px;
  height:10px;
  border-radius:50%;
  top:220px;
}

.card {
  position: absolute;
  width:300px;
  height: 180px;
  background-color: white;
  top:10px;
  left:10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:40px;
  font-family: Brush Script MT;
  transition: .1s;
  z-index:1;
  cursor: pointer;
}

.card-front {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 100px solid #87986a;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  top:100px;
  left:0;
  z-index:3;
}

.card-front:before, .card-front:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid transparent;
  border-top: 100px solid transparent;
  height:0;
  width:0;
}

.card-front:before {
  border-left: 161px solid transparent;
  border-right: 161px solid #97a97c;
  top:-100px;
  left:-162px;
}

.card-front:after {
  border-right: 161px solid transparent;
  border-left: 161px solid #97a97c;
  top:-100px;
  left:-160px;
}

.flap {
  position: absolute;
  width:0;
  height:0;
  border-top: 110px solid #b5c99a;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  top:0;
  left:0;
  cursor: pointer;
  transition: .3s;
  transform-origin: top;
  z-index:4;
}
CSS Envelope

Open and close an envelope:

#flap:checked + .flap {
  transform: rotateX(180deg);
}

#flap:checked ~ .card-front {
  z-index:7;
}

#flap:checked ~ .card {
  z-index:4;
  transform: translateY(-60px);
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Envelope (Open/Close on Hover)

CSS Valentine’s Day Card

CSS 3d flip Business Card

Categories
HTML Web development

HTML alt Attribute

HTML alt Attribute

The HTML alt attribute gives alternative information for an image.

You can use the alt attribute with the following elements:

<area>

<img>

<input> (only can be used with <input type=”image”>)

Area Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the laptop, or the cup of coffee:</p>

<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
  <area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>

</body>
</html>

Output:

Click on the laptop, or the cup of coffee:

homeOffice laptop coffee

Img Example:

<img src="https://lenadesign.org/wp-content/uploads/2021/07/small-avatar.jpg" alt="avatar" width="320" height="240">

Output:

avatar

Input Example:

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




Enjoy coding!

Categories
CSS HTML JavaScript Web development

HTML & CSS Range Sliders

rangle slider

To create a range slider you need to use the input tag type range (<input type=”range”>) that specifies a control for entering a number whose exact value is not important. The default range is 0 to 100:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="vol">Number between 0 and 100:</label>
  <input type="range" id="vol" name="vol" min="0" max="100">
  <input type="submit">
</form>

</body>
</html>

Output:


To create the custom range slider add some CSS:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
  width: 100%;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #e9c46a;
  outline: none;
  border-radius:40px;
  opacity: 0.8;
  transition: opacity .2s;
}

.range-slider:hover {
  opacity: 1;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}

</style>
</head>
<body>

<div class="range-slider-container">
  <input type="range" min="0" max="100" value="50" class="range-slider" id="range">
</div>

</body>
</html>

Output:


To display the current value add the JavaScript to the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
  width: 100%;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #e9c46a;
  outline: none;
  border-radius:40px;
  opacity: 0.8;
  transition: opacity .2s;
}

.range-slider:hover {
  opacity: 1;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color: #e76f51;
  cursor: pointer;
}
p {position: relative; left:45%;}

</style>
</head>
<body>


<div class="range-slider-container">
  <input type="range" min="0" max="100" value="50" class="range-slider" id="range">
  <p>Value: <span id="example"></span></p>
</div>
    
<script>
var randgeSlider = document.getElementById("range");
var val = document.getElementById("example");
val.innerHTML = randgeSlider.value;

  randgeSlider.oninput = function() {
  val.innerHTML = this.value;
}
</script>

</body>
</html>

Output:

Value:



Enjoy coding!

Categories
CSS Web development

CSS Birthday Animation

CSS Birthday Animation

Demo:

*to see the animation on the website click here.

To create the CSS Birthday Animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="birthday-gift">
  <div class="gift">
  <input id='click' type='checkbox'>
  <label class='click' for='click'></label>
  <div class="wishes">Happy Birthday!</div>
       <div class="sparkles">
      <div class="spark1"></div>
      <div class="spark2"></div>
      <div class="spark3"></div>
      <div class="spark4"></div>
      <div class="spark5"></div>
      <div class="spark6"></div>
    </div>
    </div>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.birthday-gift {
  position: relative;
}
.birthday-gift:before {
  content:"";
  position: absolute;
  width: 170px;
  height:20px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.4);
  top:90px;
  left:-10px;
}

Style the gift:

.gift {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: #e9c46a;
}

.gift:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 100px;
  background-color: #e76f51;
  left:62px;
}

.gift:after {
  content:"";
  position: absolute;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  width: 150px;
  height: 100px;
}

Style the box cover/ input:

input#click {
  display: none;
}
.click {
  position: absolute;
  background-color: #e9c46a;
  width: 170px;
  height: 40px;
  top:-40px;
  left:-10px;
  transform-origin: bottom left;
  transition: .3s;
  cursor: pointer;
}

.click:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 40px;
  background-color: #e76f51;
  left:69px;
}

.click:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 0;
  border-bottom: 30px solid #e76f51;
  border-top: 30px solid #e76f51;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  transform: rotate(-90deg);
  left:65px;
  top:-47px;
}

Style the wishes:

.wishes {
  position: absolute;
  transition: .5s;
  color: #333;
  font-size: 37px;
  text-align: center;
  z-index:-1;
  left:5px;
}
CSS Gift

Add input label animation (to open the box and move the wishes upon click):

#click:checked + .click {
  transform: rotate(-110deg) scaleX(0.85);
}
#click:checked ~ .wishes {
  transform: translateY(-100px);
}

Add some sparkles and animate them:

.sparkles {
  position: absolute;
  display: none;
  top:-15px;
  z-index:-2;
  left:40px;
}

.spark1, .spark2, .spark3, .spark4, .spark5, .spark6 {
  position: absolute;
  background-color: #fee440;
  border-radius:50%;
  top:-9px;
  z-index:-1;
}

.spark1 {
  width: 8px;
  height:8px;
  left:30px;
  top:-9px;
  animation: fire 0.9s ease-in-out infinite, color 0.4s linear infinite;
}

.spark1:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:8px;
  left:11px;
  background-color: #fee440;
  border-radius:50%;
}

.spark2 {
  width: 9px;
  height:9px;
  left:33px;
  top:-5px;
  animation: fire2 0.28s ease-in-out infinite, color 0.4s linear infinite;
}

.spark2:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:3px;
  background-color: #fee440;
  border-radius:50%;
}

.spark3 {
  width: 8.5px;
  height:8.5px;
  left:33px;
  top:-5px;
  animation: fire3 0.36s ease-in-out infinite, color2 0.4s linear infinite;
}

.spark3:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:-1px;
  background-color: #fee440;
  border-radius:50%;
}

.spark4 {
  width: 7px;
  height:7px;
  left:27px;
  top:-5px;
  animation: fire2 0.24s ease-in-out infinite, color2 0.2s linear infinite;
}

.spark5 {
  width: 7px;
  height:7px;
  left:29px;
  top:-5px;
  animation: fire3 0.45s ease-in-out infinite, color 0.2s linear infinite;
}

.spark6 {
  width: 6px;
  height:6px;
  left:29px;
  top:-5px;
  animation: fire 0.35s ease-in-out infinite, color2 0.2s linear infinite;
}
  
@keyframes fire3 {
  100% { transform:translateX(20px) translateY(-93px); 
         opacity: 0.3; }
}

@keyframes fire2 {
  100% { transform:translateX(-5px) translateY(-90px); 
         opacity: 0.3; }
}

@keyframes fire {
  100% { transform:translateX(-25px) translateY(-95px); 
         opacity: 0.3; }
}

@keyframes color {
  from {background-color: #d00000;}
  to {background-color: #0081a7;}
}

@keyframes color2 {
  from {background-color: #8cff00;}
  to {background-color: #1d2d44;}
}

Add input label animation:

#click:checked ~ .sparkles {
  display: block;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

Birthday Cake – CSS Animation

Simple CSS Birthday Cake

CSS Folded Birthday Card

Categories
HTML Web development

HTML input tag

HTML input tag

The HTML <input> tag is used within a form where the user can enter data.

The way how to the HTML <input> tag displays depend on the type of attribute that is paired with:

Syntax:

<input type="">
  1. Input Type Button <input type=”button”>
  2. Input Type Checkbox <input type=”checkbox”>
  3. Input Type Color <input type=”color”>
  4. Input Type Date <input type=”date”>
  5. Input Type Datetime-local <input type=”datetime-local”>
  6. Input Type Email <input type=”email”>
  7. Input Type File <input type=”file”>
  8. Input Type Hidden <input type=”hidden”>
  9. Input Type Image <input type=”image”>
  10. Input Type Month <input type=”month”>
  11. Input Type Number <input type=”number”>
  12. Input Type Password <input type=”password”>
  13. Input Type Radio <input type=”radio”>
  14. Input Type Range <input type=”range”>
  15. Input Type Reset <input type=”reset”>
  16. Input Type Search <input type=”search”>
  17. Input Type Submit <input type=”submit”>
  18. Input Type Tel <input type=”tel”>
  19. Input Type Text <input type=”text”>
  20. Input Type Time <input type=”time”>
  21. Input Type URL <input type=”url”>
  22. Input Type Week <input type=”week”>

Input Type Button

The HTML <input type=”button”> specifies a button:

<!DOCTYPE html>
<html>
<body>

<input type="button" onclick="alert('Thanks!')" value="Click Me!">

</body>
</html>

Output:


Input Type Checkbox

The HTML <input type=”checkbox”> specifies a checkbox:

<!DOCTYPE html>
<html>
<body>

<p>What is your favourite colour?</p>

<form action="">
  <input type="checkbox" id="red" name="red" value="red">
  <label for="red">Red</label><br>
  <input type="checkbox" id="blue" name="blue" value="Blue">
  <label for="blue">Blue</label><br>
  <input type="checkbox" id="green" name="green" value="green">
  <label for="green">Green</label><br><br>
</form> 

</body>
</html>

Output:

What is your favourite colour?






Input Type Color

The HTML <input type=”color”> is used for input fields that contain color:

<!DOCTYPE html>
<html>
<body>

<h4>Show a Color Picker:</h4>

<form action="">
  <label for="color">Select a color:</label>
  <input type="color" id="color" name="color" value="#00bfff">
</form>

</body>
</html>

Output:

Show a Color Picker:


Input Type Date

The HTML <input type=”date”> is used for input fields that contain a date:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="work-meeting">Work meeting:</label>
  <input type="date" id="work-meeting" name="work-meeting">
  
</form>

</body>
</html>

Output:



To add the date limitation use the min and max attributes:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="datemin">Type a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2020-07-12"><br><br>

  <label for="datemax">Type a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1988-11-01"><br><br>
  
</form>

</body>
</html>

Output:






Input Type Datetime-local

The HTML <input type=”datetime-local”> defines a date and time input field, without a time zone:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="work-meeting">Work meeting (date/ time):</label>
  <input type="datetime-local" id="work-meeting" name="work-meeting">
</form>

</body>
</html>

Output:


Input Type Email

The HTML <input type=”email”> is used for input fields that contain an email address:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="email">Type an email:</label>
  <input type="email" id="email" name="email">
</form>

</body>
</html>

Output:


Input Type File

The HTML <input type=”file”> specifies a file-select field and a “Browse/ Choose File” button (for upload):

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="file">Select a file:</label>
  <input type="file" id="file" name="file"><br><br>
</form>

</body>
</html>

Output:




Input Type Hidden

The HTML <input type=”hidden”> specifies a hidden input field (that is not visible to a user):

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="name">Name and surname:</label>
  <input type="text" id="name" name="name"><br>
  <input type="hidden" id="customerId" name="customerId" value="3007">
</form>
 
</body>
</html>

Output:



Note: While the value is not displayed to the user in the page’s content, it is visible in the “View Source” functionality!

Input Type Image

The HTML <input type=”image”> specifies 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:



Input Type Month

The HTML <input type=”month”> selects a month and year:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="work-meeting">Work meeting (month/ year):</label>
  <input type="month" id="work-meeting" name="work-meeting">
</form>

</body>
</html>

Output:


Input Type Number

The HTML <input type=”number”> specifies a numeric input field:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="quantity">Amount (select between 1 and 10):</label>
  <input type="number" id="amount" name="amount" min="1" max="10">
</form>

</body>
</html>

Output:


Input Type Password

The HTML <input type=”password”> specifies a password field:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br>
</form>


</body>
</html>

Output:





Input Type Radio

The HTML <input type=”radio”> specifies a radio button:

<!DOCTYPE html>
<html>
<body>

<p>What is your favourite colour?</p>

<form action="">
  <input type="radio" id="blue" name="colour" value="blue">
  <label for="blue">Blue</label><br>
  <input type="radio" id="yellow" name="colour" value="yellow">
  <label for="yellow">Yellow</label><br>
  <input type="radio" id="other" name="colour" value="other">
  <label for="other">Other</label><br><br>
</form> 

</body>
</html>

Output:

What is your favourite colour?





Input Type Range

The HTML <input type=”range”> specifies a control for entering a number whose exact value is not important (the default range is 0 to 100) You can set limits on numbers that are accepted with the min, max, and step attributes:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get">
  <label for="vol">Volume (between 0 and 100):</label>
  <input type="range" id="vol" name="vol" min="0" max="100">
</form>

</body>
</html>

Output:


Input Type Reset

The HTML <input type=”reset”> specifies a reset button that will reset all form values to the default values:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label>
  <br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="reset">
</form> 

</body>
</html>

Output:







If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.


Input Type Search

The HTML <input type=”search”> is used for search fields:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="gsearch">Search:</label>
  <input type="search" id="search" name="search">
</form>

</body>
</html>

Output:


Input Type Submit

The HTML <input type=”submit”> specifies a button for submitting:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>

Output:






If you click “Submit”, you will open the page called “/page not found”.

Input Type Tel

The HTML <input type=”tel”> is used for input fields that contain a telephone number:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="phone">Type a telephone number:</label><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br>
  <small>Format: 123-45-678</small><br>
</form>

</body>
</html>

Output:



Format: 123-45-678

Input Type Text (default)

The HTML <input type=”text”> specifies a line text input field:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
</form>

</body>
</html>

Output:







Input Type Time

The HTML <input type=”time”> allows the user to select a time (no the time zone):

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="select-time">Select a time:</label>
  <input type="time" id="select-time" name="select-time">
</form>

</body>
</html>

Output:


Input Type URL

The HTML <input type=”url”> is used for input fields that contain a URL address:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="homepage">Add your web page :</label>
  <input type="url" id="webPage" name="webPage">
</form>

</body>
</html>

Output:


Input Type Week

The HTML <input type=”week”> allows the user to select a week and year:

<!DOCTYPE html>
<html>
<body>

<form action="">
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
  
</form>

</body>
</html>

Output:


Enjoy coding!

Read also:

HTML input accept Attribute

HTML form tag

HTML & CSS Range Sliders