https://ymatuhin.ru/tag/css/ Публикации с тегом css ru https://ymatuhin.ru/posts/contenteditable-placeholder/ https://ymatuhin.ru/posts/contenteditable-placeholder/ Fri, 24 Nov 2017 00:00:00 +0000 Я уже сильно привык к атрибуту placeholder, и немного грустил зная что не работает с placeholder. Но чутка погуглив я нашел интересное решение, которым хочу поделиться с вами. https://ymatuhin.ru/posts/text-decoration-skip/ https://ymatuhin.ru/posts/text-decoration-skip/ Sat, 15 Jul 2017 00:00:00 +0000 Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза. https://ymatuhin.ru/posts/detect-page-lang-in-css/ https://ymatuhin.ru/posts/detect-page-lang-in-css/ Thu, 08 Dec 2016 00:00:00 +0000 Для многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу body или определял язык через [lang=en]. Сегодня наткнулся на способ получше — псевдокласс:lang. https://ymatuhin.ru/posts/styling-broken-images-user-care-or-not/ https://ymatuhin.ru/posts/styling-broken-images-user-care-or-not/ Tue, 22 Mar 2016 00:00:00 +0000 Разбор подходов к оформлению незагруженных изображений и их реальной пользы для интерфейса. Сравниваю аргументы «за» и «против» и показываю, на чем действительно стоит сфокусироваться. https://ymatuhin.ru/posts/scalable-pixel-art/ https://ymatuhin.ru/posts/scalable-pixel-art/ Thu, 21 Jan 2016 00:00:00 +0000 Только взгляните на этот предмет искусства выше. Восьмибитная ностальгия, красота и простота. https://ymatuhin.ru/posts/emoji-fallback/ https://ymatuhin.ru/posts/emoji-fallback/ Wed, 20 Jan 2016 00:00:00 +0000 Показываю, как проверять поддержку emoji и подключать fallback для разных платформ. Так смайлы отображаются предсказуемо и не ломают дизайн на старых системах. https://ymatuhin.ru/posts/font-display/ https://ymatuhin.ru/posts/font-display/ Sun, 20 Dec 2015 00:00:00 +0000 Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше. https://ymatuhin.ru/posts/margin-align-right/ https://ymatuhin.ru/posts/margin-align-right/ Thu, 22 Oct 2015 00:00:00 +0000 Разбираю способ выравнивания блочных элементов по правому краю и по центру с помощью CSS. Подход подходит для типовых макетов и избавляет от лишних оберток и хака с float. https://ymatuhin.ru/posts/11grade/ https://ymatuhin.ru/posts/11grade/ Fri, 16 Oct 2015 00:00:00 +0000 Эта статья — логическое продолжение статьи «Одиннадцатиклассница, или тестируем баги вёрстки». В ней говорится о тестировании верстки с использованием длинных слов. https://ymatuhin.ru/posts/convert_photoshop_letter_spacing_to_css/ https://ymatuhin.ru/posts/convert_photoshop_letter_spacing_to_css/ Tue, 22 Sep 2015 00:00:00 +0000 Объясняю, как корректно переносить значение межбуквенного интервала из Photoshop в CSS. Разбираю формулу перевода в letter-spacing, чтобы текст в макете и браузере выглядел одинаково. https://ymatuhin.ru/posts/media_queries_breakpoints/ https://ymatuhin.ru/posts/media_queries_breakpoints/ Thu, 27 Aug 2015 00:00:00 +0000 Twitter Bootstrap — самый популярный CSS фреймворк. У него более 85 495 звезд и 35 055 форков на GitHub. https://ymatuhin.ru/posts/retina_media_queries/ https://ymatuhin.ru/posts/retina_media_queries/ Tue, 18 Aug 2015 00:00:00 +0000 Я видел разные способы определения мониторов retina. Разберемся, какие из media queries использовать. https://ymatuhin.ru/posts/float_and_clearfix/ https://ymatuhin.ru/posts/float_and_clearfix/ Wed, 29 Jul 2015 00:00:00 +0000 Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов. https://ymatuhin.ru/posts/using_san_francisco_font/ https://ymatuhin.ru/posts/using_san_francisco_font/ Tue, 21 Jul 2015 00:00:00 +0000 Вместе с выпуском Apple Watch, компания представила новый шрифт San Francisco, который теперь будет использоваться во всей экосистеме Apple. https://ymatuhin.ru/posts/height_transition_css/ https://ymatuhin.ru/posts/height_transition_css/ Mon, 29 Jun 2015 00:00:00 +0000 Пытались ли вы анимировать высоту (height) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого. https://ymatuhin.ru/posts/font_smoothing_for_the_developer_and_user_on_mac_os/ https://ymatuhin.ru/posts/font_smoothing_for_the_developer_and_user_on_mac_os/ Mon, 01 Jun 2015 00:00:00 +0000 Я давно интересовался сглаживанием шрифта для веб страниц на CSS. Но «волшебные» свойства, такие как -webkit-font-smoothing, не работали на моем Win 7. https://ymatuhin.ru/posts/prepare_graphics_for_retina_displays/ https://ymatuhin.ru/posts/prepare_graphics_for_retina_displays/ Thu, 21 May 2015 00:00:00 +0000 Сейчас, с большой популярностью MacBook-ов, айфонов и других устройств с большим DPI, изображения на сайте нужно оптимизировать, чтобы они не были смазанными. Для этого у нас есть несколько решений. https://ymatuhin.ru/posts/faster_debug_css_with_pesticide/ https://ymatuhin.ru/posts/faster_debug_css_with_pesticide/ Tue, 12 May 2015 00:00:00 +0000 Показываю, как быстро находить проблемы в верстке с помощью Pesticide и похожих инструментов. Инструмент подсвечивает границы элементов и ускоряет отладку слоев, отступов и позиционирования. https://ymatuhin.ru/posts/styling_chrome_dev_tools/ https://ymatuhin.ru/posts/styling_chrome_dev_tools/ Wed, 06 May 2015 00:00:00 +0000 Совсем недавно я узнал, что Chrome поддерживает темы для dev tools. Мне сразу же захотелось попробовать это. https://ymatuhin.ru/posts/rem_vs_em/ https://ymatuhin.ru/posts/rem_vs_em/ Wed, 22 Apr 2015 00:00:00 +0000 Сравниваю единицы REM и EM на практическом примере из реального проекта. Показываю, где каждая единица уместнее и как перейти на REM без боли. https://ymatuhin.ru/posts/better_box_sizing/ https://ymatuhin.ru/posts/better_box_sizing/ Sat, 18 Apr 2015 00:00:00 +0000 Недавно я использовал в проекте css свойство box-sizing: border-box. В процессе этого я узнал про «Международный день box-sizing» (International box-sizing Awareness Day). И хочу рассказать вам что это за праздник, лучшие практики и поддержку свойства box-sizing.