Retina Display, или знакомимся с ретиновыми дисплеями.

Экраны с повышенной плотностью пикселей и большими разрешениями продолжают захватывать рынок. Особенно преуспели в этом товарищи из Apple с их retina дисплеями. Однако то, что является наслаждением для глаз, в то же время добавляет головной боли веб-дизайнерам и фронт-енд разработчикам. Здесь я постарался собрать побольше информации о нюансах этих дисплеев с точки зрения веба и […]

Резиновая кнопка со скругленными углами и полупрозрачным фоном на CSS 2.1

Несмотря на рассвет css3 в вебе, многие до сих пор не могут воспользоваться всеми его преимуществами из-за ограничений старых версий Internet Explorer. К сожалению, далеко не каждый заказчик может одобрить подход graceful degradation, это скорее прерогатива собственных проектов. Поэтому все еще актуальны техники, которые безпроблемно работают и в старых браузерах. У опытных верстальщиков скорее всего […]

Adobe & HTML

Несколько дней назад компания Adobe представила свой новый сайт html.adobe.com, посвященный HTML, CSS и другим инструментам веб-разработки. На данный момент сайт заполнен не до конца, кое-где красуется «coming soon», однако уже имеющийся контент представляет немалый интерес.

Треугольники с тенью на CSS

Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью? Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман. Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, […]

Что такое Viewport, как он работает и для чего вообще нужен

Создадим простую страничку с минимальной разметкой: Теперь откроем эту страничку на мобильном устройстве. Открыв, увидим, что наша страница отобразится примерно таким образом: Как видно, текст слишком мелкий для чтения, есть куча пустого пространства, и для того, чтобы прочесть этот текст, нам нужно его увеличивать приближением. Почему же так происходит?

Новый метод замены текста картинкой, или избавляемся от -9999px

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

Facebook Welcome Page и прочие кастомные табы

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире (КО). И если кто не знал — в ней можно не только постить веселые статусы и лайкать фоточки, но и использовать как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и куча других […]

Вопросы для собеседования front end разработчика

Последние несколько лет по работе приходится участвовать в собеседовании кандидатов на должность фронт енд разработчиков. Готовясь к интервью, каждый раз приходится задумываться о том, какие вопросы лучше задавать, а какие будут лишними. С одной стороны очень важна техническая часть, однако при устном собеседовании довольно сложно ее оценить объективно. Как показала практика, часто даже неплохие разработчики […]

Полезные элементы в контейнере <HEAD>
для мобильных сайтов

Этим постом я закончу предыдущий и одновременно начну серию статей на тематику мобильного веба. Думаю, все в курсе, что мобильные девайсы в настоящий момент активно захватывают мир. Еще год назад по данным Stat Counter доля мобильного интернет-трафика в мире составляла 4%, на данный момент это значение уже равняется 8% с копейками, а это двукратный рост, […]

Занимательные элементы в контейнере <HEAD>

Хотелось бы сегодня поговорить об элементах, которые могут быть заключены в контейнер <HEAD>. Многие веб-разработчики часто игнорируют многие из них, считая чем-то второстепенным. А зря, потому что на сегодняшний день в умелых руках они могут превратиться в мощные инструменты, которые могут как повысить скорость работы сайта, так и обеспечить его взаимодействие с различными веб-сервисами и […]