Tag: checkbox

Categories
Web development

CSS Desk Lamp (Switch On/ Off)

CSS Desk Lamp (Switch On/ Off)

To create the CSS Desk Lamp (Switch On/ Off) follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Desk Lamp (Switch On/Off) on the website click here.

Step1.

Add HTML

<div class="lamp-container">
  <div class="window"></div>
  <div class="computer"></div>
  <div class="screen"></div>
  <div class="picture"></div>
  <div class="coffee"></div>
  <input id='light' type='checkbox'>
  <label class='light' for='light'></label>
  <div class="lamp-base"></div>
  <div class="tube"></div>
  <div class="lamp-shade"></div>
</div>

Step2.

Add CSS

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

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

Style the container:

.lamp-container {
  position: relative;
  width: 400px;
  height: 400px;
  overlfow: hidden;
  background-color: #192c3d;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.lamp-container:after {
  content:"";
  position: absolute;
  background-color: #3b312a;
  width:350px;
  height: 13px;
  top:300px;
  left:25px;
}

.lamp-container:before {
  content:"";
  position: absolute;
  width:5px;
  height:100px;
  background-color: #2f425a;
  top:300px;
  left:40px;
  box-shadow: 5px 0 #1c364d, 20px 0 #2f425a, 25px 0 #1c364d, 290px 0 #1c364d, 295px 0 #2f425a, 310px 0 #1c364d, 315px 0 #2f425a;
}

Style the window, computer, coffee and the picture:

.computer {
  position: absolute;
  border: 8px solid #535460;
  width: 120px;
  height: 70px;
  background-color: #5b6580;
  top:187px;
  left:150px;
}

.computer:before {
  content:"";
  position: absolute;
  background-color: #42434f;
  width: 30px;
  height:30px;
  top:78px;
  left:45px;
}

.computer:after {
  content:"";
  position: absolute;
  background-color: #31323b;
  width: 100px;
  height: 7px;
  top:98px;
  left:10px;
}

.window {
  position: absolute;
  width: 200px;
  height: 250px;
  border: 10px solid #243e54;
  background-color: #376ea3;
  left:180px;
}

.window:before {
  content:"";
  position: absolute;
  height: 250px;
  width: 10px;
  background-color: #243e54;
  left:95px;
}

.window:after {
  content:"";
  position: absolute;
  background-color: #335266;
  width: 220px;
  height:10px;
  left:-10px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 15px #335266, 0 30px #335266, 0 45px #335266, 0 60px #335266, 0 75px #335266, 0 90px #335266,0 105px #335266, 0 120px #335266, 0 135px #335266, 0 150px #335266, 0 165px #335266, 0 180px #335266, 0 195px #335266, 0 210px #335266, 0 225px #335266, 0 240px #335266;
}

.picture {
  position: absolute;
  width:100px;
  height: 70px;
  border: 5px solid #2f4f67;
  background-color: #8b8c8e;
  left:25px;
  top:80px;
  overflow: hidden;
}

.picture:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 18px;
  height: 18px;
  background-color: #fff084;
  left:15px;
  top:7px;
}

.picture:after {
  content:"";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #3e4758;
  top:30px;
  box-shadow: 45px 20px #606c82,40px 10px #3e4758,80px 20px #3e4758, 60px -10px #606c82;
}

.screen {
  position: absolute;
  width: 120px;
  height: 70px;
  overflow: hidden;
  top:195px;
  left:158px;
}

.screen:before {
  content:"";
  position: absolute;
  width: 40px;
  height: 20px;
  opacity:0.3;
  background-color: #0e212f;
  top:10px;
  left:15px;
  box-shadow: 0 30px #0e212f, 50px 0 #0e212f, 50px 20px #0e212f, 50px 30px #0e212f;
}

.screen:after {
  content:"";
  position: absolute;
  background-color: rgba(255,255,255,0.2);
  width:150px;
  height: 150px;
  transform: skew(60deg);
  left: 65px;
  top:-38px;
}

.coffee {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: white;
  border-radius:0 0 20px 20px;
  top:270px;
  left:295px;
}

.coffee:before {
  content:"";
  position: absolute;
  background-color: #d16d72;
  width:60px;
  height:5px;
  border-radius:0 0 30px 30px;
  top:25px;
  left:-10px;
}

