Creating a Form with HTML and CSS

Question

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image.

My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty replicating the shape and position of the design shown below.

Below is my current HTML code:

<header class="main" style="background-image: url(./assets/images/bg-hero.jpg)">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="row row--no-pad">
                    <div class="col-6">
                        <a href="/">
                            <img src="./assets/images/logo.png" alt="">
                        </a>
                    </div>

                    <div class="col-6">
                        <a href="#" class="menu-toggle"></a>
                    </div>
                </div>

                <div class="row">
                    <div class="banner">
                        <div class="row">
                            <div class="col-12">
                                <h1>Lorem ipsum dolor sit amet</h1>

                                <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>

                                <a href="#" class="button button--primary">View our services</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

This is the design I am trying to achieve:

https://i.sstatic.net/IOuRz.jpg

Thank you,

Ben

html css pseudo-element

Answer 1

Answer №1

If you're searching for a technique called image clipping, there are numerous resources online that explain how to achieve this using CSS (here is one example). The process is quite simple and only requires a single line of CSS, utilizing the clip-path property. I recommend checking out the documentation for more information.

Creating a clip-path may be challenging depending on your desired result, but tools like Clippy can assist you with generating clip paths. For the image provided, the following code snippet should suffice:

html, body {
  margin: 0;
  height: 100%;
  background-color: #124;
  background-image: linear-gradient(to right, #111, #124);
  background-image: -webkit-linear-gradient(to right, #111, #124);
}
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/GIF_Koi_Pond.gif');
  background-size: cover;
  background-position: center;
  clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
}
.main-content {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 15px;
}
.main-content h1 {
  width: 250px;
  margin: 0;
}
.main-content a {
  color: #fff;
  background-color: #3a7;
  text-decoration: none;
  padding: 5px 25px;
  width: 150px;
  text-align: center;
}

<div class="background-image"></div>
<div class="main-content">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>
  <a href="#" class="button button--primary">View our services</a>
</div>

The crucial part is:

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

Also, remember to include the -webkit version of the clip-path property:

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
-webkit-clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

Keep in mind that applying clip-path to an element like a div will not just clip the background-image, but the entire element itself.

Answer 2

If you're searching for a technique called image clipping, there are numerous resources online that explain how to achieve this using CSS (here is one example). The process is quite simple and only requires a single line of CSS, utilizing the clip-path property. I recommend checking out the documentation for more information.

Creating a clip-path may be challenging depending on your desired result, but tools like Clippy can assist you with generating clip paths. For the image provided, the following code snippet should suffice:

html, body {
  margin: 0;
  height: 100%;
  background-color: #124;
  background-image: linear-gradient(to right, #111, #124);
  background-image: -webkit-linear-gradient(to right, #111, #124);
}
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/GIF_Koi_Pond.gif');
  background-size: cover;
  background-position: center;
  clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
}
.main-content {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 15px;
}
.main-content h1 {
  width: 250px;
  margin: 0;
}
.main-content a {
  color: #fff;
  background-color: #3a7;
  text-decoration: none;
  padding: 5px 25px;
  width: 150px;
  text-align: center;
}

<div class="background-image"></div>
<div class="main-content">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>
  <a href="#" class="button button--primary">View our services</a>
</div>

The crucial part is:

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

Also, remember to include the -webkit version of the clip-path property:

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
-webkit-clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

Keep in mind that applying clip-path to an element like a div will not just clip the background-image, but the entire element itself.

Answer 3

Answer №2

Consider using image clipping for a modern touch, or opt for a more traditional look with borders like the following example:

#cutBox{
  width: 100%;
  height: 600px;
  background-image: url('https://wallpaperplay.com/walls/full/7/2/4/272374.jpg');
  background-size: cover;
  display: flex;
}

#leftPane, #rightPane{
  background-color: midnightblue;
}

#leftPane, #rightPane{
  height: 100%;
  width: 40%;
}

#leftTri{
  border-left: 100px solid midnightBlue;
  border-top: 300px solid transparent;
  border-bottom: 300px solid transparent;
  margin-right: 200px;
}
#rightTri{
  border-left: 100px solid transparent;
  border-top: 300px solid midnightblue;
  border-bottom: 300px solid midnightblue;
}

#leftPane > .pane-text{
  position: relative;
  color: white;
  top: 40%;
  font-size: 26px;
  margin-left: 60%;
  right: -10px;
}

.subtext{
  margin-left: 20px;
  font-size: 18px;
}

<div id="cutBox">
  <div id="leftPane">
    <div class="pane-text">
      Lorem Ipsum
      <div class="subtext">
        dolor sit amet
      </div>
    </div>
  </div>
  <div id="leftTri">
  </div>
  <div id="rightTri">
  </div>
  <div id="rightPane">
  </div>
</div>

Given its responsive nature, this design may appear slightly distorted on small screens, but it generally functions well across various devices.

Answer 4

Consider using image clipping for a modern touch, or opt for a more traditional look with borders like the following example:

#cutBox{
  width: 100%;
  height: 600px;
  background-image: url('https://wallpaperplay.com/walls/full/7/2/4/272374.jpg');
  background-size: cover;
  display: flex;
}

#leftPane, #rightPane{
  background-color: midnightblue;
}

#leftPane, #rightPane{
  height: 100%;
  width: 40%;
}

