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

To create a download link with HTML, the code is as follows −Example Live Demo Download Link example Click on the image above to download it OutputThe above code will produce the following output −

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

To zoom/scale an element on hover with CSS, we will be using two different approaches. In this article, we will be understanding these two approaches to explain how to zoom/scale an element on hover with CSS. We are having two examples in each approach where we have a div element and an image, our task is to zoom div and image element on hover with CSS. Approaches to Zoom/Scale an Element on Hover Here is a list of approaches to zoom/scale an element on hover with CSS which we will be discussing in this article with stepwise explaination and complete ... Read More