- vừa được xem lúc

Thinking on ways to solve TOASTS

0 0 19

Người đăng: Google Chrome Developers

In today's GUI Challenge, @Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations and the FLIP technique which helps build an adaptive and accessible component.

Chapters:
0:00 - Introduction
0:23 - Overview
2:02 - [output]
3:00 - Layout
4:41 - Animation
5:50 - JavaScript Part 1
6:55 - Reduced Motion
7:43 - Keyframes
8:09 - JavaScript Part 2
10:48 - F.L.I.P.
14:18 - Outro

Resources:
Read along → https://goo.gle/3GghBfI
Try a demo → https://goo.gle/3EHsuXG
Get the source → https://goo.gle/3oykceU
FLIP → https://goo.gle/3oz8P6D
Paul Lewis (from SuperCharged) → https://goo.gle/31IOFy0

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 58

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 49

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 47

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 49

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 47

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 28