Створіть власні стікери й дізнайтеся, які стилі можна задати для тексту.
Троє друзів: HTML, CSS та JS
Ви вже, мабуть, знайомі з HTML, раз взялися за цей курс. Якщо ні, то раджу спершу пройти курс HTML. Чи можна створити сайт тільки на HTML? Можна, але він буде дуже простий і буде топорно виглядати. Сучасні сайти скрізь використовують CSS і більшість ще й Javascript або деякі інші мови програмування.
HTML (HyperText Markup Language) – це основний конструктор для створення вебсторінок. HTML не є мовою програмування. Це мова розмітки, яка допомагає розмістити на сторінці заголовки, текст, посилання, картинки, відео, фрейми, списки і т.д.
CSS (Cascading Style Sheets) – це каскадні таблиці стилів. Мова, яка допомагає візуально краще подати інформацію на вебсторінці. CSS зазвичай використовується в парі з HTML.
JavaScript (JS) – мова програмування і третя цеглинка у сайтобудівництві (разом з HTML та CSS). JavaScript перетворює вебсторінки в динамічні, з ним вебсторінка може взаємодіяти з користувачем. Мова програмування JavaScript управляє мультимедіа, анімує зображення, змінює текст на вебсторінці та багато іншого.
Про CSS
Сьогодні зазирнемо в CSS. Погляньте, як знайомі вам сайти виглядають З і БЕЗ CSS
Шукаєте натхнення ? Зазирніть у ці сайти. Тут дуже круті ідеї втілені за допомогою CSS!
Хоч до такого рівня ще треба буде немало повчитися і попрактикуватися
https://soundboard.heihei.resn.co/
http://archiviostoricoexperience.gruppotim.it/en/
Круто! Егеж ?
Селектори у CSS
Для того, щоб задати стиль у CSS використовуються селектори. Такими селекторами можна обрати будь-який елемент або кілька елементів у HTML файлі.
Так за допомогою селекторів можна зробити всі заголовки зеленого кольору, деякі картинки відповідного розміру, або навіть змінити стилі для одного лише посилання.
В цьому прикладі селектор обирає всі заголовки h1 і фарбує їх у колір blue та змінює розмір шрифту на 12 px.
Селектор обирає елементи. А у фігурних дужках прописуються властивості і їхні значення для селектора.
Практика. Створюємо стікери
Зайдіть на replit.com і створіть новий проєкт, натиснувши на кнопку зліва Create Repl. Для Template оберіть HTML, CSS, JS. Для Title задайте назву. Можете написати Stickers. Запам’ятайте, як створювати проєкти, бо цю процедуру ми будемо повторювати на кожному уроці. Натисніть на Create Repl і відкриється новий проєкт.
Новий проєкт міститиме три файли : index.html (для структури наших сайтів), style.css (для стилів) script.js (для кодування). Поки що нас цікавлять перші два. В index.html почистіть всі рядки в середині тега body. Вони нам не знадобляться. Знайдіть рядок :
<link href="style.css" rel="stylesheet" type="text/css" />Це рядок для підключення файлу стилів. Тут це зробили за нас, але для інших редакторів цей рядок доведеться прописати.
Коли щось змінюєте, то щоб запустити, вгорі є зелена кнопочка Run.
1: Додамо перший стікер на українську тематику. Для цього використайте div з класом стікерів і id “ua”. Текст можете поставити будь-який. Це буде текст на стікері.
<div class="sticker" id="ua">Доброго вечора,<br> ми з України</div>Запусти за допомогою Run. Має з’явитися просто текст. Без стилів він нецікаво виглядає…
2: Настав час стилів! Додамо трохи коду у style.css
.sticker {
display: inline-block;
vertical-align: top;
text-align: center;
margin: 5px;
}
#ua{
font-size: 40px;
font-weight: bold;
font-family: "Courier New";
}sticker задає стилі для всіх стікерів. Як не важко здогадатися, їх буде кілька і всі вони будуть мати клас sticker. Стилі тут такі (не силуйте себе запам’ятовувати всі властивості, ми ще розберемо їх в наступних уроках):
display: inline-block; всі стікери мають згрупуватися і вишикуватися в лінію
vertical-align: top; розташовуємо, починаючи згори
text-align: center; текст по центру
margin: 5px; зовнішній відступ від стікера до стікера
#ua задає властивості для першого стікера по його id.
font-size: 40px; розмір шрифту
font-weight: bold; жирний шрифт
font-family: “Courier New”; тип шрифту
3: Чудово! Ваша задача додати ці властивості. Можете змінити значення і кольори:
- колір фону (кольори обери сам(а)) background: linear-gradient(red, magenta)
- відступ з середини (перша цифра для відступу згори і знизу, а друга для відступу ліво-право): padding: 50px 30px;
- закруглити кути: border-radius: 20px;
Стікер з радіальним градієнтом
4: Додайте новий стікер HTML CSS Javascript. Для цього в файлі index.html додайте
<div class="sticker" id="web">HTML CSS JS</div>Встановіть цьому стікеру нові стилі:
#web{
font-size: 40px;
font-family: "Impact";
text-shadow: 2px 2px grey;
}text-shadow: 2px 2px grey; створює тінь сірого кольору, а 2 пікселі, то розміри тіні.
5: Додайте ще :
- Для background встановіть radial-gradient(….); , а в дужках запишіть три будь-які кольори
- Для padding встановіть 30px;
- Для border-radius встановіть 100px;
Пограйтеся з кольорами й значеннями.
Стікер з картинкою
6: Тепер зробимо стікер з картинкою. Знайдіть в інтернеті картинку для свого стікера. Бажано, щоб вона була без фону (коли шукаєте, оберіть Інструменти/Колір/З прозорим фоном). Вставте картинку, як показано в прикладі й додайте свій текст. У мене в прикладі буде картинка з єдинорогом (посилання не спрацює, замініть на своє):
<div class="sticker" id="image">
<img height="100px" src="https://єдиноріг.png">
<span id="itext">So cute!</span>
</div>Для id=image додайте такі стилі:
- background: linear-gradient(to bottom left, #ff0088, #ff00dd, #000980); градієнт знизу вліво і перелік кольорів
- border: 10px dashed pink; рамка з рисочок на 10 пікселів , останнім іде колір
- outline: 4px solid violet; зовнішня лінія, її розмір і колір
- outline-offset:2px; відступ до зовнішньої лінії
- position: relative; це позиція для того, щоб потім накласти текст
Проставте свої кольори і значення
Для тексту додайте:
#itext{
font-size: 20px;
font-family: "Impact";
position: absolute;
bottom: 10px;
left:10px;
transform: rotate(-15deg);
}
position: absolute; для розташування тексту
bottom: 10px; відступ знизу 10 пікселів
left:10px; відступ зліва 10 пікселів
transform: rotate(-15deg); поворот.
У мене вийшов ось такий єдиноріг. А у вас ?
Домашня робота
1: Створіть такі стікери:
- Стікер на тему захисту природи. Лінійний градієнт, 4 кольори
- Стікер-вітання зі святом. Радіальний градієнт, 2 кольори, закруглені краї у стікера
- Стікер-емблема для M&Ms. Використайте 4 або більше кольорів
Кольори й решту стилів оберіть на власний смак
2: Створіть стікер на свій смак
Level Up
1: Виконайте завдання номер 6 з класної роботи й створіть свій стікер з картинкою і текстом.
2: Створіть стікер, як на малюнку. Це відомий мем про CSS, він про те, що в великих проєктах, як тільки трошки виправляєш стилі, і робиш необачну зміну, то дизайн може “поплисти” і увесь сайт буде відображатися криво.
Слово awesome має вилазити за рамку. В цьому і суть.
Це все!
P.s. це зізнання у коханні для веброзробників ❤️
