Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

17 июля 2015

ДемоИсходники

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

Читать запись полностью

3 комментария

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

Рубрика: Справочник CSS
10 июля 2015

Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.

Читать запись полностью

Комментариев нет

Как сделать буквицу на HTML странице при помощи CSS

18 июня 2015

Приветствую Вас, дорогие читатели! Сегодня рассмотрим как создать эффект оформления страницы — буквицу.

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

Читать запись полностью

Комментариев нет

Как сделать красную строку в html или отступ первой строки в абзаце

29 мая 2015

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

Читать запись полностью

Один комментарий

Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

Рубрика: Справочник CSS
16 мая 2015

ДемоИсходники

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Читать запись полностью

72 комментария

Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

Рубрика: Справочник CSS
22 декабря 2014

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

Читать запись полностью

2 комментария

Таблица html цветов. Названия и коды цветов в RGB. Палитра цветов

10 декабря 2014

В языках html и css, для того чтобы страницы не были серыми и однотипными, имеется возможность цветового оформления документов. Для этого обычно используют модель RGB — аббревиатура от трех английских слов — названий цветов: red (красный), green (зеленый) и blue (синий).

Читать запись полностью

Один комментарий

Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега

Рубрика: Справочник CSS
5 декабря 2014

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

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

Читать запись полностью

Комментариев нет

Отступы и рамки в CSS с помощью параметров margin, padding и border

Рубрика: Справочник CSS
13 ноября 2014

Здравствуйте, уважаемые читатели блога webcodius.ru! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта.  В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Читать запись полностью

Комментариев нет

Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки

Рубрика: Справочник CSS
29 октября 2014

Приветствую Вас, уважаемые читатели блога webcodius.ru. Сегодня мы продолжим изучать CSS и рассмотрим правила float и clear, имеющие важное значение при блочной верстке сайтов.

Читать запись полностью

Комментариев нет