✅ Что такое Udemy?

Каждый думаю хотел проходить курсы программирования по минимальной цене, у меня как раз есть такая возможность.
Udemy - онлайн сайт где можно приобрести любой курс на любую тему за 10-15 евро. Каждую неделю там проходят скидки до 85%. Это ваш шанс научиться создавать сайты, игры, дизайн и многое другое.

Вот ссылка на Udemy:

https://www.udemy.com/

#теория

✅ Как создать селектор выбора?

Селектор выбора позволяет выбрать один конкретный вариант или же выбрать сразу несколько различных вариантов, полезная вещь если вы хотите создать поле с выбором различной информации.
Всего два тега "select", "option" и у вас будет он на сайте.

Вот вам пример готового кода:

<select name="selector" id="selector" multiple size="4">
<option disabled>-----</option>
<option selected>BMW</option>
<option>Mercedes</option>
<option selected>Audi</option>
</select>

#практика #html

✅ Тег <q>

Для цитат или коротких фраз в HTML есть отдельный тег <q>, он выделяет текст специальным символом.

Используйте тег <q> если вы хотите вставить цитату, прямую речь, отсылок, название предприятий или литературных произведений.

#теория #html

✅ Как привлечь внимание к тексту за пару кликов?

Первое на что смотрит пользователь - это текст. Если ваш заголовок красивый, яркий и тем более с градиентом пользователь обязательно на него посмотрит.

Мы сделали вариант градиента в CSS. В этом коде вы можете поменять цвета и стили под себя:

font-size: 25px;
font-weight: 600;
background-image: linear-gradient(to bottom, #d429c3, #ff4331, #f49d5d);
color: transparent;
background-clip: text;
-webkit-background-clip: text;

#обучение #css

✅ Как создать псевдокласс: hover?

Если вы хотите сделать красивое оформление с простой анимацией, в этом поможет это свойство. ⬇️

Hover - самый важный и нужный псевдокласс в css для создания быстрых анимированных действий, срабатывает когда пользователь наводит на элемент мышью.

Вот уже готовый код для любой кнопки: ↙️

.btn:hover{
    transition: all 0.6s linear;
    background-color: #fff;
    color: #000;
}

#обучение #css

✅ Как сделать обводку для текста?

Лучший вариант сделать текст более выразительным и оригинальным это добавить ему обводку.
В этом сможет помочь свойство -webkit-text-stroke. ⤵️

Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста, используется вместе с движком -WebKit

Вот готовый пример кода: ⬇️

text-transform: uppercase;
-webkit-text-stroke: 1px #000000;
color: rgb(243, 169, 119);
font-family: 'DM Sans', sans-serif;
font-size: 2.2rem;
font-weight: 600;

#обучение #css

✅ Атрибут title

Чтобы создать готовую подсказку для пользователя при наведении на текст, в html есть уже готовый атрибут title. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Он описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Обязательно чтобы этот атрибут был внутри любого тега.

Вот готовый пример кода: ⤵️

<div title="TITLE">Clue</div>

#теория #html

✅ Как создать тень для текстов?

Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста.

Тени придают объем дизайну и сейчас это пользуется большой популярностью. Задать в CSS тень текста можно с помощью свойства text-shadow.

Ниже показан пример записи кода ⤵️

text-shadow: rgb(0, 153, 255) -3px -1px 4px;
color: #fff;
-webkit-text-stroke: 0.1px #000;
font-family: 'M PLUS 1p', sans-serif;

#обучение #css

✅ Тег <details>

Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия. ⬇️

Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.

Вот интерактивный пример: ⤵️

<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>

#практика #html

✅ Свойство filter: invert()

Функция invert() инвертирует цвета в изображении. По своему действию похоже на превращение фотографии в негатив. ⬇️

Принимает значение от 0% до 100%.
0% (0) - значение по умолчанию (исходное изображение).
100% (1) - изображение полностью инвертировано.

Готовый пример кода: ⤵️

img {
filter: invert(70%);
border-radius: 4px;
}

#обучение #css

✅ Z-index

Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Это свойство регулирует вертикальный порядок перекрытия элементов. ⬇️

Оно используется для стабилизации порядка элементов, которые перекрываются.
В качестве значения используются целые числа. Чем больше значение, тем выше находится элемент.

#теория #css

✅ Свойство transform (scale)

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с заданными параметрами ширины и высоты).
Может принимать один или два параметра, перечисляемых через запятую. ⬇️

