poniedziałek, 25 stycznia 2016

Gradienty

Gradienty to fajny efekt i w dodatku do zrobienia CSSem, a nie graficznie. Ja wolę właśnie kody, więc to dla mnie najprostszy sposób na ciekawsze tło. Do ich tworzenia używamy właściwości background-image:.
background-image: linear-gradient(ghostwhite, lightskyblue ) Zwykły gradient z domyślnymi ustawieniami kierunku i procentów
background-image: linear-gradient(ghostwhite 20%, lightskyblue 70%) Poprawiony procent dla obu kolorów
background-image: linear-gradient(to left, ghostwhite 20%, lightskyblue 70%) Zmieniony kolorek
background-image: repeating-linear-gradient(ghostwhite 10%, cyan 30%) Powtarzający się gradient w sytuacji, gdy procenty nie sięgają stu.
background-image: radial-gradient(ghostwhite , lightskyblue) Okrągły, ustawienia domyślne
background-image: radial-gradient(ghostwhite 20%, lightskyblue 60%) Znów, dodane procenty
background-image: radial-gradient(ellipse, ghostwhite 10%, lightskyblue 70%) Zmieniony na elipsę się trochę rozciągnął
background-image: radial-gradient(ellipse 60px 30px, ghostwhite 10%, lightskyblue 70%) Wielkość elipsy ustawiamy dwoma wartościami
background-image: radial-gradient(circle, ghostwhite 10%, lightskyblue 70%) Koło jest ładne proporcjonalne
background-image: radial-gradient(circle 50px, ghostwhite 10%, lightskyblue 70%) A wielkość koła jedną

1 komentarz:

  1. Taka prosta a przydatna instrukcja. :3 Dziękuję. :DDD Everlasting Wishes

    OdpowiedzUsuń