DEV Community: Anita Maity

How to Create An Image Slider in HTML and CSS

Anita Maity — Tue, 12 Jan 2021 09:36:00 +0000

The image slider is an element that allows you to organize many images in one place. It can also be called a modern image gallery. This type of slider is very easy to make. You can only make it using HTML, CSS, and JavaScript programming code. I have already shared with you how to make many types of sliders but this slider is completely different. It can be called a fullscreen image slider in general. In this case, the images can be seen throughout the display. Here you can use as many pictures as you need. Two buttons are used here to change the images. JavaScript programming code has been used to make those buttons work. HTML code is used to add images. The image slider has been designed in a completely modern way using CSS code.

Using the links below you can download the source code needed to enhance it and watch the live demo. You can also use the link below to watch the video tutorial.

➤ Demo and Download Code

➤ Watch Video Tutorial

Simple Accordion Menu Using HTML And CSS Only

Anita Maity — Fri, 08 Jan 2021 15:16:56 +0000

In this article, I am going to show you how to create an accordion menu using only simple HTML and CSS code. There are many ways to create an accordion menu. But the easiest way I am going to show this article. I created this menu using a very small amount of HTML and CSS code.

You can follow the video tutorial below to know more about this menu bar. From this video, you can learn step by step how this accordion menu bar was created.

Demo: Click here

Download: Click here

You can download the source code required to make it completely free by clicking on the download button above. You can use the demo button above to watch the live demo.

If you want to know which programming code has been used to extend an element, you can follow the tutorial below. Below I have shown you how to create this menu bar in four steps.

Step 1: Add menus and text

The menus in this menu bar and the accompanying text have been created using the following programming codes. Here I am using six menus. You can add as many menus as you like and make changes.

 <!-- html code-->
    <h1>Pure CSS Accordion Menu</h1>
    <div class="accordionMenu">
        <!-- 1st menu  -->
        <input type="radio" name="trg1" id="acc1" checked="checked">
        <label for="acc1">Quisquam Doloremeos</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 2nd menu -->
        <input type="radio" name="trg1" id="acc2">
        <label for="acc2">Fugiat esse oditanimi</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 3rd menu -->
        <input type="radio" name="trg1" id="acc3">
        <label for="acc3">Quibusdam adipisci</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 4th menu -->
        <input type="radio" name="trg1" id="acc4">
        <label for="acc4">Harum animi placeat</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 5th menu -->
        <input type="radio" name="trg1" id="acc5">
        <label for="acc5">Obcaecati Quibusdam</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 6th menu -->
        <input type="radio" name="trg1" id="acc6">
        <label for="acc6">Modi excepturi</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
    </div>

Step 2: Design the background and menus

Menu in this accordion menu using your own programming codes
These have been designed. Blue color has been used in the background of the menus.

/* now add css code */
body{
    background: #ecf0f1;
    font-family: 'source sans pro';
    font-weight: 400;
}
h1{
    font-size: 35px;
    color: #2c97de;
    text-align: center;
}
.accordionMenu{
    width: 500px;
    margin: 0 auto;
}
.accordionMenu input[type=radio]{
    display: none;
}
.accordionMenu label{
    display: block;
    height: 50px;
    line-height: 47px;
    padding: 0 25px 0 10px;
    background: #2c97de;
    font-size: 18px;
    color: #fff;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #e6e6e6;
}

Step 3: Design and hide the contents of the menus

In general, the contents of this menu bar are hidden, only the menus are visible. The following programming code has been used to hide and design those.

