Pull to refresh
-1
0
MASe @MASe

User

Send message

Новинки CSS и UI: I/O 2023

Level of difficultyMedium
Reading time13 min
Views13K


Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс).


Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в ближайшем будущем:


  • запросы контейнера (container queries);
  • запросы стиля (style queries);
  • селектор :has();
  • микросинтаксис nth-of;
  • text-wrap: balance;
  • initial-letter;
  • динамические единицы измерения области просмотра (viewport);
  • цветовые пространства с широкой гаммой;
  • color-mix();
  • вложенность селекторов (nesting);
  • каскадные слои (cascade layers);
  • стили с ограниченной областью видимости (scoped styles);
  • тригонометрические функции;
  • индивидуальные свойства трансформации;
  • popover;
  • позиционирование якоря (anchor positioning);
  • selectmenu;
  • дискретные свойства переходов;
  • анимации, управляемые прокруткой (scroll-driven animations);
  • переходы отображения (view transitions).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

Читать дальше →
Total votes 10: ↑10 and ↓0+10
Comments3

Условные выражения в CSS

Level of difficultyMedium
Reading time10 min
Views23K

Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else).

Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.

В этой статье я расскажу о некоторых возможностях CSS, которые мы используем каждый день, и покажу, насколько они условны. Кроме того, я приведу несколько примеров, в которых CSS гораздо мощнее, чем инструменты дизайна.
Читать дальше →
Total votes 68: ↑66 and ↓2+64
Comments4

Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Reading time8 min
Views58K

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Читать далее
Total votes 14: ↑13 and ↓1+12
Comments3

CSS: системные цвета, шрифты и кое-что ещё

Reading time4 min
Views9K
Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов:

color: OldLace;
background: rebeccapurple;

Полагаю, их обычно называют «именованными цветами».



Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:

Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.
Total votes 26: ↑26 and ↓0+26
Comments4

Трюки CSS, которые сделают из вас ниндзя верстки

Reading time5 min
Views49K

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


Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").


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


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


Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.


grid + place-items


Здесь вы найдете полное визуальное руководство по Grid и Flexbox.


Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

Total votes 37: ↑35 and ↓2+33
Comments7

Псс, дизайнер, хочешь ещё один конструктор для создания сайтов?

Reading time4 min
Views10K

Всем привет! На самом деле я сторонюсь сравнений с конструкторами сайтов и ниже расскажу, почему это так. Наш проект — это скорее редактор, позволяющий динамически верстать макеты без кода и генерирующий на выходе оптимизированный продакшн-реди код. В остальном мы ближе к графическим редакторам. Этакий No-Code Pixel Perfect инструмент, где всё нужное под рукой, и где реализовано всё то, чего не хватало в Фигме.



Читать дальше →
Total votes 34: ↑28 and ↓6+22
Comments42

Базовая структура HTML-документа с объяснением каждой строчки

Reading time9 min
Views99K
<!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>


Под катом — разбор каждой строчки
Читать дальше →
Total votes 50: ↑42 and ↓8+34
Comments9

Какие CSS-генераторы можно использовать в 2021 году

Reading time2 min
Views36K
image

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

Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.

Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.
Читать дальше →
Total votes 39: ↑39 and ↓0+39
Comments9

«Вам здесь больше не рады...» Или что делать, если вы думаете, что работаете здесь, а начальник думает, что уже нет

Reading time7 min
Views73K

Представьте, что однажды Вы приходите на любимую работу, но начальник встречает Вас нервно, напряжен как струна, и, вызвав Вас к себе, объявляет Вам, что Вы уволены. Вам это объявление портит настроение, опускает самолюбие ниже плинтуса, Вы теряетесь, не знаете, как поступить, что говорить, и о чем начинать беспокоиться в первую очередь - чем оплачивать жилье, квартиру, ипотеку или отдавать долг Сашке и т. п. Попутно Вам начальник/кадровик подсовывает в руки пустой лист бумаги и ручку и говорит написать заявление. Туман в голове, дрожащими руками Вы начинаете выводить на белоснежном листе «генеральному директору ООО «Компания» Иванову И. И., заявление» ниже «прошу уволить меня по собственному желан…» СТОП. Какая-то ерунда получается. Может сказать чудаку начальнику, что у меня желания-то увольняться совсем нет, и зачем тогда писать это заявление, если я уже уволен? Если я уволен – отдайте трудовую книжку, зарплату и отпустите восвояси. Непонятно…

Поделившись своими сомнениями с кадровиком, Вы замечаете, что Инспектор по кадрам багровеет и рассказывает, что Ваши коллеги-соратники уже написали заявление и советует Вам сделать то же самое - это в Ваших же интересах – «иначеуволимпостатьеиотправимсволчьимбилетом».