.coffee:after {
  content:"";
  position: absolute;
  border: 4px solid white;
  width:10px;
  height: 10px;
  border-radius:50%;
  left:32px;
  top:2px;
}
CSS desk lamp

Style the lamp:

.lamp-base {
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: #0e8488;
  top:292px;
  left:50px;
  z-index:2;
}

.lamp-base:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 10px;
  background-color: #0b9496;
  border-radius: 10px 10px 0 0;
  top:-10px;
  left:5px;
}

.tube {
  background-color: #979dac;
  position: absolute;
  width:5px;
  height: 100px;
  top:190px;
  left:50px;
  transform: rotate(-20deg);
  z-index:1;
  box-shadow: 10px 0 #7e8491;
}

.tube:before {
  content:"";
  position: absolute;
  background-color: #979dac;
  width:5px;
  height: 100px;
  transform: rotate(80deg);
  top:-70px;
  left:60px;
  box-shadow: 10px 0 #7e8491;
}

.tube:after {
  content:"";
  position: absolute;
  border-radius:50%;
  width: 10px;
  height:10px;
  background-color: #1b7776;
  border:3px solid #175961;
  outline: 3px solid #1b7776;
  top:-13px;
  left:0;
}

.lamp-shade {
  position: absolute;
  background-color: #0f2230;
  width: 30px;
  height: 30px;
  border-radius: 30px 30px 0 0;
  top:110px;
  left:125px;
  z-index:3;
  transform: rotate(-25deg);
}

.lamp-shade:before {
  content:"";
  position: absolute;
  border-radius: 50px 50px 0 0;
  background-color: #089697;
  width:70px;
  height:30px;
  top:28px;
  left:-20px;
  transform: rotate(5deg);
}

.light {
  border-radius:50%;
  position: absolute;
  background-color: #fff07c;
  width:30px;
  height: 30px;
  top:145px;
  left:140px;
}

.light:before {
  content:"";
  position: absolute;
  width: 45px;
  height:0;
  border-bottom: 150px solid rgba(255, 240, 124,0.3);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  transition: .3s;
  top:10px;
  left:-3px;
  transform: skew(20deg);
  opacity:0;
}

.light:after {
  content:"";
  position: absolute;
  width: 10px;
  height:7px;
  background-color: #1e5b63;
  top:130px;
  left:-47px;
  border-radius: 5px 5px 0 0;
  transition: .2s;
  transform-origin: bottom;
  cursor: pointer;
}

Use the input checkbox to on/off the light:

input#light {
  display: none;
}

#light:checked + .light:after {
  transform: scaleY(0.5);
}

#light:checked + .light:before {
  opacity:1;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

Pure CSS Envelope (Open/Close on click)

CSS Umbrella (Open/Close on Click)

CSS Window Rain (Blind Open/Close) Animation

Categories
Web development

CSS Window Rain (Blind Open/Close) Animation

CSS Rain Animation

Demo:

*to see the CSS Window Rain animation on the website click here.

To create the CSS Window Rain (Blind Open/Close) animation follow the steps below and watch the video tutorial.

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="window">
  <div class="content">
    <div class="shine"></div>
    <div class="rain">
      <div class="dropletOne"></div>
      <div class="dropletTwo"></div>
      <div class="dropletThree"></div>
      <div class="dropletFour"></div>
      <div class="dropletFive"></div>
    </div>
  </div>
   <input id='blind' type='checkbox'>
    <label class='blind' for='blind'></label>
  <div class="roll"></div>
</div>

Step2.

Add CSS

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

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

.window {
  position: relative;
}

Add the city view:

.content {
  position: relative;
  background-color: #253237;
  width: 270px;
  height: 320px;
  overflow: hidden;
  border:10px solid #fff;
}

.content:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 100px;
  background-color: #242423;
  top:240px;
  box-shadow: 30px 30px #242423, 70px -15px #242423, 130px 20px #242423, 180px -5px #242423,240px 40px #242423, 220px -40px #333533,170px -20px #333533, 130px 10px #333533,90px -10px #333533,40px -30px #333533,10px -5px #333533;
}