.accordionMenu label::after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #ffffff;
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 10;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordionMenu .content{
    max-height: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.accordionMenu .content .inner{
    font-size: 1.2rem;
    color: #2c97de;
    line-height: 1.5;
    background: white;
    padding: 20px 10px;
}

Step 4: Add some animations to the accordion menu

In general, the content associated with menus is hidden. When you click on that menu, the contents will appear. To do this, some special programming code has been used which I have given below.

.accordionMenu input[type=radio]:checked + label:after{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordionMenu input[type=radio]:checked + label + .content{
    max-height: 2000px;
    height: auto;
}

I have created this accordion menu using these few methods. If you want to know the complete information, you can watch the video above. Hopefully from this tutorial, you have learned how to create an accordion menu bar. If you have any problem, you can ask me by commenting. Special thanks to you for reading this article to the end.

How To Make a Calculator Using Only HTML and CSS

Anita Maity — Mon, 04 Jan 2021 10:32:57 +0000

Have you ever built a calculator using only HTML programming code?

If your answer is no then congratulations you are going to learn something new in this article.
Many say that JavaScript programming code plays the most significant role in making calculators. So I made a calculator that was made using only HTML programming code. Here a small amount of CSS programming code has been used to design. From this article, you will learn how to make a calculator using a very small amount of HTML programming code. The calculator shown here works exactly like a normal calculator.

Basically here you can easily solve any kind of addition, subtraction, multiplication, division, etc. mathematics calculations. Different types of buttons have been used here and they have been designed using CSS code. I have designed many more types of calculators before, such as Casio Company, neumorphism, Responsive, etc. But this design is completely new and common. In this article, you will find all kinds of necessary source codes and tutorials that will help you create this new design.

Watch the video tutorial to know the complete step by step

You can watch the video tutorial below. This will help you to fully learn and understand how to make this calculator.

Demo: Click here

Download: Click here

Hopefully from the video above you have learned how to make this calculator.

How this calculator is made using HTML and CSS

Below I am going to show how I made it and what programming code was used to make the elements used here.

Made the background

First of all, I made the background of this calculator using CSS code. I have used a light green color in the background, you can change the color to your liking.

body{
    background-color: #a9bd7e;
}
table{
    margin: auto;
    background-color: #9dd2ea;
    width: 295px;
    height: 325px;
    text-align: center;
    border-radius: 4px;
}

Add Buttons

Here I have used different types of buttons which are made up of complete HTML programming code.
There are some keyword buttons and some operator buttons. Operator buttons help to do calculations like addition, subtraction, multiplication, division, etc.

<input type="button" name="one" value="1" onclick="calc.input.value += '1'">
            <input type="button" name="two" value="2" onclick="calc.input.value += '2'">
            <input type="button" name="three" value="3" onclick="calc.input.value += '3'">
            <input type="button" class="operator" name="plus" value="+" onclick="calc.input.value += '+'">
            <br>
            <input type="button" name="four" value="4" onclick="calc.input.value += '4'">
            <input type="button" name="five" value="5" onclick="calc.input.value += '5'">
            <input type="button" name="six" value="6" onclick="calc.input.value += '6'">
            <input type="button" class="operator" name="minus" value="-" onclick="calc.input.value += '-'">
             <br>
             <input type="button" name="seven" value="7" onclick="calc.input.value += '7'">
             <input type="button" name="eight" value="8" onclick="calc.input.value += '8'">
             <input type="button" name="nine" value="9" onclick="calc.input.value += '9'"> 
             <input type="button" class="operator" name="times" value="*" onclick="calc.input.value += '*'">
             <br>
             <input type="button" id="clear" name="clear" value=" C " onclick="calc.input.value=''">
             <input type="button" name="zero" value="0" onclick="clac.input.value +='0'">
             <input type="button" name="doit" value=" = " onclick="calc.input.value=eval(calc.input.value)">
             <input type="button" class="operator" name="div" value="/" onclick="calc.input.value += '/'">
             <br>

Design the buttons

The following codes have been used to design the buttons created by the HTML code and turn it into a calculator. Different types of colors have been added using these codes.

input{
    outline: 0;
    position: relative;
    left: 5px;
    top: 5px;
    border: 0;
    color: #495069;
    background-color: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px rgba(0,0,0,0.2);
}

.operator{
    background-color: #f1ff92;
    position: relative;
}


#clear{
    float: left;
    position: relative;
    display: block;
    background-color: #ff9fa8;
    margin-bottom: 15px;
}

Make the Display

The following programming codes have been used to make the display in this calculator. When you do some calculations, the display that is made to see those calculations is made with the help of the following programming codes.

<input type="text" name="input" size="16" id="answer">

#answer{
    width: 270px;
    font-size: 26px;
    text-align: center;
    background-color: #f1faeb;
    float: left;
}
/* answer hover effect */
#answer:hover{
    width: 270px;
    font-size: 26px;
    text-align: center;
    box-shadow: 0 4px rgba(0,0,0,0.2);
    background-color: #f1faeb;
}

Add Hover Effect

This calculator uses its own programming code to create the hover effect. When you hover the mouse over a button, the buttons will change the current color. The following code has been used to perform this task.

