Hướng dẫn dùng radialgradient trong PHP

Nội dung chính Show

• Tạo Linear Gradient trong CSS3
• Tạo linear Gradient từ Top đến Bottom
• Tạo linear Gradient từ Left sang Right
• Tạo linear Gradient theo hướng chéo
• Thiết lập hướng của Linear Gradient bằng cách sử dụng góc
• Tạo Gradient với điểm dừng màu
• Lặp lại Linear Gradient
• Tạo Radial Gradient trong CSS3

Tính năng Gradient trong CSS3 cho phép bạn tạo gradient từ màu này sang màu khác mà không cần sử dụng bất kỳ hình ảnh nào.

Tính năng Gradient trong CSS3 cung cấp một giải pháp linh hoạt để tạo ra các hiệu ứng chuyển tiếp mượt mà giữa hai hoặc nhiều màu. Trước kia, để đạt được hiệu ứng như vậy, chúng ta phải sử dụng hình ảnh và Photoshop để chỉnh sửa.

Sử dụng tính năng Gradient, bạn có thể giảm thời gian tải xuống và tiết kiệm băng thông.

Các phần tử có độ dốc có thể mở rộng, thu nhỏ đến mức độ nào mà không làm giảm chất lượng, đồng thời kết xuất sẽ hiển thị nhanh hơn nhiều vì nó được tạo bởi trình duyệt.

Gradients có sẵn trong hai kiểu: linear và radial

Tạo Linear Gradient trong CSS3

Để tạo một Linear Gradient (Gradient tuyến tính), bạn phải xác định ít nhất hai màu. Tuy nhiên, để tạo ra các hiệu ứng gradient phức tạp hơn, bằng cách xác định nhiều màu hơn, thêm các điểm dừng.

Các màu này sẽ chuyển tiếp mượt mà giữa các màu. Bạn cũng có thể đặt:

• Điểm bắt đầu
• Và hướng (hoặc góc) mà hiệu ứng gradient được áp dụng.

Cú pháp cơ bản của việc tạo các linear gradient:

linear-gradient(huongHieuUng, mau-1, mau-2, mau-3 ...)

Tạo linear Gradient từ Top đến Bottom

Ví dụ sau sẽ tạo một linear gradient từ Top đến Bottom. Đây là mặc định.

CSS:

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(blue, green);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(blue, green);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(blue, green);
}

Kết quả:

Tạo linear Gradient từ Left sang Right

Ví dụ sau sẽ tạo một linear gradient từ trái sang phải.

CSS:

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(left to right, blue, green);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, blue, green);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(left, blue, green);
}

Kết quả:

Tạo linear Gradient theo hướng chéo

Bạn cũng có thể tạo một linear gradient theo hướng chéo. Ví dụ sau sẽ tạo một linear gradient từ góc dưới bên trái đến góc trên cùng bên phải của hộp phần tử.

CSS:

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(to top right, blue, green);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(bottom left, blue, green);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(bottom left, blue, green);
}

Kết quả:

Thiết lập hướng của Linear Gradient bằng cách sử dụng góc

Nếu bạn muốn kiểm soát nhiều hơn hướng của gradient, bạn có thể đặt hướng bằng góc, thay vì các từ khóa được xác định trước.

Góc 0deg tạo ra một gradient từ dưới lên trên và các góc dương thể hiện sự quay theo chiều kim đồng hồ.

Góc 90deg tạo ra một gradient từ trái sang phải.

Cú pháp cơ bản của việc tạo các linear gradient bằng cách sử dụng góc như sau:

linear-gradient(gocGradient, mau-1, mau-2, ...)

Ví dụ sau sẽ tạo ra một linear gradient từ trái sang phải bằng cách sử dụng góc.

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(90deg, blue, green);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(0deg, blue, green);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(0deg, blue, green);
}

Kết quả:

Tạo Linear Gradient bằng cách sử dụng nhiều màu sắc

Bạn cũng có thể tạo gradient cho nhiều hơn hai màu. Ví dụ sau đây sẽ chỉ cho bạn cách tạo một gradient tuyến tính bằng cách sử dụng nhiều điểm dừng màu. Tất cả các màu cách đều nhau.

CSS:

.gradient {

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(red, blue, lime);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, blue, lime);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(red, blue, lime);

}

Kết quả:

Tạo Gradient với điểm dừng màu

Điểm dừng màu là các điểm dọc theo đường chuyển màu sẽ có một màu cụ thể tại vị trí đó.

Vị trí của điểm dừng màu có thể được chỉ định dưới dạng phần trăm hoặc độ dài tuyệt đối. Bạn có thể chỉ định bao nhiêu điểm dừng màu tùy thích để đạt được hiệu ứng mong muốn.

Ví dụ sau đây thì mình sẽ tạo gradient có màu đỏ với khoảng 50%.

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: linear-gradient(red 50%, blue, lime);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red 50%, blue, lime);

    /* Dành cho IE 10 */
    background: -ms-linear-gradient(red 50%, blue, lime);
}

Kết quả:

Lưu ý: Trong khi đặt vị trí điểm dừng màu dưới dạng phần trăm, 0% đại diện cho điểm bắt đầu, trong khi 100% đại diện cho điểm kết thúc. Tuy nhiên, bạn có thể sử dụng các giá trị nằm ngoài phạm vi đó, tức là trước 0% hoặc sau 100% để có được hiệu ứng bạn muốn.

Lặp lại Linear Gradient

Bạn có thể lặp lại Linear Gradient bằng cách sử dụng hàm repeating-linear-gradient().

CSS:

.gradient {
    /* Các trình duyệt trở về trước không hỗ trợ */
    background: blue;

    /* Cú pháp chuẩn */
    background: repeating-linear-gradient(red, white 10%, lime 20%);

    /* Dành cho Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(red, white 10%, lime 20%);

    /* Dành cho IE 10 */
    background: -ms-repeating-linear-gradient(red, white 10%, lime 20%);
}

Kết quả:

Tạo Radial Gradient trong CSS3

Trong một radial gradient, màu xuất hiện từ một điểm duy nhất và trải đều ra bên ngoài theo hình tròn hoặc hình elip thay vì mờ dần từ màu này sang màu khác theo một hướng như với linear gradient.

Cú pháp cơ bản của việc tạo một radial gradient có thể được đưa ra với: