Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
A look for a smartphone, mobile, or desktop view can be easily created with CSS. For our example, we are creating a mobile i.e., a smartphone looks and will also open a random website in it. We will create a mobile device like structure and use iframe to add the website link. Let us see how to create a smartphone like device look on a web page. Create a container for the mobile device Create a parent div container − Set ... Read More
A select box allows you to create a dropdown for users to select a specific value from a list. These generally appear when let’s say you want to a user to select a degree from a list of degrees, favourite sports from a list of popular sports, etc. Let us see how to create custom select boxes with CSS and JavaScript. The color of the select box, the appearance, etc. can be easily changed. Let us see how − Create a container for the select box First, create a container div for the select boxes. Option value 0 is where ... Read More
The design of the default checkboxes and radio buttons can be easily changed with CSS. The initial, selected and hovered properties can also be set for the checkboxes and radio buttons. Custom checkbox The following is the code to create a custom checkbox. First, set the containers for the checkboxes. A div container for each checkbox. The checkbox is created using the input type checkbox − Rice Flour Above, the 1st checkbox is by default checked using the checked attribute ... Read More
The rounded corner of an element is set on a web page using the border-radius property in CSS3. You can set the shape of the rounded corners with − length − Set shape of the corners in length units. Default is 0. Read about length units % − Set the shape in percentage Let us see two examples to set rounded corners for a container and an image. Create rounded corners We have two divs here to show the difference between a normal and a container with rounded corners − Rounded Corners Default corners Example The ... Read More
To create keyframe animations in CSS3, define individual keyframe. Keyframes will control the intermediate animation steps in CSS3. Keyframes are the rules for animation on a web page. The animation properties are used with keyframes to control the animation. Let us see the syntax − Syntax @keyframes animationname {selector {styles;}} Above, animationname− The name of the animation. selector− This is the keyframe selector i.e. the animation duration %. styles− These are the CSS style properties Animate a rectangle to a circle Create a rectangle and animate it to a circle. The animation duration is set to ... Read More
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