Dodatkowy element HTML z właściwościami CSS3
- Data publikacji
- Ostatnio edytowano
W poprzednich częściach tego kursu CSS poznaliśmy wiele nowych zagadnień, które pojawiły się w języku CSS. Wspomnianymi zagadnieniami były: animacja CSS3, efekt transition CSS3, przekształcenia CSS3 oraz inne.
W jednej z poprzednich części kursu CSS poznaliśmy sposób na dodanie do elementu HTML dodatkowej zawartości, która jest traktowana przez przeglądarkę internetową jako dodatkowy element HTML, który jest wyświetlany w linii. We wspomnianej części kursu CSS dowiedzieliśmy się również w jaki sposób ustalić wygląd takiej dodatkowej zawartości elementu HTML.
Kod dokumentu HTML, w którym w części body znajduje się element div, do którego dodawana jest dodatkowa zawartość za pomocą właściwości content oraz selektora :before, został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:400px;
line-height:100px;
margin:15px auto;
border:1px solid black;
text-align:center;
position:relative;
}
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div>
to jest przykładowy element - div
</div>
</body>
</html>Rezultat:
Gdy zapoznawaliśmy się z efektem transition to powiedzieliśmy sobie, że aby móc go "uruchomić" element HTML musi posiadać w sobie właściwość transition-duration wraz z wartością, która określi długość czasu efektu transition. Nasz efekt transition będzie zmieniał wartości zaokrąglenia wszystkich rogów dodatkowej zawartości elementu div, w momencie gdy najedziemy na ten element div kursorem naszej myszki.
Zmieniamy oraz tworzymy następujące reguły CSS:
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:0;
left:0;
transition-duration:1s;
}
div:hover:before {
border-radius:50%;
}
Na pierwszy rzut oka budowa selektora div:hover:before może wydać się nam nieco dziwna, lecz działa on w ten sposób, że określa ona wygląd dodatkowej zawartości, która została dodana do początkowej treści elementu div. Wygląd ten będzie zmieniał się w momencie gdy najdziemy kursorem myszki na element, do którego jest dodawana dodatkowa treść, czyli w naszym przykładzie tym elementem HTML jest element div. Właściwość border-radius określa wartość zaokrąglenia rogów danego elementu HTML, w naszym przykładzie tym elementem jest dodatkowa zawartość elementu div.
Najedź kursorem myszki na element div, aby zobaczyć w jaki sposób zmienia się wygląd jego dodatkowej zawartości:
Z naszym dodatkowym elementem HTML, który znajduje się w zawartości przykładowego elementu div, możemy robić o wiele więcej ciekawych rzeczy.
Umieśćmy nasz dodatkowy element HTML na środku względem poziomego oraz pionowego obramowania elementu div. Aby tego dokonać, po pierwsze musimy znać całkowite rozmiary dodatkowego elementu HTML, który znajduje się w elemencie div.
Całkowitą szerokość naszej dodatkowej zawartości elementu div obliczamy dodając wartość właściwości width oraz wartość lewego i prawego obramowania, czyli 31px + 1px + 1px = 33px
Całkowitą wysokość naszej dodatkowej zawartości elementu div obliczamy dodając wartość właściwości height oraz wartość górnego i dolnego obramowania, czyli 31px + 1px + 1px = 33px.
Aby umieścić nasz dodatkowy element HTML dokładnie na środku względem poziomu oraz pionu obramowania elementu div, wartość szerokości wspomnianego obramowania elementu div musi być wartością nieparzystą i w rzeczywistości tak jest, ponieważ tą wartością nieparzystą jest wartość 1px, którą określa właściwość border:1px solid black; ponadto całkowita wartość szerokości oraz wysokości dodatkowej zawartości elementu div powinna również być wartością nieparzystą i tym razem również tak jest, ponieważ wartość zarówno całkowitej szerokości jak i całkowitej wysokości dodatkowej zawartości elementu div jest równa 33px, dzięki czemu w łatwy sposób możemy odnaleźć wartości, które pozwolą nam ustawić dodatkową zawartość elementu div dokładnie na środku poziomu oraz pionu jego obramowania.
Dzielimy wartość 33px na dwa i zaokrąglamy do dołu, następnie do tej wartości dodajemy wartość obramowania elementu div, czyli 33px / 2 ~= 16px + 1px = 17px, dzięki czemu odnaleźliśmy potrzebną wartość, którą użyjemy wraz z właściwością left oraz top.
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:-17px;
left:-17px;
}
W jaki sposób działają właściwości: position, top, left mogliśmy dowiedzieć się z następującej części tego kursu CSS - Pozycja statyczna, relatywna, absolutna oraz ustalona.
Rezultat:
Czas wprawić w ruch nasz dodatkowy element HTML. Tworzymy następującą animację ruch.
@keyframes ruch
{
0% { left:-17px; }
100% { left:383px; }
}
Animacja, którą utworzyliśmy powyżej, będzie przesuwać element HTML od jego pozycji początkowej, która została określona za pomocą właściwości left:-17px; w prawo o 400 pikseli, bo -17px + 400px = 383px.
Dlaczego akurat o 400 pikseli?
Ponieważ właśnie taką wartość szerokości posiada element div, a naszym celem jest uzyskać efekt przesuwania dodatkowego elementu HTML wzdłuż obramowania elementu div.
Dodajemy w ten sposób utworzoną animację ruch do dodatkowej zawartości:
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:-17px;
left:-17px;
animation:ruch 2s linear infinite;
}Rezultat:
Naszą animację możemy rozbudować do tego stopnia, że dodatkowy element HTML będzie przesuwał się w wzdłuż obramowania, po każdej stronie elementu div.
@keyframes ruch
{
0% { left:-17px; top:-17px; }
25% { left:383px; top:-17px; }
50% { left:383px; top:83px; }
75% { left:-17px; top:83px; }
100% { left:-17px; top:-17px; }
}Rezultat:
Nic nie stoi nam na przeszkodzie, aby dodać drugą animację CSS3 do naszego dodatkowego elementu HTML, np. animację, która będzie obracać dany element HTML o 360 stopni względem jego własnego punktu zero.
@keyframes obrot
{
0% { transform:rotate(0); }
100% { transform:rotate(360deg); }
}
W ten sposób utworzoną animację obrot dodajemy do reguły CSS, która odpowiada za wygląd dodatkowego elementu HTML.
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:-17px;
left:-17px;
animation:ruch 5s linear infinite, obrot 2s linear infinite;
}Rezultat:
Kod dokumentu HTML poprzedniego przykładu został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:400px;
line-height:100px;
margin:15px auto;
border:1px solid black;
text-align:center;
position:relative;
}
div:before {
content:'';
width:31px;
height:31px;
border:1px solid red;
background-color:white;
position:absolute;
top:-17px;
left:-17px;
animation:ruch 5s linear infinite, obrot 2s linear infinite;
-webkit-animation:ruch 5s linear infinite, obrot 2s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
}
@keyframes ruch
{
0% { left:-17px; top:-17px; }
25% { left:383px; top:-17px; }
50% { left:383px; top:83px; }
75% { left:-17px; top:83px; }
100% { left:-17px; top:-17px; }
}
@keyframes obrot
{
0% { transform:rotate(0); }
100% { transform:rotate(360deg); }
}
/* dla Google Chrome, Safari, Opera 15+ */
@-webkit-keyframes ruch
{
0% { left:-17px; top:-17px; }
25% { left:383px; top:-17px; }
50% { left:383px; top:83px; }
75% { left:-17px; top:83px; }
100% { left:-17px; top:-17px; }
}
@-webkit-keyframes obrot
{
0% { -webkit-transform:rotate(0); }
100% { -webkit-transform:rotate(360deg); }
}
</style>
</head>
<body>
<div>
to jest przykładowy element - div
</div>
</body>
</html>
Na początku tej części kursu CSS powiedzieliśmy sobie, że dodatkowa zawartość dodana do elementu HTML za pomocą właściwości content oraz selektora :before jest traktowana przez przeglądarkę internetową jako element wyświetlany w linii, czyli taki element HTML, który zawiera w sobie domyślną właściwość display wraz z wartością inline. W normalnych okolicznościach, aby określić rozmiary dodatkowej zawartości elementu HTML za pomocą właściwości width oraz height, musielibyśmy dodać do dodatkowej zawartości elementu HTML właściwość display:block; która sprawia, że element HTML staje się elementem blokowym, jednak w naszym przykładzie nie musieliśmy tego robić, ponieważ nasza dodatkowa zawartość elementu div była wyświetlana w innej pozycji niż domyślna pozycja statyczna (static), a tą pozycją była pozycja absolutna, która została określona za pomocą właściwości position:absolute;
Ta część kursu CSS miała na calu pokazanie, że dodatkowa zawartość jaką możemy dodać do elementu HTML za pomocą właściwości content oraz selektora :before lub selektora :after może pełnić rolę dekoracyjną, lecz nie tylko, o czym dowiesz się więcej, gdy poznasz wszystkie możliwości właściwości content. Należy również pamiętać, że dodatkowa zawartość, w ten sposób dodawana do elementu HTML, jest niewidoczna dla robotów indeksujących, a więc w niczym nie będzie im przeszkadzać.
W następnej części kursu CSS rozpoczniemy temat specyficznych reguł CSS.