Neomorphism

本站不會更新了
新家網址：https://chupai.github.io/
文章：https://chupai.github.io/posts/200315_lodash/

Neomorphism

Neomorphism UI 練習。

1. Button

body {
  background-color: #f2f3f7;
}

.button {
  color: #5a84a2;
  box-shadow: 
    -2px -2px 8px rgba(white, 1),
    -2px -2px 12px rgba(white, 0.5),
    inset 2px 2px 4px rgba(white, 0.1),
    2px 2px 8px rgba(black, 0.15);

  &:hover {
    box-shadow: 
      inset -2px -2px 8px rgba(white, 1),
      inset -2px -2px 12px rgba(white, 0.5),
      inset 2px 2px 4px rgba(white, 0.1),
      inset 2px 2px 8px rgba(black, 0.15);
  }
}

2. Social

.btn {

  background: #e5e5e5;
  box-shadow: 
    -7px -7px 17px rgba(white, 0.5),
     7px  7px 17px rgba(black, 0.1);
     
  &:active {
    box-shadow: 
      inset -7px -7px 17px rgba(white, 0.5),
      inset 7px  7px 17px rgba(black, 0.1);
  }
}

3. Form

4. CheckBox

input[type="checkbox"] + label {
  background-color: #ebf5fc;
  box-shadow: 
    -2px -2px 5px rgba(white, 1),
     2px  2px 5px rgba(black, 0.1);
     
  &:checked + label {
    background-color: #ebf5fc;
    box-shadow: 
      inset -2px -2px 5px rgba(white, 1),
      inset  2px  2px 5px rgba(black, 0.1);
  }
}

5. Timer

6. TEMP

.temp {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  width: 240px;
  height: 240px;
  
  border-radius: 50%;
  box-shadow: 
     30px  30px 30px -10px rgba(black, 0.1),
    -30px -30px 30px -10px rgba(white, 0.4),
     0.5px  0.5px 0 rgba(black, 0.2),
    -0.5px -0.5px 0 rgba(white, 1);
  &::before, &::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
  }
  &::before {
    width: 88%;
    height: 88%;
    box-shadow: 
      inset  4px  4px 6px -1px rgba(black, 0.2),
      inset -4px -4px 6px -1px rgba(white, 1);
  }
  &::after {
    width: 78%;
    height: 78%;
    box-shadow: 
      inset  4px  4px 6px -1px rgba(black, 0.2),
      inset -4px -4px 6px -1px rgba(white, 1);
  }
}