В этом посте ответим на вопрос: «Как сделать CSS градиент текста?».  Хотите узнать, как делать красивый текст с эффектом градиента без применения Photoshop? Этот простой способ с использованием CSS позволяет создавать текст с эффектом градиента. Используется картинка в формате PNG (чистый CSS, никаких Javascript или Flash). Все, что нужно — это пустой тег <span> и фоновая картинка с CSS параметром position:absolute. Этот способ работает со следующими браузерами: Firefox, Safari, Opera и Internet Explorer 6. Читать полностью »

Для того, что бы несколько ускорить время загрузки страницы и сделать вашу верстку легче следует оптимизировать не только картинки и HTML. Оптимизация CSS кода также является немаловажным моментом в работе верстальщика.

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

Ну что сказать по этой теме верстка всегда и бала очень важной в разработке веб-приложений. А еще более важно кроссбраузерность — это совокупность CSS компонентов, которые обеспечивают единый образ страницы сайта во всех браузерах, или же в таких как IE 6, 7, 8, Firefox, Opera, Safari и тд. ну дело это очень не простое темболее для новичков . Поэто вот на наш взгляд самые важные моменты на которые стоит обратить внимание. Читать полностью »

Статья с vremenno.net. Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали! Читать полностью »

Перевод статьи Create a Scrolling Menu with CSS and jQuery.

Существует множество прокручивающихся меню и галерей изображений, созданных на Flash, вот яркие тому примеры 1, 2. Но автор захотел создать аналог на CSS и jQuery, конечно без эффектов смазывания картинки при перемещении, но все же. Это решение хорошо работает в большинстве популярных браузеров и при этом сохраняет доступность элементов при отключенном JavaScript.

Посмотреть результат Читать полностью »

неплохой набор виртуализированных браузеров, не требующих установки. Замечательно подойдёт для тестирования вёрстки.

— IE 6, 7, 8.
— Firefox, Safari, Opera.
— Chrome.

Используем в работе.

Нередко, с помощью JavaScript приходится показывать прямоугольные области (всплывающие подсказки, выпадающие меню и прочее). Но чтобы визуально элемент смотрелся не прямоугольником, мы прибегаем к услугам графики и CSS.

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

Использование относительных единиц для размера шрифта — несомненный плюс. Вот только считать их долго и неприятно т.к. для следующего элемента в каскаде необходимо учитывать размер предыдущего. В Aloe Studios сделали замечательную табличку, которая позволяет упростить данную задачу.

Столбцы в таблице — желаемый размер в px, строки — текущий размер в px.
Средняя часть таблички — множитель, который как раз используется в CSS:

<strong>множитель = желаемый размер в px / текущий размер в px</strong>

Обновился неплохой набор базовых стилей для вёрстки.

Что делает SenCSs
— Устанавливает вертикальный ритм для всех элементов.
— Приводит типографику к единому виду во всех браузерах.
— Придерживается умолчательных стилей, но при этом устраняет недоработки в них.
— Уже прописаны наборы шрифтов для windows, mac и linux.
— Имеются стили для форм и некоторых типовых классов.
— Упор на типографику. Читать полностью »