#leftTri{
  border-left: 100px solid midnightBlue;
  border-top: 300px solid transparent;
  border-bottom: 300px solid transparent;
  margin-right: 200px;
}
#rightTri{
  border-left: 100px solid transparent;
  border-top: 300px solid midnightblue;
  border-bottom: 300px solid midnightblue;
}

#leftPane > .pane-text{
  position: relative;
  color: white;
  top: 40%;
  font-size: 26px;
  margin-left: 60%;
  right: -10px;
}

.subtext{
  margin-left: 20px;
  font-size: 18px;
}

<div id="cutBox">
  <div id="leftPane">
    <div class="pane-text">
      Lorem Ipsum
      <div class="subtext">
        dolor sit amet
      </div>
    </div>
  </div>
  <div id="leftTri">
  </div>
  <div id="rightTri">
  </div>
  <div id="rightPane">
  </div>
</div>

Given its responsive nature, this design may appear slightly distorted on small screens, but it generally functions well across various devices.

Answer 5

Answer №3

To achieve the effect shown above, you can utilize the clip-path property.

For instance, by using a polygon shape in the CSS code below, you can create a mask that forms a star shape:

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

If you want to learn more about the clip-path property, check out this tutorial.

Answer 6

To achieve the effect shown above, you can utilize the clip-path property.

For instance, by using a polygon shape in the CSS code below, you can create a mask that forms a star shape:

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

If you want to learn more about the clip-path property, check out this tutorial.

Answer 7

Answer №4

Another technique you can utilize is layering multiple backgrounds with a gradient partially covering another background-image:

* {
  padding: 0;
  box-sizing: border-box;
}

header {
  background: linear-gradient(45deg, rgb(0, 50, 100) 60%, transparent 70%, transparent 80%, rgb(0, 50, 100) 90%) top left no-repeat, linear-gradient(135deg, rgb(0, 50, 100) 60%, transparent 70%, transparent 80%, rgb(0, 50, 100) 90%) bottom left no-repeat, url(https://placeimg.com/800/600/nature/10) center right;
  background-size: 100% 50%, auto;
  /*example purpose*/
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  color: white;
  max-width: 900px;
  min-height:300px;
  box-shadow: 0 0 3px;
  padding-right: 200px;
  margin: auto;
  padding-left:1em;
}

body {
  background: rgb(0, 50, 100)
}

nav {
  position: absolute;
  right: 5%;
  top: 4em;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

nav b {
  display: block;
  width: 2.5em;
  height: 3px;
  background: white;
  margin: 6px 0
}

<header>
  <nav><b></b></nav>
  <h1>heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at justo eget nulla lobortis consectetur et sit amet erat. Donec ac eros nunc. Nullam euismod libero non nibh laoreet, sed sagittis purus sodales.</p>
    <a>call to action</a>
</header>

Adjust the gradient values to suit your design requirements - this code snippet serves as an illustration.

Answer 8

Another technique you can utilize is layering multiple backgrounds with a gradient partially covering another background-image:

* {
  padding: 0;
  box-sizing: border-box;
}

header {
  background: linear-gradient(45deg, rgb(0, 50, 100) 60%, transparent 70%, transparent 80%, rgb(0, 50, 100) 90%) top left no-repeat, linear-gradient(135deg, rgb(0, 50, 100) 60%, transparent 70%, transparent 80%, rgb(0, 50, 100) 90%) bottom left no-repeat, url(https://placeimg.com/800/600/nature/10) center right;
  background-size: 100% 50%, auto;
  /*example purpose*/
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  color: white;
  max-width: 900px;
  min-height:300px;
  box-shadow: 0 0 3px;
  padding-right: 200px;
  margin: auto;
  padding-left:1em;
}

body {
  background: rgb(0, 50, 100)
}

nav {
  position: absolute;
  right: 5%;
  top: 4em;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

nav b {
  display: block;
  width: 2.5em;
  height: 3px;
  background: white;
  margin: 6px 0
}

<header>
  <nav><b></b></nav>
  <h1>heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at justo eget nulla lobortis consectetur et sit amet erat. Donec ac eros nunc. Nullam euismod libero non nibh laoreet, sed sagittis purus sodales.</p>
    <a>call to action</a>
</header>

Adjust the gradient values to suit your design requirements - this code snippet serves as an illustration.

Creating a Form with HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Craft a unique parallax effect using Framer Motion's clipping feature

Tips for repositioning a child div to the top upon detecting a text change

The curious conduct of wild safari creatures

Incorporate Bootstrap styling into a layout featuring a row containing numerous input fields

Is the page wrapper failing to contain or wrap anything at all?

Ways to align list items to the right and left in a stylish manner using HTML and CSS while maintaining alternating bullet points

CSS - Overlapping <a> elements when resized

Instructions on creating an "already clicked" style for an <a> href

Data structure designed specifically for a drawing tool application

Troubleshooting media queries on an example webpage

Merge different $_GET parameters together before submitting

Display Text Only When Selected - Material-UI

React: The row flex-direction is not being applied as expected

Incorporating Computer Modern Serif into Your Jekyll GitHub Page

Having trouble identifying the source of the margin-right styling being used

Image link in HTML / CSS not functional on one half of the image

Elusive Appearance of the Flask Flash Message

Animating splitting elements with VueJS

Flexbox helps create responsive layouts with ease

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy