Close

Use of CSS Grid as a mask

This is an example of a web form where the CSS grid is used as a mask to create a poster. It is designed using CSS, HTML, and Bootstrap framework 4. The CSS grid is displayed in 14 rows, which are defined in HTML. The background image is imported to the code with its URL. The background color of the HTML form is given as #124559, with the background-size set as 100vw. The body of the form is given a style set of font-family as 'Roboto Slab', serif, font-size as1.8vw, and color as #D3E6D9. The name of the person is displayed with the styles font-family as 'Rozha One', serif, position as relative, and font-size as 5vw. The items in the grid are left partially transparent to expose areas of the background image by changing the placement of the grid rows and columns with changing the value of grid-column-end: span and grid-row-end: span. The images and bootstrap styles are imported to the code with their URLs. Source: https://codepen.io/andybarefoot/pen/wrXvLj

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.