Độ dốc hình nón trong CSS là gì?

Khi tôi tạo các bộ lọc, bóng đổ, biến đổi hoặc nền chuyển màu trong CSS, tôi cảm thấy thật tuyệt vời. Ai có thể nghĩ rằng CSS sẽ đi xa đến thế này. Không cần sử dụng hình ảnh cho bất kỳ thứ gì trong số đó. Tôi gần như có thể nghe thấy trình duyệt nói với tôi “đừng lo, tôi làm điều đó cho bạn. ”

Bất chấp tất cả sự phát triển này, CSS vẫn có những hạn chế. Chẳng hạn, độ dốc nền chỉ có thể được tạo theo hoặc kiểu chứ không thể tạo hình nón

Vào năm 2011, Lea Verou đã bắt đầu một chủ đề về triển khai dải màu hình nón CSS gốc, tạo ra một thông số kỹ thuật dự thảo đã được giới thiệu cho. Tuy nhiên, chúng ta vẫn phải đợi W3C chính thức hóa tính năng này và để các trình duyệt triển khai nó, điều này có thể sẽ mất khá nhiều thời gian. Trong thời gian chờ đợi, tôi sẽ chỉ cho bạn cách mô phỏng gradient hình nón chỉ bằng CSS3

Ví dụ về gradient hình nón

Đẹp, phải không?

Sự bắt đầu

Để giảm trùng lặp mã, tôi đang sử dụng Sass. Một trong những tính năng thú vị nhất của bộ tiền xử lý CSS là @mixin. @mixin là sự pha trộn của chức năng và bao gồm, khi được gọi, trả về nội dung của nó

