Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Рубрика «css» - 112
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)
2013-06-22 в 16:32, admin, рубрики: css, css3, DevTools, html, html5, Instagram, jquery, JS, loon, Pocket, Samsung, Yandex, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: css, css3, DevTools, html, html5, Instagram, jquery, loon, Pocket, Samsung, Yandex, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на сми.png "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №62 (15 — 23 июня 2013)")
Текст в линии или как победить дизайнера
2013-06-22 в 10:48, admin, рубрики: css, html, html-верстка, Веб-разработка, метки: css, html-версткаВсем привет
Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:
Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.
Пример: ссылка
Суть решения в следующем:
Читать полностью »
10 профессиональных советов для front-end разработчиков
2013-06-21 в 21:23, admin, рубрики: css, front-end, html, jquery, переводы, метки: css, front-end, html, jqueryПрофессиональный девелопмент — один из ключевых элементов процесса усовершенствования ваших навыков как front-end дизайнера или разработчика. В этой статье я поделюсь с вами нескольким советами, которые мне очень помогали в течение прошедших нескольких лет.
1. Наслаждайтесь своей работой. Если вам не нравится то, чем занимаетесь, будь то создание красивых интерфейсов или проектирование веб-сайтов, попробуйте свои силы еще в каком-либо поле деятельности. Жизнь слишком коротка, чтобы тратить ее на то, к чему не лежит душа.
2. Овладейте языками HTML, CSS и JavaScript от «тыла» к «фронту». Клиентам и компаниям неважно, кто вы — разработчик, дизайнер, архитектор информационных систем или кто-либо еще. Вам в любом случае следует владеть ключевыми технологиями, которые лежат в основе веб от «тыла» к «фронту». Всё построены на этих трёх китах.
Читать полностью »
Верстка: два блока одинаковой высоты
2013-06-17 в 11:01, admin, рубрики: css, html, Веб-разработка, метки: css, htmlЗадача
Заданы два блочных элемента – один с текстом статьи (ширина 75% от ширины документа), другой с перечнем ссылок для навигации по первому элементу (ширина 25%). Высота элемента содержащего статью задается динамически, в зависимости от наполнения блока текстом. Необходимо сделать так, что бы второй блок с навигацией обладал таким же значением параметра высоты как и первый содержащий основной текст статьи.
Читать полностью »
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №61 (9 — 15 июня 2013)
2013-06-15 в 17:28, admin, рубрики: css, Блог компании Zfort Group, веб-дизайн, Веб-разработка, дайджест, НовостиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №61 (9 — 15 июня 2013)")
5 правил верстки email-писем от Печкина
2013-06-11 в 10:43, admin, рубрики: css, email, html, Блог компании Pechkin-mail.ru, верстка рассылок, метки: css, email, email маркетинг, html, верстка рассылок 
Сегодня мы хотели бы рассказать о базовых правилах верстки 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-писем?
Читать полностью »
«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools
2013-06-10 в 14:05, admin, рубрики: animations, chrome, css, DevTools, Google Chrome, Веб-разработка, метки: animations, chrome, css, DevTools 
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.
Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №60 (1 — 8 июня 2013)
2013-06-08 в 18:55, admin, рубрики: AngularJS, css, css3, Google, html, html5, jquery, JS, trends 2013, WebGL, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, Новости, ресурсы, ссылки, ссылки на сми, метки: AngularJS, css, css3, Google, html, html5, jquery, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.jpg "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю №60 (1 — 8 июня 2013)")
Justify Grid — новое слово в разметке
2013-06-04 в 16:47, admin, рубрики: css, html, layout, Веб-разработка, метки: css, html, layout 
Доброго времени суток уважаемые читатели. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.
Проблема
Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.
Читать полностью »
Сравнение эффективности минимизаторов CSS- и JavaScript-кода
2013-06-02 в 20:04, admin, рубрики: Bundle Transformer, Closure Compiler, css, CSSO, javascript, JSMin, Microsoft Ajax Minifier, Packer, UglifyJS, WebGrease Semantic CSS Minifier, YUI Compressor, Веб-разработка, Клиентская оптимизация, минимизация, метки: Bundle Transformer, Closure Compiler, css, CSSO, javascript, JSMin, Microsoft Ajax Minifier, Packer, UglifyJS, WebGrease Semantic CSS Minifier, YUI Compressor, клиентская оптимизация, минимизация 
Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.
В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.
Читать полностью »