Front End Technology Articles - Page 363 of 652

To change layouts based on screen size in CSS, we will create a parent div and wrap other children divs within it. Using Media Queries, the layout of the screen size will be changed. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop etc. In this article, we are having four boxes of same width, our task is to change layouts based on screen size in CSS. Steps to Chnage Layouts Based on Screen Size We will be following below mentioned steps to change layouts based on screen size in ... Read More

To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let’s say you want to set the 1st flex item as the last, then achieve this using the CSS order property. Set the parent container Set a div container with child divs − First Div Second Div Third Div The flex container Set the above container as a flex using the display property with the value flex − .container { height: 150px; ... Read More

We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction − Create a Container div First, set the divs inside a container(flex container) − First Div Second Div Third Div Style the Container and Make it Flexible The flex container becomes flexible by setting the display property to flex. The flex items are aligned using the align-items property − ... Read More

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

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

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 −