Photoshop Question posted in
The official user guide can be found here.

Adjust shade effect with border outline and text effect – Photoshop

Outline Border and Text Effect

I am trying to capture the same effect as in the image using the following properties. When I open the image in the photoshop then the selected colors does not give the same result as in the picture. And how can I adjust the box shade effects.

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <title>Document</title>

  <style>
    * {
      box-sizing: border-box;
    }
    
    .container {
      max-width: 520px;
      max-height: 180px;
      background-color: antiquewhite;
    }
    
    fieldset {
      max-width: 518px;
      max-height: 178px;
      padding-right: 15px;
      padding-left: 15px;
    }
    .form-group {
  margin-bottom: 1rem;
  background-color:#efeeef;
}

    .btn{
        font-weight:600;
        color:#fff;
        text-align:center;
        vertical-align:middle;
        border:1px solid transparent;
        font-size:1.2rem;
        line-height:1.5;
    }
    .btn-primary {
  color: #fff;
  background-color: #1172f4;
  border-color: #000000;
}
.btn-primary:hover {
  color: #fff;
  background-color:#1172f4;
  border-color: black;
}
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color:#1172f4;
  border-color: #1875f6;
  box-shadow:none;
}
.btn-primary:active:focus {
  box-shadow:none;
}

    .form-group{
        box-shadow:none;

        
    }
    .form-control{
        border:2px solid #e2e2e2;
        display:block;
        width:100%;
        padding:.375rem;
        font-size:1rem;
        font-weight:1rem;
        line-height: 1.5;
        color:#e5e5e5;
        background-color: #efefef;
        [![appearance:none][2]][2];
        border-radius:.25rem;
        outline:0;
    }
    .form-control:focus{
        box-shadow:none;
        background-color:#efefef;
        outline:0;
      
    }
    .form-control:active{
        background-color:#efefef;
        box-shadow:none;
        outline:0;
      
    }
    .form-control:active:focus{
        box-shadow:none;
    }
    
   .form-email{
       margin-left:10px;
       margin-right:10px;
       padding-right:10px;
       width:95%;
       border:none;
       font-weight:500;
       
   }
   .form-group{
    border:1.5px solid #e3e3e3;
    border-radius:4px;
    outline: 2px #e3e3e3;
   }
  </style>

</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-sm-6 col-sm-offset-3 form-box">

        <form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">

          <fieldset>
            <!--Start 2nd form field set-->
            <div class="form-bottom">
              <div class="form-group" style="margin-top:20px;width:100%;">

                <input type="text" name="form-email" placeholder="Enter Your email address" class="form-email form-control" id="form-email">
              </div>
              <!--End of 2nd form groupdiv-->

              <button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;">Get Started</button>
            </div>
            <!--End of bottom div-->

          </fieldset>
          <!--End of second form fieldset-->
        </form>

</body>

</html>

But after a long effort still unable to capture the same result of the text area. Please help me to fix this issue. How can I know the font style from this png image and adjust a little shade with border?

Tags:

2

Answers


  1. 0

    Try something like this:

    input{
  background-color:#EFEEEF;
  color:#999798;
  border:none;
  box-shadow:0 0 3px black;
  padding:5px 10px;
  border-radius:2px;
}
    <input placeholder="Enter your email address">
    Login or Signup to reply.
  2. 0

    Looking at your image, there are 3 colours we need to achieve.

    1. The border colour – #cacaca
    2. The interior shadow – #e1e1e1
    3. The exterior shadow – #e5e5e5

    The first one’s easy, since there isn’t any colour-blending involved, we can just specify it.

    The other 2 required a bit of playing to settle on the right value.

    input
{
    border-radius: 4px;
    border: solid 1.25px #cacaca;
    font-weight: 500;
    line-height: 1.5;
    color:  #e5e5e5;
    
    box-shadow: inset 0 0 2px #989898, /* inset shadow */
                0 0 2px #A8A8A8;           /* outside shadow */
}
    <input id='email' placeholder='Enter your email address'></input>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search