/* add input hover effectg */
input:hover{
    border: 0 solid #000;
    color: #495069;
    background-color: #8f5fda;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px #644294;
}
/* hover */
.operator:hover{
    background-color: #e7f56b;
    box-shadow: 0 4px #b7c259;
}
/* hover */
#clear:hover{
    float: left;
    display: block;
    background-color: #f297a0;
    margin-bottom: 15px;
    box-shadow: 0 4px #cc7f86;
}

Hopefully, the tutorial above has helped you a lot to learn how to make a calculator. If you have any problems, you can definitely comment and ask me. I will definitely help you. You can follow our official website to read more such articles.

 💗  If you like this HTML calculator, please like the article 💗

How To Create 3D Social Media Buttons Using HTML and CSS

Anita Maity — Fri, 01 Jan 2021 10:48:54 +0000

Hello, friends in this article I will show you how to create 3D social media buttons using HTML and CSS programming code. Here I have created 4 social media buttons which are made up of three complete dimensions. HTML code has been used to structure them and CSS programming code has been used to design them. These buttons are made by hover. When someone clicks on the buttons or moves the mouse over them, the buttons will rise slightly above normal and change color. Different colors have been used for each button.

Demo: Click Here

Download: Click Here

You can watch the live demo by clicking on the demo button below. You can also use the download link above to download the required source codes for free.
Below are the programming codes for making it. You can easily make it using those.

HTML Code

<ul>
        <li>
            <a href="#"> 
            <i class="fa fa-facebook" aria-hidden="true"></i>
             <span> -Facebook</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <span> -Twitter</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-google-plus" aria-hidden="true"></i>
                <span> -Google</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <span> -Instagram</span>
            </a>
        </li>
    </ul>

CSS Code

/*add css code*/
body{
    margin: 0;
    padding: 0;
    background: #ccc;
    font-family: 'roboto condesed', sans-serif;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
} 
ul li{
    list-style: none;
    margin: 0 5px;
}
ul li a .fa{
    font-size: 40px;
    color: #262626;
    line-height: 80px;
    transition: 0.5s;
    padding-right: 14px;
}
ul li a span{
    padding: 0;
    margin: 0;
    position: absolute;
    top: 30px;
    color: #262626;
    letter-spacing: 4px;
    transition: 0.5s;
}                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);ul li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
ul li a {
    text-decoration: none;
    display:absolute;
    display:block;
    width:210px;
    height:80px;
    background: #fff;
    text-align:left;
    padding-left: 20px;
    transform: rotate(-30deg) skew(25deg) translate(0,0);
    transition:.5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
  }
  ul li a:before {
    content: '';
    position: absolute;
    top:10px;
    left:-20px;
    height:100%;
    width:20px;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewY(-45deg);
  }
  ul li a:after {
    content: '';
    position: absolute;
    bottom:-20px;
    left:-10px;
    height:20px;
    width:100%;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewX(-45deg);
  }

    ul li a:hover{
      transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
      box-shadow: -50px 50px 50px rgba(0,0,0,.5);
  }                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);ul li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
  ul li:hover .fa{
color: #fff;
  }
  ul li a:hover span{
      color: #fff;
  }

  ul li:hover:nth-child(1) a{
      background: #3b5998;
  }
  ul li:hover:nth-child(1) a::before{
      background: #365492;
  }
  ul li:hover:nth-child(1) a::after{
    background: #4a69ad;
}
/*2nd*/

ul li:hover:nth-child(2) a{
    background: #00aced;
}
ul li:hover:nth-child(2) a::before{
    background: #097aa5;
}
ul li:hover:nth-child(2) a::after{
  background:#53b9e0;
}
/* 3rd button*/
ul li:hover:nth-child(3) a{
    background: #dd4b39;
}
ul li:hover:nth-child(3) a::before{
    background: #b33a2b;
}
ul li:hover:nth-child(3) a::after{
  background:#e66a5a;
}
/* 4th botton*/
ul li:hover:nth-child(4) a{
    background: #e4405f;
}
ul li:hover:nth-child(4) a::before{
    background: #d81c3f;
}
ul li:hover:nth-child(4) a::after{
  background:#e46880;
}

Colorful Neon Effect on Hover using HTML & CSS

Anita Maity — Tue, 29 Dec 2020 16:14:12 +0000

The following video will help you to know how neon lite animation distribution is made using only plain HTML and CSS programming code. This is a great design that css programming has the most role to play. In the video below I have made two distributions. Under normal conditions, the buttons are transparent. When someone clicks on it or moves the mouse, the colors will shine brighter. In this case hover effect has been added.

Demo: Click Here

Download: Click Here