Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

• Фоны и рамки;
• Фигуры;
• Визуальные эффекты.

Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

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

Хочу заметить, что это не улучшение какого-то из существующих методов, а совершенно новый (по крайней мере, я нигде не смог найти — наверное, плохо искал ;) метод. В статье 38 статей о создании закругленных углов на сайтах данный метод также не был упомянут.

Итак, что же мы имеем: чистый CSS, без единой картинки, без JavaScript (хотя и с ним, для демонстрации, тоже сделаем), с анти-аллиасингом (то есть плавные переходы), прозрачные углы (то есть в фоне может быть что угодно), тянущийся по высоте и ширине и, конечно же, кроссбраузерный метод.

Привет, Хабр.

Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.

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

Давайте посмотрим, что я вам подготовил.

Раньше веб был более странным местом

В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь.

И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о старых добрых статических личных страничках.

Сайты наподобие Geocities, Angelfire, Tripod и Expage предлагали для всех услуги бесплатного статического хостинга, поэтому произошёл бум количества личных веб-сайтов. У некоторых хостов даже были конструкторы веб-сайтов в стиле drag-and-drop, так что вам даже не нужно было изучать HTML.

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

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index, равный 1, у остальных двух z-index не задан.

Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты

Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

Здравствуйте.

BEM'а не должно существовать. Есть огромное количество причин не использовать эту методологию, но из-за её простоты использования и непонимания работы CSS и HTML, методология широко распространилась среди фронтендеров всего мира, в большинстве случаев среди разработчиков СНГ. Используется BEM сейчас как на больших русскоязычных проектах (Yandex, Habr), так и в некоторых фреймворках (react-md). В этой статье пойдёт подробный разбор плюсов и минусов этого подхода к разработке. Все примеры вёрстки будут взяты с официального сайта BEM.

Вы по-тихоньку верстаете очередной дизайн и в этот раз вы решили попробовать CSS3 и HTML5, ведь нынче эти новые спецификации вполне поддерживаются большинством современных браузеров. Вы настрочили уже приличное количество кода, время от времени подумывая о том, как же упрощают вашу работу новые технологии и вдруг вам в голову взбрело ненадолго остановиться и проверить работу странички в других браузерах. Вы уже начинаете нервничать, ведь козе понятно — подобную проверку надо было проводить на гораздо более ранних стадиях. Вы запускаете все браузеры, какие у вас есть, и шепчите своему компьютеру «Пожалуйста, работай». Браузер А, все работает. Вы улыбаетесь, чувствуете облегчение. Браузер B и все тоже отлично. Вы расплываетесь в улыбке и у вас поднимается настроение. Браузер C… «FUUUUUUUUUUUUU~!»

Два дня назад я представил на Хабре задачу по компоновке силами CSS. Задача привлекла небольшое внимание разработчиков и было представлено несколько разных решений, в том числе такие, которые практически точно решают задачу.

Пообещав представить оригинальное решение я немного слукавил, потому что это решение представляет собой использование нового стандарта W3C CSS Grid Alignment Level 3, который был представлен в начале ноября на мероприятии TPAC 2010.

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

Я делаю шаблоны на чистом HTML/CSS уже больше восьми лет. За это время я убедился, что различные соглашения и документирование помогают в работе. Конечно, они не спасают от периодических CSS-кошмаров. Они лишь делают их менее болезненными. Мое решение — следовать определенным принципам в написании стилей. Эти принципы образуют основание, на котором будет строиться все дальнейшее написание стилей, облегчая работу над растущим проектом.

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Вступление

Много лет я работал с AngularJS и по сей день использую его в продакшене. Несмотря на то, что идеальным, в силу своей исторически сложившейся архитектуры, его назвать нельзя — никто не станет спорить с тем, что он стал просто вехой в процессе эволюции не только JS фреймворков, но и веба в целом.

На дворе 2017ый год и для каждого нового продукта/проекта встает вопрос выбора фреймворка для разработки. Долгое время я был уверен, что новый Angular 2/4 (далее просто Angular) станет главным трендом enterprise разработки еще на несколько лет вперед и даже не сомневался что буду работать только с ним.

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

Дисклеймер: данная статья строго субъективна, но таков мой личный взгляд на происходящее и касается разработки enterprise-level приложений.

Приветствую!

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

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

До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Вступление

Привет, Хабр!
Это мой первый хабратопик. Надеюсь, его прочитает хотя бы полтора верстальщика. Если после этого хотя бы один сайт станет лучше, я буду очень рад.

Ничто не предвещало беды

Как и любой слегка красноглазый линуксойд, я люблю экспериментировать. До сборки релиз-кандидатов ядра и ковыряния в экзотических оконных менеджерах дело не дошло, но в поисках приключений я все же пересел на тестовую ветку моего дистрибутива, что привело к переезду на четвертую версию КДЕ.
Несколько месяцев до переезда я присматривался к новым кедам в виртуальной машине, игрался с плазмой и новым оформлением. В один прекрасный день решил я попробовать темную цветовую схему «Wonton Soup», да так на ней и остался, хотя всю жизнь использовал светлые схемы.

Суровая реальность

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

1. браузер использует системные стили и цвета для input'ов на страницах. Абсолютное большинство современных браузеров именно так и поступает для лучшей интеграции в окружение
2. верстальщик прописывает в CSS свой цвет текста для полей ввода, кнопок или списков, но оставляет дефолтный фон. Либо наоборот, меняет только цвет фона

В абсолютном большинстве OS и DE по умолчанию элементы интерфейса имеют светлый фон, текст же рисуется черным цветом. В этом случае ничего страшного не происходит, мы просто увидим, к примеру, input'ы с темно-серым текстом на светлом фоне, как и задумывалось в дизайне страницы.
Но в темных схемах может случится конфуз, и мы увидим темно-серый текст на темном же фоне. Т.е, ничего не увидим.

Доска позора

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

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях. Приступим!