CSS

Can we create a Modal Box using only HTML and CSS?

modal box

We’ve explored various methods for creating a modal box using only HTML and CSS, so we’ll share our thoughts and notes after trying it out. Can we create a Modal Box using only HTML and CSS? Let me get straight to the point, modal box can be created using only HTML and CSS.However, we found […]

How to Create Accordion Menu using only HTML and CSS

accordion css

In this article, we will explain how to create an accordion menu using only HTML and CSS. ⓪Completion Image of Accordion Menu We aim to implement an accordion menu that slowly opens on click, using HTML and CSS, as shown below. ①Prepare the parts of the Accordion Menu in HTML Let’s use the power of […]

[CSS] How to create a Toggle Switch and 5 Sample Designs

toggle button

In this article, we will introduce how to create a toggle switch using only HTML and CSS and introduce 5 designs. ①Prepare parts of toggle switch with HTML Let’s start by preparing the parts of toggle switch with HTML.We will use the functionality of checkboxes and create a toggle switch with div tags (since the […]

Drag and Drop File using only HTML and CSS

drag and drop

In this article, we will explain about how to create file drag-and-drop functionality using only HTML and CSS. ⓪Goal of this article We aim to implement a file selection feature through drag-and-drop using only HTML and CSS, as outlined below. ①The input type=”file” allows for drag and drop The first thing we should know is […]

[CSS] How to Style input type=”file” button

input type="file"

With the ::file-selector-button pseudo-element, it is no longer necessary to use JavaScript to modify the design of input type=”file”.In this article, we will discuss how to modify the design of input type=”file” using only CSS. We will also provide an explanation for changing button text, which can be a bit tricky. What the ::file-selector-button is […]

[CSS]How to make infinite loop slider

infinite loop slider

In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using only CSS. ①Prepare slide elements Prepare slide elements in HTML. Don’t forget to prepare two sets of slides as shown below (here, 4 slides per set). ②Add slide animation The CSS is sufficient as follows. Ensure […]