Уроки по CSS
Выпустил новый учебник по CSS в виде приложения под Андроид. Устанавливайте, рекомендуйте другим и пишите мне, что ещё добавить в будущих версиях.
Выпустил новый учебник по CSS в виде приложения под Андроид. Устанавливайте, рекомендуйте другим и пишите мне, что ещё добавить в будущих версиях.
Реклама
Интерактивные курсы в Академии — это освоение вёрстки в игровой форме с живым кодом. Вас ждут интересные задачи, приближенные к реальным.
В курсах встретятся простые задания, испытания, принцип которых — «сверстай, как показано в образце» и специальные вызовы — для тех, кто хочет больше практиковаться.
На прошлой неделе как раз вышло четыре вызова начального уровня и два средней сложности в курсе «Знакомство с HTML и CSS».
Они доступны при активной подписке. Принимайте вызов, прокачивайте свои знания и помогите Кексу справиться с заданиями!
Оригинал: tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes/
Перевод: Влад Мержевич
CSS Shapes позволяет создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое.
Реклама
6 августа стартует профессиональный курс «PHP, уровень 1». Вас ждёт девять недель практической работы и защита личного проекта в конце.
Курс рассчитан на новичков в программировании, для прохождения достаточно базового знакомства с HTML и CSS. Во время обучения вы научитесь с нуля писать серверную логику для проектов.
В программе:
Обучение проходит под руководством наставника — опытного разработчика, которому вы сможете задавать вопросы по ходу обучения.
Чтобы узнать больше об интенсиве — посмотрите запись трансляции с автором курса Кириллом Сенкевичем и обзоры личных проектов.
До 11 июня стоимость участия 15 400 рублей, а по промокоду htmlbook скидка 1000 рублей.
До встречи на курсе!
Оригинал: css-tricks.com/couple-takes-sticky-footer
Перевод: Влад Мержевич
Краткая история, если хотите.
Смысл прижатого подвала заключается в том, что он «прилипает» к нижней части окна браузера. Но не всегда; если на странице достаточно содержимого, чтобы сдвинуть подвал вниз, то это будет сделано. Если содержимого на странице мало, тогда подвал прижмётся к нижней части окна браузера.
Реклама
Двенадцать новых вызовов появились в курсе «Знакомство с HTML и CSS». Вызовы — практические задания для тренировки, доступные по подписке.
Кекс подготовил для вас задачки разной сложности: один простой вызов, два — средних, и один продвинутого уровня.
Пройдите бесплатный курс и закрепите знания более сложными задачами: ищите ошибки в разметке и стилях, исправляйте ошибки и создавайте шедевры для пушистого заказчика.
Большинство веб-разработчиков уже имели дело с линейными и радиальными градиентами. С их помощью создание градиентов в CSS происходит очень просто, хотя ранее нужно было использовать предварительно созданные изображения. Недавно в спецификации CSS Image Values and Replaced Content был определён новый тип — конический градиент. Он позволяет использовать градиенты, которые рисуются по окружности.
Название «конический градиент» основано на том, что когда в этом градиенте применяются контрастные цвета, он создаёт эффект конуса. Иногда такие градиенты также называют угловыми.
Реклама
Понадобится мотивация, чёткая современная программа, грамотный преподаватель и опытный наставник. И, конечно, время: 2-4 часа на обучение каждый день.
Готовы? Открыт набор на профессию «React-разработчик»: стартуем 2 сентября, а финал 10 августа 2020 года.
Программа состоит из пяти курсов по 9 недель. Непрерывное обучение, 45 часов голосовых консультаций с наставником, тонны ревью кода и минимум пять проектов в портфолио.
Вместе с наставником вы в условиях приближённых к реальной разработке пройдёте пять этапов:
Что дальше? Возможность трёхмесячной оплачиваемой стажировки в «Лиге А.» на реальных проектах.
Вы станете react-разработчиком, который разбирается в основах, понимает, что он делает и знает, как использовать инструменты правильно.
Участие можно оформить в рассрочку на 14 частей, а после обучения оформить налоговый вычет.
Для создания эффектных текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Ниже рассмотрим два способа добавления градиента к тексту, а также их плюсы и минусы.
Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.
Перед применением этого метода текст надо обернуть в какой-нибудь элемент (<p>, <span>, <div>, <h2> и др.) и установить для него родителя. Мы сделаем такую структуру: <div> в качестве родителя; <h2> для текста.
<div>
<h2>Градиентный текст</h2>
</div>
Теперь для <div> устанавливаем желаемый градиент через свойство background, а для <h2> ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).
Пример 1. Свойство mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градиентный текст</title>
<style>
div {
background: linear-gradient(red, blue); /* Градиент для текста */
}
div > h2 {
font-size: 3rem; /* Размер текста */
margin: 0; /* Убираем отступы */
background: white; /* Белый цвет фона */
mix-blend-mode: screen; /* Режим наложения */
}
</style>
</head>
<body>
<div><h2>Градиентный текст</h2></div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Градиентный текст
Реклама
Вышли новые вызовы в главе «Объекты» для курса «Основы JavaScript». Вызовы — это практические задания, которые помогут вам закрепить знания, полученные во время прохождения курса.
Вас ждут: один лёгкий, два средних и два сложных вызова. Под руководством пушистого босса вам под силу будет сделать программу-переводчик, попутно разбираясь с массивами и функциями.
Курс доступен только для подписчиков. Готовы присоединиться и взяться за вызовы?