Вам становится еще страшнее от ее уверенности, но у Вас уже просыпается любопытство, подбадриваемое логикой и верой в справедливость - «За что уволите, я ж ничего не нарушал(а)?». Инспектор, не ожидая такого поворота, багровеет еще больше и выбегает из кабинета. Немного погодя, у Вас уже разговор с начальником отдела кадров и Вашим начальником. Они участливо с Вами беседуют, но припоминают Вам Ваши старые грешки: опоздания, болезни без бюллетеня пусть даже с разрешения начальника (этожепрогул!) и убедительно описывают Вашу низкую квалификацию, не выполнение Вами поручений руководителя, невыполнение плана продаж/обзвонов и т. п. и повторно убеждают Вас, что заявление – лучший вариант. Вы послушно отправляетесь писать заявление на увольнение. Вроде все логично и ситуация знакома многим, но есть три момента, о которых обычно забываем(или не знаем) при оценке того, что Вам говорят. С тех пор, как у нас в стране отменили крепостное право многое изменилось и государство больше защищает работников, чем работодателей и при любых спорах действует презумпция невиновности работника. Именно работодатель обязан оправдываться и доказывать, что он все корректно сделал и оформил. Допустил малейшее нарушение - отмена увольнение и оплата всего времени с момента незаконного увольнения.

Читать далее
Total votes 167: ↑161 and ↓6+155
Comments148

За что получает деньги наемный работник? Не понимаете? Сейчас поймете

Reading time4 min
Views151K
«За что я плачу тебе деньги?» — обычный вопрос работодателя работнику, причем саркастический, как правило.

«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»

Читать дальше →
Total votes 234: ↑230 and ↓4+226
Comments888

Выбор CSS макета — Grid или Flexbox?

Reading time9 min
Views77K


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

В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.

Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
Читать дальше →
Total votes 35: ↑35 and ↓0+35
Comments8

10 современных раскладок в одну строку CSS-кода

Reading time7 min
Views32K

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

Читать далее
Total votes 41: ↑40 and ↓1+39
Comments12

Пришло время бесплатных сайтов

Reading time3 min
Views168K

Привет, %username%!




Сегодня многие начинающие веб-разработчики делают большую ошибку, и не одну. Они что-нибудь сверстают, а потом покупают хостинг. Далее покупают домен. Регистрируют и подключают SSL-сертификат. Я, спасаясь от минус-кармы, просто расскажу как не тратить деньги на свои тестовые проекты.
Читать дальше →
Total votes 67: ↑42 and ↓25+17
Comments97

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Reading time4 min
Views64K
Привет, Хабр! представляю вашему вниманию перевод статьи «How to make your HTML responsive by adding a single line of CSS» автора Per Harald Borgen.



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

Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
Читать дальше →
Total votes 79: ↑69 and ↓10+59
Comments38

7 Chrome-расширений для изучения английского

Reading time2 min
Views63K


Я увлекаюсь изучением английского языка, а также являюсь активным пользователем Google Chrome. Поэтому решила собрать в одном материале расширения для этого браузера, которые использую или использовала в процессе обучения.

Эти сервисы позволяют улучшить навыки письма, восприятия на слух, произношение и словарный запас.
Читать дальше →
Total votes 39: ↑36 and ↓3+33
Comments47

5 действительно бесплатных нелинейных видеоредакторов для Windows

Reading time6 min
Views433K
Этот пост призван помочь тем, кому, как и мне, внезапно стало тесно с Movie Maker.

Видеоредакторы почти не интересовали меня до прошлого месяца, пока с друзьями мы не задумали снять что-нибудь оригинальное к Новому году. Креативность наша ограничилась тем, чтобы, говоря терминами прежде мне неизвестными, применить эффект “Разделение экрана” (Split Screen). То есть реализовать нечто такое:


Читать дальше →
Total votes 64: ↑63 and ↓1+62
Comments92

Верстаем новостной сайт с помощью Flexbox

Reading time5 min
Views55K
image

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Читать дальше →
Total votes 36: ↑31 and ↓5+26
Comments19

Как создать веб-сайт, используя видео с YouTube в качестве фона?

Reading time9 min
Views86K


Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.

Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.

Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.

Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

Скачать исходники
Демо
Читать дальше →
Total votes 75: ↑45 and ↓30+15
Comments55

Ainol выпускает планшетный компьютер Novo 9 Firewire с четырехъядерным процессором и дисплеем Retina за $230

Reading time1 min
Views129K
На сайте компании Ainol появилось описание нового устройства — Novo 9 Firewire. Новинка поражает не только своими характеристиками, но и ценой в $230.
image
Читать дальше →
Total votes 48: ↑37 and ↓11+26
Comments143

Layout страницы за 5 секунд

Reading time1 min
Views1.7K
www.layzilla.com

Проект родился просто из личных нужд. Если это удобно нам, надеюсь будет полезно кому-то еще. Все просто и без наворотов. Но не смотря на это, следуем стандартам и качеству кода.

Можно создавать основу страницы проекта любой сложности.

В будущем сделаем поддержку HTML5.

Мануал для любителей почитать.
Total votes 105: ↑98 and ↓7+91
Comments40

Information

Rating
Does not participate
Registered
Activity