Прикладной визуальный дизайн

Базовые приемы визульного дизайна в Html

Позиционирование элементов

Изменяем Относительное Положение Элемента

Перемещение Относительно Позиционированного Элемента С Помощью Css-Смещений

Привязка Элемента К Его Родительскому Элементу С Помощью Абсолютного Позиционирования

Фиксируем Элемент В Окне Браузера При Помощи Фиксированного Позиционирования

Сдвигаем Элементы Влево Или Вправо С Помощью Свойства Float

Изменение Положения Перекрывающихся Элементов С Помощью Свойства Z-Index

Центрируем Элемент По Горизонтали, Используя Свойство Margin

Работа с цветом в CSS

Знакомимся С Комплиментарными Цветами

Знакомимся С Третичными Цветами

Отрегулируйте Цвет Различных Элементов До Дополнительных (Комплиментарных) Цветов

Регулируем Оттенок Цвета

Регулируем Тон Цвета

Создайем Линейный Градиент Css

Используем Линейный Градиент Css Для Создания Полосатого Элемента

Создаем Текстуру, Добавив Тонкий Узор В Качестве Фонового Изображения

Графика и анимация в css

Используем Свойство Css Transform Scale, Чтобы Изменить Размер Элемента

Используем Свойство Css Transform Scale Для Масштабирования Элемента При Наведении Курсора

Используем Свойство Css Transform Skewx, Чтобы Наклонить Элемент Вдоль Оси X

Используем Свойство Css Transform Skewy, Чтобы Наклонить Элемент Вдоль Оси Y

Создаем Графику С Помощью Css

Создаем Более Сложную Форму С Помощью Css И Html

Знакомимся Как Работают Css @Keyframes И Свойства Анимации

Использование Css-Анимации Для Изменения Состояния Кнопки При Наведении Курсора

Измененяем Режим Заливки Анимации

Создаем Движение С Помощью Css-Анимации

Создаем Анимацию Движения С Затуханием Элемент Слева Направо

Непрерывная Анимация Элементов С Использованием Бесконечного Количества Анимаций

Содаем Непрерывную Css Анимацию Серцебиения

Анимируем Элементы С Переменной Скоростью

Анимируйте Несколько Элементов С Переменной Скоростью

Изменяем Время Анимации С Помощью Ключевых Слов

Изучаем Как Работают Кривые Безье

Использование Кривой Безье Для Перемещения Графики

Делаем Движение Анимации Более Естественным С Помощью Кривой Безье

Задача

HTML

CSS

Добавляем тень для блочного элемента

Свойство box-shadow применяет одну или несколько теней к элементу.

Свойство box-shadow принимает следующие значения:

offset-x (насколько далеко отодвинуть тень от элемента по горизонтали),
offset-y (насколько далеко отодвинуть тень от элемента по вертикали),
blur-radius (радиус размытия),
spread-radius (радиус распространения)
color (цвет)

Значения blur-radius и spread-radius необязательны.

.block{
box-shadow: 0 10px 20px rgba(0,0,0,0.19);
}

Множественные тени блока (несколько теней для одного блока) могут быть созданы с помощью запятых для разделения свойств каждого элемента тени блока.

.block{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

Задание:

Добавить свойство box-shadow для элемента с id thumbnail.

Значение для свойства box-shadow возьмите из второго примера

<div class="fullCard" id="thumbnail">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr/>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br/><br/>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }



  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }

Result

Прикладной визуальный дизайн

Добавляем тень для блочного элемента

IT Junior

Курсы

Полезные ссылки

Контакты