Front End Technology Articles - Page 364 of 652

Shapes can be easily created on a web page with CSS. Not only rectangle, square, or circle, but triangle can also be created. The key to create shapes are the border properties, such border, border-radius, etc. Create a circle In this example, we will create a circle using the border-radius property − border-radius: 50%; Example Let us see the example − .circle { width: 100px; height: ... Read More

With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property. Let us see how to create top, bottom, left, and right arrows on a web page with HTML and CSS. HTML for arrows Under the element, set the element to create a design for arrows − CSS Arrows Right arrow: Left arrow: Up arrow: Down arrow: ... Read More

To add a transition with hover on CSS, first, use the :hover selector. Under this, use the transform property and scale the element. For the transition, use the transition property. The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS ... Read More

To center a button vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the ... Read More

To center an element vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the center ... Read More

To zoom/scale an element on hover with CSS, we will be using two different approaches. In this article, we will be understanding these two approaches to explain how to zoom/scale an element on hover with CSS. We are having two examples in each approach where we have a div element and an image, our task is to zoom div and image element on hover with CSS. Approaches to Zoom/Scale an Element on Hover Here is a list of approaches to zoom/scale an element on hover with CSS which we will be discussing in this article with stepwise explaination and complete ... Read More

On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More

To remove a class name from an element with JavaScript, the code is as follows −Example Live Demo    .newStyle {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       width: 100%;       padding: 25px;       background-color: rgb(147, 80, 255);       color: white;       font-size: 25px;       box-sizing: border-box;       text-align: center;    } Remove className with JavaScript Example Remove Class Click the above button to remove className from below div This is a DIV element.    document.querySelector(".btn").addEventListener("click", addClassName);    function addClassName() {       var element = document.getElementById("sampleDiv");       element.classList.remove("newStyle");    } OutputThe above code will produce the following output −On clicking the the “Remove Class” button −

To switch between dark and light mode with JavaScript, the code is as follows −Example Live Demo    body {       padding: 25px;       background-color: white;       color: black;       font-size: 25px;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .dark-mode {       background-color: black;       color: white;    }    .toggleButton {       padding: 12px;       font-size: 18px;       border: 2px solid green;    } Toggle Dark/Light Mode Example Toggle dark mode Click the above button to toggle dark mode    document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode);    function toggleDarKMode() {       var element = document.body;       element.classList.toggle("dark-mode");    } OutputThe above code will produce the following output −On clicking the “Toggle dark mode” button −

On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices. Compare Fields Set the fields for comparison. For that, you can use the and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. ... Read More