Pull to refresh
0
0
Анастасия Симонова @daer

Пользователь

Send message

Ещё один способ устранить ВОШ

Reading time3 min
Views26K

Задача


ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства font-family этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.
Эффект известен также как FOUT — так его назвал Пол Айриш.

При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.

На эту тему здесь была такая статья. В ней последствия ВОШ рекомендовалось нивелировать грамотной игрой со шрифтами. К сожалению, иногда подключаются такие шрифты, которые слишком отличаются по характеристикам от стандартных.
Подробности
Total votes 56: ↑51 and ↓5+46
Comments16

jTap — событие клика для сенсорных устройств

Reading time2 min
Views30K
jTap - tap event for jQuery

Привет, %username%!

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

На мой взгляд, самым значительным изобретением в мире веб-разработок, за последние несколько лет, стали CSS media queries — они позволяют организовывать внешний вид веб-приложения так, что он в корне может отличатся на разных разрешениях экрана. Любой форм-фактор девайса может иметь собственное представление дизайна и это прекрасно. Мы все это знаем, но речь пойдет не об этом, а о обработке событий…
Подробнее о jTap
Total votes 23: ↑20 and ↓3+17
Comments30

Адаптивные email'ы

Reading time4 min
Views42K
image


Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого HTML-email'а на телефоне? Приходится много масштабировать и скроллить, в целом читать становится очень неудобно. Поэтому и письма электронной почты следует делать адаптивными.
Читать дальше →
Total votes 63: ↑54 and ↓9+45
Comments18

Абсолютное горизонтальное и вертикальное центрирование

Reading time5 min
Views312K
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.
Читать дальше →
Total votes 112: ↑106 and ↓6+100
Comments10

CSS-маски для hover-эффекта

Reading time4 min
Views71K


На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.
Читать дальше →
Total votes 58: ↑54 and ↓4+50
Comments11

Оптимизация сайта для планшетов

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

Ускорение набора текста с помощью добавления спецсимволов


Можно менять дополнительные символы виртуальной клавиатуры на необходимые в каждом конкретном случае. Например при наборе обычного текста видим знаки препинания:

Читать дальше →
Total votes 105: ↑97 and ↓8+89
Comments24

Подборка полезного для любителей Twitter Bootstrap

Reading time1 min
Views83K
В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты




Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.
Читать дальше →
Total votes 109: ↑96 and ↓13+83
Comments21

Новое для веб-дизайнера за июнь 2013

Reading time1 min
Views51K
Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты




Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
Читать дальше →
Total votes 86: ↑78 and ↓8+70
Comments9

Effeckt.css от команды HTML5 Boilerplate: избранные эффекты и переходы на CSS

Reading time1 min
Views18K
Effeckt.css — это постоянно пополняемая подборка эффектов для оформления веб-приложений. Один из главных плюсов этой библиотеки эффектов — достаточно жёсткие критерии включения. Это не куча-мала, в которую сваливают всё подряд, каждый эффект должен соответствовать ряду критериев: эффекты должны быть практичными, их назначение — не демонстрировать возможности технологий, а облегчать и украшать жизнь пользователя, они должны работать быстро и плавно, они должны быть полностью совместимыми с мобильными технологиям.


Читать дальше →
Total votes 37: ↑31 and ↓6+25
Comments6

Пишем плагин для jQuery

Reading time8 min
Views247K
Эта статья призвана дать представление об основных правилах, подходах, дающих наилучшие результаты, и распространённых ошибках, на которые стоит обратить внимание при разработке плагинов для jQuery.
Читать дальше →
Total votes 171: ↑138 and ↓33+105
Comments67

Вышла публичная бета Sublime Text 3

Reading time1 min
Views61K
image

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

Скачать + Полный список изменений

Если вы переходите на новую версию с Sublime Text 2, то основные изменения в Sublime Text 3 следующие:
  • Скорость. Время старта программы, загрузки файлов и работы функции «Replace All» значительно сократилось. Если у вас OS X и Retina, то вы заметите значительный рост производительности.
  • Индексация символов, для команд Goto Definition и Goto Symbol in Project. Также работает для функций Jump Forward и Jump Back.
  • Улучшенное редактирование HTML, включая автокомплит тэгов и атрибутов, а еще и автоматическое закрытие тэгов.
  • Улучшенная работа с проектами. Теперь можно создавать несколько рабочих областей (workspace) для одного проекта.
  • Богатый API. Плагины лучше изолированы от основного приложения, и в то же время имеют более полный API.
