Статьи в категории CSS
CSS, Веб-разработка »
Язык HTML (4+), использует более 100 тегов. Естественно, что при верстке сайта мы используем лишь часть из них. Кроме того, любой блочный (и не только) элемент можно “превратить” с помощью CSS в любой другой элемент. Например, font мы заменяем на span; span на div; code на pre и т.п.
Однако, в HTML предусмотрены теги для самых различных ситуаций. Знакомы ли вам такие теги, как samp, var, q, cite, abbr, acronym..? Думаю, что многие из вас слышат эти названия впервые, поэтому я составила таблицу с описанием и примерами для чего нужны эти …
CSS, Веб-разработка »
Вольный перевод статьи Automatic numbering with CSS Counters. Автор: David Storey
Введение
Очень часто в различных документах нам приходиться использовать нумерацию, например, для оформления оглавления. Нумеровать можно и вручную, но такой способ доставит немало хлопот, если понадобиться удалить или добавить новый пункт. В CSS2.1 существует способ, который позволяет автоматизировать этот процесс – это использование CSS counters. Стоит уточнить, что CSS counters не поддерживаются браузером IE, однако в 8й версии это обещают исправить.
Нестандартные тексты, броские заголовки и душещипательные рассказы. Все это на Максим.ру
корпоративный новый год, проведение нового года – мероприятие ответственное, оно …
CSS, Веб-разработка »
Для начала, вот как это будет выглядеть: горизонтальное меню + выпадающее меню горизонтальным списком:
Чтобы сделать подобное, нам понадобиться внести изменения в исходный код меню блога. Обычно это в файле 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, Веб-разработка »
С момента публикации спецификации С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, Веб-разработка »
Верстая очередной сайт, не раз с грустью вздыхала о том, как все это легко было бы сделать на CSS3… Дело в том, что дизайн сайта содержал довольно много элементов с закругленными углами. При этом большинство блоков должно было растягиваться и по высоте и по ширине, наподобие этому:
Этот блок реализован с помощью конструктора RoundedCornr.
Сервис предлагает не самое идеальное решение, т.к. ширина и высота блока будет ограничена фоновым изображением: 1024 х 600. При этом, изображения генерируются в формате PNG с прозрачностью, что добавляет проблем вебмастерам, верстающим под IE6.
Что касается самой логики кода, …
CSS, Веб-разработка »
UPD. Как сделать красивую кнопку с помощью CSS3
Продолжаю серию уроков по улучшению внешнего вида сайта с помощью CSS кода. Напомню предыдущие статьи:
Способы оформления цитат с помощью CSS
Как сделать красивую ссылку?
Сегодня урок будет посвящен оформлению кнопок, внимания которым, как правило, практически не уделяется: они выглядят серыми и скучными.
Вот так выглядит обычная кнопка типа button:
Сразу можно назвать несколько минусов использования таких кнопок по умолчанию:
отсутствует эффект при наведении на кнопку
не меняется внешний курсора
не соотвествует дизайну
Исправить эту ситуацию поможет несколько строчек CSS кода.
Создание flash эффекта перелистывания страницы на сайте
Компания “DOM-SB” предлагает профессиональные услуги: установка …
CSS, Веб-разработка »
Несмотря на то, что о CSS фреймворках написано достаточно много, большинство разработчиков сайтов их не используют. Сегодня на почту мне пришло вот такое письмо:
Здравствуйте, Ольга! Мне очень понравилась ваша статья, где вы перечисляете самые известные CSS фреймворки. В чем суть фреймворков я понял, но вот когда и где их действительно нужно использовать , конкретные примеры сайтов так и не нашел. Хотелось бы, чтобы вы написали об этом.
С уважением, Михаил.
Я с Михаилом согласна, фреймворк – готовое решение, но где и как его применить и насколько это действительно будет выгоднее, чем обычная …




Dmoz