Рубрика «верстка» - 2

в 11:17, , рубрики: Google Docs, word, верстка, редактура, тексты

Я главред. Читаю и редактирую много коммерческих текстов. И заметила за собой интересный паттерн восприятия. Текст, который сдают в «канцелярском» виде — Times New Roman Justified — я автоматически считаю скучным. Поймала себя на этом дважды в течение пары дней и поняла, что с этим нужно что-то делать.

Как минимум, я начала такие тексты «оживлять» (присваивать свои стили в гуглодоках) и перечитывать более внимательно. Любой текст имеет право на презумпцию нескучности)) Но пойдем издалека.

Тихий плач сертифицированного верстальщика книг

Когда-то я верстала книжки, и читала Читать полностью »

в 9:00, , рубрики: accessibility, css, html, ruvds_статьи, верстка

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 9 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

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

  • какие сюрпризы есть при использовании свойства display;
  • о чём нужно помнить при вёрстке кнопки «Показать пароль»;
  • зачем нужны подсказки с помощью атрибута aria-label при разметке областей навигации;
  • как можно переборщить с заголовками и какие проблемы будут.

Давайте начнём!

Читать полностью »

в 9:00, , рубрики: css, ruvds_статьи, верстка, лайфхаки, псевдоклассы, псевдоэлементы, радиокнопки, центрирование, чекбоксы
Магия CSS на практике: советы по вёрстке от гика - 1

Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

  • как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
  • про свойство inset, сокращающее код на целых три строки;
  • мой сниппет для расширения интерактивной области у кнопок и ссылок;
  • стиль написания медиа-запросов, позволяющий сократить количество правил;
  • альтернативный способ центрирования элемента без свойства transform.

Читать полностью »

в 13:00, , рубрики: accessibility, css, html, ruvds_статьи, верстка
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8 - 1

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

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

  • какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
  • в каких ситуациях кнопка «Закрыть» указывает на выход;
  • чем вредно значение contents у свойства display;
  • почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

Читать полностью »

в 13:00, , рубрики: css, ruvds_статьи, web-разработка, верстка, лайфхаки
Неизвестно полезный CSS. Часть 3 - 1

Привет. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

  • возможность задать несколько фонов с помощью свойства background;
  • свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
  • как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции;
  • где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

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

Читать полностью »

в 10:26, , рубрики: chrome, chrome devtools, console, css, DevTools, Google Chrome, html, javascript, верстальщик, верстка, Разработка веб-сайтов, Учебный процесс в IT

Предисловие

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

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

Давайте посмотрим.

1. Повторно отправить запрос XHR

Читать полностью »

в 7:10, , рубрики: css, css grid, css3, scss, верстальщик, верстка, верстка сайтов, графический дизайн, дизайн, дизайнер, интерфейсы, Оболочки, паттерны

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

Работа богата практическими примерами. Она будет полезна специалистам разного профиля.

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

Критерии хорошего дизайна:

  1. Стандартизированные свойства элементов дизайна (цвета, шрифты, размеры, отступы и т.д.)

  1. Читать полностью »

в 15:09, , рубрики: javascript, веб-разработчик, верстка, войти в IT, куда пойти учиться веб-разработчику, курсы программирования, основы программирования, отзыв, Программирование, Учебный процесс в IT, фронтенд, Яндекс.практикум

Хочу поделиться личным опытом (об/м)учения в Яндекс.Практикуме на курсе "Веб-разработчик", и почему, вернувшись на год назад в прошлое, я бы никогда не стал там учиться даже за бесплатно.

Для начала расскажу о причинах, по которым я решил войти в IT (спойлер: и в итоге всё-таки вполз), и почему я выбрал именно Яндекс.Практикум.

Читать полностью »

в 14:36, , рубрики: css, javascript, stylus, vue, атомарный дизайн, библиотеки, веб-дизайн, верстка, интерфейсы, компоненты, ненормальное программирование
Спойлер: атомарный дизайн
Спойлер: атомарный дизайн

Это работа является логическим продолжением моего первого подробного текста для сообщества об актуальных подходах к верстке Как верстать веб-интерфейсы быстро, качественно и интересноЧитать полностью »

в 8:50, , рубрики: latex, верстка, образование, химия

Эту статью я задумал еще на втором курсе, когда впервые решил перейти с Word'а на LaTeX. В конце третьего курса я ее начал, и, наконец, после защиты диплома я нашел в себе силы ее дописать. Здесь я постарался собрать свой опыт (и созданные костыли, куда же без них) в использовании LaTeX при подготовке текста, связанного с химией и в решении тех проблем, с которыми столкнулся я.
Читать полностью »

123...10...18
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js