Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
MASe
@MASe
User
CSS: системные цвета, шрифты и кое-что ещё
4 min
Translation
Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов:
Полагаю, их обычно называют «именованными цветами».
Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:
Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.
color: OldLace;
background: rebeccapurple;
Полагаю, их обычно называют «именованными цветами».
Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:
Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.
Трюки CSS, которые сделают из вас ниндзя верстки
5 min
Сегодня я хочу рассказать вам о нескольких CSS-свойствах и значениях, которые редко упоминаются в специальной литературе, но, на мой вгляд, представляют определенный интерес с точки зрения скорости и качества разработки веб-интерфейсов.
Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").
Там, где можно обойтись сниппетом, я ограничусь кодом. Там, где потребуется визуализация, будет приведена ссылка на песочницу.
Я не стал делать примеры слишком красивыми, чтобы не затенять рассматриваемые свойства другими стилями.
Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.
grid + place-items
Здесь вы найдете полное визуальное руководство по Grid и Flexbox.
Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.
Псс, дизайнер, хочешь ещё один конструктор для создания сайтов?
4 min
Всем привет! На самом деле я сторонюсь сравнений с конструкторами сайтов и ниже расскажу, почему это так. Наш проект — это скорее редактор, позволяющий динамически верстать макеты без кода и генерирующий на выходе оптимизированный продакшн-реди код. В остальном мы ближе к графическим редакторам. Этакий No-Code Pixel Perfect инструмент, где всё нужное под рукой, и где реализовано всё то, чего не хватало в Фигме.
Базовая структура HTML-документа с объяснением каждой строчки
9 min
Translation
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Unique page title - My Site</title>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/css/print.css" media="print">
<meta name="description" content="Page description">
<meta property="og:title" content="Unique page title - My Site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<!-- Content -->
<script src="/assets/js/xy-polyfill.js" nomodule></script>
<script src="/assets/js/script.js" type="module"></script>
</body>
</html>Под катом — разбор каждой строчки
Какие CSS-генераторы можно использовать в 2021 году
2 min
Translation
CSS генераторы экономят время и сокращают количество ошибок в коде. Они позволяют автоматизировать многие задачи, которые опытным верстальщикам или фронтендерам уже кажутся скучными. В то же время, они могут облегчить работу над задачами, которые сложны для начинающих специалистов.
Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.
Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.
«Вам здесь больше не рады...» Или что делать, если вы думаете, что работаете здесь, а начальник думает, что уже нет
7 min
Sandbox
Представьте, что однажды Вы приходите на любимую работу, но начальник встречает Вас нервно, напряжен как струна, и, вызвав Вас к себе, объявляет Вам, что Вы уволены. Вам это объявление портит настроение, опускает самолюбие ниже плинтуса, Вы теряетесь, не знаете, как поступить, что говорить, и о чем начинать беспокоиться в первую очередь - чем оплачивать жилье, квартиру, ипотеку или отдавать долг Сашке и т. п. Попутно Вам начальник/кадровик подсовывает в руки пустой лист бумаги и ручку и говорит написать заявление. Туман в голове, дрожащими руками Вы начинаете выводить на белоснежном листе «генеральному директору ООО «Компания» Иванову И. И., заявление» ниже «прошу уволить меня по собственному желан…» СТОП. Какая-то ерунда получается. Может сказать чудаку начальнику, что у меня желания-то увольняться совсем нет, и зачем тогда писать это заявление, если я уже уволен? Если я уволен – отдайте трудовую книжку, зарплату и отпустите восвояси. Непонятно…
Поделившись своими сомнениями с кадровиком, Вы замечаете, что Инспектор по кадрам багровеет и рассказывает, что Ваши коллеги-соратники уже написали заявление и советует Вам сделать то же самое - это в Ваших же интересах – «иначеуволимпостатьеиотправимсволчьимбилетом».
Вам становится еще страшнее от ее уверенности, но у Вас уже просыпается любопытство, подбадриваемое логикой и верой в справедливость - «За что уволите, я ж ничего не нарушал(а)?». Инспектор, не ожидая такого поворота, багровеет еще больше и выбегает из кабинета. Немного погодя, у Вас уже разговор с начальником отдела кадров и Вашим начальником. Они участливо с Вами беседуют, но припоминают Вам Ваши старые грешки: опоздания, болезни без бюллетеня пусть даже с разрешения начальника (этожепрогул!) и убедительно описывают Вашу низкую квалификацию, не выполнение Вами поручений руководителя, невыполнение плана продаж/обзвонов и т. п. и повторно убеждают Вас, что заявление – лучший вариант. Вы послушно отправляетесь писать заявление на увольнение. Вроде все логично и ситуация знакома многим, но есть три момента, о которых обычно забываем(или не знаем) при оценке того, что Вам говорят. С тех пор, как у нас в стране отменили крепостное право многое изменилось и государство больше защищает работников, чем работодателей и при любых спорах действует презумпция невиновности работника. Именно работодатель обязан оправдываться и доказывать, что он все корректно сделал и оформил. Допустил малейшее нарушение - отмена увольнение и оплата всего времени с момента незаконного увольнения.
За что получает деньги наемный работник? Не понимаете? Сейчас поймете
4 min
Sandbox
«За что я плачу тебе деньги?» — обычный вопрос работодателя работнику, причем саркастический, как правило.
«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»
«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»
Выбор CSS макета — Grid или Flexbox?
9 min
Translation
Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.
В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.
Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
10 современных раскладок в одну строку CSS-кода
7 min
Translation
В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.
Пришло время бесплатных сайтов
3 min
Tutorial
Recovery mode
Привет, %username%!
Сегодня многие начинающие веб-разработчики делают большую ошибку, и не одну. Они что-нибудь сверстают, а потом покупают хостинг. Далее покупают домен. Регистрируют и подключают SSL-сертификат. Я, спасаясь от минус-кармы, просто расскажу как не тратить деньги на свои тестовые проекты.
Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS
4 min
Translation
Привет, Хабр! представляю вашему вниманию перевод статьи «How to make your HTML responsive by adding a single line of CSS» автора Per Harald Borgen.
В этой статье я научу вас, как использовать CSS Grid для создания крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана или окна браузера.
Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
В этой статье я научу вас, как использовать CSS Grid для создания крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана или окна браузера.
Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
Продвижение Youtube канала
2 min
Tutorial
Введение
Добрый день, Хабровчане, хочу поделиться своим пока ещё небольшим опытом продвижения YouTube канала.
Началось всё с того, что попался мне на том же YouTube ролик про работу с эпоксидной смолой. Я уже не помню какой точно. И меня это зацепило, я купил эпоксидки и начал сам что-то своё придумывать и заливать. Оказалось что это интересно, и это получается! И я подумал: «А почему бы свой канал на эту тему не открыть?». И открыл: youtube.com/c/EpoxyArt. Манили лавры поляка Jedrekа у которого канал на ту же тематику с миллионами просмотров и почти миллионом подписчиков. И, наверняка, он зарабатывает на своём канале немало денег.
7 Chrome-расширений для изучения английского
2 min
Я увлекаюсь изучением английского языка, а также являюсь активным пользователем Google Chrome. Поэтому решила собрать в одном материале расширения для этого браузера, которые использую или использовала в процессе обучения.
Эти сервисы позволяют улучшить навыки письма, восприятия на слух, произношение и словарный запас.
5 действительно бесплатных нелинейных видеоредакторов для Windows
6 min
Этот пост призван помочь тем, кому, как и мне, внезапно стало тесно с Movie Maker.
Видеоредакторы почти не интересовали меня до прошлого месяца, пока с друзьями мы не задумали снять что-нибудь оригинальное к Новому году. Креативность наша ограничилась тем, чтобы, говоря терминами прежде мне неизвестными, применить эффект “Разделение экрана” (Split Screen). То есть реализовать нечто такое:
Видеоредакторы почти не интересовали меня до прошлого месяца, пока с друзьями мы не задумали снять что-нибудь оригинальное к Новому году. Креативность наша ограничилась тем, чтобы, говоря терминами прежде мне неизвестными, применить эффект “Разделение экрана” (Split Screen). То есть реализовать нечто такое:
Верстаем новостной сайт с помощью Flexbox
5 min
Sandbox
Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.
Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Как создать веб-сайт, используя видео с YouTube в качестве фона?
9 min
Translation
Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.
Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.
Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.
Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.
В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!
Скачать исходники
Демо
Ainol выпускает планшетный компьютер Novo 9 Firewire с четырехъядерным процессором и дисплеем Retina за $230
1 min
На сайте компании Ainol появилось описание нового устройства — Novo 9 Firewire. Новинка поражает не только своими характеристиками, но и ценой в $230.
Layout страницы за 5 секунд
1 min
www.layzilla.com
Проект родился просто из личных нужд. Если это удобно нам, надеюсь будет полезно кому-то еще. Все просто и без наворотов. Но не смотря на это, следуем стандартам и качеству кода.
Можно создавать основу страницы проекта любой сложности.
В будущем сделаем поддержку HTML5.
Мануал для любителей почитать.
Проект родился просто из личных нужд. Если это удобно нам, надеюсь будет полезно кому-то еще. Все просто и без наворотов. Но не смотря на это, следуем стандартам и качеству кода.
Можно создавать основу страницы проекта любой сложности.
В будущем сделаем поддержку HTML5.
Мануал для любителей почитать.
Поисковики в России. Тенденции
1 min
Статистику собирал здесь.
Rambler сдулся в два раза за последний год.
Очень рад за Яндекс, они молодцы!