Zajęcia 2

Materiały do warsztatów technologii webowych prowadzonych na Wydziale Matematyki i Informatyki Uniwersytetu im. Adama Mickiewicza w Poznaniu.
Wróć do spisu materiałów Tu będziemy testować kod źródłowy

3. Gradienty w CSS

Gradient tworzą przynajmniej dwa różne od siebie kolory, które w określony sposób, na danym obszarze, stopniowo łączą się ze sobą i w ten sposób wypełniają dany obszar.

3.1. Gradient liniowy

Funkcja linear-gradient() służy do wypełnienia tła elementu HTML gradientem liniowym. Najprostszą formę zapisu tej funkcji przedstawia poniższy przykład:

Przykład 3.1.

div {
	text-align: center;
	width: 80%;
	margin: 0 auto;
	padding: 50px;
	border: 5px solid black;
	background-image: linear-gradient(white, blue);
}

Właściwość background-image w połączeniu z funkcją linear-gradient() utworzy nam gradient liniowy, składający się z koloru białego i niebieskiego. Domyślnie pozycja każdego koloru, jaki podamy wraz z funkcją linear-gradient() jest określana automatycznie przez przeglądarkę internetową, dlatego wspomniane pozycje kolorów rozkładają się równomiernie, w równych odstępach między sobą.

Zapis linear-gradient(white, blue) jest równoznaczny z zapisem linear-gradient(white 0%, blue 100%).

Gradient liniowy może składać się z większej liczby kolorów, dzięki czemu możemy uzyskać rozmaite efekty.

Ćwiczenie 3.1.

W kodzie źródłowym z przykładu 3.1. podmień wartość właściwości background-image na podane poniżej i zaobserwuj jak będzie wyglądał gradient liniowy:

a) linear-gradient(blue, white)

b) linear-gradient(white 0%, blue 30%, blue 70%, white 100%)

c) linear-gradient(white, blue, yellow)

Ostatnim parametrem, jaki możemy określić w funkcji linear-gradient(), jest parametr, który określa kierunek wypełnienia tła elementu HTML gradientem liniowym. Domyślnie gradient liniowy jest tworzony od góry do dołu, dlatego domyślną wartością wspomnianego parametru funkcji linear-gradient() jest wartość to bottom. Zapis linear-gradient(white, blue, white) jest równoznaczny z zapisem linear-gradient(to bottom, white, blue, white) oraz jest równoznaczny z zapisem linear-gradient(to bottom, white 0%, blue 50%, white 100%).

Kierunkiem gradientu liniowego możemy manipulować za pomocą wartości typu: to bottom, to left, to bottom left, to top right itp., jak również za pomocą wartości wyrażonych w jednostkach deg, które określają stopień obrotu.

Podobną funkcją do funkcji linear-gradient() jest funkcja repeating-linear-gradient(). Działa ona identycznie jak funkcja linear-gradient() z tą różnicą, że gdy kolory, które wskazaliśmy do utworzenia gradientu liniowego, nie wypełnią całego obszaru tła elementu, to gradient zostanie powtórzony tak, aby wypełnił on cały obszar tła danego elementu.

Ćwiczenie 3.2.

Porównaj ze sobą zapisy: repeating-linear-gradient(white 0%, blue 25%) oraz linear-gradient(white 0%, blue 25%, white 25%, blue 50%, white 50%, blue 75%, white 75%, blue 100%).

3.2. Gradient promienisty

Innym rodzajem gradientu jest gradient promienisty. Jest on tworzony od jednego punktu i rozciąga się we wszystkie strony. Do utworzenia gradientu promienistego możemy wykorzystać właściwość background-image oraz funkcję radial-gradient().

Ćwiczenie 3.3.

Przeanalizuj poniższy kod źródłowy:

div {
	text-align: center;
	width: 80%;
	margin: 0 auto;
	padding: 50px;
	border: 5px solid black;
}

#div-1 {
	background-image: radial-gradient(white, blue);
}

#div-2 {
	background-image: radial-gradient(white 0%, blue 100%);
}

#div-3 {
	background-image: radial-gradient(blue, white);
}

#div-4 {
	background-image: radial-gradient(blue -20%, white 150%);
}

#div-5 {
	background-image: radial-gradient(blue, white, green);
}

#div-6 {
	background-image: radial-gradient(circle, blue, white, green);
}

#div-7 {
	background-image: radial-gradient(ellipse, blue, white, green);
}

#div-8 {
	background-image: radial-gradient(circle at top, blue, white, green);
}

#div-9 {
	background-image: radial-gradient(circle at bottom right, blue, white, green);
}

#div-10 {
	background-image: radial-gradient(circle at 50px 0, blue, white, green);
}

Domyślnie gradient promienisty jest tworzony od centralnego punktu elementu, dlatego parametr, który odpowiada za miejsce wspomnianego punktu, ma wartość at center. Do manipulowania wspomnianym parametrem możemy wykorzystywać następujące wartości oraz ich kombinacje: top, right, bottom, left, center, bottom right, center left, które podajemy po słowie at.

