Архив метки: элементы сайта

Как сделать «Аккордеон» на CSS3

Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

Есть разные варианты аккордеона построенного только на CSS, но все они используют, как правило, псевдо класс :target, у которого есть недостатки, такие как невозможность закрытия контента после раскрытия и одновременного открытия нескольких скрытых элементов.

А вот с помощью скрытых чекбоксов (флажков) мы можем управлять открытием и закрытием. А для того, чтобы одновременно был открыт только один пункт аккордеона используются radio кнопки.

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

1

Свойство border-image — Как сделать графическую границу

border-image-1

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

Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.

Толщина границ задается свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

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

Комментарии отключены

Использование границ (border) при верстке

border

Всем привет!

Сегодня я хочу поговорить с Вами об одном очень эффективном инструменте, который очень прост, но в то же время позволяет придать элементам Вашего сайта неповторимости.
Мы будем говорить о границах (border).

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

Но давайте обо всем по порядку.

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

Комментарии отключены

Управление размером фонового изображения при помощи css

background-size

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

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

Комментарии отключены

Высота и ширина элемента в CSS, использование префиксов min и max

height-и-width

При работе с каскадными таблицами стилей css, одними из наиболее часто используемых свойств являются свойства height (высота) и width (ширина). Они применяются к блочным элементам. Высота и ширина не включают толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента. Это добавит к элементу полосу прокрутки.

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

Комментарии отключены

Строчные элементы веб-страницы

Строчные элементы

В предыдущей статье мы с Вами разобрались с основами использования блочных элементов web-страниц.

Теперь пришла пора рассказать Вам о строчных элементах. Это тоже очень важно.

Если не понимать различия между этими типами элементов, то будет довольно проблематично использовать эти элементы на практике.

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

Давайте начнем.

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

Комментарии отключены

Блочные элементы веб-страницы

Блочные элементы

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

На самом деле ничего сверхъестественного здесь нет и все намного проще, чем кажется. Нужно просто знать к какому типу относится тот или иной элемент web-страницы.

Существует два основных типа элементов страницы: блочные и строчные. Каждый из них имеет свои свойства.

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

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

8