Jak zrobić gradient za pomocą CSS

wtorek, 28 czerwca 2016

Chyba każdy z Was wie co to jest gradient i wie jak wygląda. Dla tych co nie wiedzą - to nic innego jak płynne przejście między dwoma kolorami. Niektórzy nazywają to efektem ombre (podobno ładniej brzmi). W dzisiejszym wpisie pokaże Wam jak zrobić gradient za pomocą kodu CSS na naszym blogu.

Jedynce co będziemy musieli zrobić to przejść do:

szablon - dostosuj - zaawansowane - dodaj arkusz CSS 

LISTA SELEKTORÓW

Ramka z gradientem (ombre) 

Żeby stworzyć ramkę z gradientem potrzebny nam będzie taki kod:

.selektor {
    width: 250px;
    height: 20px;
text-align: center;
text-transform: uppercase;
padding: 10px;
    background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;
}

Szerokość 
Wysokość 
Położenie tekstu
Wygląd tekstu (tutaj ustawione na drukowane)
Marginesy wewnętrzne 
Kolor tła
Grubość obramowania 

Wszystkie pogrubione wartości są zmienne. To co na czerwono to kolor pierwszy, naszego gradientu.

W moim wypadku zastosowałam ten kod do tytułów gadżetów, więc prezentuje się on tak:

.sidebar h2 {
    width: 250px;
    height: 20px;
text-align: center;
text-transform: uppercase;
padding: 10px;
    background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;
}

Efekt: 

No dobrze, wiemy już jak zrobić ramkę z gradientem, a jak zrobić tło? To nic trudnego! Musimy po prostu dodać taki kod:

.selektor {
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-color: #fff;
padding: 10px;
    background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1);
}

Wygląd tekstu
Położenie tekstu
Odstęp między literami
Kolor czcionki
Wewnętrzne marginesy 

Wszystkie pogrubione wartości są zmienne. To co na czerwono, to kolor pierwszy naszego gradientu.

W moim wypadku, znowu zastosowałam ten kod, dla tytułów gadżetów i wygląda on tak:

.sidebar h2 {
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
fony-color: #fff;
padding: 10px;
    background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1);
}

Efekt: 

Jak możecie zauważyć, części odpowiadające za gradient w pierwszym i drugim kodzie są takie:

background: #fff;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #dcd2e3  0%, #9581a1 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #dcd2e3 0%, #9581a1 100%);
    border-image: linear-gradient(to bottom, #dcd2e3 0%, #9581a1 100%);
    border-image-slice: 1;

oraz

 background: #fff;
    background: -webkit-linear-gradient(#dcd2e3, #9581a1);
    background: -o-linear-gradient(#dcd2e3, #9581a1);
    background: -moz-linear-gradient(#dcd2e3, #9581a1);
    background: linear-gradient(#dcd2e3, #9581a1); 

Jak możecie zauważyć - w jednym oraz w drugim kodzie zapisaliśmy po prostu dwa wybrane kolory przy background, które się "zatarły" - innej magii w tym nie ma. Proste prawda? ;)

Jeśli spodobał Ci się wpis, przekaż go dalej :)