To create a browser window example with CSS, the code is as follows −Example Live Demo    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    .menuBar {       border: 3px solid #f1f1f1;       border-top-left-radius: 4px;       border-top-right-radius: 4px;    }    .menuRow {       padding: 10px;       background: #f1f1f1;       border-top-left-radius: 4px;       border-top-right-radius: 4px;    }    .browserField {       float: left;   ... Read More

To stretch the elements to fit the whole height of the web browser window, use the height property and set it to 100%. The same height:100% is also set for the entire web page. Let us see how to stretch elements to fit the whole height of the browser window. Set the container We will set a . This will stretch to the whole height and width of the web browser window − This div element will stretch to the whole height and width of the window Height of the HTML document The web page is set with ... 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

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

To add a transition with hover on CSS, first, use the :hover selector. Under this, use the transform property and scale the element. For the transition, use the transition property. The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS ... Read More

To center a button vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the ... Read More

To center an element vertically and horizontally with CSS, use the justify-content and align-items properties. We have used flex in our examples. The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; justify-content: /*value*/ } The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the center ... Read More

To create a flip box with CSS, the code is as follows −Example Live Demo    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;       margin:20px;    }    .flipCard {       background-color: transparent;       width: 300px;       height: 300px;       perspective: 1000px;    }    .innerCard {       position: relative;       width: 100%;       height: 100%;       text-align: center;       transition: transform 0.6s;       transform-style: preserve-3d;       box-shadow: ... Read More

The zoom an element on hover, use the :hover selector. The scale() method of the transform property is used to zoom i.e. scale an element. The transition duration is set using the transition property. Let us see how to zoom/ scale an element on hover with HTML and CSS. Scale a circle To scale a circle, first, we have set a div − The transition for the div is set using the transition property − .zoomDiv { padding: 50px; background-color: yellow; transition: transform 0.2s; ... Read More

On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More