Autor publikacji
Virtual Patriot - Administrator

Wykorzystujemy właściwości CSS do utworzenia ramki ze zdjęciem

Data publikacji
Ostatnio edytowano

W tej części kursu CSS poznamy do czego możemy wykorzystać takie właściwości CSS jak position:relative; oraz position:absolute; jak również top, right, bottom, left.

Dzięki wspomnianym właściwościom CSS będziemy mogli utworzyć układ elementów HTML, który został zaprezentowany poniżej.

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Naszym pierwszym krokiem będzie utworzenie elementu div z atrybutem id o wartości caly_blok. 

<body>

  <div id="caly_blok"></div>

</body>

Dla utworzonego elementu div#caly_blok określamy następujące właściwości CSS: 

#caly_blok {
  position:relative;
  width:300px;
  height:200px;
  margin:0 auto;
  border:1px solid #000;
  background-color:#AAA;
}

Właściwość:

  • width:300px; ustawi szerokość elementu
  • height:200px; ustawi wysokość elementu
  • margin:0 auto; wyśrodkuje element w poziomie
  • border:1px solid #000; doda do elementu obramowanie po jego każdej stronie
  • background-color:#AAA; doda do elementu kolor tła

Gdy do elementu, który posiada w sobie właściwość position:relative; dodamy jakiś element z właściwością position:absolute; to położenie elementu pozycjonowanego absolutnie, czyli tego z właściwością position:absolute; będzie liczone względem wspomnianego elementu z właściwością position:relative; Położenie to będzie mogli kontrolować za pomocą takich właściwości CSS jak: top, right, bottom, left.

Jeżeli żaden element przodek nie będzie posiadał w sobie właściwości position:relative; lub właściwości position:absolute; lub właściwości position:fixed; to położenie wspomnianego elementu HTML z właściwością position:absolute; będzie liczone względem granic okna przeglądarki internetowej.

Poprzednie akapity mogą brzmieć trochę skomplikowanie, lecz w rzeczywistości są to proste zależności, które należy zrozumieć i zapamiętać.

Jak na razie nasz element div#caly_blok wygląda następująco:

Do elementu div#caly_blok dodajemy element p, w którym umieszczamy element a, którego zawartością będzie obrazek, czyli element img. 

<body>

  <div id="caly_blok">
    <p>
      <a href="https://webkod.pl">
        <img src="https://webkod.pl/images/obrazek_d4.png" alt="zdjęcie serwisu webkod.pl" >
      </a>
    </p>
  </div>

</body>

Rezultat:

darmowy kurs css

Element p domyślnie posiada wartość górnego i dolnego marginesu zewnętrznego, która nie jest równa zeru, przez co tworzą się niepotrzebne odstępy po górnej i dolnej stronie elementu p.

Zerujemy wszystkie marginesy zewnętrzne elementu p umieszczonego w elemencie div#caly_blok za pomocą właściwości margin:0; 

#caly_blok p {
  margin:0;
}

Jeżeli chcemy, aby obrazek umieszczony w elemencie div#caly_blok zajmował całą jego powierzchnię to musimy ustalić dla niego taką samą szerokość i wysokość jak dla wspomnianego elementu div#caly_blok, czyli width:300px; oraz height:200px;

Dodatkowo w niektórych przeglądarkach internetowych obrazki mają domyślnie obramowanie, a więc wspomniane obramowanie wypadałoby usunąć za pomocą właściwości border:none; 

#caly_blok img {
  width:300px;
  height:200px;
  border:none;
}

Po wykonaniu wspomnianych kroków nasz układ elementów HTML prezentuje się następująco:

darmowy kurs css

Następnym krokiem jaki musimy wykonać jest dodanie elementu span, wraz z tekstem, do elementu a. 

<body>

  <div id="caly_blok">
    <p>
      <a href="https://webkod.pl">
        <img src="https://webkod.pl/images/obrazek_d4.png" alt="zdjęcie serwisu webkod.pl" >
        <span>Darmowy Kurs CSS - webkod.pl</span>
      </a>
    </p>
  </div>

</body>

Dla elementu span, który jest umieszczony w elemencie div#caly_blok, musimy utworzyć regułę CSS, która:

  • będzie wyświetlać ten element span jako element blokowy (display:block;), dzięki czemu będziemy mogli ustalić szerokość i wysokość dla naszego elementu span
  • doda do elementu span czarny kolor tła (background-color:#000;)
  • odsunie zawartość elementu span od jego każdej strony o 15 pikseli (padding:15px;)

Tworzymy regułę CSS, która doda wyżej wymienione właściwości CSS do naszego elementu span, który jest umieszczony w elemencie div#caly_blok. 

#caly_blok span {
  display:block;
  background-color:#000;
  padding:15px;
}

W momencie gdy dodamy do naszego elementu span właściwość position:absolute; to będziemy mogli kontrolować jego położenie za pomocą właściwości top, right, bottom, left, względem okna przeglądarki internetowej lub względem pierwszego elementu przodka, który będzie posiadał w sobie właściwość position:relative; lub właściwość position:absolute; lub właściwość position:fixed; 

#caly_blok span {
  display:block;
  background-color:#000;
  padding:15px;
  position:absolute;
  top:0;
  left:0;
}