Читать дальше →
Total votes 87: ↑78 and ↓9+69
Comments86

История GoPro + обзор Hero 3 Black Edition

Reading time1 min
Views42K


Привет, Хабравчане. В этой статье, и если быть точнее, видеообзоре я расскажу краткую историю компании Woodman Labs, которая еще в 2004-м году представила миру первую пленочную камеру GoPro…
Читать дальше →
Total votes 51: ↑45 and ↓6+39
Comments31

5 правил верстки email-писем от Печкина

Reading time2 min
Views74K

Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:
  • веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
  • десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
  • мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)


К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?
Посмотреть 5 правил верстки email
Total votes 56: ↑46 and ↓10+36
Comments24

В поисках идеального css-фреймворка. Требования, реализация, maxmertkit

Reading time14 min
Views70K


Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.
Требования и реализация
Total votes 208: ↑199 and ↓9+190
Comments135

Как построить разработку дизайна очень большого и долгого проекта

Reading time7 min
Views80K
Когда проект большой, дизайнеров над ним работает много, одновременно и очень далеко друг от друга — постоянно возникают проблемы.



Представим ситуацию. Есть не очень опытный проект-менеджер. На нем висит большой проект и три дизайнера, которые готовые над этим проектом поработать. Позвольте их представить — Вася, Лена и Петя (слева направо на картинке). Немного повысим уровень сложности нашим ребятам. Пусть все они находятся в разных городах, то есть за соседними столами не сидят, на пятничные попойки обеды вместе не ходят и иначе как через мессенджеры и почту связаться не могут. Проект большой и запланирован не на один месяц. Заказчик любит часто изменять свои решения или придумывать новые фичи.

Посмотрим как они выкрутятся?
Читать дальше →
Total votes 123: ↑117 and ↓6+111
Comments66

Почему перемещать элементы с помощью translate лучше, чем с position:absolute top/left

Reading time2 min
Views36K
Для перемещения элемента по экрану есть два основных способа:

  • CSS 2D-преобразования и translate();
  • position:absolute и изменение top/left.

Крис Койер недавно писал, почему лучше и логичнее использовать translate (это быстрее, и свойство position имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, в отличие от translate).

Я хочу расширить его ответ и привести несколько хороших примеров. Я записал скринкаст, в котором помощью Chrome DevTools timline рассматриваю различия между этими подходами с точки зрения производительности, особенностей рендеринга и композитинга на GPU.



Если вам нужна сокращённая текстовая версия — продолжайте читать.
Читать дальше →
Total votes 52: ↑47 and ↓5+42
Comments24

Простая техника Parallax Scrolling

Reading time2 min
Views126K
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка


Создаем два блока с атрибутами "data-type" и "data-speed":
<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

Читать дальше →
Total votes 44: ↑34 and ↓10+24
Comments39

Адаптивные колонки

Reading time2 min
Views32K
При создании колонок обычно приходится применять специальные CSS-классы к первому и последнему элементу. В этой статье рассказано о небольшом трюке, который упрощает верстку колонок, а также делает их адаптивными.

Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).

Недостатки использования классов для первого и последнего элементов


Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:

Читать дальше →
Total votes 56: ↑51 and ↓5+46
Comments35

Новое для веб-дизайнера за ноябрь 2012

Reading time1 min
Views57K
Продолжаю подборку новых полезных штук для веб-дизайнера за прошедший месяц. Прошлые выпуски: октябрь, сентябрь.

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


Photo Raster — новый мощный графический редактор онлайн.

Читать дальше →
Total votes 92: ↑86 and ↓6+80
Comments27

Анимация листа со спрайтами посредством steps()

Reading time1 min
Views28K
[иллюстрация принципа]

Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:

у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).

Вот небольшое демо.

Читать дальше →
Total votes 57: ↑54 and ↓3+51
Comments25

Information

Rating
Does not participate
Location
Зеленоград, Москва и Московская обл., Россия
Date of birth
Registered
Activity