Tác phẩm nghệ thuật CSS được tạo bằng một `div` duy nhất

 (a.singlediv.com)
2 điểm bởi GN⁺ 2024-05-03 | 1 bình luận | Chia sẻ qua WhatsApp
  • A Single Div là một thử nghiệm vẽ bằng CSS cho thấy có thể tạo ra những biểu đạt thị giác nào chỉ với một div duy nhất
  • Dự án được giới thiệu là tác phẩm của Lynn Fisher, với thời gian thực hiện là 2014-2019
  • Trên trang có các mục GitHub, #divtober, Buy me a coffee được đặt cùng nhau
  • Chỉ với phần văn bản được cung cấp, không thể xác nhận các chi tiết như mã triển khai, danh sách tác phẩm hay quá trình thực hiện
  • Ràng buộc cốt lõi là tập trung biểu đạt bằng CSS vào một phần tử HTML duy nhất thay vì nhiều phần tử HTML

Tính chất của dự án

  • A Single Div là một thử nghiệm vẽ bằng CSS để kiểm chứng “có thể làm được gì với một div duy nhất”
  • Trên trang cũng hiển thị mô tả a CSS drawing project by Lynn Fisher
  • Thời gian thực hiện được ghi là 2014-2019

Các mục có thể xác nhận trên trang

  • Có mục GitHub
  • Có mục #divtober
  • Có mục Buy me a coffee
  • Chỉ với phần văn bản được cung cấp, không thể xác nhận đích liên kết cụ thể hay phần giải thích bổ sung của từng mục

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-05-03
Ý kiến trên Hacker News
  • Nhớ đến một demo từng được đăng trước đây. Trang vẫn hiển thị nội dung, nhưng mình nhớ là khi xem nguồn thì là 0 byte
    Có lẽ nó dùng tính năng cho phép tham chiếu CSS qua HTTP header, nên trong HTML không có CSS, còn CSS thì gắn nội dung vào các phần tử bắt buộc mà trình duyệt tự động thêm vào trang
  • Năm 2016 và 2014 cũng đã có khá nhiều thảo luận liên quan, và 16 ngày trước cũng có một dự án tương tự là Only s
    [0]: https://news.ycombinator.com/item?id=8229072
    [1]: https://news.ycombinator.com/item?id=12091173
    [2]: https://news.ycombinator.com/item?id=40049258
    • Trang a single div thỉnh thoảng khá thú vị và truyền cảm hứng tốt, nên mình đã chia sẻ. Nhìn lại các dự án cũ từ góc độ phát triển web hiện đại và thảo luận về chúng nhìn chung là có ích cho cộng đồng
  • Những người làm CSS art lúc nào cũng đáng kinh ngạc. Dạo này mảng đồ họa 3D cái gì cũng sôi sục với three.js, nhưng rõ ràng vẫn có chỗ cho CSS art, chỉ là có vẻ nhiều người quên mất điều đó hoặc thấy quá khó nên không đào sâu
    three.js rất tuyệt khi dựng những cảnh lớn, nhưng những cảnh nhỏ kiểu một nhân vật đơn lẻ trên website cá nhân thì cũng có thể làm bằng CSS. Mình nhiều lần thử làm theo các CodePen ấn tượng, mất trọn cả cuối tuần mà vẫn chưa hoàn hảo
    Internet có thể đã sẵn sàng, nhưng khó có thể nói rằng phần lớn thiết bị kết nối Internet hỗ trợ WebGL cho ra hồn. Tùy người dùng mục tiêu, nhưng tốt hơn là nên làm website mà mọi người đều truy cập được, chứ không phải chỉ dành cho cái vườn rào kín của riêng mình
    • CSS art có sự mới mẻ, nhưng phải đi rất sâu vào những chi tiết cực nhỏ của CSS nên có vẻ lập trình viên thường không chuộng. Trong khi đó three.js đang được đẩy lên thành xu hướng chính trong cộng đồng ngách gồm các nghệ sĩ/lập trình viên 3D, và bản thân điều đó có thể là chuyện tốt
      Dù vậy, three.js không phải lời giải hoàn hảo cho mọi thứ; cần nhìn vào ưu nhược điểm khi dùng để tránh tạo ra những website phình to không cần thiết
    • Mình từng tạo một công cụ sinh nút hiệu ứng hạt bằng kỹ thuật CSS này [0]
      Mình luôn nghĩ sẽ thú vị nếu có một công cụ cho phép chỉnh sửa các “hình ảnh” nhỏ bằng những hình cơ bản rồi tự động xuất mã CSS; không biết có ai biết công cụ nào như vậy không
      [0] https://bewelge.github.io/CSS-Button-Particles/ Trên di động UI trông rất tệ, nhưng bản thân hiệu ứng nút chắc vẫn hoạt động tốt
    • Cũng có thể xem thử một đống lửa trại làm hoàn toàn bằng CSS (:
      https://megaemce.github.io/Bonfire
  • Không hiểu single div ở đây nghĩa là gì. Mình xem nguồn rồi bỏ cuộc khi đếm số div, nên chắc không phải nghĩa đen là “trang này chỉ có một div”. Vậy nó có nghĩa là gì?
    • Mỗi hình vẽ nhỏ là một div. Chính xác hơn thì có một div container không được tính, một div chính được tính, và các ::before cùng ::after không được tính để chèn nội dung
      Là một bài luyện sáng tạo thì thú vị, nhưng mình luôn cho rằng lạm dụng ::before và ::after là một thói quen xấu. Ám ảnh muốn HTML “sạch” là ngớ ngẩn; HTML rõ ràng dễ bảo trì hơn
    • Mỗi “bức tranh” trong danh sách được render bằng các quy tắc CSS định nghĩa trên một div duy nhất
      Thường có rất nhiều trò khéo dùng box-shadow
  • Nhấn vào link của nhà thiết kế Lynn Fisher ở phía trên để vào https://lynnandtonic.com/, rồi tình cờ phát hiện ra một thứ
    Mình đang mở dev tools trong cửa sổ Chrome và thay đổi kích thước, thì thấy người trong logo đi lên xuống con đường tùy theo hướng kéo. Thật sự rất hay
    • Mình không biết chuyện này. Cuối tuần muốn thử làm lại trong một môi trường đơn giản hơn. Có thể làm kiểu quả bóng lăn trên đường hoặc tàu vũ trụ bay quanh Trái Đất
    • Có vẻ chỉ hoạt động trên Chrome, và chỉ khi thay đổi kích thước theo chiều ngang
    • Trong nền cũng có tham chiếu liên quan đến Daria
  • Có ai nhớ Simpsons làm bằng CSS không? Cái đó cũng rất tuyệt
    https://pattle.github.io/simpsons-in-css/
    • Những cái này cũng vui. Nếu gắn vị trí chuột làm event trigger cho chuyển động của mắt thì có thể thành một phiên bản Simpsons rùng rợn khá thuyết phục
  • Đang xem trên di động; ý là mỗi đồ họa được tạo bằng một div duy nhất à? Đáng kinh ngạc
    Gu thiết kế đồ họa cũng tốt
    • Đúng vậy, tất cả đều là một div. Về mặt kỹ thuật thì là một div cộng thêm các pseudo-element ::before và ::after, nhưng dù sao tất cả vẫn là CSS
  • Mừng vì nó được đăng lại. Mình nhớ mang máng, nhưng đã lâu không xem, và nó vẫn cực kỳ ấn tượng
    • Mình từng muốn xem lại trang này nhưng không nhớ tên, phải lục sâu hơn trong thư mục “dump link” của mình mới tìm ra
  • Tuy rất hay, nhưng ước gì tác giả định dạng HTML cho dễ nhìn hơn. Trong inspector thì ổn, nhưng những thứ như thế này khiến mình theo bản năng bấm xem nguồn; vì khoảng trắng đã bị loại bỏ nên gần như không đọc được
    • HTML chỉ có một div cho mỗi “tác phẩm”, phần thú vị chỉ nằm ở CSS. Nếu muốn xem phép màu phía sau từng tác phẩm, tốt hơn nhiều là cứ nhấp chuột phải rồi inspect element
  • Mình từng rất thích trang này
    • Thỉnh thoảng chỉ muốn ngồi xuống và tự làm lại từng mảnh nhỏ này một