.content:after {
  position: absolute;
  content:"";
  background-color: #b69121;
  width:10px;
  height:15px;
  top:250px;
  left:10px;
  box-shadow: 17px 0 #926c15, 34px 0 #805b10, 85px -15px #926c15, 103px -15px #b69121, 155px 15px #805b10, 175px -10px #926c15,190px -10px #b69121, 240px -40px #76520e, 40px -35px #76520e;
}
CSS Window Rain Animation

Add the rain:

.rain {
  position: absolute;
}

.rain:before {
  position: absolute;
  content:"";
  width:270px;
  height:10px;
  background-color: #fff;
  top:160px;
}

.rain:after {
  position: absolute;
  content:"";
  border-radius: 20px 20px 0 0;
  width:30px;
  height: 5px;
  background-color: #b2b2b2;
  top:155px;
  left:120px;
}

.dropletOne, .dropletTwo, .dropletThree, .dropletFour, .dropletFive {
  position: absolute;
  background-color: #fff;
  height: 15px;
  width: 1px;
  transform: rotate(25deg);
  box-shadow: -50px -50px #fff, 50px -270px #fff, 60px -100px #fff,-40px -130px #fff, -80px -250px #fff;
}

.dropletOne {
  left:200px;
  animation: rain 1.3s linear infinite;
}

.dropletTwo {
  top:-20px;
  left:100px;
  animation: rain .8s linear infinite .5s;
}

.dropletThree  {
  top:-50px;
  left:50px;
  animation: rain 1.2s linear infinite 1s;
}

.dropletFour {
  top:-70px;
  left:150px;
  animation: rain 1s linear infinite 1.3s;
}

.dropletFive {
  top:-50px;
  left:230px;
  animation: rain 1.1s linear infinite 1.7s;
}

Animate the rain:

@keyframes rain {
  0% {
    opacity: 0.9;
    top: -100px;
    transform: rotate(25deg) translateX(0);
  }
  100% {
    opacity: 0;
    top: 600px;
    transform: rotate(25deg) translateX(-150px);;
  }
}
CSS Rain Animation

Style the rest of the window:

.shine {
  position: absolute;
  background-color: rgba(255,255,255,0.03);
  width:70px;
  height:290px;
  top:40px;
  left:20px;
  transform: skew(-30deg);
  box-shadow: 190px 0 rgba(255,255,255,0.03);
}
.roll {
  position: absolute;
  z-index:10;
  background-color: #333;
  width: 320px;
  height: 15px;
  border-radius:20px 20px 0 0;
  left:-15px;
  top:-10px;
}

.roll:before {
  position: absolute;
  width:350px;
  content:"";
  background-color: #fff;
  height:15px;
  left:-15px;
  top:350px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}
CSS Window Rain

Add the blind:

.blind {
  position: absolute;
  width: 290px;
  height: 50px;
  background-color: #9db4c0;
  left:0;
  top:0;
  z-index:2;
  transition: .5s;
  box-shadow: inset 0 -7px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.15);
}

.blind:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:2px;
  height: 130px;
  top:0;
  left:300px;
}

.blind:after {
  content:"";
  position: absolute;
  width: 10px;
  height:25px;
  border-radius:20px;
  background-color: #333;
  top:130px;
  left:296px;
  cursor: pointer;
}
CSS Window Blind Animation

To animate the blind (open/close on click):

input#blind {
  display: none;
}

#blind:checked + .blind {
  height: 340px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Desk Lamp (Switch On/ Off)

CSS Birthday Animation

CSS Cyclist /Bike Animation

Categories
Web development

CSS Umbrella (Open/Close on Click)

CSS Umbrella

Demo:

*to see the animation on the website click here.

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

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="rainyDay">
  <div class="umbrella">
      <input id='panel' type='checkbox'>
    <label class='panel' for='panel'></label>
    <div class="stick"></div>
  </div>
  <div class="rain">
    <div class="dropletOne"></div>
    <div class="dropletTwo"></div>
    <div class="dropletThree"></div>
    <div class="dropletFour"></div>
    <div class="dropletFive"></div>
  </div>
</div>

Step2.

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

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

.rainyDay {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius:50%;
  overflow: hidden;
  background-color: #33415c;
}

.umbrella {
  position: relative;
  top:200px;
  left:200px;
}

Style the umbrella:

.panel {
  position: absolute;
  background-color: #333;
  width:5px;
  height:120px;
  top:-50px;
  z-index:3;
}