W naszym przypadku tym pierwszym elementem przodkiem z właściwością position:relative; względem elementu span jest element div#caly_blok, dlatego po dodaniu właściwości position:absolute; oraz top:0; oraz left:0; do elementu span, który znajduje się w elemencie div#caly_blok, ujrzymy następujący efekt:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

W przypadku gdy chcemy, aby element span (ten z czarnym tłem) był odsunięty od dolnej granicy elementu div#caly_blok o 0 pikseli, to zamieniamy właściwość top:0; na bottom:0; dzięki czemu ujrzymy następujący efekt:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Dodatkowo nasza reguła CSS odnosząca się do elementu span powinna ustalić jego szerokość tak, aby zajmował on taką samą szerokość jak element div#caly_blok. Jako że element div#caly_blok zawiera w sobie właściwość width:300px; to jego szerokość wynosi 300 pikseli, jednak dla naszego elementu span musimy ustalić właściwość width uwzględniając przy tym lewy i prawy margines wewnętrzny tego elementu, który ustawiliśmy na 15 pikseli za pomocą właściwości padding:15px; a więc nasza szerokość dla elementu span będzie wynosić 300px - 15px × 2, czyli width:270px; 

#caly_blok span {
  display:block;
  background-color:#000;
  padding:15px;
  width:270px;
  position:absolute;
  top:0;
  left:0;
}

Po wykonaniu ostatniej czynności wygląd naszego układu elementów HTML będzie prezentował się następująco:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Następnym krokiem jaki musimy wykonać jest określenie wyglądu tekstu, który znajdzie się w elemencie a. Tekst powinien być koloru białego (color:#FFF;), być wielkości 16 pikseli (font-size:16px;) oraz powinien być pozbawiony dekoracji (text-decoration:none;)

Tworzymy regułę CSS, która doda wspomniane właściwości do elementu a. 

#caly_blok a {
  color:#FFF;
  font-size:16px;
  text-decoration:none;
}

Rezultat:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Tworzymy jeszcze jedną regułę CSS, której działanie zostanie wyjaśnione w następnym akapicie. 

#caly_blok a:hover span {
  text-decoration:underline;
}

Reguła CSS, którą utworzyliśmy powyżej, doda podkreślenie do tekstu, który znajduje się w elemencie span, jednak tylko momencie gdy najedziemy kursorem myszki na element a, który będzie przodkiem elementu span oraz potomkiem elementu div#caly_blok.

Wspomniany efekt został dodany do naszego układu elementów HTML, który znajduje się poniżej:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Ostatnim krokiem jaki pozostał nam do wykonania w tej części kursu CSS jest dodanie tła z odpowiednim stopniem przezroczystości do elementu span. Możemy to wykonać na dwa sposoby.

Pierwszym z nich jest dodanie właściwości background-color:rgba(0,0,0,0.7); w której możemy określić kolor tła elementu HTML i jego procent krycia (przykładowe 0.7). Jednak zapis rgba nie jest interpretowany przez wszystkie przeglądarki internetowe (dla IE dopiero od wersji 9).

  • darmowy kurs css

Innym sposobem na osiągnięcie półprzezroczystego tła jest wypełnienie danego elementu HTML obrazkiem z rozszerzeniem PNG o rozmiarze 1 × 1, dzięki czemu będziemy mogli określić, dla naszego obrazka PNG, procent krycia w programie graficznym (np. w GIMP-ie). Taki przykładowy obrazek (w powiększeniu) został przedstawiony powyżej tego akapitu. Procent krycia dla wspomnianego obrazka został ustawiony na ~70%.

Usuwamy z naszego elementu span właściwość odpowiadającą za kolor tła elementu HTML (background-color), a w jej miejsce dodajemy właściwość odpowiadającą za wypełnienie danego elementu HTML tłem obrazkowym (background-image). 

#caly_blok span {
  display:block;
  background-image:url('https://webkod.pl/images/kropka.png');
  padding:15px;
  width:270px;
  position:absolute;
  bottom:0;
  left:0;
}

Rezultat:

darmowy kurs css Darmowy Kurs CSS - webkod.pl

Kod całego dokumentu HTML został umieszczony poniżej: 

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

    <style>
      #caly_blok {
        position:relative;
        width:300px;
        height:200px;
        margin:0 auto;
        border:1px solid #000;
        background-color:#AAA;
      }

      #caly_blok p {
        margin:0;
      }

      #caly_blok img {
        width:300px;
        height:200px;
        border:none;
      }

      #caly_blok span {
        display:block;
        background-image:url('https://webkod.pl/images/kropka.png');
        padding:15px;
        width:270px;
        position:absolute;
        bottom:0;
        left:0;
      }

      #caly_blok a {
        color:#FFF;
        font-size:16px;
        text-decoration:none;
      }

      #caly_blok a:hover span {
        text-decoration:underline;
      }
    </style>

  </head>

  <body>

    <div id="caly_blok">
      <p>
        <a href="https://webkod.pl">
          <img src="https://webkod.pl/images/obrazek_d4.png" alt="zdjęcie serwisu webkod.pl" >
          <span>Darmowy Kurs CSS - webkod.pl</span>
        </a>
      </p>
    </div>

  </body>
</html>

W następnej części kursu CSS zajmiemy się innym układem elementów HTML.