Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property respectively. Let us understand them one by one with examples. Text Shadow To add shadow to text, use the text-shadow property. Let us see the syntax − text-shadow: value The above value can be the following − h-shadow− Set the position of the horizontal shadow. v-shadow− Set the position of the vertical shadow. blur-radius− Set the blur radius. color− Set the shadow color of the shadow. Create a text shadow Let us see an example to create a text shadow − ... Read More
Contact chips can be considered as a small contact card on a web page. If you want to list multiple support staff or team members on a web page, then to align the details properly, use the contact chips. It only includes a small profile image with the name. Let us see how to create contact chips on a web page with HTML and CSS. Create containers For the contact chips, create individual containers. First, include the profile image using the element. Add the image source for the profile image using the src attribute − ... 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
To create underlined navigation links, use the border-bottom property in CSS. The border-bottom is a shorthand for the width, style, and color of the bottom border. These links will be displayed underlined on hover as well using the :hover selector. With that, the selected link will also get underlined. Let us see how to create bottom bordered i.e., underlined navigation links on a web page with HTML and CSS. Create the navigation links Use the element to create the navigation links on a web page − Home Login ... Read More
A paragraph can be bordered easily on a web page with HTML and CSS. With that, to border the paragraph, we can also use an image. To create border images in CSS, use the border-image property. The following is the syntax of the border-image property − Syntax border-image: value; The value can be − border-image-source − The source of the image to be set as border border-image-slice − Slice the border image. The image is slice in the following sections− four corners, four edges and the middle. border-image-width − width of the border image border-image-outset − ... 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
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
The overlay effect can be easily created on a web page. Let’s say we have placed the divs together on a web page. To let any of them appear when required is called an overlay effect. The overflow is also closeable with a cross sign on the top-right. Let us see how to create an overlay effect with HTML and CSS. Set the container for overlay A div is set for the overlay with a cross sign to close the overflow and a button for the same purpose − × Script to hide ... Read More
The fixed navigation bar fix on the web page using the position property and even on scroll it remains intact. It sticks to the top. On a lot of websites these days, the navigation bar fix to the top. The top property is also used. By specifying the CSS position property, we can create a fixed navigation bar using CSS. The syntax of position property in CSS is as follows − Selector { position: /*value*/; } Above, the value of the position property is fixed to set the fixed navigation bar. Set a container ... Read More
We can easily create an image with a transparent background text. Set a black background with 0.5 opacity using the CSS background property. Position this using the position property and place to the bottom of an image. Place the text there i.e., a transparent background text on an image. Let us see how to create an image with a transparent background text with HTML and CSS. Set an image container An image container is set and within that the image and some content is shown. This content goes to the bottom − ... Read More