Мова HTML. Створення галереї засобами CSS

Сентябрь 7, 2022

Главная
Алгебра
Мова HTML. Створення галереї засобами CSS

Содержание

2. Створення галереї Вставляти великі зображення на сайт - це не практично, так як це займає досить
3. Створення галереї Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього додамо кнопку закриття зображення
4. Галерея
5. Крок 1. Мова HTML СТРУКТУРА: Є загальний контейнер, який містить всю структуру, в середину цього контейнера
6. Крок 1. Мова HTML
7. Крок 2. CSS Базові стилі
8. position static
9. position
10. Position fixed Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає одне і теж
11. Position fixed fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; } Фіксований
12. Position absolute absolute поводиться як fixed за винятком того, що позиціювання відраховується щодо найближчого розташованого родича,
13. Position absolute
14. Position absolute
15. position у дії
16. position у дії
17. float (поплавок) CSS властивість використовується для розмітки. Поплавок призначений для обгортання тексту навколо зображень, наприклад: img
18. float (поплавок)
19. Приклад float шаблону nav { float: left; width: 200px; } section { margin-left: 200px; }
20. Приклад float шаблону
21. z-index Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то вони перекривають один одного. За
22. z-index z-index или кто кого перекроет Блок 1 Блок 2 Блок 3
23. z-index body { margin: 0; padding: 20px;} .block { padding: 10px; text-align: right; color: white; opacity:
24. z-index
25. z-index
26. Крок 2. CSS Базові стилі
27. Значення inherit
28. Значення inherit З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це значення, будуть наслідувати значення
29. Властивість box-shadow
30. Властивість box-shadow
31. Властивість box-shadow
32. Властивість box-shadow
33. Властивість box-shadow
34. Крок 2. CSS Встановили елементи display: none, для того, щоб зробити кнопку закриття, яка з'являється, коли
35. Крок 2. CSS . image-lightbox span { display: none; } .image-lightbox .expand { width: 100%; height:
36. .image-lightbox .close { position: absolute; width: 20px; height: 20px; right: 20px; top: 20px; } .image-lightbox .close
37. Крок 3 Необхідно додати позиціонування для зображень, якщо ви хочете додати нові, тоді необхідно внести доповнення
38. При відкритті зображення відбувається його позиціювання на сторінці
40. Скачать презентацию

Слайд 2

Створення галереї
Вставляти великі зображення на сайт - це не практично, так

як це займає досить багато місця, а якщо занадто маленькі, то не буде зрозуміло, що на зображенні, тому доводиться йти на компроміс.
На занятті ми розглянемо, як створити просте збільшення зображень за допомогою CSS.

Слайд 3

Створення галереї
Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього

додамо кнопку закриття зображення

Слайд 4

Галерея

Слайд 5

Крок 1. Мова HTML
СТРУКТУРА:
Є загальний контейнер, який містить всю структуру, в

середину цього контейнера поміщені дочірні елементи, як зображення і класи закриття розгорнутих зображень.
Крім цього ми використовуємо клас: target який забезпечить працездатність вікон.

Слайд 6

Крок 1. Мова HTML

Слайд 7

Крок 2. CSS Базові стилі

Слайд 8

position static

Слайд 9

position

Слайд 10

Position fixed
Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає

одне і теж місце навіть при прокручуванні сторінки, немов він приклеєний до екрану. Також як і для relative, додаткові властивості top, right, bottom, і left для даного позиціонування працюватимуть.

Слайд 11

Position fixed
fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }
Фіксований елемент не залишає

за собою вільний простір на сторінці, де він був розташований.
У мобільних браузерів
досить хитка
підтримка фіксованого
позиціонування.

Слайд 12

Position absolute
absolute поводиться як fixed за винятком того, що позиціювання відраховується

щодо найближчого розташованого родича, а не щодо вікна браузера.
Якщо елемент абсолютно позиціонується і не має родича, то він використовує тіло документа і продовжує рухатись разом з усією сторінкою при скролінгу.
Пам'ятайте, що “позиційований" елемент - це елемент з будь-яким значенням властивості position крім значення static.

Слайд 13

Position absolute

Слайд 14

Position absolute

Слайд 15

position у дії

Слайд 16

position у дії

Слайд 17

float (поплавок)
CSS властивість використовується для розмітки.
Поплавок призначений для обгортання тексту

навколо зображень, наприклад: img { float: right; margin: 0 0 1em 1em; }

Слайд 18

float (поплавок)

Слайд 19

Приклад float шаблону
nav
{
float: left; width: 200px;
}
section
{

margin-left: 200px;
}

Слайд 20

Приклад float шаблону

Слайд 21

z-index
Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то

вони перекривають один одного. За замовчуванням вище виявляється той блок, який розташований далі в коді сторінки. За допомогою CSS-властивості z-index можна керувати тим, як перекриваються блоки. Значенням властивості може бути ціле число. Чим більше z-index, тим вище розташовується блок. Властивість z-index працює для елементів, у яких position задана як absolute, fixed і relative.
Таким чином, «відносний» елемент може перекривати «абсолютний».

Слайд 22

z-index

z-index или кто кого</div></h2><div class="slides-content">перекроет

Блок 1

Блок 2

Блок 3

Слайд 23

z-index
body { margin: 0; padding: 20px;}
.block { padding: 10px; text-align: right;

color: white; opacity: 0.8;}
.block-1 { width: 350px; height: 350px; background: #3a78a1;}
.block-2 { position: absolute; top: 20px; width: 250px; height: 250px; background: #e74c3c;}.
block-3 { position: absolute; top: 20px; width: 150px; height: 150px; background: #27ae60;}

Слайд 24

z-index

Слайд 25

z-index

Слайд 26

Крок 2. CSS Базові стилі

Слайд 27

Значення inherit

Слайд 28

Значення inherit
З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це

значення, будуть наслідувати значення тієї-ж властивості його родича.

Дочірній блок

Слайд 29

Властивість box-shadow

Слайд 30

Властивість box-shadow

Слайд 31

Властивість box-shadow

Слайд 32

Властивість box-shadow

Слайд 33

Властивість box-shadow

Слайд 34

Крок 2. CSS
Встановили елементи display: none, для того, щоб зробити

кнопку закриття, яка з'являється, коли користувач натискає на зображення.

Слайд 35

Крок 2. CSS
. image-lightbox span {
display: none;
}
.image-lightbox .expand {
width: 100%;
height: 100%;
position:

absolute;
top: 0;
z-index: 4000;
background: rgba(0,0,0,0); /* Фиксы для IE */
left: 0;
}

Слайд 36

.image-lightbox .close {
position: absolute;
width: 20px; height: 20px;
right: 20px; top: 20px;
}
.image-lightbox .close

a {
height: auto; width: auto;
padding: 5px 10px;
color: #fff;
text-decoration: none;
background: #22272c;
box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
border-radius: 5px;
font-weight: bold;
float: right;
}
.image-lightbox .close a:hover {
box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);}

Слайд 37

Крок 3
Необхідно додати позиціонування для зображень, якщо ви хочете додати нові,

тоді необхідно внести доповнення до цього розділу:

Слайд 38

Мова HTML. Створення галереї засобами CSS

Содержание

Створення галереїВставляти великі зображення на сайт - це не практично, так

Створення галереїНеобхідно, щоб після натискання на зображення воно збільшувалося, крім цього

Галерея

Крок 1. Мова HTMLСТРУКТУРА:Є загальний контейнер, який містить всю структуру, в

Крок 1. Мова HTML

Крок 2. CSS Базові стилі

position static

position

Position fixedФіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає

Position fixedfixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }Фіксований елемент не залишає

Position absoluteabsolute поводиться як fixed за винятком того, що позиціювання відраховується

Position absolute

Position absolute

position у дії

position у дії

float (поплавок) CSS властивість використовується для розмітки. Поплавок призначений для обгортання тексту

float (поплавок)

Приклад float шаблону nav { float: left; width: 200px; } section {

Приклад float шаблону

z-index Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то

z-index z-index или кто кого</div></h2><div class="slides-content">перекроет Блок 1 Блок 2 Блок 3

z-indexbody { margin: 0; padding: 20px;}.block { padding: 10px; text-align: right;

z-index

z-index

Крок 2. CSS Базові стилі

Значення inherit

Значення inheritЗ англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це

Властивість box-shadow

Властивість box-shadow

Властивість box-shadow

Властивість box-shadow

Властивість box-shadow

Крок 2. CSSВстановили елементи display: none, для того, щоб зробити

Крок 2. CSS. image-lightbox span {display: none;} .image-lightbox .expand {width: 100%;height: 100%;position:

.image-lightbox .close {position: absolute;width: 20px; height: 20px;right: 20px; top: 20px;} .image-lightbox .close

Крок 3Необхідно додати позиціонування для зображень, якщо ви хочете додати нові,

При відкритті зображення відбувається його позиціювання на сторінці

Похожие презентации

Створення галереї
Вставляти великі зображення на сайт - це не практично, так

Створення галереї
Необхідно, щоб після натискання на зображення воно збільшувалося, крім цього

Крок 1. Мова HTML
СТРУКТУРА:
Є загальний контейнер, який містить всю структуру, в

Position fixed
Фіксоване позиціювання елемента щодо вікна браузера таке, що він завжди займає

Position fixed
fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; }
Фіксований елемент не залишає

Position absolute
absolute поводиться як fixed за винятком того, що позиціювання відраховується

float (поплавок)
CSS властивість використовується для розмітки.
Поплавок призначений для обгортання тексту

Приклад float шаблону
nav
{
float: left; width: 200px;
}
section
{

z-index
Якщо в одному місці сторінки виявляються кілька «абсолютних» блоків, то

z-index

z-index или кто кого</div></h2><div class="slides-content">перекроет

Блок 1

Блок 2

Блок 3

z-index
body { margin: 0; padding: 20px;}
.block { padding: 10px; text-align: right;

Значення inherit
З англ. перекладається як “наслідувати”. Властивості, яким буде присвоєно це

Крок 2. CSS
Встановили елементи display: none, для того, щоб зробити

Крок 2. CSS
. image-lightbox span {
display: none;
}
.image-lightbox .expand {
width: 100%;
height: 100%;
position:

.image-lightbox .close {
position: absolute;
width: 20px; height: 20px;
right: 20px; top: 20px;
}
.image-lightbox .close

Крок 3
Необхідно додати позиціонування для зображень, якщо ви хочете додати нові,