Cienie po bokach elementu HTML

W tej części kursu CSS zajmiemy się stworzeniem cieni po bokach elementu HTML. Nie chodzi tu o cienie, które są tworzone za pomocą właściwości box-shadow, lecz cienie, które są tworzone za pomocą prostych obrazków w formacie .png.

Czasami na różnych stronach internetowych możemy natrafić na układ elementów HTML, który został umieszczony poniżej. Chodzi tutaj o cienie o trójkątnym kształcie, które są umieszczone po bokach elementu HTML (tego ze złotym kolorem tła).

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Nasz układ elementów HTML rozpoczniemy tworzyć od umieszczenia odpowiednich elementów w części body dokumentu HTML.

<body>

  <div id="caly">
    <h1>
      <span>To jest przykładowy tytuł</span>
    </h1>

    <p>
      to jest przykładowy tekst, który jest zawartością elementu - p
    </p>
  </div>

</body>

Do części body dodaliśmy element div wraz z atrybutem id o wartości caly, dzięki czemu w następnym kroku utworzymy kilka reguł CSS z właściwościami CSS, które zmienią wygląd naszych elementów div, h1, span oraz elementu p.

#caly {
  width:300px;
  border:3px solid #EEE;
}

#caly span {
  display:block;
  text-align:center;
  font-size:20px;
  padding:10px;
}

#caly p {
  padding:15px;
  background-color:#EEE;
}

Rezultat:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Jak do tej pory nasze reguły CSS nie zawierają w sobie niczego specjalnego. Trójkątne cienie, które chcemy dodać do elementu h1, będą obrazkami formatu .png, ponieważ właśnie ten format umożliwia nam określenie przezroczystości w programie graficznym, np. w GIMP-ie.

Obrazki, które będą nam potrzebne, zostały umieszczone poniżej.

  • lewy cień - obrazek stanowiący lewy cień
  • lewy cień - obrazek stanowiący prawy cień

Każdy z naszych obrazków ma 11 pikseli szerokości oraz 11 pikseli wysokości. Wartości te przydadzą nam się wkrótce.

Dodajemy nasze obrazki do elementu h1 jako dwa tła obrazkowe, dzięki właściwości background. Pierwszy z nich umieścimy w lewym dolnym rogu elementu h1 (left bottom), natomiast drugi obrazek umieścimy w prawym dolnym rogu elementu h1 (right bottom). Nasze tła obrazkowe nie powinny powtarzać się, a więc dodajemy wartość no-repeat do właściwości background, do każdej grupy wartości, które określają cechy danego obrazka stanowiącego tło obrazkowe elementu HTML.

#caly h1 {
  background:url('http://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('http://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
}

Tymczasowo do elementu h1 został dodany inny kolor tła, abyśmy mogli zauważyć granice elementu h1, dzięki czemu łatwiej będzie nam zrozumieć pewne zmiany, które niedługo zostaną przedstawione.

Rezultat:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Czas sprawić, aby szerokość elementu h1 powiększyła się w taki sposób, aby lewy oraz prawy bok elementu h1 wystawał poza granice elementu #caly. Efekt ten możemy uzyskać w dość nietypowy sposób, ponieważ skorzystamy z minusowych wartości właściwości margin, czyli określimy dla elementu h1 minusowe marginesy zewnętrzne.

Wartość lewego oraz prawego marginesu zewnętrznego będzie taka sama i będzie ona wynosić -14px, ponieważ szerokość obrazka, po lewej oraz prawej stronie jest taka sama i wynosi ona 11px, natomiast obramowanie elementu rodzica, czyli elementu #caly, po lewej i prawej stronie, ma taką samą wartość szerokości, która wynosi 3px, czyli 11px + 3px = 14px.

#caly h1 {
  background:url('http://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('http://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
  margin:0 -14px;
}

Rezultat:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

W momencie gdy będziemy chcieli określić jakiś kolor tła dla elementu span, wtedy pojawi się pewien problem, ponieważ tło elementu span przykryje całym swoim obszarem, tło elementu h1.

#caly span {
  display:block;
  text-align:center;
  font-size:20px;
  padding:10px;
  background-color:gold;
}

Rezultat:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Nasz problem rozwiążemy w dość prostu sposób. Wystarczy dodać dolny margines wewnętrzny do elementu h1, czyli właściwość padding-bottom o takiej samej wartości jak wysokość naszych obrazków, które stanowią tło obrazkowe elementu h1, a tą wartością jest wartość 11px.

#caly h1 {
  background:url('http://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('http://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
  margin:0 -14px;
  padding-bottom:11px;
}

Rezultat:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Jeżeli chcemy określić takie same odległości dla elementu p od otaczających go krawędzi rożnych elementów HTML (chodzi o marginesy zewnętrzne dla tego elementu), to należy pamiętać, że element h1 posiada w sobie właściwość padding-bottom wraz z wartością 11px, dlatego wizualnie mamy wrażenie tak jakby element p był już oddalony od elementu h1 o 11px, a więc gdy będziemy chcieli określić marginesy zewnętrzne o wartości 15px dla elementu p, to od wartości górnego marginesu zewnętrznego należy odjąć wartość 11px.

Dodatkowo możemy usunąć górne obramowanie z elementu #caly oraz możemy dodać zaokrąglone rogi do naszego układu elementów HTML, za pomocą właściwości border-radius.

#caly {
  width:300px;
  border:3px solid #EEE;
  border-top:none;
  border-radius:0 0 6px 6px;
}

#caly h1 {
  background:url('http://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('http://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
  margin:0 -14px;
  padding-bottom:11px;
}

#caly span {
  display:block;
  text-align:center;
  font-size:20px;
  padding:10px;
  background-color:gold;
  border-radius:6px 6px 0 0;
}

#caly p {
  margin:4px 15px 15px;
  padding:15px;
  background-color:#EEE;
  border-radius:0 0 6px 6px;
}

Rezultat końcowy:

To jest przykładowy tytuł

to jest przykładowy tekst, który jest zawartością elementu - p

Kod dokumentu HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly {
        width:300px;
        border:3px solid #EEE;
        border-top:none;
        border-radius:0 0 6px 6px;
      }

      #caly h1 {
        background:url('http://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('http://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
        margin:0 -14px;
        padding-bottom:11px;
      }

      #caly span {
        display:block;
        text-align:center;
        font-size:20px;
        padding:10px;
        background-color:gold;
        border-radius:6px 6px 0 0;
      }

      #caly p {
        margin:4px 15px 15px;
        padding:15px;
        background-color:#EEE;
        border-radius:0 0 6px 6px;
      }
    </style>
  </head>

  <body>

    <div id="caly">
      <h1>
        <span>To jest przykładowy tytuł</span>
      </h1>

      <p>
        to jest przykładowy tekst, który jest zawartością elementu - p
      </p>
    </div>

  </body>
</html>

W następnej części kursu CSS poznamy sposób na wyśrodkowanie tekstu w pionie elementu HTML.