Архив рубрики: HTML/CSS

Кроссбраузерный CSS-градиент

Очень часто в своих макетах дизайнеры используют всевозможные градиенты. Раньше приходилось вырезать 1-пиксельную картинку с градиентом и размножать ее (repeat). При этом на сервер уходил лишний запрос, что в свою очередь замедляло загрузку страницы. Сегодня  же мы можем создавать градиенты … Читать далее

Рубрика: HTML/CSS | Метки: , | Добавить комментарий

Создаем границы с помощью CSS

Использование CSS для границ не должно ограничиваться стандартными border:1px solid #000; Ниже я приведу более сложные случаи создания границ. Вертикальное и горизонтальное закругление углов Углы также можно закруглять только по горизонтали или по вертикали. Для этого используется 2 значения, разделенные ‘/’: … Читать далее

Рубрика: HTML/CSS | Метки: , , , | Добавить комментарий

Создаем геометрические фигуры с помощью CSS

Довольно часто при верстке сайтов возникает задача вставить в макет какую-либо геометрическую фигуру (треугольник на рисунке ниже). Конечно для этой цели можно просто вырезать картинку типа .gif или .png, но загрузка лишнего файла это не слишком красивый способ. Я рекомендую … Читать далее

Рубрика: HTML/CSS | Метки: | Добавить комментарий

HTML5 атрибут placeholder

Часто во время верстки форм можно встретиться с задачей размещения названия полей внутри самих полей. При получении фокуса, это поле очищается, давая возможность пользователю вводить данные. Раньше реализовать это можно было только  используя JavaScript. Но с появлением HTML5 у нас появилась … Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , | 1 комментарий

Специальные символы (сущности) в HTML

При работе с HTML и XSLT для вставки некоторых символов очень часто приходится использовать сущности (или мнемоники). Ниже представлены таблицы с полным набором данных символов.

Рубрика: HTML/CSS | Метки: | Добавить комментарий

Как убрать лишние отступы для кнопок в Mozilla Firefox

Иногда  при верстке кнопок можно столкнуться с проблемой в браузере Firefox, если нам надо полностью убрать отступы в кнопке. Для остальных (новых) браузеров достаточно написать следующий CSS: [codesyntax lang=»css» title=»CSS»] .button{ padding:0; border:0; } [/codesyntax] Но Firefox упрямо оставляет между текстом и … Читать далее

Рубрика: HTML/CSS | Метки: , , | 5 комментариев

HTML5 data-атрибуты (data-*)

Тем, кто занимался разработкой сложных web-приложений часто приходилось сталкиваться с ситуацией, когда необходимо хранить какие-либо данные прямо в html — документе. Будь то дефолтные значения для чего-либо или свойства элементов. Зачастую они добавляли сложные классы, которые надо было парсить, жертвуя … Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , | 4 комментария

Оформление списков с помощью псевдоэлементов

По-умолчанию для оформления списков используется свойство list-style. Но для сложных макетов его не хватает. Например нам надо рядом с каждым элементом списка поставить синий квадрат, отцентрированный по вертикали, в то время, как сам текст списка должен быть серым.

Рубрика: HTML/CSS | Метки: , , , , , , | 1 комментарий

Как задать overflow:hidden для ячеек таблицы

Часто возникает ситуация, когда в ячейке таблицы (td, th)  с фиксированной шириной находится текст, который либо растягивает либо разрывает ячейку. [codesyntax lang=»html4strict» title=»HTML»] <table width=»50″> <tr> <td>Очень длинный текст</td> </tr> </table> [/codesyntax] В таком случае очень хочется поставить ей свойство … Читать далее

Рубрика: HTML/CSS | Метки: , , , | 1 комментарий

Масштабируемое фоновое изображение

Недавно передо мной стала задача сделать масштабируемый фон для сайта. При чем быстро. В принципе задача нетрудная. Но как всегда встретились подводные камни. Сначала подумал просто использовать CSS 3 свойство background-size. Но тут без костылей не обойтись и этот вариант … Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , , , | 7 комментариев
  • Страница 2 из 2
  • <
  • 1
  • 2