Ćwiczenie 3.4.

Przeanalizuj poniższy kod źródłowy:

div {
	text-align: center;
	width: 80%;
	margin: 0 auto;
	padding: 50px;
	border: 5px solid black;
}

#div-1 {
	background-image: radial-gradient(blue, gold, green);
}

#div-2 {
	background-image: radial-gradient(farthest-corner, blue, gold, green);
}

#div-3 {
	background-image: radial-gradient(farthest-corner ellipse at center, blue 0%, gold 50%, green 100%);
}

#div-4 {
	background-image: radial-gradient(closest-side, blue, gold, green);
}

#div-5 {
	background-image: radial-gradient(closest-corner, blue, gold, green);
}

#div-6 {
	background-image: radial-gradient(farthest-side, blue, gold, green);
}

Podobną funkcją do funkcji radial-gradient() jest funkcja repeating-radial-gradient(). Działa ona identycznie jak funkcja radial-gradient() z tą różnicą, że gdy kolory, które wskazaliśmy do utworzenia gradientu promienistego, nie wypełnią całego obszaru tła elementu, to gradient zostanie powtórzony tak, aby wypełnił cały obszar tła danego elementu.

4. Animacje w CSS

4.1. Efekt przejścia

Właściwość transition pozwala nam utworzyć pewien efekt animacji. Wspomniana animacja będzie prezentować zmianę wartości określonych właściwości CSS dla danego elementu. W efekcie tym zobaczymy przejście jednych wartości właściwości CSS w drugie, dlatego efekt transition możemy nazywać również efektem przejścia.

Ćwiczenie 4.1.

Porównaj kody źródłowe:

  • Pierwszy kod:
div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
}

div:hover {
  width: 80%;
  background-color: blue;
}
  • Drugi kod:
div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition-duration: 5s;
}

div:hover {
  width: 80%;
  background-color: blue;
}

Ćwiczenie 4.2.

Przeanalizuj poniższe kody źródłowe i powiedz, do czego służą użyte w nich właściwości związane z efektem przejścia.

div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition-duration: 5s;
  transition-property: background-color;
}

div:hover {
  width: 80%;
  background-color: blue;
}

div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition-duration: 5s;
  transition-timing-function: linear;
}

div:hover {
  width: 80%;
  background-color: blue;
}

div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition-duration: 5s;
  transition-delay: 500ms;
}

div:hover {
  width: 80%;
  background-color: blue;
}

div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition-property: width, background-color;
  transition-duration: 1s, 3s;
  transition-timing-function: linear, ease-in;
  transition-delay: 3s, 0s;
}

div:hover {
  width: 80%;
  background-color: blue;
}

div {
  width: 50%;
  height: 100px;
  background-color: #fff;
  border: 5px solid #000;
  transition: width 1s linear 3s, background-color 3s ease-in 0s;
}

div:hover {
  width: 80%;
  background-color: blue;
}

4.2. Reguła @keyframes i selektory czasu animacji.

W regule @keyframes określamy nazwę i zachowanie animacji.

Przykład 4.1.

div {
	height: 200px;
	width: 200px;
	animation: test 8s infinite;
}

@keyframes test {
    0% {
		background-color: white;
		height: 200px;
		width: 200px;
	}
	
    25% {
		background-color: pink;
		height: 250px;
		width: 250px;
	}
	
    50% {
		background-color: red;
		height: 300px;
		width: 300px;
	}
	
    75% {
		background-color: pink;
		height: 250px;
		width: 250px;
	}
	
    100% {
		background-color: white;
		height: 200px;
		width: 200px;
	}
}

4.3. Właściwości animacji

