Web Development Articles - Page 514 of 1049

To create a typing effect with JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: rgb(128, 19, 218);       color:white;       border:none;    }    .heading{       color:crimson;    } typeText Click me    document.querySelector('.typeButton').addEventListener('click',typeText);    var i = 0;    var text = 'This text is currently being typed across... It is still typing..';    var speed = 50;    function typeText() {       if (i < text.length) {          document.querySelector('.heading').innerHTML += text.charAt(i);          i++;          setTimeout(typeText, speed);       }    } OutputThe above code will produce the following output −On clicking the “Click me” button −

To create a countdown timer with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .timer {       text-align: center;       font-size: 60px;       margin-top: 0px;       color: white;       background-color: rgb(100, 38, 214);    } Countdown Timer Example    var countDownDate = new Date("June 5, 2022 11:27:15").getTime();    var timeClear = setInterval(function() {       var now = new Date().getTime();       var ... Read More

To use icons to make animated effect, the code is as follows −Example Live Demo    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       padding: 20px;    } Animating Icon example    function userShift() {       var userEle;       userEle = document.getElementById("user");       userEle.innerHTML = "";       setTimeout(function() {          userEle.innerHTML = "";       }, 1000);       setTimeout(function() {          userEle.innerHTML = "";       }, 2000);    }    userShift();    setInterval(userShift, 4000); OutputThe above code will produce the following output −

A divider on a web page is separate styled for dividing sections. These sections appear horizontally on a web page. A dotted, dashed, double, etc. dividers can be easily created. It works like borders and the color of such dividers can easily change. To create a divider, use the element and style it with border properties on a web page. Let us see how to create dividers with CSS. Create a dashed divider Create an element for the divider − Style the to create a dashed divider − .dashed { ... Read More

To create a vertical line with CSS, is a simple process that can be done using various approaches. In this article, we will learn and understand three different approaches for creating a vertical line with CSS We are using border and some block elements in this article, our task is to create a vertical line with CSS. Approaches to Create a Vertical Line Here is a list of approaches to create a vertical line with CSS which we will be discussing in this article with stepwise explaination and complete example codes. Creating Vertical Line using ... Read More

To change bullet colors for lists, use the ::before selector. Also, to allow adding a color, you need to set the list-style to none. Set an Unordered List For our example, we have set a element − Cricket Football Tennis Archery Basketball Hockey Set List Style The list-style property is set to none − ul { list-style: none; } Change the Bullet Color Use the ::before selector and set the bullet color. To display the bullet, use the content: \2022 unicode. The color is changed using the color property − ul li::before { ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction flex-wrap flex-flow justify-content align-items align-content Set a Parent div First, set a parent div and style the container with display flex. The flex container becomes flexible with display flex. Wrap the flex item with the flex-wrap: wrap − .container { display: flex; ... Read More

To change the column width based on screen size, use media queries. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. First, set the div − Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores! Set the Initial Width To set the width of the above div, use the width property in CSS − .sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; } Change the Column Width Now, to change ... Read More

To create linear gradient, use the linear-gradient() method of the background-image property. Syntax The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions − background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% ); The gradient can also be set on an image using the url() with linear-gradient() − ... Read More

The property opacity is the modern solution and works for Firefox , Safari, Opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers − .transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } Opacity That Works on all Browsers For image opacity that works in ... Read More