.panel:before {
  content:"";
  position: absolute;
  top:20px;
  left:-97px;
  width:200px;
  height: 350px;
  background-color: #161a1d;
  opacity:0.1;
  transition: .2s ease;
}

.panel:after {
  content:"";
  position: absolute;
  cursor: pointer;
  width: 200px;
  height:100px;
  border-radius: 100px 100px 0 0;
  background-color: #a4161a;
  box-shadow: inset 0 -10px #333, inset 50px -10px #ba181b, inset -50px -10px #ba181b;
  top:-75px;
  left:-97px;
  transition: .2s ease;
  transform-origin: top;
}
.stick {
  position: absolute;
  background-color: #333;
  width:5px;
  height:20px;
  border-radius: 20px 20px 0 0;
  top:-143px;
  left:0.5;
  z-index:5;
}

.stick:before {
  content:"";
  position: absolute;
  border-right: 7px solid #b1a7a6;
  border-bottom: 7px solid #b1a7a6;
  border-left:7px solid transparent;
  border-top:7px solid transparent;
  width:20px;
  height:20px;
  border-radius:50%;
  top:190px;
  left:-1px;
  transform: rotate(45deg);
}

.stick:after {
  content:"";
  position: absolute;
  width:7px;
  height:15px;
  background-color: #b1a7a6;
  top:195px;
  left:-1px;
}

Open/ Close the umbrella:

input#panel {
  display: none;
}

#panel:checked ~ .panel:after {
  transform: scaleX(0.2) scaleY(1.5);
}

#panel:checked + .panel:before {
  transform: scaleX(0.000001);
  opacity:0;
}

Add some droplets:

.rain {
  position: absolute;
}

.dropletOne, .dropletTwo, .dropletThree, .dropletFour, .dropletFive {
  position: absolute;
  width:15px;
  height: 15px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color: #979dac;
  top:-20px;
  left:150px;
  transform: rotate(-45deg);
  box-shadow: -80px -100px #979dac, 80px 150px #979dac;
  animation: rain 4s linear infinite;
}

.dropletTwo {
  top:-30px;
  left:200px;
  animation: rain 4s linear infinite 1s;
}

.dropletThree {
  top:-70px;
  left:100px;
  animation: rain 4s linear infinite 2s;
}

.dropletFour {
  top:-70px;
  left:50px;
  animation: rain 4s linear infinite 2.5s;
}

.dropletFive {
  top:-90px;
  left:10px;
  animation: rain 4s linear infinite 3s;
}

Animate droplets:

@keyframes rain {
  0% {transform: translateY(-20px) rotate(-45deg);}
  100% {transform: translateY(450px) rotate(-45deg);}
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Desk Lamp (Switch On/ Off)

CSS Bubble Animation

CSS Toggle Switch

Categories
Web development

CSS Airplane Window (Open/Close)

CSS Airplane Window View

Demo:

*click on window shade to open/close to the window.
*to see the animation on the website click here.

To create the CSS Airplane Window (Open/Close) follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="windowSeat">
  <div class="window">
    <div class="clouds"></div>
    <div class="wing"></div>
       <input id='flap' type='checkbox'>
    <label class='flap' for='flap'></label>
  </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;
}

.windowSeat {
  position: relative;
}

Style the window and the window view:

.window {
  position: relative;
  width:150px;
  height: 200px;
  background-color: #90e0ef;
  border: 10px solid #e9ecef;
  border-radius: 70px;
  overflow: hidden;
  box-shadow: inset 5px 5px 25px rgba(0,0,0,0.2);
}

.clouds {
  position: absolute;
  top:100px;
  background-color: #caf0f8;
  border-radius:50%;
  width: 50px;
  height: 50px;
  left:0;
  box-shadow: 40px 20px #caf0f8, 85px 40px #caf0f8, 105px 30px #caf0f8, 70px 20px #caf0f8, -10px 20px #caf0f8, 130px 10px #caf0f8, 170px 20px #caf0f8, 200px 30px #caf0f8;
  animation: move 10s linear infinite;
}

@keyframes move {
  from {left:-100px};
  to {left: 100px};
}

