Cienie po bokach elementu HTML
- Data publikacji
- Ostatnio edytowano
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 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 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.
- obrazek stanowiący 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('https://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('https://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 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('https://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('https://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
margin:0 -14px;
}
Rezultat:
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 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('https://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('https://webkod.pl/images/prawy_cien2d.png') right bottom no-repeat;
margin:0 -14px;
padding-bottom:11px;
}
Rezultat:
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('https://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('https://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 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('https://webkod.pl/images/lewy_cien2d.png') left bottom no-repeat, url('https://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.