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

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

Создание Визуального Баланса С Помощью Свойства Text-Align
Регулируем Ширину Элемента С Помощью Свойства Width
Регулируем Высоту Элемента С Помощью Свойства Height
Используем Тег Strong, Чтобы Сделать Текст Полужирным
Используем Тег U Для Подчеркивания Текста
Используем Тег Em Для Выделения Текста Курсивом
Используем Тег S Для Зачеркивания Текста
Создаем Горизонтальную Линию С Помощью Тега Hr
Добавляем Свойство Background-Color Для Текста
Изменяем Размер Заголовка
Добавляем Тень Для Блочного Элемента
Уменьшаем Прозрачность Элемента
Используем Свойство Text-Transform, Чтобы Изменить Начертания Текста
Устанавливаем Размер Шрифта Для Нескольких Элементов Заголовка
Устанавливаем Начертание Шрифта Для Нескольких Элементов Заголовка
Устанавливаем Размер Шрифта Для Параграфа
Устанавливаем Свойство Line-Height Для Тега Параграфа
Меняем Поведение Элемента При Наведении Курсора
Используем Свойство Css Transform Scale, Чтобы Изменить Размер Элемента
Используем Свойство Css Transform Scale Для Масштабирования Элемента При Наведении Курсора
Используем Свойство Css Transform Skewx, Чтобы Наклонить Элемент Вдоль Оси X
Используем Свойство Css Transform Skewy, Чтобы Наклонить Элемент Вдоль Оси Y
Создаем Графику С Помощью Css
Создаем Более Сложную Форму С Помощью Css И Html
Знакомимся Как Работают Css @Keyframes И Свойства Анимации
Использование Css-Анимации Для Изменения Состояния Кнопки При Наведении Курсора
Измененяем Режим Заливки Анимации
Создаем Движение С Помощью Css-Анимации
Создаем Анимацию Движения С Затуханием Элемент Слева Направо
Непрерывная Анимация Элементов С Использованием Бесконечного Количества Анимаций
Содаем Непрерывную Css Анимацию Серцебиения
Анимируем Элементы С Переменной Скоростью
Анимируйте Несколько Элементов С Переменной Скоростью
Изменяем Время Анимации С Помощью Ключевых Слов
Изучаем Как Работают Кривые Безье
Использование Кривой Безье Для Перемещения Графики
Делаем Движение Анимации Более Естественным С Помощью Кривой Безье
Задача
HTML
CSS
JS

Уменьшаем прозрачность элемента

Свойство opacity в CSS используется для настройки непрозрачности или, наоборот, прозрачности элемента. Свойство opacity принимает значение в диапозоне от 1 до 0:

  • Значение 1 непрозрачно, совсем непрозрачно 
  • Значение 0,5 означает половину прозрачности
  • Значение 0 полностью прозрачно.

 

Задание:

  1.  Для класса  links установите прозрачность на 0.7 
<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; } #thumbnail { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } .cardText { margin-bottom: 30px; }
Result
shape shape