Poniżej zostały omówione właściwości grupy animation:

  • aby określić nazwę animacji, którą chcemy dodać do elementu używamy właściwości animation-name;
  • aby określić długość trwania animacji używamy właściwości animation-duration;
  • aby określić tempo animacji używamy właściwości animation-timing-function; przyjmowane wartości:
    • linear - stała szybkość;
    • ease - szybciej na początku, wolniej pod koniec (domyślne ustawienie);
    • ease-in - wolniej na początku;
    • ease-out - wolniej pod koniec;
    • ease-in-out - wolniej na początku i pod koniec;
    • cubic-bezier() - własne ustawienie szybkości (wartości od 0 do 1);
    • steps(frames, avoid) - tempem wykonywania się animacji interesującego nas elementu HTML będzie tempo stałe składające się z konkretnej ilości klatek;
  • aby określić opóźnienie/przyspieszenie pierwszego startu animacji używamy właściwości animation-delay;
  • aby określić ilość powtórzeń animacji używamy właściwości animation-iteration-count; przyjmowane wartości:
    • infinite - ciągłe powtarzanie;
    • wartość liczbowa - liczba powtórzeń;
  • aby określić kierunek powtarzania się oraz rozpoczęcia animacji używamy właściwości animation-direction; przyjmowane wartości:
    • normal - animacja będzie przebiegać od początku do końca;
    • reverse - animacja będzie przebiegać od końca do początku;
    • alternate - rozpoczęcie animacji od początku, powtarzanie w przeciwnym kierunku;
    • alternate-reverse - rozpoczęcie animacji od końca, powtarzanie w przeciwnym kierunku;
  • aby określić dodatkowy wygląd elementu przed lub po wykonaniu się animacji używamy właściwości animation-fill-mode; przyjmowane wartości:
    • none - brak efektu (domyślne ustawienie);
    • forwards - styl elementu po zakończeniu animacji zgodny z deklaracją w ostatnim selektorze animacji;
    • backwards - styl elementu przed rozpoczęciem animacji zgodny z deklaracją w pierwszym selektorze animacji;
    • both - styl elementu po rozpoczęciu i zakończeniu animacji zgodny z deklaracjami odpowiednio w pierwszym i ostatnim selektorze animacji;
  • aby wstrzymać lub wznowić wykonywanie się animacji używamy właściwości animation-play-state; przyjmowane wartości:
    • paused - wstrzymanie animacji;
    • running - wznowienie animacji;

Aby wyżej wymienione właściwości CSS w jakikolwiek sposób oddziaływały na dany element musimy najpierw utworzyć jakąś przykładową animację, za pomocą reguły @keyframes.

Więcej informacji o funkcji steps()

Za pomocą funkcji steps() możemy określić stałe tempo składające się z określonej ilości klatek.

Parametr frames jest wymaganym parametrem funkcji steps(). Parametr frames określa z ilu klatek powinno składać się nowo tworzone stałe tempo.

Parametr avoid nie jest wymaganym parametrem funkcji steps(). Parametr avoid określa, która klatka budująca nowo tworzone stałe tempo powinna zostać pominięta. Dostępne wartości: start i end.

Wartość start parametru avoid sprawia, że pierwsza klatka budująca nowo tworzone stałe tempo będzie pomijana.

Wartość end parametru avoid sprawia, że ostatnia klatka budująca nowo tworzone stałe tempo będzie pomijana.

Więcej informacji o funkcji cubic-bezier()

Jeśli jesteś zainteresowany szczegółami na temat funkcji cubic-bezier() zapraszam do lektury - Krzywa Béziera.

Przykład 4.2.

@keyframes change-width {
    0% {
		width: 150px;
	}
	
    100% {
		width: 350px;
	}
}

@keyframes change-background {
    0% {
		background-color: pink;
	}
	
    100% {
		background-color: red;
	}
}

div {
	border: 5px solid blue;
	height: 300px;
	animation-name: change-width, change-background;
	animation-duration: 5s, 1s;
	animation-timing-function: ease-in-out, linear;
	animation-delay: 0s, 3s;
	animation-iteration-count: infinite, infinite;
	animation-direction: alternate, normal;
	animation-fill-mode: backwards, forwards;
}

div:hover {
	animation-play-state: paused;
	cursor: pointer;
}

Ćwiczenie 4.3.

Napisz kod tworzący poniższą animację:

Przykład 4.3. - coś ambitniejszego :)

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background: #000;
				padding-top: 16px;
			} 

			p {
				color: lime; 
				font-family: "Courier";
				font-size: 20px;
				margin: 10px 0 0 10px;
				white-space: nowrap;
				overflow: hidden;
				width: 30em;
				animation: type 4s steps(60, end); 
			}

			p:nth-child(2) {
				animation: type2 8s steps(60, end);
			}

			p a {
				color: lime;
				text-decoration: none;
			}

			span {
				animation: blink 1s infinite;
			}

			@keyframes type { 
				0% {
					width: 0;
				} 
			} 

			@keyframes type2 {
				0% {
					width: 0;
				}
				50% {
					width: 0;
				}
				100% {
					width: 100;
				} 
			} 

			@keyframes blink {
				100% {
					opacity: 0;
				}
			}

		</style>
	</head>
	<body>
		<p>To jest pierwszy wiersz animacji.</p>
		<p>To jest drugi wiersz animacji.<span>|</span></p> 
	</body>
</html>

Zadania domowe

Zadanie 1.

Wykonaj drugą fazę tworzenia projektu - zbudowanie szkieletu aplikacji w HTML5. Każda większa zmiana powinna być wysłana jako osobny commit na repozytorium utworzone w pierwszej fazie. Czas na wykonanie zadania to dwa tygodnie.

Zadanie 2.

Poszukaj informacji na temat właściwości transform i używając jej stwórz prosty preloader. Rozwiązanie tego zadania umieść w repozytorium utworzonym tydzień temu w katalogu o nazwie “Prace_domowe”. Plik z rozwiązaniem nazwij “prdom02.html”.

Przykładowy wygląd:

Źródła

  • webkod.pl