Tło elementów na stronie www w CSS

Przyciski i atrakcyjne elementy graficzne na stronie www, zwykle robi się przy pomocy grafiki. Obecnie wystarczy do tego CSS który pozwala na ustawienie ciekawego efektu gradientu w tle oraz daje możliwość stworzenia zaokrąglonych rogów.  Ustawienie gradientu nie jest łatwe, wymaga sporo obliczeń, dlatego najprościej posłużyć się generatorem gradientów, np. http://www.colorzilla.com/gradient-editor/

Pobierz fragment ebooka m.in. na temat tworzenia przycisków w css.

Jesli interesuje cię temat jak tworzyć tło w CSS czytaj dalej:
Kolor tła – background

div {background: #000;}

Przycisk może mieć także przezroczystość, którą opisujemy przy pomocy kolorów RGB + alpha czyli przezroczystość. Jeśli chcemy aby przycisk miał przezroczystość 30% oznaczamy to jako 0.3.

div {background: rgba(0, 0, 0, 0.3);}
Tło w postaci gradientu.

Gradient jest to łagodne przejście między kolorami. Gradienty mogą być linearne lub kołowe. Gradienty są obsługiwane przez wiekszość przeglądarek, ale nie zaszkodzi dodawać deklaracji dla poszczególnych przeglądarek:

  • Mozilla Firefox: -moz-
  • Microsoft Internet Explorer: -ms-
  • Opera: -o-
  • Webkit (Chrome & Safari): -webkit-
  • background: -webkit-linear-gradient(#a1e048, #6a942f);
  • background: -moz-linear-gradient(#a1e048, #6a942f);
  • background: -ms-linear-gradient(#a1e048, #6a942f);
  • background: -o-linear-gradient(#a1e048, #6a942f);
  • background: linear-gradient(#a1e048, #6a942f);

Gradient można obrócić np:

background: linear-gradient(to bottom right, #a1e048, #6a942f);

Linia gradientu zawsze przechodzi przez środek obszaru. Mozna określić nachylenie w stopniach np. 45deg. Można również określić skąd i dokąd ma przebiegać gradient ustawiając top, bottom, right, left. Gradient określa się od do czyli określasz początek gradientu np. bottom left oznacza, że gradient będzie przebiegał od lewego dolnego rogu obszaru to prawego górnego, dokładnie przez środek.

Inny sposób określenia kierunku gradientu ze słowem to. Wtedy określasz do którego rogu ma gradient iść. Np. to top right – gradient będzie przebiegał z dolnego lewego do górnego prawego.

Gradient kołowy

background: radial-gradient(#a1e048, #6a942f);
radial-gradient(position,size and shape,colour stops);

Position oznacza miejsce środka gradientu. Jeśli go nie określimy, środek gradientu będzie dokładnie w środku obszaru.

circle at left top  – środek jest w lewym górnym rogu
circle at 20% 70%  – można podać wartości w procentach lub w pixelach, od lewej i od góry
circle at 0%  – jeśli podamy jedną wartość, oznacza to położenie w poziomie. Położenie w pionie będzie centralne. W tym przypadku środek jest po lewej stroni na środku.
circle at left top  – środek jest w lewym górnym rogu

Kształt gradientu kołowego – może być albo koło circle albo elipsa ellipse

Podajemy też promień koła lub 2 promienie elipsy

40px circle – koło o promieniu 40px
2em 4em ellipse – krótszy i dłuższy promień elipsy

Kolory gradientu

Do gradientu można użyć 2 kolorów albo więcej. Podajmy je oddzielone przecinkami.  Należy też podać pozycję pośrednich kolorów w procentach lub pixelach.
Tło w postaci obrazka

Aby stworzyć tło w postaci obrazka podajemy adres url plik obrazka.

background-image: url(‘obrazek.jpg’);

Możemy również oznaczyć czy obrazek będzie się powtarzał czy nie:

background-image: url(‘obrazek.jpg’) no-repeat;  lub background-repeat: no-repeat; – tło się nie powtarza
background-image: url(‘obrazek.jpg’) repeat-x;  lub background-repeat: repeat-x; – tło się  powtarza w poziomie
background-image: url(‘obrazek.jpg’) repeat-y;  lub background-repeat: repeat-y; – tło się  powtarza w pionie

Możemy również określić pozycję background-position gdzie ma się pojawić obrazek czyli:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

lub pozycję w procentach lub w pixelach np. 50% 20% lub 10px 200px. Pierwsza wartość oznacza odległość od lewej a druga od góry. Można podać wartości minusowe, jeśli chcemy aby obrazek podjechał do góry lub w lewo i aby jego część się ukryła.

background-attachement – czy tło ma być nieruchome czy przesuwać się wraz z przesuwaniem strony. Ma to raczej zastosowanie do tła całej strony.
background-attachement: scroll – tło idzie do góry lub na dół wraz z przewijaniem strony
background-attachement: scroll – tło jest przyklejone na swoim miejscu i nie przesuwa się wraz z przewijaniem strony

background-clip– tło może obejmować cały obszar czyli jego zawartość, dopełnienie i border lub nie.
background-clip: border-box; – ustawienie domyślne, tlo obejmuje caly obszar
background-clip: padding-box; – tło nie obejmuje granicy obszaru
background-clip: content-box; – tło nie obejmuje granicy i dopełnienia obszaru

background-origin– oznacza pozycję tla w stosunku do obszaru w którym jest
background-origin: border-box; – ustawienie domyślne, tlo zaczyna się od brzegu
background-origin: padding-box; – tło nie obejmuje granicy obszaru i zaczyna się od dopełnienie
background-origin: content-box; – tło nie obejmuje granicy i dopełnienia obszaru i zaczyna się od zawartości obszaru
najlepiej to zrozumieć na przykładzie: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

background-size – oznacza możliwość zmiany wielkości obrazka, który stanowi tło

Można oznaczyć szerokość i wysokość obrazka tła w pixelach lub w procentach, czyli można np. wydłużyć obrazek w pionie lub w poziomie.

background-size: cover; – oznacza, że obrazek ma zakryć cały obszar. Obrazek się powiększa do wielkości obszaru w szerz. Jeśli obrazek jest dłuższy w pionie to jego część wyjdzie poza dół obszaru i nie będzie widoczna.

background: contain; – oznacza, że obrazek rozszerza się tak aby objął całą szerokość lub wysokość obszaru ale tylko do wielkości obszaru. Czyli jeśli obrazek jest większy w pionie to rozszerzy się do wysokości obszaru i zostawi po prawej puste miejsce.

przykład: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Css3 pozwala na umieszczenie kilku teł w tym samym elemencie.

Pobierz fragment podręcznika Css

 

 

 

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.