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.