Если параметров два - первый параметр задает масштабирование по горизонтали, а второй - по вертикали. Если параметр один то он задает масштабирование по горизонтали и вертикали одновременно.

Вот готовый код с увеличением квадрата ⤵️

:hover {
  transform: scale(1.5, 1.7);
  transition: 0.7s;
  cursor: pointer;
}

#обучение #css

✅ Как создать неоновый текст?

При правильном использовании, неоновое свечение добавляет приятные футуристические нотки дизайну сайта, при этом магию неоновых вывесок можно воссоздать с помощью CSS.

Что полезно в text-shadow, так это то, что мы можем применить к нему несколько теней, просто разделив их запятыми.

Готовый код для неонового текста: ⤵️

text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;

#практика #css

✅ Тег <meta>

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем, содержит метаданные о документе HTML. ⬇️

Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных. Все они размещаются в контейнере <head>

Важные атрибуты: ⤵️

charset - Задает кодировку документа
content - Устанавливает значение атрибута
http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.
name - Имя метатега

#теория #html

✅ Как добавить loading button на сайт?

Кнопки загрузки можно создать не используя JavaScript. В мире Web разработки есть очень крутая библиотека иконок - Font Awesome, она идет сразу с анимацией и очень облегчает работу. ⬇️

Чтобы добавить эту библиотеку на сайт, достаточно просто подключить готовый код -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Теперь осталось добавить иконки через тег i (на сайте Font Awesome вы найдете много разных вариантов) ⤵️

Loading 1 - <i class="fa fa-spinner fa-spin">Loading

Loading 2 - <i class="fa fa-refresh fa-spin">Loading

#практика #html #css

✅ Свойство filter: blur()

☑️ Функция blur() устанавливает размытие элемента, словно он находится не в фокусе.  ⬇️

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS. Чем больше значение, тем сильнее будет размыто изображение

Готовый код: ⤵️

img {
  filter: blur(10px);
  border-radius: 0.4rem;
}

#обучение #css

✅ Теги <sub> и <sup>

Тег <sub> используется для определения текста с нижним индексом. Сдвигает текст ниже базовой линии, уменьшая его размер.
Тег <sup> отображает текст в виде степени (в виде верхнего индекса). Сдвигает текст ниже базовой линии, уменьшая его размер. ⬇️

☑️ Эти теги чаще используются для выделения отдельных символов, а не слов. Их используют для указания единиц измерения или написания простых формул.
Для создания более сложных формул, теги <sup> и <sub> можно использовать внутри друг друга. ⤵️

<p>H<sub>2</sub>O</p> 
<p>X<sup>3</sup>+X<sup>3</sup>=X<sup>6</sup></p>

#теория #html

✅ Как создать вдавленный текст?

Эффект вдавленного текста — один из самых популярных на веб-сайтах со скевоморфным дизайном. Этот эффект лучше всего работает на умеренно светлом фоне с темным текстом. ⬇️

☑️ Вдавленный текст очень часто используется с применением свойства text-shadow. Тень немного смещается по оси Y для создания эффекта небольшого углубления.

Вот вам готовый код для светлого фона ⤵️

text-shadow: 2px 2px 2px rgba(255,255,255,0.3);
background-color: #b9b9b9;
background-clip: text;
color: transparent;
font-family: 'M PLUS 1p', sans-serif;

#обучение #css

✅ Как сделать анимированный фон?

Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов.
В веб-дизайне анимация часто используется как способ привлечения внимания. ⤵️

Вы можете создать простой анимированный фон на чистом CSS с помощью готового кода ниже. ⬇️

html, body {
  width: 100%;
  height:100%;
}
body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% и 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#обучение #css

✅ Как менять цвет картинок?

Мало кто знает что в css есть свойство которое позволяет менять оттенок картинок с помощью hue-rotate. При повороте оттенка вы указываете угол вокруг цветового круга, под которым будут корректироваться входные образцы. ⬇️

☑️ Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg). ↙️

img {
   filter: hue-rotate(170deg);
}

#практика #css