Мова HTML. Створення галереї засобами CSS - презентация, доклад, проект скачать

Нажмите для полного просмотра!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Мова HTML. Створення галереї засобами CSS. Доклад-сообщение содержит 39 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 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 или кто кого перекроет Блок 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);}