<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

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

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Градиентная тень у блока на CSS

Градиентная тень у блока на CSS

Сделать на CSS красивую градиентную тень вместо обычной серовато-черного цвета? Это никакая не сверхзадача, CSS легко с этим справляется.

Создание блоков

Создадим два блока с текстом внутри для красоты. Оба блока будут отбрасывать тень вниз. Чтобы все блоки с текстом находились в центре браузера, поместим их в гибкий контейнер body и установим нужный свойства.


//HTML код
<div class="card">
    <h2>Gradient</h2>
</div>
<div class="card">
    <h2>Shadow</h2>
</div>
// CSS код
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    display: flex; / * гибкий контейнер * /
    justify-content: center; / * по горизонтали * /
    align-items: center; / * по вертикали * /
    min-height: 100vh;
    flex-wrap: wrap;
}


Градиентная тень у блока на CSS.

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

.card{
    position: relative;
    width: 300px;
    height: 200px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
    border: solid 1px #000; /*временная рамка*/
}


Градиентная тень у блока на CSS.

Создание основы для тени тени

Псевдоэлемент before - это надстройка над элементом card со своими CSS-свойствами. Для наглядности, я опять установлю временную красную рамку.

.card:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    filter: blur(25px);
    transform: translateY(30px) scale(0.9);
    border: solid 8px red; /*временная рамка*/
}


Градиентная тень у блока на CSS.

Создание тени для блоков

Обращаемся к первому блоку через псевдокласс nth-child и задаем ему первый градиент для закрашивания самого блока. Второй градиент предназначается для закрашивания тени. Тоже самое делаем для второго блока, но с другим цветом у градиентов.

.card:nth-child(1),
.card:nth-child(1):before{
    background: linear-gradient(135deg,#ff0057,#FFEBEE);
    background: linear-gradient(-45deg, #f403d1, #64b5f6);
}
.card:nth-child(2),
.card:nth-child(2):before{
    background: linear-gradient(135deg,#f4ff4b,#ff0076);
    background: linear-gradient(-45deg, #24ff72, #2196F3);
}

Тем временем, к нас куда-то исчез текст на блоках. Конечно же никуда он не пропал, а оказался под слоями. Поднимем наш текст на самый верхний слой с помощью z-index.

.card h2{
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 3em;
}


Градиентная тень у блока на CSS.

Создание градиентной тени похоже на слоеный пирог, где каждый слой состоит из псевдоэлемента.

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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