Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Tag: css (page 2 of 4)

Что такое inline-block?

Если вы работаете с CSS не первый день, то наверняка знакомы со значением inline-block, свойства display. Наиболее часто эту связку используют для устранения проблем в IE6. Read more

Создание прототипа с помощью CSS-фреймворка Grid 960

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа. Как обычно, можете сразу взглянуть на результат. Read more

Дизайн и верстка эластичного макета

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

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

Read more

Создаем эластичное меню из миниатюр

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

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

Read more

Интерактивная корзина на основе AJAX, PHP и JQuery

«Какая корзина? И почему вдруг корзина?» — возможно удивитесь вы, прочитав заголовок. Так вот, корзина самая обычная — та, которую все мы используем, покупая что-нибудь в интернет-магазине. А опубликовать статью о ее создании, я решила по одной, единственной причине — не смогла устоять перед замечательным и красивым решением.

Не верите? можете посмотреть результат. А если вам интересно как это делается, читайте далее. Read more

10 лучших CSS-редакторов

CSS редакторы – это редакторы, которые предназначены только для создания Каскадных Таблиц Стилей. И хотя для этих целей можно использовать полнофункциональную среду разработки или другой редактор кода – CSS-редакторы могут предложить специализированные функции и особенности, для быстрого создания качественного CSS. В этой статье, вы узнаете о наиболее популярных CSS-редакторах, доступных к использованию. Read more

CSS-cвойство z-index: подробный обзор

Большинство CSS-свойств довольно просты в использовании. Зачастую, применение CSS-свойства к элементу в разметке дает мгновенный результат – как только вы обновите страницу, набор значений свойства применится, и вы сразу же увидите результат. Другие CSS-свойства, однако, более комплексные и будут работать только после задания определенного набора условий.

Свойство z-index принадлежит к последней группе свойств. Это свойство так часто вызывало всеобщую путаницу и разочарование, как ни одно, из существующих CSS-свойств. По иронии судьбы, однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое, и предлагает эффективный метод решения многих проблем верстки. Read more

«Скользящая дверь» c одним изображением

sliding-doorСегодня, я собираюсь поделиться одной замечательной CSS-техникой, о которой узнала совсем недавно. Она довольно простая, как все гениальное, и немного похожа на технику верстки блоков с закругленными краями. Вообще, термин «скользящая дверь», англ. sliding door, означает простой hover-эффект, с использованием изображения. До того, как я узнала об этой технике, я всегда использовала несколько различных изображений, для каждого пункта меню. Но в сегодняшней статье, я расскажу, как можно добиться такого эффекта, используя всего лишь одно изображение. Как обычно, вы можете взглянуть на результат. Итак, давайте начнем. Read more

Как создать слайд-шоу с помощью CSS и HTML

В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.

Что мы собираемся делать

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

image27 Read more

Полное руководство по укрощению IE6

25-01_ie6_definitive_lead

На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera и Safari. Между тем, IE6 продолжает преследовать наши дизайны, скрываясь в темных местах, а умирает мучительно долго, в агонии. Поскольку мы ожидаем наступление того великого и светлого дня, когда IE6 окончательно умрет, так же как Netscape 4, давайте вспомним о некоторых пользователях, которые, по различным печальным причинам, продолжают мучиться с этим ужасным браузером.

Так что давайте отпразднуем последние дни IE6, с этим окончательным руководством по укрощению дикого зверя IE6. Read more