Sóng có lẽ là một trong những hình dạng khó tạo nhất trong CSS. Chúng tôi luôn cố gắng ước tính nó với các thuộc tính như border-radius và rất nhiều con số kỳ diệu cho đến khi chúng ta nhận được thứ gì đó gần gũi. Và đó là trước khi chúng ta đi sâu vào các mẫu gợn sóng, khó hơn.
"SVG nó!" bạn có thể nói, và bạn có thể đúng rằng đó là cách tốt hơn để đi. Nhưng chúng ta sẽ thấy rằng CSS có thể tạo ra những làn sóng đẹp và mã cho nó không cần phải quá điên rồ. Và đoán xem? tôi có một trình tạo trực tuyến để làm cho nó thậm chí còn tầm thường hơn!
Nếu bạn chơi với trình tạo, bạn có thể thấy rằng CSS mà nó tạo ra chỉ có hai gradient và thuộc tính mặt nạ CSS - chỉ hai thứ đó và chúng ta có thể tạo ra bất kỳ loại hình dạng hoặc mẫu sóng nào. Chưa kể rằng chúng ta có thể dễ dàng kiểm soát kích thước và độ cong của sóng khi đang ở đó.
Một số giá trị có thể trông giống như “số ma thuật”Nhưng thực sự có logic đằng sau chúng và chúng tôi sẽ mổ xẻ mã và khám phá tất cả bí mật đằng sau việc tạo ra sóng.
Bài viết này là một phần tiếp theo một cái trước nơi tôi đã xây dựng tất cả các loại đường viền zig-zag, scoped, scalloped và vâng, đường viền lượn sóng khác nhau. Tôi thực sự khuyên bạn nên kiểm tra bài viết đó vì nó sử dụng cùng một kỹ thuật mà chúng tôi sẽ đề cập ở đây, nhưng chi tiết hơn.
Toán học đằng sau sóng
Nói một cách chính xác, không có một công thức ma thuật nào đằng sau các hình dạng gợn sóng. Bất kỳ hình dạng nào có đường cong đi lên và đi xuống đều có thể được gọi là sóng, vì vậy chúng ta sẽ không giới hạn mình trong các phép toán phức tạp. Thay vào đó, chúng ta sẽ tái tạo một làn sóng bằng cách sử dụng các kiến thức cơ bản của hình học.
Hãy bắt đầu với một ví dụ đơn giản sử dụng hai hình tròn:
Chúng ta có hai đường tròn có cùng bán kính cạnh nhau. Bạn có thấy đường màu đỏ đó không? Nó bao gồm nửa trên của hình tròn đầu tiên và nửa dưới của hình tròn thứ hai. Bây giờ hãy tưởng tượng bạn lấy dòng đó và lặp lại nó.
Chúng tôi đã thấy làn sóng. Bây giờ, hãy điền vào phần dưới cùng (hoặc phần trên cùng) để có được những thứ sau:
Tada! Chúng ta có một hình dạng gợn sóng và một hình dạng mà chúng ta có thể kiểm soát bằng cách sử dụng một biến cho bán kính hình tròn. Đây là một trong những làn sóng dễ dàng nhất mà chúng tôi có thể thực hiện và đó là làn sóng tôi đã giới thiệu trong this bài viết trước
Hãy thêm một chút phức tạp bằng cách lấy hình minh họa đầu tiên và di chuyển các vòng tròn một chút:
Chúng ta vẫn có hai hình tròn có cùng bán kính nhưng chúng không còn được căn chỉnh theo chiều ngang nữa. Trong trường hợp này, đường màu đỏ không còn bao phủ một nửa diện tích của mỗi hình tròn mà thay vào đó là một vùng nhỏ hơn. Khu vực này được giới hạn bởi đường gạch ngang màu đỏ. Đường thẳng đó đi qua điểm mà cả hai đường tròn gặp nhau.
Bây giờ lấy dòng đó và lặp lại nó và bạn sẽ có được một làn sóng khác, một làn sóng mượt mà hơn.
Tôi nghĩ rằng bạn có được ý tưởng. Bằng cách kiểm soát vị trí và kích thước của các vòng tròn, chúng ta có thể tạo ra bất kỳ làn sóng nào chúng ta muốn. Chúng tôi thậm chí có thể tạo các biến cho chúng, mà tôi sẽ gọi là P và S, Tương ứng.
Bạn có thể nhận thấy rằng, trong trình tạo trực tuyến, chúng tôi điều khiển sóng bằng cách sử dụng hai đầu vào. Chúng ánh xạ đến các biến trên. S là "Kích thước của sóng" và P là "độ cong của sóng".
Tôi đang xác định P as P = m*S Ở đâu m là biến bạn điều chỉnh khi cập nhật độ cong của sóng. Điều này cho phép chúng tôi luôn có cùng độ cong, ngay cả khi chúng tôi cập nhật S.
m có thể là bất kỳ giá trị nào giữa 0 và 2. 0 sẽ cung cấp cho chúng ta trường hợp cụ thể đầu tiên trong đó cả hai vòng tròn được căn chỉnh theo chiều ngang. 2 là một loại giá trị lớn nhất. Chúng tôi có thể phát triển lớn hơn, nhưng sau một vài thử nghiệm, tôi thấy rằng bất kỳ điều gì ở trên 2 tạo ra hình dạng xấu, phẳng.
Chúng ta đừng quên bán kính của vòng tròn của chúng ta! Điều đó cũng có thể được xác định bằng cách sử dụng S và P như thế này:
R = sqrt(P² + S²)/2Thời Gian P bằng 0, chúng ta sẽ có R = S/2.
Chúng tôi có mọi thứ để bắt đầu chuyển đổi tất cả những thứ này thành gradient trong CSS!
Tạo gradient
Các wave của chúng tôi sử dụng các vòng tròn và khi nói về các vòng tròn, chúng tôi nói về các gradient xuyên tâm. Và vì hai vòng tròn xác định sóng của chúng ta, về mặt logic, chúng ta sẽ sử dụng hai gradient xuyên tâm.
Chúng tôi sẽ bắt đầu với trường hợp cụ thể, nơi P bằng 0. Đây là hình minh họa của gradient đầu tiên:
Gradient này tạo ra độ cong đầu tiên trong khi lấp đầy toàn bộ khu vực đáy — có thể nói là “nước” của sóng.
.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Sản phẩm --size biến xác định bán kính và kích thước của gradient xuyên tâm. Nếu chúng ta so sánh nó với S biến, thì nó bằng S/2.
Bây giờ hãy thêm gradient thứ hai:
Gradient thứ hai không là gì ngoài một vòng tròn để hoàn thành wave của chúng ta:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%Nếu bạn kiểm tra bài viết trước bạn sẽ thấy rằng tôi chỉ đang lặp lại những gì tôi đã làm ở đó.
Tôi đã theo dõi cả hai bài báo nhưng cấu hình gradient không giống nhau.
Đó là bởi vì chúng ta có thể đạt được cùng một kết quả bằng cách sử dụng các cấu hình gradient khác nhau. Bạn sẽ nhận thấy sự khác biệt nhỏ trong việc căn chỉnh nếu so sánh cả hai cấu hình, nhưng thủ thuật là giống nhau. Điều này có thể gây nhầm lẫn nếu bạn không quen với gradient, nhưng đừng lo lắng. Với một số thực hành, bạn sẽ quen với chúng và bạn sẽ tự nhận thấy rằng các cú pháp khác nhau có thể dẫn đến cùng một kết quả.
Đây là mã đầy đủ cho wave đầu tiên của chúng tôi:
.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Bây giờ chúng ta hãy lấy mã này và điều chỉnh nó đến nơi chúng ta giới thiệu một biến giúp biến này có thể tái sử dụng hoàn toàn để tạo bất kỳ wave nào chúng ta muốn. Như chúng ta đã thấy trong phần trước, thủ thuật chính là di chuyển các vòng tròn để chúng không thẳng hàng nữa, vì vậy hãy cập nhật vị trí của từng vòng tròn. Chúng tôi sẽ di chuyển cái đầu tiên lên và cái thứ hai xuống.
Mã của chúng tôi sẽ trông như thế này:
.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Tôi đã giới thiệu một cái mới --p biến được sử dụng để xác định vị trí trung tâm của mỗi vòng tròn. Gradient đầu tiên đang sử dụng 50% calc(-1*var(--p)), vì vậy tâm của nó di chuyển lên trong khi tâm thứ hai đang sử dụng calc(var(--size) + var(--p)) để di chuyển nó xuống.
Một bản demo có giá trị bằng một nghìn từ:
Các vòng tròn không thẳng hàng cũng như không chạm vào nhau. Chúng tôi đặt chúng cách xa nhau mà không thay đổi bán kính của chúng, vì vậy chúng tôi bị mất sóng. Nhưng chúng ta có thể sửa chữa mọi thứ bằng cách sử dụng cùng một phép toán mà chúng ta đã sử dụng trước đó để tính bán kính mới. Nhớ lấy R = sqrt(P² + S²)/2. Trong trường hợp của chúng ta, --size bằng S/2; tương tự cho --p cũng bằng P/2 vì chúng tôi đang di chuyển cả hai vòng tròn. Vì vậy, khoảng cách giữa các điểm trung tâm của chúng gấp đôi giá trị của --p cho điều này:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))Điều đó cho chúng ta kết quả là 55.9px.
Làn sóng của chúng tôi đã trở lại! Hãy cắm phương trình đó vào CSS của chúng tôi:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Đây là mã CSS hợp lệ. sqrt() là một phần của đặc điểm kỹ thuật, nhưng tại thời điểm tôi viết bài này, không có trình duyệt nào hỗ trợ cho nó. Điều đó có nghĩa là chúng tôi cần một chút JavaScript hoặc Sass để tính toán giá trị đó cho đến khi chúng tôi mở rộng sqrt() hỗ trợ.
Điều này khá tuyệt vời: tất cả chỉ cần hai gradient để có được một làn sóng mát mẻ mà bạn có thể áp dụng cho bất kỳ phần tử nào bằng cách sử dụng mask tài sản. Không còn thử nghiệm và sai sót - tất cả những gì bạn cần là cập nhật hai biến và bạn đã sẵn sàng!
Đảo ngược làn sóng
Điều gì sẽ xảy ra nếu chúng ta muốn sóng đi theo hướng khác, nơi chúng ta đang lấp đầy “bầu trời” thay vì “nước”. Tin hay không tùy bạn, tất cả những gì chúng ta phải làm là cập nhật hai giá trị:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%)
50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}Tất cả những gì tôi đã làm là thêm một phần bù vào 100%, được đánh dấu ở trên. Đây là kết quả:
Chúng tôi có thể xem xét một cú pháp thân thiện hơn bằng cách sử dụng các giá trị từ khóa để làm cho nó dễ dàng hơn:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Chúng tôi đang sử dụng left và bottom từ khóa để chỉ định các cạnh và phần bù. Theo mặc định, trình duyệt mặc định là left và top - đó là lý do tại sao chúng tôi sử dụng 100% để di chuyển phần tử xuống dưới cùng. Trong thực tế, chúng tôi đang chuyển nó từ top by 100%, vì vậy nó thực sự giống như nói bottom. Dễ đọc hơn nhiều so với toán học!
Với cú pháp cập nhật này, tất cả những gì chúng ta phải làm là hoán đổi bottom cho top - hoặc ngược lại - để thay đổi hướng của sóng.
Và nếu bạn muốn nhận được cả sóng trên và dưới, chúng tôi kết hợp tất cả các gradient trong một khai báo duy nhất:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
mask:
/* Gradient 1 */
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 2 */
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
/* Gradient 3 */
radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 4 */
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}Nếu bạn kiểm tra mã, bạn sẽ thấy rằng ngoài việc kết hợp tất cả các gradient, tôi cũng đã giảm chiều cao của chúng từ 100% đến 51% sao cho cả hai đều bao phủ một nửa phần tử. Đúng, 51%. Chúng tôi cần thêm một phần trăm nhỏ đó cho một sự chồng chéo nhỏ để tránh khoảng trống.
Còn bên trái và bên phải thì sao?
Đây là bài tập về nhà của bạn! Thực hiện những gì chúng tôi đã làm với các cạnh trên và dưới và cố gắng cập nhật các giá trị để nhận các giá trị bên phải và bên trái. Đừng lo lắng, điều đó thật dễ dàng và điều duy nhất bạn cần làm là hoán đổi các giá trị.
Nếu bạn gặp sự cố, bạn luôn có thể sử dụng trình tạo trực tuyến để kiểm tra mã và hình dung kết quả.
Đường lượn sóng
Trước đó, chúng tôi đã thực hiện wave đầu tiên của mình bằng cách sử dụng một đường màu đỏ, sau đó lấp đầy phần dưới cùng của phần tử. Làm thế nào về đường lượn sóng đó? Đó cũng là một làn sóng! Tốt hơn nữa là nếu chúng ta có thể kiểm soát độ dày của nó bằng một biến để chúng ta có thể sử dụng lại nó. Hãy làm nó!
Chúng tôi sẽ không bắt đầu lại từ đầu mà lấy mã trước đó và cập nhật nó. Điều đầu tiên cần làm là cập nhật các điểm dừng màu của các gradient. Cả hai gradient đều bắt đầu từ màu trong suốt sang màu mờ đục hoặc ngược lại. Để mô phỏng một đường hoặc đường viền, chúng ta cần bắt đầu từ trong suốt, chuyển sang mờ, sau đó trở lại trong suốt một lần nữa:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%Tôi nghĩ rằng bạn đã đoán rằng --b biến là những gì chúng ta đang sử dụng để kiểm soát độ dày của đường. Hãy áp dụng điều này cho các gradient của chúng tôi:
Vâng, kết quả là xa một đường gợn sóng. Nhưng nhìn kỹ hơn, chúng ta có thể thấy rằng một gradient đang tạo ra độ cong phía dưới một cách chính xác. Vì vậy, tất cả những gì chúng ta thực sự cần làm là chỉnh lại gradient thứ hai. Thay vì giữ một hình tròn đầy đủ, chúng ta hãy tạo một phần giống như gradient khác.
Vẫn còn xa, nhưng chúng tôi có cả hai độ cong mà chúng tôi cần! Nếu bạn kiểm tra mã, bạn sẽ thấy rằng chúng ta có hai gradient giống hệt nhau. Sự khác biệt duy nhất là vị trí của họ:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g))
50% var(--size)/calc(4*var(--size)) 100%;
}Bây giờ chúng ta cần điều chỉnh kích thước và vị trí cho hình dạng cuối cùng. Chúng tôi không cần gradient có chiều cao đầy đủ nữa, vì vậy chúng tôi có thể thay thế 100% Với cái này:
/* Size plus thickness */
calc(var(--size) + var(--b))Không có logic toán học đằng sau giá trị này. Nó chỉ cần đủ lớn cho độ cong. Chúng ta sẽ thấy hiệu ứng của nó trên mô hình chỉ sau một chút nữa. Trong khi chờ đợi, hãy cũng cập nhật vị trí để căn giữa theo chiều dọc của gradient:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}Vẫn chưa hoàn toàn ở đó:
Một gradient cần di chuyển xuống một chút và gradient kia lên một chút. Cả hai cần phải di chuyển bằng một nửa chiều cao của họ.
Chúng tôi gần như ở đó! Chúng tôi cần một bản sửa lỗi nhỏ để bán kính có sự chồng chéo hoàn hảo. Cả hai dòng cần phải bù đắp bằng một nửa đường viền (--b) độ dày:
Chúng tôi hiểu rồi! Một đường lượn sóng hoàn hảo mà chúng ta có thể dễ dàng điều chỉnh bằng cách kiểm soát một số biến:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g))
calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g))
50% calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}Tôi biết rằng logic cần một chút để nắm bắt. Điều đó tốt và như tôi đã nói, việc tạo ra một hình dạng lượn sóng trong CSS không hề dễ dàng, chưa kể đến những phép toán phức tạp đằng sau nó. Đó là lý do tại sao máy phát điện trực tuyến là một cứu cánh - bạn có thể dễ dàng nhận được mã cuối cùng ngay cả khi bạn không hiểu đầy đủ logic đằng sau nó.
Hoa văn gợn sóng
Chúng ta có thể tạo mẫu từ đường lượn sóng vừa tạo!
Ồ không, mã của mô hình sẽ còn khó hiểu hơn!
Không có gì! Chúng tôi đã có mã. Tất cả những gì chúng ta cần làm là xóa repeat-x từ những gì chúng tôi đã có, và tada. 🎉
Một mô hình gợn sóng đẹp. Hãy nhớ phương trình tôi đã nói rằng chúng ta sẽ truy cập lại?
/* Size plus thickness */
calc(var(--size) + var(--b))Đây là thứ kiểm soát khoảng cách giữa các dòng trong mẫu. Chúng ta có thể tạo ra một biến từ nó, nhưng không cần phức tạp hơn. Tôi thậm chí không sử dụng một biến cho điều đó trong trình tạo. Có lẽ tôi sẽ thay đổi điều đó sau.
Đây là mô hình tương tự đi theo một hướng khác:
Tôi đang cung cấp cho bạn đoạn mã trong bản demo đó, nhưng tôi muốn bạn mổ xẻ nó và hiểu tôi đã thực hiện những thay đổi nào để điều đó xảy ra.
Đơn giản hóa mã
Trong tất cả các bản trình diễn trước, chúng tôi luôn xác định --size và --p một cách độc lập. Nhưng bạn có nhớ lại cách tôi đã đề cập trước đó rằng trình tạo trực tuyến đánh giá P ngang bằng với m*S, Nơi m điều khiển độ cong của sóng? Bằng cách xác định một hệ số cố định, chúng ta có thể làm việc với một sóng cụ thể và mã có thể trở nên dễ dàng hơn. Đây là những gì chúng ta sẽ cần trong hầu hết các trường hợp: một hình dạng gợn sóng cụ thể và một biến để kiểm soát kích thước của nó.
Hãy cập nhật mã của chúng tôi và giới thiệu m biến:
.wave {
--size: 50px;
--R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Như bạn có thể thấy, chúng tôi không còn cần --p Biến đổi. Tôi đã thay thế nó bằng var(--m)*var(--size)và tối ưu hóa một số phép toán cho phù hợp. Bây giờ, nếu chúng ta muốn làm việc với một hình dạng gợn sóng cụ thể, chúng ta có thể bỏ qua --m và thay thế nó bằng một giá trị cố định. Hãy thử .8 ví dụ.
--size: 50px;
--R: calc(var(--size) * 1.28);
mask:
radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;Xem làm thế nào mã dễ dàng hơn bây giờ? Chỉ một biến để điều khiển wave của bạn, ngoài ra bạn không cần phải dựa vào sqrt() mà không có hỗ trợ trình duyệt!
Bạn có thể áp dụng cùng một logic cho tất cả các bản trình diễn mà chúng tôi đã thấy ngay cả đối với các đường lượn sóng và mô hình. Tôi đã bắt đầu với giải thích toán học chi tiết và đưa ra mã chung, nhưng bạn có thể thấy mình cần mã dễ hơn trong trường hợp sử dụng thực tế. Đây là những gì tôi đang làm mọi lúc. Tôi hiếm khi sử dụng mã chung, nhưng tôi luôn xem xét một phiên bản đơn giản hóa, đặc biệt là trong hầu hết các trường hợp, tôi đang sử dụng một số giá trị đã biết mà không cần lưu trữ dưới dạng biến. (Cảnh báo spoiler: Tôi sẽ chia sẻ một vài ví dụ ở phần cuối!)
Hạn chế của cách tiếp cận này
Về mặt toán học, đoạn mã mà chúng ta tạo ra sẽ cho chúng ta những hình dạng và mẫu lượn sóng hoàn hảo, nhưng trên thực tế, chúng ta sẽ phải đối mặt với một số kết quả kỳ lạ. Vì vậy, có, phương pháp này có những hạn chế của nó. Ví dụ: trình tạo trực tuyến có khả năng tạo ra kết quả kém, đặc biệt là với các đường lượn sóng. Một phần của vấn đề là do sự kết hợp cụ thể của các giá trị trong đó kết quả bị xáo trộn, chẳng hạn như sử dụng giá trị lớn cho độ dày đường viền so với kích thước:
Đối với các trường hợp khác, vấn đề liên quan đến một số làm tròn sẽ dẫn đến lệch và khoảng cách giữa các wave:
Điều đó nói rằng, tôi vẫn nghĩ rằng phương pháp chúng tôi đề cập vẫn là một phương pháp tốt vì nó tạo ra sóng mịn trong hầu hết các trường hợp và chúng tôi có thể dễ dàng tránh kết quả xấu bằng cách chơi với các giá trị khác nhau cho đến khi chúng tôi hoàn thiện nó.
Kết thúc
Tôi hy vọng rằng sau bài viết này, bạn sẽ không còn phải mò mẫm thử và sai để xây dựng một hình dạng hoặc mô hình lượn sóng nữa. thêm vao Đoa đến trình tạo trực tuyến, bạn có tất cả bí mật toán học đằng sau việc tạo ra bất kỳ loại sóng nào bạn muốn!
Bài viết kết thúc ở đây nhưng bây giờ bạn có một công cụ mạnh mẽ để tạo các thiết kế lạ mắt sử dụng các hình dạng lượn sóng. Đây là nguồn cảm hứng giúp bạn bắt đầu…
Thế còn bạn? Sử dụng trình tạo trực tuyến của tôi (hoặc viết mã theo cách thủ công nếu bạn đã học thuộc lòng tất cả các phép toán) và cho tôi thấy những sáng tạo của bạn! Hãy cùng tuyển tập hay trong phần bình luận nhé.
