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.