Front End Technology Articles - Page 628 of 860

Grid Container in CSS has grid items. These items are placed inside rows and columns. Let us create aCSS Grid container and set the number of columns in a Grid:ExampleLive Demo                    .container {             display: grid;             background-color: blue;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

The object-fit property in CSS is used to resize image or video to fit its container. It has the following valuescontain: Content is scaled to fitcover: clipped to fitfill: fills the content box.ExampleYou can try to run the following code to implement object-fit property with the cover value.Live Demo                    .myimg {             width:250px;             height:350px;             object-fit:fill;          }                     SWIFT          

The purpose of adding images to websites is to increase their visual appeal and user appeal. But if we didn't have control over the size of the images on websites, they wouldn't be nearly as attractive. Fortunately, CSS makes it quite simple to alter the image size. The CSS image size can be altered using a variety of methods. First, let's examine the reasons why altering the size of an image in CSS matters. The image would fill every pixel of its size if there were no limits on its size. However, every image should fit inside the container that ... Read More

Use the transform CSS property to flip an image. You can try to run the following code to flip an image on mouseover:ExampleLive Demo                    .myimg:hover {             transform: scaleX(-1);          }                     Heading One       Let's flip the image on mouse over:          

Use the grid-template-columns property to define the number of columns in CSS Grid Layout.You can try to run the following code to set a number of columns. Here, 3 column grid is set:ExampleLive Demo                    .container {             display: grid;             background-color: yellow;             grid-template-columns: auto auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: blue;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

To position text to top right, use the right and top property. You can try to run the following code to implement it:ExampleLive Demo                    .box {             position: relative;          }          img {             width: 100%;             height: auto;             opacity: 0.6;          }          .direction {             position: absolute;             top: 10px;             right: 19px;             font-size: 13px;          }                     Heading One       Below image has text in the top right:                          Top Right Corner          

To add rounded corners to a button, use the border-radius property.ExampleYou can try to run the following code to add rounded corners −Live Demo                    .button {             background-color: yellow;             color: black;             text-align: center;             font-size: 15px;             padding: 20px;             border-radius: 15px;          }                     Result       Click below for result:       Result    

Use the bottom CSS property to add arrow to the top of the tooltip.ExampleYou can try to run the following code to add a tooltip with arrow to the top:Live Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: 150%;          left: 50%;          margin-left: -60px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          bottom: 100%;          left: 50%;          margin-left: -10px;          border-width: 3px;          border-style: solid;          border-color: transparent transparent blue transparent;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

To center an image, use the margin-left, margin-right and block CSS properties. You can try to run the following code to center an imageExampleLive Demo                    img {             border: 2px solid orange;             border-radius: 3px;             padding: 7px;          }          img {             display: block;             margin-left: auto;             margin-right: auto;             width: 50%;          }                        

To make an image responsive, you can try to run the following code:ExampleLive Demo                    img {             max-width: 100%;             height: auto;          }