@mixin circle($size) {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: $size;
  height: $size;
  left: calc(50% - #{$size/2});
  top: calc(50% - #{$size/2});
}

@mixin này chỉ được sử dụng để đặt các thuộc tính về hình dạng và vị trí, tạo một vòng tròn có vị trí tuyệt đối và được căn giữa theo chiều ngang và chiều dọc so với phần tử gốc của nó

Phép thuật

Bằng cách kết hợp một vòng tròn @mixin với thuộc tính

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

6, chúng ta có thể có được một nửa vòng tròn. Hãy bắt đầu bằng cách tạo một hình tròn đầy đủ bằng cách đặt hai hình bán nguyệt (với các màu khác nhau) lại với nhau. Bạn có thể tưởng tượng điều gì sẽ xảy ra nếu chúng ta xoay một trong các hình bán nguyệt không?

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

Thuộc tính

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

7 hạn chế vùng hiển thị thành phần tử hình chữ nhật, điều này khiến chỉ một nửa vòng tròn màu đỏ được nhìn thấy trong ví dụ trên. Nguyên tắc tương tự được áp dụng cho vòng tròn màu xanh lam, phần tử

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

8. Tại thời điểm này, chúng ta sẽ có một vòng tròn đầy đủ nửa đỏ nửa xanh. Tuy nhiên, thuộc tính biến đổi làm cho vùng hiển thị vòng tròn màu xanh lấn chiếm vòng tròn màu đỏ. Xem ví dụ

Hình bán nguyệt có thuộc tính clip

Chiếc ô đầy màu sắc

ô đầy màu sắc

Chúng ta đã biết cách thực hiện trò ảo thuật này. Hãy tạo một chiếc ô 12 màu

Vì muốn tạo một hình tròn đầy đủ bằng cách ghép các nửa hình tròn nên từ mục thứ bảy (mục đầu tiên trong nửa sau), chúng ta phải đảo ngược clip

.color, .color:nth-child(n+7):after {
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
}
.color:after, .color:nth-child(n+7) {
  @include circle($wheel);
  clip: rect(0, #{$wheel/2}, $wheel, 0);
}

Từ mục thứ bảy,

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

9 trở thành nửa hình tròn với nửa hình tròn bên trái và các phần tử

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

8 chuyển sang nửa hình tròn bên phải

Chúng ta đang gần hoàn tất. Chúng ta cần thay đổi màu sắc và góc của từng phần tử. Một lần nữa, hãy tận dụng sức mạnh của Sass để tạo ra 26193^42 dòng mã chỉ trong hơn 10;)

$colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
@for $i from 0 to length($colors) {
  .color:nth-child(#{1+$i}):after {
    background-color: nth($colors, $i+1);
    @if $i < 6 {
      transform: rotate(#{30*(1+$i)}deg);
      z-index: #{length($colors)-$i};
    } @else {
      transform: rotate(#{-30+(30*(1+$i))}deg);
    }
  }
}

Đầu tiên, chúng tôi xác định mảng

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

1 với “12 màu sắc của cầu vồng” và sau đó lặp lại danh sách để tạo bộ chọn

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

2 với các thuộc tính

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

3,

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

4 và

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

5

Thuộc tính xoay có một số điểm quan trọng. Góc của nó được xác định theo số lượng màu trong vòng tròn. Trong trường hợp của chúng ta, có 12 màu nên 360/12 = 30 là vòng quay của mỗi màu. Nhưng từ mục thứ bảy trở đi, nửa còn lại của vòng tròn bắt đầu, nhớ không? . Sau đó, chúng tôi sẽ bắt đầu lại quá trình tương tự, nhưng lần này, vòng quay sẽ diễn ra theo một hướng khác. Đó là lý do tại sao có một

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

6 với

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

7 trừ đi 30 độ từ các phần tử của nửa sau của vòng tròn

Nếu bạn là một người quan sát tốt (và hiểu mọi thứ cho đến nay), bạn sẽ nhận thấy rằng chiếc ô của chúng tôi thực sự là một chiếc quạt. Bazeda. Vì vậy, để màu cuối cùng của nửa đầu của hình tròn không nằm trên các màu khác, chúng ta cần đảo ngược chỉ số của các phần tử này. Ví dụ: chỉ số z (6) = 1 và chỉ số z (1) = 6

Thêm một chút ma thuật

Cuối cùng, chúng ta cần giảm bớt sự chuyển đổi giữa các màu, sau tất cả, chúng ta không muốn cầu vồng-phạm vi ô, chúng ta muốn có một dải màu hình nón

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

2

Bộ lọc mờ chịu trách nhiệm trộn màu. Tuy nhiên, bằng cách áp dụng hiệu ứng làm mờ, màu sắc sẽ làm căng các giới hạn của hình tròn. Đó là lý do tại sao thuộc tính

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

8 cũng được thêm vào phần tử

$wheel: 15em;
.color {
  @include circle($wheel);
  background: red;
  clip: rect(0, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    background: blue;
    clip: rect(0, #{$wheel/2}, $wheel, 0);
    transform: rotate(45deg);
  }
}

9.

0 bên trong được sử dụng để làm tối các cạnh đã bị “rửa sạch”. Đây là kết quả cuối cùng

Xem chuyển màu Pen Conical bằng CSS thuần túy của Shankar Cabus (@shankarcabus) trên CodePen

Thử nghiệm

Độ dốc hình nón có thể được sử dụng theo nhiều cách khác nhau để tạo các hiệu ứng khác nhau. Nhưng một trong những ứng dụng thú vị nhất là Color Picker, như trong ví dụ bên dưới

Xem Bộ chọn màu bút trong CSS thuần túy của Shankar Cabus (@shankarcabus) trên CodePen

Bản trình diễn khác

Ghi chú của biên tập viên. Tôi đã thấy nhiều cách tiếp cận khác theo thời gian. Tôi sẽ bắt đầu thả chúng ở đây như một tài liệu tham khảo

Độ dốc hình nón là gì?

Độ dốc có nghĩa là gì trong CSS?

Ba loại gradient chính trong CSS là gì?

Độ dốc góc là gì?