Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Thiết Kế Neumorphism Cho Trang Web(2020)

Cách Thiết Kế Neumorphism Cho Trang Web(2020)


Ngày 25 Tháng 8 Năm 2020

Cách Thiết Kế Neumorphism Cho Trang Web(2020)

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách thiết kế component theo phong cách Neumorphism. Nó hướng tới sự tối giản bằng cách kết hợp các màu sắc đơn giản cùng với hiệu ứng shadow trong CSS. Và để hiểu rõ hơn thì bạn hãy cùng mình đi vào tìm hiểu nhé!

Nếu bạn muốn tìm hiểu thêm về thiết kế Neumorphism thì có thể tham khảo bài viết ở đây nhé!

Cách Tạo Hiệu Ứng Neumorphism

Trước khi đi vào tìm hiểu thì minh xin giải thích sơ qua một tý về thuộc tính chính để tạo hiệu ứng này là box-shadow với cú pháp tổng quát như sau:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

Ở đây mình xin giải thích một tý là:

  • horizontal offset: Độ lệch ngang của đổ bóng
  • horizontal offset: Độ lệch dọc của đổ bóng
  • blur radius : Độ mờ của đổ bóng
  • spread radius : Nếu giá trị của thuộc tính này lơn hơn 0 thì sẽ tăng kích thước đổ bóng còn ngược lại sẽ giảm kích thước.(Bạn có thể lựa chọn dùng hay loại bỏ yếu tố này nhé)
  • color: Màu sắc của đổ bóng

Và để thiết kế Neumorphism cho component trong trang web thì ta cần lưu ý một số đặc điểm sau:

  • Shadows: Các đối tượng phải có hai shadow (một sáng và một tối)
  • Background colors: Màu nền của đối tượng phải giống với màu nền của phần tử cha.
  • Edges (Cạnh): Cạnh của đối tượng Neumorphism sẽ phải được bo tròn(rounded).
  • Borders (Cạnh): Đường viền của đối tượng nên thiết lập sao cho tinh tế, có độ tương phản cao.

Và để giúp bạn dễ hình dùng thì ta hãy tạo một hình vuông với thiết kế Neumorphism nhé!

HTML

 <div class="doi_tuong"></div>

CSS

/*Thiết lập style  và chỉnh vị trí của phần tử trong body*/
body {
  align-items: center;
  background-color: DodgerBlue;
  display: flex;
  height: 100vh;
  justify-content: center;
}
/*Tạo Neumorphism cho đối tượng bằng các thuộc tính CSS*/
.doi_tuong{
  align-items: center;
  background-color: DodgerBlue;
  box-shadow: 
    12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  display: flex;
  height: 200px;
  justify-content: center;
  margin-right: 4rem;
  width: 200px;
}

Và kết quả cuối cùng bạn xem ở bên dưới nhé (Bạn nên chuyển sang chế độ screen 0.5x để thấy rõ hơn nha):

See the Pen Thiết Kế Neumorphism cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy ở ví dụ trên thì việc tạo ra một component có thiết kế Neumorphism thì không khó. Việc quan trọng là chúng ta cần biết cách thiết lập giá trị đúng cho thuộc tính box-shadow. Dưới đây là hai ví dụ khác về Neumorphism (Bạn chuyển sang chế độ screen 0.5x để thấy rõ hơn nhé):

See the Pen ví dụ khác về Neumorphism by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo chúng ta sẽ đi vào tìm hiểu cách thiết kế cũng như tạo hiệu ứng hover cho button Neumorphism nhé!

HTML

 <div class="btn">Bạn hãy hover vào nút này</div>

CSS

/*Thiết lập style và chỉnh vị trí cho phần tử trong body*/
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
    background: #f2f3f7;
}
/*Thiết lập style cho nút*/
.btn{
    padding: 10px 30px;
    width: 10%;
    height: 5%;
    left: 20%;
    text-transform: uppercase;
    font-weight: bold;
    text-align:center;
    letter-spacing: 2px;
    color: #5a84a2;
    font-size: 16px;
    text-decoration: none;
    border-radius: 660px;
    background: linear-gradient(45deg, #dadbde, #ffffff);
    box-shadow: 9px -9px 18px #c9cacd,
        -9px 9px 18px #ffffff;
}
/*Tạo hiệu ứng hover cho nút*/
.btn:hover{
box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

Và kết quả của đoạn mã trên bạn xem ở dưới đây nhé:

See the Pen mdPWyaj by haycuoilennao19 (@haycuoilennao19) on CodePen.

Công Cụ Tạo Hiệu Ứng Neumorphism Online

Ngoài việc code bằng tay thì chúng ta cũng có thể sử dụng công cụ neumorphism.io để thiết kế component theo phong cách Neumorphism một cách dễ dàng. Điểm mình thích ở công cụ này là bạn chỉ cần tùy chỉnh các giá trị của thuộc tính được cung cấp sẵn và sau đó có thể thấy được kết quả ngay lập tức.

trang web neumorphism.io

Thư Viện Neumorphism UI

Neumorphism UI là một thư viện được xây dựng dựa trên Bootstrap với các component được cung cấp sẵn và thiết kế theo phong cách Neumorphism. Nó thì hoàn toàn miễn phí để sử dụng nhưng nếu bạn muốn thêm có nhiều component hơn cho trang web thì phải mua với giá rơi vào khoảng 69$.

Neumorphism UI

Một Số Ví Dụ Khác Về Neumorphism

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Ví Dụ 1

See the Pen Neumorphism transition using Houdini by jakob-e (@jakob-e) on CodePen.

Ví Dụ 2

See the Pen Neumorphic Buttons by Sikriti Dakua (@dev_loop) on CodePen.

Ví Dụ 3

See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.

Ví Dụ 4

See the Pen Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios) on CodePen.

Ví Dụ 5

See the Pen Neumorphism Buttons by zeynep (@zeynepozdem) on CodePen.

Ví Dụ 6

See the Pen neumorph test by victor (@VictorUx) on CodePen.

Ví Dụ 7

See the Pen Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty) on CodePen.

Ví Dụ 8

See the Pen Neumorphism: Inner and Drop Shadows by miranda (@mirandalwashburn) on CodePen.

Ví Dụ 9

See the Pen Neumorphism Button by Naoya (@nxworld) on CodePen.

Ví Dụ 10

See the Pen Neumorphism - Animated Social Icons by Jitendra Nirnejak (@nirnejak) on CodePen.

Ví Dụ 11

See the Pen soft ui design #neumorphism by Igor Milenkovic (@imilenig) on CodePen.

Ví Dụ 12

See the Pen Neumorphism Card UI by Shivnath (@shivnath25) on CodePen.

Ví Dụ 13

See the Pen Neuphormism UI by Susanna Nevalainen (@zuzze) on CodePen.

Ví Dụ 14

See the Pen Neumorphism | Soft UI by Atul Prajapati (@atulcodex) on CodePen.

Ví Dụ 15

See the Pen Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693) on CodePen.

Ví Dụ 16

See the Pen Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan) on CodePen.

Ví Dụ 17

See the Pen Neumorphism UI // Card by Cosimo Scarpa (@coswise) on CodePen.

Ví Dụ 18

See the Pen Simple & Minimal Neumorphic Buttons by Shinobis (@Shinobis) on CodePen.

Ví Dụ 19

See the Pen Neumorphism menu by Wouter (@wouterXD) on CodePen.

Ví Dụ 20

See the Pen neumorhism login form by Animation Bro (@animationbro) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những Neumorphic hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!