.clouds:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: #fff;
  width:50px;
  height: 50px;
  top:30px;
  left:-10px;
  box-shadow: 30px 30px #fff, 70px 20px #fff, 60px 50px #fff, 105px 30px #fff, 140px 10px #fff, 140px 40px #fff, 170px 10px #fff, 200px 20px #fff, 180px 40px #fff, 240px 10px #fff;
}

.wing {
  position: absolute;
  width: 40px;
  height:0;
  border-bottom: 200px solid #ced4da;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: 50px;
  left:-10px;
  transform: rotateX(45deg) skew(-30deg);
}

.wing:before {
  content:"";
  position: absolute;
  width: 20px;
  height:0;
  border-bottom: 200px solid rgba(0,0,0,0.1);
  border-right: 22px solid transparent;
  left:24px;
  transform: rotate(-2deg);
}

.flap {
  position: absolute;
  width: 200px;
  height: 250px;
  background-color: #dee2e6;
  border-radius:80px;
  left:-20px;
  top:-200px;
  cursor: pointer;
  transition: .3s;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}

.flap:before {
  content:"";
  position: absolute;
  width:40px;
  height:10px;
  border-radius:10px;
  background-color: #adb5bd;
  top:230px;
  left:75px;
}

Make the window shade open/ close:

input#flap {
  display: none;
}

#flap:checked + .flap {
  transform: translateY(150px);
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS & JavaScript Bee Progress Bar

CSS Window Rain (Blind Open/Close) Animation

CSS Image Zoom on Hover

Categories
Web development

How to create a custom checkbox and radio button with CSS?

CSS Custom Checkbox

Demo:

*to see the CSS Custom Checkbox demo on the website click here.

CUSTOM CHECKBOX

Step1.

Add HTML

<h3>Custom Checkbox:</h3>
<label class="customContainer">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="customContainer">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ffe8d6;
}

.customContainer:hover input ~ .checkmark {
    background-color: #b7b7a4;
}

.customContainer input:checked ~ .checkmark {
    background-color: #6b705c;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.customContainer input:checked ~ .checkmark:after {
    display: block;
}

.customContainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

Output:

Custom Checkboxes

CUSTOM RADIO BUTTON

Step1.

Add HTML

<h3>Custom Radio Button:</h3>
<label class="customContainer">One
  <input type="radio" checked="checked" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Two
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>
<label class="customContainer">Three
  <input type="radio" name="radio">
  <span class="radioButton"></span>
</label>

Step2.

Add CSS

.customContainer {
    display: block;
    position: relative;
    color: #333;
    padding-left:40px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 25px;
    user-select: none; 
}

.customContainer input {
  	position: absolute;
	  opacity: 0;
    cursor: pointer;}

.radioButton {
  position: absolute;
  background-color: #ffe8d6;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

.customContainer:hover input ~ .radioButton{
  background-color: #b7b7a4;
}

.customContainer input:checked ~ .radioButton{
  background-color: #6b705c;
}

.radioButton:after {
  content: "";
  position: absolute;
  display: none;
}

.customContainer input:checked ~ .radioButton:after {
  display: block;
}

.customContainer .radioButton:after {
  background-color: #fff;
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

Output:

Custom Radio Button:

Enjoy coding!

Read also:

HTML Checkbox

CSS Umbrella (Open/Close on Click)

CSS Airplane Window (Open/Close)

Categories
Web development

HTML Checkbox

The checkbox is shown as a square box that is ticked (checked) when activated. Using checkboxes is a good option when you want to give your website visitors the option to choose one or more options of a limited number of choices.

HTML Checkbox

The CSS <input type=”checkbox”> specifies a checkbox.

Syntax:

<input type="checkbox">

Example: 

<!DOCTYPE html>
<html>
<body>
<div><h3>How many cats do you have?</h3><br>
  <input type="checkbox" id="one" name="one" value="one">
  <label for="one"> One</label><br>   
  <input type="checkbox" id="two" name="two" value="two">
  <label for="two"> Two</label><br>     
  <input type="checkbox" id="three" name="three" value="three">
  <label for="three"> Three</label><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> Other</label><br>
 
</div>
</body>
</html>

Note: Always add the <label> tag.

Output:

How many cats do you have?






Click here to see how to style the HTML Checkbox using CSS.

Enjoy coding!

Read also:

HTML Radio Buttons

How to create a custom checkbox and radio button with CSS?

CSS Toggle Switch