Логово верстальщика – Telegram
Логово верстальщика
7.99K subscribers
996 photos
48 videos
4 files
1.73K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Error 404 на CSS

<code class="language-css"><code class="language-css">.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.page_404 img{ width:100%;}

.four_zero_four_bg{

background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}


.four_zero_four_bg h1{
font-size:80px;
}

.four_zero_four_bg h3{
font-size:80px;
}

.link_404{
color: #fff!important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;}
.contant_box_404{ margin-top:-50px;}
🔥23👎12👍41
​​🚀Оптимизируем шрифты и ускоряем сайт на 5-12%

В этой статье вы узнаете, как сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%.

Читать...
👍3🔥21👎1
​​🔥Наводим порядок в конфигах Webpack

В этой статье я расскажу о том, как управлять сложными конфигурациями Webpack.

Читать...
🔥3
​​⚡️Что такое генераторы статических сайтов и почему Astro — лучший фреймворк для разработки лендингов

В этой статье я расскажу о том, что это такое, зачем может понадобиться SSG-фреймворк и почему Astro — лучший выбор для генерации статических сайтов прямо сейчас.

Читать...
👎1
​​🎛Реализация простой HTML5-панели управления серверами с поддержкой IPMI

В этой статье я расскажу как управлять серверами без ОС, как это работает у нас.

Читать...
🔥3👍1
​​👥Улучшаем взаимодействие пользователя с интерфейсами

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

Читать...
👍2
​​Кто они, ваши личные всадники выгорания? Тут автор делится своими и советует, как с ними бороться.

У нас тут классическое непонимание, что нужно делать, гиперответственность, отсутствие видимого результата и еще кое-что 

Читать...
👍5🔥1
​​😍Дизайн: ожидание vs реальность

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

Читать...
👍1🔥1
​​👥Пользовательские статусы для мессенджера: наш опыт UX-разработки

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

Читать...
​​😎F и Z паттерны в дизайне. Куда смотрит зритель?

В этой статье мы рассмотрим, что такое Z и F паттерны в дизайне, как они работают, и как они влияют на восприятие вашего сайта.

Читать...
🔥1
CSS - min(), max() - функции

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

Например мы имеем div и у него свойство width, max-width, min-width:

Как мы писали раньше:

// Вариант 1 
div {max-width: 780px; width: 80%};

// Вариант 2
div {width: 50%; min-width: 400px};

Как это можно написать сейчас:

// Вариант 1
div {max-width: min(80%, 780px)};

// Вариант 2
div {width: max(50%, 400px)};

Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.

Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
🔥11👍21
​​👍HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 4

В этой статье мы рассмотрим как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера, и чем полезно свойство outline-offset.

Читать...
👍1🔥1
​​🦾Pixel Combats Api

В этой статье я расскажу о основах Api, под игру Pixel Combats 2.

Читать...
👎2
​​😍Зернистые градиенты на CSS и SVG

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

Читать...
🔥2
​​🔒Блокировка рекламы в браузере (User CSS)

В этой статье поделюсь опытом, как я блокирую рекламу в браузере Chrome, пользуясь базовыми знаниями HTML/CSS.

Читать...
👍3
​​⚡️Browsing Context, WindowProxy, Window

В этой статье мы разберёмся в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.

Читать...
1👍1
​​👥Трудности перевода: как научиться понимать то, что нарисовал дизайнер

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

Читать...
​​🖌Разбираемся с цветами, палитрами, фильтрами CSS и не только

В этой статье мы расскажем о том, как работать с цветом в CSS и вебе в целом.

Читать...
👍1
​​🚀Оптимизация веб-приложений: на что стоит обратить внимание

В этой статье я поделюсь своим опытом, как и зачем оптимизировать веб-приложения.

Читать...
🔥3
​​😶🌫Основы проектирования архитектуры простой социальной сети

В этой статье автор я рассмотрю основы архитектуры, которые полезны для понимания в процессе разработки социальных сетей.

Читать...
🔥1
​​🎃Базовые архитектурные решения для обеспечения масштабируемости и производительности в социальных сетях

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

Читать...
🔥2👍1