Сегодня, я собираюсь поделиться одной замечательной CSS-техникой, о которой узнала совсем недавно. Она довольно простая, как все гениальное, и немного похожа на технику верстки блоков с закругленными краями. Вообще, термин «скользящая дверь», англ. sliding door, означает простой hover-эффект, с использованием изображения. До того, как я узнала об этой технике, я всегда использовала несколько различных изображений, для каждого пункта меню. Но в сегодняшней статье, я расскажу, как можно добиться такого эффекта, используя всего лишь одно изображение. Как обычно, вы можете взглянуть на результат. Итак, давайте начнем. Read more
В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.
Что мы собираемся делать
Мы создадим простое слайд-шоу, с четырьмя табами справа и основной картинкой слева. При клике по одному из табов, справа появится новое изображение. Посмотреть как это будет выглядеть в конце, можно здесь.
На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera и Safari. Между тем, IE6 продолжает преследовать наши дизайны, скрываясь в темных местах, а умирает мучительно долго, в агонии. Поскольку мы ожидаем наступление того великого и светлого дня, когда IE6 окончательно умрет, так же как Netscape 4, давайте вспомним о некоторых пользователях, которые, по различным печальным причинам, продолжают мучиться с этим ужасным браузером.
Так что давайте отпразднуем последние дни IE6, с этим окончательным руководством по укрощению дикого зверя IE6. Read more
В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение. Read more
Позволю себе внести посильный вклад в общечеловеческую проблему прозрачности .png-картинок во всеми любимом браузере Internet Explorer версии 6. Если вам пока не ясно в чем же состоит эта проблема, откройте сегодняшнюю статью этим браузером, и вы сразу увидете в первом абзаце неопрятную картинку, с серым фоном.
Эта проблема решается только двумя способами — использовать javascript, или не использовать png. Но поскольку абсолютно отказаться от использования картинок в формате .png, нет никакой возможности, то мы рассмотрим первый вариант.
Как известно дизайнеры — творческие люди, и верстальщики им не указ, как нарисуют, так и приходится делать, а это далеко не всегда выполнимая задача. Один из распространенных дизайнерских приемов — это украшение каждой позиции списка каким-нибудь замысловатым маркером.
Верстать такой список проще простого — картинка задается через css-свойсво list-style-image, и ваш список выглядит точно как в макете. Но пару раз мне попадались макеты, где в качестве маркера списка использовались различные типографские знаки, типа длинного тире, решетки и кавычки. В принципе можно и их сохранить как картинку, но не так давно я узнала другой, более изящный способ.
Каждый начинающий верстальщик рано или поздно сталкивается с проблемой верстки закругленных углов. И хотя в сети масса информации об этом, единого правила, подходящего на все случаи жизни (по крайней мере до выхода CSS3), к сожалению нет.
Я не буду перечислять все известные мне способы потому как об этом написано более чем достаточно, просто вкратце перечислю самые популярные, если вдруг что-то забыла, поправляйте.
Сегодня, я собираюсь поделиться одной замечательной CSS-техникой, о которой узнала совсем недавно. Она довольно простая, как все гениальное, и немного похожа на технику верстки блоков с закругленными краями. Вообще, термин «скользящая дверь», англ. sliding door, означает простой hover-эффект, с использованием изображения. До того, как я узнала об этой технике, я всегда использовала несколько различных изображений, для каждого пункта меню. Но в сегодняшней статье, я расскажу, как можно добиться такого эффекта, используя всего лишь одно изображение. Как обычно, вы можете взглянуть на результат. Итак, давайте начнем. Read more
