CSS浮雕效果

news2024/12/27 8:51:04

效果图：

HTML源码：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>
<body>
        

<form>
        <div class="segment">
          <h1>Sign Up</h1>
        </div>
        <label>
          <input type="text" placeholder="Username" />
        </label>
        <label>
          <input type="password" placeholder="Password" />
        </label>
        <button class="red" type="button" title="Login"> Log in <svg t="1730280552580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5041" width="16" height="16" style="vertical-align: middle;"><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#ae1100" p-id="5042"></path></svg></button>

        <div class="input-group">
          <label>
            <input type="text" placeholder="Register By Email" />
          </label>
          <button class="unit" type="button" title="Register"><svg t="1730281008926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6135" width="16" height="16"><path d="M722.6 645.295c17.497-26.999 9.793-63.072-17.206-80.567-21.997-14.255-45.104-26.406-69.045-36.377 69.66-51.387 114.937-134.006 114.937-227.013 0-155.467-126.483-281.951-281.951-281.951s-281.951 126.483-281.951 281.951c0 92.95 45.223 175.527 114.811 226.919-51.763 21.557-99.309 53.261-140.153 94.103-82.080 82.080-127.284 191.213-127.284 307.292 0 32.174 26.082 58.254 58.254 58.254s58.254-26.080 58.254-58.254c0-175.385 142.685-318.068 318.068-318.068 61.579 0 121.298 17.606 172.699 50.915 27.002 17.498 63.074 9.793 80.567-17.206zM469.334 135.897c91.225 0 165.442 74.218 165.442 165.442s-74.218 165.442-165.442 165.442c-91.225 0-165.442-74.217-165.442-165.442s74.218-165.442 165.442-165.442z" p-id="6136" fill="#ae1100"></path><path d="M926.63 743.197h-66.992v-66.992c0-32.174-26.080-58.254-58.254-58.254s-58.254 26.080-58.254 58.254v66.992h-66.992c-32.174 0-58.254 26.080-58.254 58.254s26.080 58.254 58.254 58.254h66.992v66.992c0 32.174 26.080 58.254 58.254 58.254s58.254-26.080 58.254-58.254v-66.992h66.992c32.174 0 58.254-26.080 58.254-58.254s-26.080-58.254-58.254-58.254z" p-id="6137" fill="#ae1100"></path></svg></button>
        </div>
      </form>


<style>
        body,
html {
  background-color: #ebecf0;
}

body,
p,
input,
select,
textarea,
button {
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.2px;
  font-size: 16px; /* $ruler: 16px */
}

div,
p {
  color: #babecc; /* $color-shadow */
  text-shadow: 1px 1px 1px #fff; /* $color-white */
}

form {
  width: 320px; /* $ruler * 20 */
  margin: 0 auto;
}

.segment {
  padding: 32px 0; /* $ruler * 2 */
  text-align: center;
}

button,
input {
  border: 0;
  outline: 0;
  font-size: 16px; /* $ruler */
  border-radius: 320px; /* $ruler * 20 */
  padding: 16px; /* $ruler */
  background-color: #ebecf0; /* $color-bg */
  text-shadow: 1px 1px 0 #fff; /* $color-white */
}

label {
  display: block;
  margin-bottom: 24px; /* $ruler * 1.5 */
  width: 100%;
}

input {
  margin-right: 8px; /* $ruler / 2 */
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff; /* $color-shadow, $color-white */
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}

input:focus {
  box-shadow: inset 1px 1px 2px #babecc,
    inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}

button {
  color: #61677c;
  font-weight: bold;
  box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc; /* $color-white, $color-shadow */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc; /* $color-white, $color-shadow */
}

button:active {
  box-shadow: inset 1px 1px 2px #babecc,
    inset -1px -1px 2px #fff; /* $color-shadow, $color-white */
}

.button .icon {
  margin-right: 8px; /* $ruler / 2 */
}

button.unit {
  border-radius: 8px; /* $ruler / 2 */
  line-height: 0;
  width: 48px; /* $ruler * 3 */
  height: 48px; /* $ruler * 3 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px; /* $ruler / 2 */
  font-size: 19.2px; /* $ruler * 1.2 */
}

button.unit .icon {
  margin-right: 0;
}

button.red {
  display: block;
  width: 100%;
  color: #ae1100; /* $color-red */
  margin: 32px 0;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.input-group label {
  margin: 0;
  flex: 1;
}

</style>

</body>
</html>

相关参考：cssinspirationguide - csc inspiration guide onlinecsc inspiration guide onlinehttps://csscoco.com/inspiration/#/./shadow/relief-style-btn