Trình tạo hình dạng Blob CSS hữu cơ
Thiết kế bán kính đường viền CSS một cách trực quan: bốn thanh trượt góc độc lập tính bằng px hoặc phần trăm, lối tắt liên kết tất cả các góc cho các vòng tròn và viên thuốc tức thì, cùng với chế độ blob hữu cơ với các hình dạng ngẫu nhiên.
kết quả
Trang này mở trình tạo bán kính đường viền trực tiếp ở chế độ blob với hình dạng tự nhiên đã được tải sẵn: không có góc vuông, không có hình tròn hoàn hảo, chỉ có một đường viền mềm mại không đều được xây dựng chỉ từ CSS. Nhấn Randomize bất cứ lúc nào để có một biến thể mới.
Thủ thuật đằng sau mỗi blob CSS là cú pháp gạch chéo tám giá trị: bán kính đường viền chấp nhận hai bộ bốn phần trăm cách nhau bằng dấu gạch chéo, bộ đầu tiên làm cong bán kính ngang và bộ thứ hai là bán kính dọc. Việc hai bộ không khớp chính xác là nguyên nhân phá vỡ tính đối xứng của một hình chữ nhật tròn đơn giản thành một đường viền hữu cơ.
Những đốm màu như thế này lấp đầy khoảng trống đằng sau hình ảnh anh hùng, hình đại diện và hình minh họa trên vô số trang đích hiện đại, chính xác là vì không cần thư viện hoặc xuất SVG - đó là bốn dòng CSS. Sao chép hình dạng hiện tại hoặc tiếp tục chọn ngẫu nhiên cho đến khi bạn cảm thấy phù hợp với bố cục của mình.