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 Và 20 Ví Dụ Neumorphism Cho Website

Cách Thiết Kế Neumorphism Và 20 Ví Dụ Neumorphism Cho Website


Ngày 20 Tháng 1 Năm 2021

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 HTML CSS

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.

Nguồn

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.

Nguồn

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.

Nguồn

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

Nguồn

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

Nguồn

Các 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.

Thiết Kế Neumorphism Button CSS

Neumorphism Button CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế CSS3 Neumorphism Button

CSS3 Neumorphism Button

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế CSS Neumorphism UI

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism UI Button Pattern

Neumorphism UI Button Pattern

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Button HTML CSS

Neumorphism Button HTML CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Component Bằng HTML CSS

Neumorphism Component Bằng HTML CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Menu Icon

Neumorphism Menu Icon

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Bằng Shadow

Neumorphism Bằng Shadow

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Hiệu Ứng Click Neumorphism Button

Hiệu Ứng Click Neumorphism Button

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Social Icon

Neumorphism Social Icon

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Share Button

Neumorphism Share Button

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Card CSS3

Neumorphism Card CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Card Menu CSS

Neumorphism Card Menu CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Social Icon Button CSS

Neumorphism Social Icon Button CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Search Box CSS3

Neumorphism Search Box CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Tổng Hợp Các Neumorphism Button CSS3

Tổng Hợp Các Neumorphism Button CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Card HTML5 CSS3

Neumorphism Card HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Submit Button

Neumorphism Submit Button

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Neumorphism Menu CSS3

Neumorphism Menu CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Login Form Neumorphism CSS

Login Form Neumorphism CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

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ẻ!