To create a glowing text with CSS, use the animation property. For animations, we use @keyframes. The @keyframes is a rule wherein you need to specify the CSS styles. Bind the animation to an element for it to work successfully. The animation-name property is used to set the name of the @keyframes animation. The duration of the animation is set using the animation-duration property. In the same way, we have the following properties that allows animations on a web page − animation animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode However, in this example, we have used the shorthand animation property to create a glowing text. We have set the following ... Read More

A responsive knockout text transforms when the web browser size is changed. A knockout text looks like it's been cut out of a surface to reveal the background. First, we will place a background image on the web page using the background-image property. The text will be placed using the position property. To transform, the translate() will be used. Set the background image To create a knockout text, first set the background image on which the text will appear. The background image will be included using the background-image property with the url() − background-image: url("https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); The container for ... Read More

An ordered or unordered list is always visible with number or bullets respectively. These are the styles of a list on a web page set using the list-style-type property. Let us see how to create an unordered list without bullets. Create an unordered list An unordered list is created using the element − Tiger Giraffe Lion Panther Jaguar Style the list and remove the bullets Set the list-style-type property to none to remove the bullets from the unordered list − ul { ... Read More

To create a basic list, use the element. Use the to place the list items in the . To form it a list group, use the CSS styled. Let us see how to transform a basic list into a list group with HTML and CSS. First, we will create an unordered list. Create an unordered list The element is used to create an unordered list. The list items are set using the elements − Lion Tiger Leopard Cheetah Jaguar ... Read More

We will see how to create a coupon with CSS. For that, we need to set the company name on the top, an image below, After that comes with coupon code and a text representing when the coupon will expire. Set the Parent Container for the Coupon We gave set the parent cdiv here. Within this we will set the divs for the text, image, etc − Style the parent container − .couponContainer { border: 5px dashed #bbb; width: 80%; border-radius: 15px; margin: 0 auto; max-width: 600px; } Set the Container for the ... Read More

To separate the content on an HTML web page, the element is used. The tag only consists of the opening tag i.e.; no closing tag is required. Insert a horizontal rule i.e., a line using the element. To style the element, the border properties play a major role. The border shorthand property or if you want to style a specific area of the horizontal line, then border-top, border-bottom, border-left, etc. properties can be used. Let us see how to style the element with HTML and CSS. Set the hr element For our example, we have ... Read More

To create empty circle on a web page, use the border-radius property. To align multiple circles on a web page, set the display property to inline-block. Let us see how to create empty circles with HTML and CSS. Create a container for circles Set a div container for the multiple circles we wish to create on a web page − Create the empty circles Use the border-radius property with the value 50% to create a circle. To align the circles ... Read More

The labels on a web page can be used to symbolize danger, warning, information symbols in the form of colors. With Bootstrap, pre-defined classes are available. However, even CSS styles can help us to achieve the same without using Bootstrap. Labels The element is used to set different labels for information, success, warning and danger. These are the different classes for each label we will set with CSS − Success Info Warning Danger Other Style the buttons The labels are styled like this − span { font-size: 18px; font-weight: 600; ... Read More

To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes. Set Different Divs for Notes Here, we are creating three notes, representing danger success and information. We have set different divs − Danger!Operation may damage your computer Success!Operation has been performed successfully Info!Need more resources to perform this operation Danger Note For our ... Read More

A callout messages are like notification visible on the bottom of the page. Set the offers or coupons here for the users. With that, if a user is not interested in these messages, then a cross sign to close it is also place on the top of the callout message. Let us see how to create callout messages with HTML and CSS. Create a container for the callout A div container is set for the callout that includes the callout heading, message, close button, etc − Check our offers × ... Read More