To control the dimensions of Flex Items in CSS, use the flex property. Consider flex as the length on flexible items. The flex includes the following properties − flex-grow − A number is set for the flex grow factor i.e., how much the item will grow relative to the other flexible items. flex-shrink − A number is set for the flex skrink factor i.e., how much the item will shrink relative to the other flexible items. flex-basis − The initial size of a flex item. Control the Dimensions of Flex Items With the Shorthand Property We have set ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction − Set the direction of the flex items flex-wrap − Set whether the flex items should wrap or not flex-flow − It is a shorthand property for flex-wrap and flex-direction justify-content − Align the flex items align-items − Vertically align the flex items align-content − Align flex lines Set ... Read More

To change the color of the placeholder attribute with CSS, we will be using ::placeholder pseudo-element which will update the default color of placeholder. In this article, we are having a text type input field with default placeholder color, our task is to change the color of the placeholder attribute with CSS. Steps to Change the Placeholder Color We have used input tag to create an input field and used label tag to define the input field. Then, we have used ::placeholder psuedo pseudo-element selector to select the placeholder and change ... 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

To create a custom scrollbar with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       height: 200vh; /*to create a scrollbar*/    }    ::-webkit-scrollbar {       width: 20px;    }    p {       font-size: 40px;    }    ::-webkit-scrollbar-track {       box-shadow: inset 0 0 5px grey;       border-radius: 10px;    }    ::-webkit-scrollbar-thumb {       background: rgb(75, 22, 161);       border-radius: 2px;    }    ::-webkit-scrollbar-thumb:hover ... Read More

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