Главная » Архивы

Статьи в категории CSS

CSS, Веб-разработка »

[24 Авг 2008 | комментариев 21 | просмотров 8,152]

Верстая очередной сайт, не раз с грустью вздыхала о том, как все это легко было бы сделать на CSS3… Дело в том, что дизайн сайта содержал довольно много элементов с закругленными углами. При этом большинство блоков должно было растягиваться и по высоте и по ширине, наподобие этому:

Этот блок реализован с помощью конструктора RoundedCornr.
Сервис предлагает не самое идеальное решение, т.к. ширина и высота блока будет ограничена фоновым изображением: 1024 х 600. При этом, изображения генерируются в формате PNG с прозрачностью, что добавляет проблем вебмастерам, верстающим под IE6.
Что касается самой логики кода, …

CSS, Веб-разработка »

[13 Авг 2008 | комментариев 26 | просмотров 19,389]

Продолжаю серию уроков по улучшению внешнего вида сайта с помощью CSS кода. Напомню предыдущие статьи:

Способы оформления цитат с помощью CSS
Как сделать красивую ссылку?
Сегодня урок будет посвящен оформлению кнопок, внимания которым, как правило, практически не уделяется: они выглядят серыми и скучными.
Вот так выглядит обычная кнопка типа button:

Сразу можно назвать несколько минусов использования таких кнопок по умолчанию:

отсутствует эффект при наведении на кнопку
не меняется внешний курсора
не соотвествует дизайну

Исправить эту ситуацию поможет несколько строчек CSS кода.
Создание flash эффекта перелистывания страницы на сайте
Компания “DOM-SB” предлагает профессиональные услуги: установка домофонов и других систем контроля доступа. Гарантия …

CSS, Веб-разработка »

[9 Авг 2008 | комментариев 6 | просмотров 1,954]

Несмотря на то, что о CSS фреймворках написано достаточно много, большинство разработчиков сайтов их не используют. Сегодня на почту мне пришло вот такое письмо:
Здравствуйте, Ольга! Мне очень понравилась ваша статья, где вы перечисляете самые известные CSS фреймворки. В чем суть фреймворков я понял, но вот когда и где их действительно нужно использовать , конкретные примеры сайтов так и не нашел. Хотелось бы, чтобы вы написали об этом.
С уважением, Михаил.
Я с Михаилом согласна, фреймворк – готовое решение, но где и как его применить и насколько это действительно будет выгоднее, чем обычная …

CSS, Статьи и переводы »

[25 Июл 2008 | комментариев 29 | просмотров 6,492]

Оформление цитат – довольно актуальная задача для блоггера. Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны тем. Наиболее привычный вид цитаты – это наклонный текст или фон ввиде кавычки. А вот дизайн кавычки – полностью фантазия блоггера.
Вот несколько примеров:
Пример 1. Наклонный текст и открывающая кавычка.

Лучший веб хостинг для блогов и Ваших сайтов. Выделенные IP с каждым тарифом.
Блог не приносит прибыли?  Пора это исправить. Зарабатывайте на своем блоге, делая обзоры товаров и услуг рекламодателей.
Лучшая система продажи ссылок.

CSS, Дизайн, Статьи и переводы »

[18 Июл 2008 | комментариев 38 | просмотров 7,261]

Ниже приведен вольный перевод статьи Even Links Can Look Good от Michael Martin
Самый простой способ освежить ваш дизайн – изменить внешний вид ссылок.
Изменений стилей займет всего несколько секунд, но результат наверняка понравится посетителям вашего сайта. Ниже я приведу несколько примеров стилей для ссылок.

Спонсоры статьи: Ощутите волшебство Монако – это сказочное княжество, где предпочитают отдыхать самые яркие звезды шоу-бизнеса.
Мечтаете о роскошном свадебном путешествии? Поездка на экзотические мальдивские острова станет для вас лучшим подарком.
Новый конкурс для блоггеров и копирайтеров – «Июль-Август 2008». Приз за лучшую статью – 5000р.
А вы знаете, что трубочный …

CSS, Статьи и переводы »

[17 Июл 2008 | комментариев 12 | просмотров 3,401]

Эта статья посвящена свойству position:fixed, которое не так часто используется вебмастерами. На это была причина. Данное свойство поддерживается в IE только начиная с версии 7, поэтому те разработчики, которые заботятся о кроссбраузерности, как правило, стараются избегать стилей неподдерживаемых в IE6.
С выходом IE7 количество пользователей предыдущей версии заметно сократилось, поэтому разработка сайта с использованием фиксированного позиционирования уже начала постепенно распространяться среди веб разработчиков.
Не многие знают, зачем и как можно использовать это свойство, поэтому сразу начнем с наглядного примера 1.

Спонсоры статьи: В Нижегородской области построят новые кирпичные заводы – подробности на …

CSS, Статьи и переводы »

[25 Июн 2008 | комментариев 25 | просмотров 5,820]

Как известно, существует 2 популярных способа верстки на основе блоков div: плавающая модель (float) и абсолютное позиционирование (absolute). Каждый из них имеет свои плюсы и минусы. Eric Sol вместе со своей командой разработали новый способ позиционирования в CSS под названием "faux absolute positioning" – имитация абсолютного позиционирования.
Большинство дизайнов имеют колоночную структуру, т.е. шапку, 2-3 колонки и подвал. Используя только абсолютное позиционирование невозможно задать правила для подвала, т.к. его положение напрямую зависит от контента. С плавающей моделью тоже возникают …