Friday

inset shadow white space

Issue

I'm actually trying to do a website by myself for my classes and I have an inset border shadow problem with an input like there is some white space between the input and the shadow I think. So if it's possible to have some help.

Here's the code: https://jsfiddle.net/LeLicorne_/62xsn1gz/

:root {
  --primary-color: #252525;
  --secondary-color: #181818;
}


/*---------------------------------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  background: #333333;
}


/*---------------------------------------------------------------------------------*/

a {
  text-decoration: none;
}

.right {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: border-box;
}

.right .contact {
  background: none;
  position: absolute;
  margin-top: 0;
}

.right .contact .loc {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
}

.right .contact .loc .contactleft {
  position: absolute;
  width: 765px;
  height: 600px;
  left: 115px;
  top: 0;
  background: var(--primary-color);
  box-shadow: 0px 0px 5px 5px var(--primary-color);
  border-radius: 20px;
}

.right .contact .loc .contactleft label {
  display: block;
  font-size: 40px;
  margin: 20px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  color: white;
  align-items: center;
}

.right .contact .loc .contactleft #name {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #email {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #message {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 150px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft .sendmessage {
  display: block;
}


/*---------------------------------------------------------------------------------*/

@keyframes yellow {
  0% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
  50% {
    color: yellow;
    background: var(--secondary-color);
    box-shadow: 0px 0px 5px 5px var(--secondary-color);
  }
  100% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
}


/*---------------------------------------------------------------------------------*/


/* Ensemble */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* Handle hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charaset="utf-8">
  <link rel="stylesheet" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lo Re Baptiste</title>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>


<body>

  <div class="right">
    <div id="contact" class="contact">
      <div class="loc">
        <form class="contactleft" action="#home">
          <label for="name">Name</label>
          <input type="text" id="name" name="name"></input>
          <label for="email">Email</label>
          <input type="email" id="email" name="email"></input>
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </form>
      </div>
    </div>
  </div>


</body>

The white space from the input

Solution

Remove border-radius: 10px; on all inputs and #message

:root {
  --primary-color: #252525;
  --secondary-color: #181818;
}


/*---------------------------------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
  background: #333333;
}


/*---------------------------------------------------------------------------------*/

a {
  text-decoration: none;
}

.right {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: border-box;
}

.right .contact {
  background: none;
  position: absolute;
  margin-top: 0;
}

.right .contact .loc {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
}

.right .contact .loc .contactleft {
  position: absolute;
  width: 765px;
  height: 600px;
  left: 115px;
  top: 0;
  background: var(--primary-color);
  box-shadow: 0px 0px 5px 5px var(--primary-color);
  border-radius: 20px;
}

.right .contact .loc .contactleft label {
  display: block;
  font-size: 40px;
  margin: 20px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  color: white;
  align-items: center;
}

.right .contact .loc .contactleft #name {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #email {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 35px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft #message {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 150px;
  border: none;
  font-size: 20px;
  box-shadow: inset 0px 0px 5px 5px var(--secondary-color);
  background: white;
}

.right .contact .loc .contactleft .sendmessage {
  display: block;
}


/*---------------------------------------------------------------------------------*/

@keyframes yellow {
  0% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
  50% {
    color: yellow;
    background: var(--secondary-color);
    box-shadow: 0px 0px 5px 5px var(--secondary-color);
  }
  100% {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 0px 5px 5px var(--primary-color);
  }
}


/*---------------------------------------------------------------------------------*/


/* Ensemble */

::-webkit-scrollbar {
  width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* Handle hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charaset="utf-8">
  <link rel="stylesheet" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lo Re Baptiste</title>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>


<body>

  <div class="right">
    <div id="contact" class="contact">
      <div class="loc">
        <form class="contactleft" action="#home">
          <label for="name">Name</label>
          <input type="text" id="name" name="name"></input>
          <label for="email">Email</label>
          <input type="email" id="email" name="email"></input>
          <label for="message">Message</label>
          <textarea id="message" name="message"></textarea>
        </form>
      </div>
    </div>
  </div>


</body>

Answered By - カメロン

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

inset shadow white space

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels