Jak zrobić gradient za pomocą CSS

28.06.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? ;)

10 komentarzy:

  1. Ramka z gradientem jest super.

    OdpowiedzUsuń
  2. Nie mam pytań :D Nie sądziłam, że za pomocą CSS można nawet takie cuda robić. Jestem już od dawna zacofana w temacie. Za każdym razem, jak wpadam na Twojego bloga to jaram się jego wyglądem :) A ten suwak to już w ogóle rewelacja!

    OdpowiedzUsuń
  3. hoho! kto by pomyślał, że i coś takiego się da!

    OdpowiedzUsuń
  4. Świetnie to wygląda, ale dla mnie to jeszcze czarna magia XD

    OdpowiedzUsuń
  5. E tam czarna magia! Spróbuj to zobaczysz, że to naprawdę bardzo proste :D

    OdpowiedzUsuń
  6. Dużo ciekawych rzeczy da się zrobić za pomocą CSS :D Dlatego tak go uwielbiam! :)
    Haha, widzisz, a ja jak wchodzę na Twojego bloga to wzdycham z zachwytem, bo co jak co, ale szablon to masz rewelacyjny :)
    Da się, ale czasem mam dość różnych dziwnych "akcji" jak np. problem z publikacją wpisu ;)

    OdpowiedzUsuń
  7. Kocham twoje instrukcje blogowe! Masz pełno ciekawych pomysłów i umiejętności. Zdradzisz mi jak się tego wszystkiego nauczyłaś?

    OdpowiedzUsuń
  8. To żadna wielka tajemnica, po prostu to lubię, jara mnie to bardzo, więc dużo siedziałam, kombinowałam, czytałam, na studiach trochę miałam o kodowaniu, przed studiami chodziłam na kursy informatyczno-graficzne - to wszystko.

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia