<MyRusakov.ru />

Создание нейросетей на Python

Создание нейросетей на Python

Этот курс научит Вас созданию нейросетей на Python. Курс рассчитан на начинающих. Вся информация идёт от простого к сложному очень маленькими шажками. При этом глубокое знание математики не требуется. Поскольку в курсе Вы будете получать эти знания по мере необходимости.

Из курса Вы узнаете всю необходимую теорию и терминологию. Научитесь создавать нейросети самых разных архитектур и обучать их. Также Вы создадите собственный фреймворк. Что очень важно проделать для грамотного использования того же PyTorch. Затем Вы изучите и сам PyTorch.

Помимо уроков к курсу идут упражнения для закрепления материала.

Ещё Вы получите Бонусы, дополняющие основной курс: "Распознавание изображений", "Анализ настроения по тексту отзыва", "Программирование на Python с Нуля до Гуру".

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Параллакс эффект на чистом CSS

Параллакс эффект на чистом CSS

Для создания простенького параллакс эффекта вполне можно обойтись и без использования сторонних плагинов и библиотек. Более того, для реализации несложного параллакс эффекта достаточно только CSS кода, используя 3d перспективу и псевдоэлемент.

HTML разметка

Вам потребуется тег шапки header, заголовок h1 и некий текст.

<header>
    <h1>Параллакс эффект</h1>
    <small>Только CSS, никакого JavaScript</small>
</header>

CSS стили

Свойство perspective задает элементу перспективу, а transform-style задает стиль трансформации. Эффект параллакс достигается за счет трансформации блоков с разной скоростью, что создает ощущение глубины. Эффекта глубины мы будем достигать с помощью 3d.

body {
    margin: 0; /* обнуление полей */
    padding: 0; /* обнуление отступов */
    perspective: 1px;/* задание перспективы трансформации */
    transform-style: preserve-3d; /* задание стиля трансформации */
    overflow-y: scroll; /* разрешить скролл по вертикали */
    overflow-x: hidden; /* спрятать все лишнее по горизонтали */
    font-family: 'Pacifico', cursive; /* семейство шрифтов */
    color: #fff; /* цвет текста */
}

header {
    box-sizing: border-box; /* ширина рамок и отступов не влияют на ширину элемента */
    min-height: 100vh; /* шапка занимает 100% первого экрана по высоте */
    text-align: center;/* выравнивание по центру */
    padding-top: 20%; /* поля со всех сторон */
    transform-style: inherit; /* значение наследуется от родителя body */
    width: 100vw; /* шапка занимает 100% ширины экрана */
    font-size: 34px; /* размер шрифта */
}

Стили псевдоэлемента before являются ключевыми для достижения эффекта параллакс, который заключается в значениях свойства transform. Трансформация будет происходить по оси Z: фоновое изображение сдвинется на глубину в 1 пиксель. Фоновая картинка движется медленнее, чем заголовок.

header::before {
    content: ''; /* условие отображения псевдоэлемента */
    display: block; /* позиционирование псевдоэлемента */
    position: absolute; /* позиционирование псевдоэлемента */
    left: 0; /* левая координата */
    right: 0; /* правая координата */
    bottom: 0; /* нижняя координата */
    top: 0;/* верхняя координата */
    z-index: -1; /* расположение на нижнем слое */
    transform-origin: center; /* направление трансформации из центра */
    min-height: 100vh;/* 100% по высоте */
    background-image: url('https://cdn.pixabay.com/photo/2020/12/22/12/38/cat-5852139_1280.jpg');
    background-repeat: no-repeat; /* запрет на размножение фона */
    background-size: cover; /* растянуть фон, сохраняя пропорции */
    transition: 1s; /* плавный переход */
    /* Параллакс */
    transform: translateZ(-1px) scale(2);
}

header h1 {
    margin-top: -100px;
    font-size: 40px;
}

Посмотрите пример на CodePen

Если Вам не хватает знаний для лучшего восприятия этого урока, то посмотрите мой видеокурс "Верстка сайта с нуля 2.0".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.