Метка «html-верстка» - 2

css3logo
Доброе время суток. Я хочу рассказать вам о тенденции появления функций в css 3 и о том, как это можно и даже порой нужно использовать в проектах.

Чтобы не тратить ваше время я распишу свойства, о которых я хотел бы вам рассказать:

  • функция counter
  • функция calc
  • функция attr
  • функция toggle
  • единица измерения — rem
  • единица измерения — vw
  • единица измерения — vh

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

В этом посте я хотел бы обозначить основные «приятности» SynWrite — свободного текстового редактора для программистов (и верстальщиков) под Windows. Будут показаны далеко не все фичи, а только часть.

Редактор появился относительно недавно, так что многие про него не знают.
Читать полностью »

Часто дизайнер для верстальщика — это некий «кастомизатор» всего привычного и понятного, того, что можно было бы взять и просто использовать, не изобретая велосипедов в работе над каждым макетом. Из-за чего часто приходится тратить дополнительно время на объяснения, казалось бы очевидных вещей.

Элементы управления
— дружище, в моей ОС это стандартные контролы!

Типографика
— заголовок этой страницы: H1;

Сетка
— не видишь её? Не торопись верстать, включи направляющие и обрати внимание, что сетка это не только горизонтальные направляющие, есть ещё и базовая линия шрифта.

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

За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).Читать полностью »

Перед вами — русскоязычный журнал посвященный фронтенду и публикующий новые материалы два раза в неделю. Интересно?
Читать полностью »

Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

Webfonts — разбираемся с антиалиасингом под Windows
Читать полностью »

Всем доброго времени суток.
Хочу поделиться одной наработкой с использованием SCSS. Нужно было мне (кстати не однократно, но как то руки не доходили сделать как надо) сделать универсальную генерацию градиента. Универсальную, это возможность задавать несколько градиентов подряд, и должны были поддерживаться префиксы для браузеров (делать так делать).
Поиск подобного рода решения по хабру и гуглу результата не дал, поэтому пришлось справляться своими силами. Далее подробнее по делу.
Читать полностью »

С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Ссылка на демо есть в конце статьи.

CSS слайдер

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

image
Привет, читатель!
Уже давно серьёзно занимаюсь вёрсткой макетов и с недавнего времени стал использовать CSS3 и HTML 5, то есть стал пренебрегать олдскульными старыми браузерами.
Сегодня вечером решил перейти на новый уровень, попробовал использовать CSS3 для выпадающего меню, и это оказалось очень просто.

Прошу сильно не пинать и прочее, моё первое меню без JS.

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

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

Каскадные Таблицы Стилей / Новый метод замены текста картинкой, или избавляемся от  9999px

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая <a rel="nofollow"Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js