Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To crate fading buttons on a web page, use the opacity property. To enable this feature on hovering the mouse cursor, use the :hover selector. To fade in on hover, set the opacity to 1 on hover when the actual button is set to opacity less than 1. This works the opposite for fade out on hover. Fade out on hover Set the opacity to less than 1 to implement the fade out concept. To implement it on hover, use the :hover selector − button:hover { opacity: 0.5; } Example The following is the code ... Read More
Equal height columns can be created in a parent div on a web page. First, set the parent container as a table with the width 100%. Within that, create the columns and set the display property to table-cell. Let us see how to create equal height columns with HTML and CSS. Create a parent container Column 1 Column 1 Column 1 Column ... 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
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
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