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

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

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

[23 Ноя 2008 | комментариев 46 | просмотров 10 265]

Язык HTML (4+), использует более 100 тегов. Естественно, что при верстке сайта мы используем лишь часть из них. Кроме того, любой блочный (и не только) элемент можно “превратить” с помощью CSS в любой другой элемент. Например, font мы заменяем на span; span на div; code на pre и т.п.
Однако, в HTML предусмотрены теги для самых различных ситуаций. Знакомы ли вам такие теги, как samp, var, q, cite, abbr, acronym..? Думаю, что многие из вас слышат эти названия впервые, поэтому я составила таблицу с описанием и примерами для чего нужны эти …

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

[28 Окт 2008 | комментариев 13 | просмотров 4 515]

Вольный перевод статьи Automatic numbering with CSS Counters. Автор: David Storey
Введение
Очень часто в различных документах нам приходиться использовать нумерацию, например, для оформления оглавления. Нумеровать можно и вручную, но такой способ доставит немало хлопот, если понадобиться удалить или добавить новый пункт. В CSS2.1 существует способ, который позволяет автоматизировать этот процесс – это использование CSS counters. Стоит уточнить, что CSS counters не поддерживаются браузером IE, однако в 8й версии это обещают исправить.

Нестандартные тексты, броские заголовки и душещипательные рассказы. Все это на Максим.ру
корпоративный новый год, проведение нового года – мероприятие ответственное, оно …

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

[18 Сен 2008 | комментариев 40 | просмотров 14 965]

Для начала, вот как это будет выглядеть: горизонтальное меню + выпадающее меню горизонтальным списком:

Чтобы сделать подобное, нам понадобиться внести изменения в исходный код меню блога. Обычно это в файле header.php. Находим нужное место и заменяем следующим кодом, который выведет весь список страниц/категорий и подкатегорий.
 <ul id=”nav2″ class=”clearfloat”>
<li><a href=”<?php echo get_option(‘home’); ?>/” class=”on”>Home</a></li>
<?php wp_list_categories(‘orderby=name&exlude=181&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(‘orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>
</ul>
свадьба – самое прекрасное событие в жизни невесты, поэтому надо хорошо подготовиться и посмотреть красивые свадебные платье.
Компания “Софт-Сервис” успешно проводит профессиональное обслуживание компьютеров уже более 4-х …

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

[26 Авг 2008 | комментариев 16 | просмотров 6 383]

С момента публикации спецификации СSS 3 прошло почти 3 года, но вебмастера так и не могут воспользоваться всеми преимуществами нового стандарта. Перетирать причины и искать виновников – дело бесполезное т.к. все равно ничего с места не сдвинется. Можно лишь сказать спасибо разработчикам FireFox и Safari, за возможность “пощупать” новые свойства CSS 3.
Мне хочется рассказать об одном из таких замечательных нововведений  CSS 3, а именно: о псевдо-классе :not(). В спецификации нем написано всего пару строк, но польза его очень велика.
The negation pseudo-class, :not(X), is a functional notation taking a simple selector …

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

[24 Авг 2008 | комментариев 23 | просмотров 15 383]

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

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

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

[13 Авг 2008 | комментариев 53 | просмотров 46 841]

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

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

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

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

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

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

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