Верстка HTML писем не всегда является тривиальной задачей. Хочу поделиться идей оптимизации HTML письма под mail.ru и не только.
Все статьи ← верстка
-
-
Обтекание картинок
Наверняка все сталкивались с ситуацией, когда необходимо отбить картинку влево/вправо и разместить текст рядом с ней, причем текст должен не обтекать картинку в классическом виде, а выглядеть так, как будто он …
-
Efficient, maintainable, modular CSS
Efficient, maintainable CSSView SlideShare presentation or Upload your own. (tags: modular maintainable) -
CSS Styleguide — улучшение читабельности кода
Перевод статьи Improving Code Readability With CSS Styleguides с рекоммендациями по организации СSS файлов и написанию стильгайдов.
-
CSS шаблон
Наверняка, все кто читает этот блог и не только этот не пользуется разными CSS framework'ами, в общем — я тоже. За некоторое время работы выработался определенный стиль в виде набора правил, файлов и папок, которыми хотелось бы поделиться и узнать мнение уважаемых.
-
Flash Object и z-index
Единственное работающее решение положить Flash объект под слой — обернуть объект контейнером, задать контейнеру абсолютное (относительное) положение с z-index:0. В параметрах объекта добавить параметр <param name="wmode" …
-
CSS Sprites и их использование
Наверняка вам неоднократно встречалось это модное понятие. В этой статье я хотел бы более подробно разобрать, что такое спрайты, для чего они нужны и как их использовать. CSS Спрайт это одна большая картинка, в которую …
-
Кросс-браузерная прозрачность
.transparent-class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } opacity: 0.5; — для основных стандартных браузеров (Firefox, Safari и Opera) filter:alpha(opacity=50); — IE -moz-opacity:0.5; — старые версии Mozilla -khtml-opacity: 0.5; — Safari (1.x)
-
Избавляемся от устаревших тэгов и атрибутов с помощью CSS
В момент сдачи проекта существует возможность потерять контроль над исходным HTML кодом. Некоторые части кода целиком могут заменяться динамически при помощи CMS, иногда заказчики сами редактируют шаблоны, добавляя …
-
Diagnostic Styling
Eric Meyer представил ряд правил CSS, применяя которые можно визуально отслеживать ошибки в разметке при создании сайта. Выглядят они примерно следующим образом: a[href="#"] {background: lime;} a[href=""] {background: fuchsia;} Данные правила …
-
Генератор Спрайтов (CSS Sprite Generator)
Сервис по созданию спрайтов. Пакуем картинки, которые пойдут в фон, настраиваем, что хотим получить на выходе и жмем "создать". Удобно, просто и быстро. Понравилось... Что такое спрайты и для чего они нужны, прочитать …
-
HTML элементы
Сравнение элементов в зависимости от HTML версий, начиная с HTML 3.2 до XHTML 2.0 Таблица сравнений от Jens Meiert и более расширенная от Rene Sarsoo. Вторая, на мой взгляд более удобная.
-
PNG прозрачность в IE6
Долго искал простейшее и универсальное решение использовать png прозрачность в Interner Explorer 6. Причем интересовало и для обычных изображений, и для фона. Порядок следующий: Скачиваем iepngfix.htc, рисуем прозрачный …
-
Clear float-блока без html разметки для IE 7
Способ «очистки» (clear: left|right|both) вложенного float-блока, без использования дополнительной разметки, приведен на сайте positioniseverything.net, который еще называют easy clearing method: .clearfix:after { content: "."; display: block; height: 0; clear: …
-
70 приемов улучшения CSS верстки
CSS верстка далеко не всегда простая штука. В зависимости от вашего опыта и навыков CSS верстка может стать настоящим кошмаром, особенно, если вы не уверены, какие селекторы действительно применены к элементам данного …
-
Подсказки при заполнении форм
Всплывающие подсказки, созданные с использованием css и javascript, помогающие пользователю заполнить поля в форме. Элегантно и модно. Думаю пользователи должны оценить ;) Ссылка.
-
Reset Styles или установка начальных значений CSS
Установка всех стилей в дефолтное состояние или установка начальных значений. Удобно тем, что устанавливается в 0, границы, отступы, бордюры и др. св-ва одним махом. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, …
-
Универсальная CSS форма
Попытка стандартизировать обычную форму, создав универсальный макет с помощью CSS. Форма легко изменяется, хорошо структурирована, код максимально отделен от представления, форма достаточно удобна в использовании.…
-
Легко изменяемый макет фиксированной ширины
Попробуем создать макет страницы, который в зависимости от размера экрана будет меняться. Причем попробуем для этих целей воспользоваться только средствами CSS, без использования Javascript для выбора стиля, …
-
Центрируем изображение в блоке
Часто возникает проблема центрирования изображения в блоке фиксированного размера. Естественно, никаких проблем не возникает, если все изображения имеют одинаковый размер, все это достаточно просто реализовать при …
-
Многоколоночный макет, выходящий за пределы блока
by Alan Pearce Нам всем хорошо известна проблема, возникающая при создании многоколоночного макета, в котором колонки должны быть одинаковой высоты. Прочитать подробно об этом можно в разных местах. Потому не будем …
-
Switchy McLayout: Техника адаптации макета
by Marc van den Dobbelsteen Появление новых мобильных устройств заставляют нас взглянуть по другому на растягивающиеся макеты. Marc van den Dobbelsteen предлагает способ применения различных макетов к различным размерам экрана …