Главная/ Собираем HTML и CSS приемы/ HTML и CSS приемы, интересные решения

HTML и CSS приемы

19 слов о разделе:

  • масса проверенных техник и приемов
  • четкая логическая структура
  • рабочие примеры
  • понятный, «легкий» текст
  • детали и нюансы применения
  • экономия времени

  • Эффект отражения текста на CSS

    добавлено 31.05.2011

    CSS отражение для текстаКак на CSS, с небольшой помощью Javascript, создать эффект отражения для текста.

  • Баг в IE с текстом при применении Alpha фильтра

    добавлено 19.05.2011

    текст отображается криво при применении alpha фильтраРешаем проблему в IE с искаженным текстом при применении Alpha фильтра.

  • Градиент: CSS3 против CSS2 + картинка

    добавлено 16.02.2010

    градиентCSS свойства linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена пройдет, наверно, немало времени пока мы сможем использовать эту мощь в своей работе. Тем не менее все большее число браузеров в том или ином виде поддерживает CSS-градиенты.

  • О кроссбраузерности placeholder

    добавлено 07.05.2011

    О том как placeholder может добавить головной боли.

  • Лесенка спрайтов — сложный случай поклейки

    добавлено 08.12.2010

    Для ускорения работы сайта можно уменьшить общее количество используемых файлов-картинок, если поклеить их по методу спрайтов. Тем не менее, иногда попадаются весьма трудные случаи, когда красиво и хорошо подклеить не получается. Один из таких «трудных случаев» и будем сегодня перевоспитывать.

  • Текст под углом

    добавлено 06.04.2011

    Решаем задачу реализации наклонной под произвольным углом текстовой надписи.

  • Оформление input type=search

    добавлено 06.04.2011

    оформляем type=searchО тонкостях нестандартного оформления input type=search.

  • Встраиваем изображения — data:URL

    добавлено 24.01.2011

    Разгоняем сайт: уменьшаем количество HTTP запросов используя внедрение картинок по схеме data:URL

  • Убираем класс для первого элемента

    добавлено 18.08.2009
    Облегчаем работу программистам, избавляясь от дополнительного класса для первого элемента.

  • CSS хаки

    дополнено 11.02.2011
    Хаки для ИЕ6, хаки для ИЕ7, хаки для ИЕ8, хаки для Opera, хаки для Firefox, хаки для Chrome, хаки для Safari.

  • cuSelMultiple — список с возможностью множественного выбора на jQuery

    добавлено 03.02.2011

    cuSelMultiple — свежий jQuery-плагин для стилизации select multiple.

  • Скругление углов. Обзор методов.

    добавлено 26.05.2010

    скругление углов Сейчас прямо-таки эпоха скругленных уголков. Столкнувшись очередной раз с такой задачей, нашей командой было решено выделить наконец время на детальное изучение этой проблемы и поиск решения.

  • Эмуляция data:URL для IE6-7 — используем MHTML-включение

    добавлено 24.01.2011

    Учим IE6-7 внедрять картинки CSS. Вместо data:URL используем MHTML-включение

  • «Дергание» сайта

    добавлено 20.01.2011

    Чтоб не колупали мозг дизайнеры, менеджеры, заказчики, юзабилити тестировщики и прочие особы, избавляемся от небольшого «бага».

  • Резиновое меню

    добавлено 13.01.2011

    Как сделать резиновое меню, которое занимает всю доступную ширину родителя.

  • Смещение на 1px в IE6

    добавлено 03.02.2009
    О том как устранить смещение блоков на 1px при position: absolute; right:0 и/или bottom:0.

  • Порядок описания ссылок

    добавлено 03.11.2009
    Правильный порядок описания ссылок в CSS.

  • Плавающий :first-letter

    добавлено 20.12.2010

    В зависимости от установленных стилей :first-letter может быть строчным или плавающим. В этой статье рассматривается ситуация, когда псевдоэлемент :first-letter плавающий.

  • Строчный :first-letter

    добавлено 20.12.2010

    В зависимости от установленных стилей :first-letter может быть строчным или плавающим. В данной статье рассматривается ситуация, когда псевдоэлемент :first-letter строчный.

  • Используем псевдоэлемент :first-letter

    добавлено 20.12.2010

    Исследуем особенности применения псевдоэлемента :first-letter.

  • Профилактика сайта: максимально простое оповещение

    добавлено 15.12.2010

    сообщение о профилактикеКак максимально быстро, просто, универсально и удобно средствами CSS вывесить табличку-предупреждение о профилактике на сайте? Идеальным было бы решение, которое не требует изменений в HTML — что бы не копаться в шаблонах, а просто поколдовать со стилями. И такое решение существует!

  • Ресайз окна: потомок перерос родителя

    добавлено 09.12.2010

    потомок перерос родителяНа манеже, как всегда сложные, взаимоотношения родителя и потомка. При уменьшении размеров окна браузера контентный блок может стать шире своего родителя. С этим связано несколько багов. Их-то мы и будем побеждать.

  • Вертикальное выравнивание по центру

    дополнено 14.12.2010
    О том как выровнять по вертикали элемент относительно блока-родителя.

  • Резиновая кнопка для формы

    добавлено 29.11.2009
    О том как сделать резиновую по ширине кнопку для формы.

  • Правильные анонсы новостей

    добавлено 28.09.2010

    Простое и изящное решение для разметки анонсов новостей.

  • Верстка содержания

    добавлено 03.12.2010

    верстка содержанияВерстаем содержание. Рассмотрены различные варианты верстки на базе обычных списков и списков определений.

  • Условные комментарии

    обновлено 30.11.2010
    Условные комментарии. Применение. О преимуществах и недостатках.

  • Обходим схлопывание margin

    добавлено 23.11.2010

    Каким образом можно убрать нежелательное схлопывание margin. Рассмотрен ряд методов, у каждого из которых свои достоинства и недостатки и своя область применения.

  • Фигуры с углами на CSS

    добавлено 18.11.2010

    CSS фигурыО том как только лишь средствами HTML и CSS (без картинок, SVG, canvas) можно рисовать углы.

  • Вставка спецсимволов в генерируемый контент

    добавлено 18.11.2010

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

  • CSS треугольники

    добавлено 17.11.2010

    треугольник средствами CSSО том как нарисовать треугольник средствами CSS.

  • Отменяем обтекание текстом картинки

    добавлено 05.11.2010

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

  • -moz-box-shadow и -moz-border-radius — это кошмар CPU

    добавлено 04.11.2010

    css3, firefox и cpuВендорные CSS свойства -moz-box-shadow и -moz-border-radius основательно нагружают процессор. Будем с ними на стреме.

  • IMG: меняем рисунок при наведении

    дополнено 03.11.2010

    Одна из часто встречающихся задач при верстке — смена фона элемента при наведении мыши. А что если нужно менять не фон а рисунок в img? Как это сделать средствами CSS, без скриптов? Материал был дополнен двумя приемами, позволяющими обойтись без expression, при условии, что контейнер — ссылка.

  • Фиксированная колонка + резиновая + clear:both

    обновлено 03.11.2010
    Заменены иллюстрации на более симпатичные.

  • Список определений. Требуем невозможного.

    добавлено 27.05.2010

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

  • IMG внутри блока — убираем странный отступ

    добавлено 22.10.2010

    аномальный отступЛечим странный отступ, который рисует большинство браузеров если разместить img внутри блочного элемента

  • Box-sizing: переключаем блочную модель

    добавлено 22.10.2010

    CSS3 свойство box-sizing позволяет выбирать принцип расчета размеров блока. Как же это можно использовать на практике?

  • Два в одном: позиция + размеры

    добавлено 15.10.2010

    Иногда так хочется написать что-то вроде height: 100% — 20px; а нельзя! Или все-таки можно?

  • inline-block: простое свойство для непростых задач

    добавлено 12.10.2010

    inline-block совмещает в себе возможности блочных элементов (block) и некоторые особенности поведения строчных (inline). Преимуществом такого симбиоза можно и даже нужно пользоваться.

  • Проблемы с border-radius

    добавлено 11.10.2010

    Как оказалось, реализация поддержки этого свойства браузерами пока оставляет желать лучшего: есть некоторые проблемы при использовании border-radius.

  • На одну картинку меньше. Спецсимвол ×

    добавлено 07.10.2010

    Избавляемся от лишней картинки — заменяем крестик на спецсимвол ×

  • Центрирование картинки в блоке

    добавлено 29.09.2010

    Еще один метод выровнять картинку в пределах блока с фиксированным размером

  • CSS прозрачность

    добавлено 21.01.2009
    О том как сделать кроссбраузерно элементы полупрозрачными, а так же сделать прозрачным только фон.

  • Кроссбраузерное отображение input и textarea

    дополнено 22.09.2010
    Максимально одинаково оформляем поля ввода форм input и textarea.
    Дополнен материал о кроссбраузерном выравнивании текста внутри поля.