🦥Ленивый программист ©

🖥 Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

В статье собрал злые HTML и CSS-приёмы — всё, чтобы сделать интерфейс максимально неудобным. Не то чтобы я рекомендую, но знать такое полезно… на всякий случай.

🔗 Ссылка

CodeBase | Frontend | #article

🤩Нашли для вас топовые каналы, которые реально научат вас программировать!

Free Znanija — огромная база курсов по ИТ, которые можно скачать совершенно бесплатно;

IT библиотека — самая огромная библиотека книг по IT во всём телеграмме

Hacking & InfoSec Base — канал действующего белого хакера. Подробные уроки по безопасности, эксплуатации уязвимостей, социальной инженерии.

🫵Подпишись, чтобы не потерять самые полезные материалы!

🖥 Неизвестно полезный CSS. Часть 8

Собрал CSS-хаки, про которые мало кто знает, но они реально выручают. Всё современно, без учёта IE11. Будет и про гриды, и про transform, и даже пара древностей

🔗 Ссылка

CodeBase | Frontend | #article

🐧 Linux Club ©

🦥Ленивый программист ©

🦥Ленивый программист ©

🦥Ленивый программист ©

👩‍💻 Псевдокласс :focus

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки:

⏺ Смену стилей между состояниями можно анимировать при помощи transition

⏺ В браузер встроены дефолтные стили для фокуса.

⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

CodeBase | Frontend | #css

🦥Ленивый программист ©