Архив рубрики: CSS основы

CSS с нуля

Меню многоуровневое горизонтальное и вертикальное CSS

Уникальность приведённого ниже кода в том, что он позволяет создавать неограниченное количество плавно появляющихся вложений не изменяя стилей. Ещё одна особенность в том, что для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О … Читать далее

Рубрика: CSS основы, HTML основы | 4 комментария

Раскрывающиеся блоки для подсказок или дополнительной информации

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

Рубрика: CSS основы | 2 комментария

Кнопка наверх

Здравствуйте уважаемые начинающие веб-мастера. Для реализации кнопки "Наверх" существует много вариантов. Я предложу два наиболее лёгких из них. Вариант 1 Кнопка с картинкой. Кнопка с картинкой — самый простой вариант. Давайте посмотрим, как её сделать и реализовать на сайте. Первым … Читать далее

Рубрика: CSS основы | Оставить комментарий

Как адаптировать шаблон

Здравствуйте уважаемые начинающие веб-мастера. У многих из вас уже есть свои сайты, на которые потрачено много душевных сил и времени, но беда в том, что зачастую темы оформления у них не адаптивные. Статичный шаблон сейчас — верный путь на задворки … Читать далее

Рубрика: CSS основы | Оставить комментарий

Красивое меню CSS

Различных менюшек очень много, но вот меню в виде блокнотика я не встречал ни разу. Возможно кому-то понравится такая идея. Принадлежит она сайту CSS-LIVE, моя скромная заслуга лишь в том, что я переделал её под CMS, изменил размеры под страницу … Читать далее

Рубрика: CSS основы | 4 комментария

Маркер списка CSS

Использовать картинку в качестве маркера списка — непозволительная роскошь по отношению к скорости загрузки страницы, особенно для молодого сайта. Поэтому я покажу Вам несколько примеров, как можно создать маркер только средствами html и css. В качестве контейнера для маркера применим … Читать далее

Рубрика: CSS основы | 7 комментариев

Значки меню CSS

Как сделать значки меню не картинками, а написать в html + css. Этот вопрос возник у меня после того, как я сделал дизайн сайта адаптивным, и разместил сверху симпатичную менюшку из значков для меню, которые нарезал в Яндекс Картинках. Радость … Читать далее

Рубрика: CSS основы | 2 комментария

Логотип для сайта

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS. Эта мысль не давала мне покоя с тех пор, как я увидел, что малюсенькая картинка на 500 байт, грузится гораздо дольше чем портянка … Читать далее

Рубрика: CSS основы | 4 комментария

CSS перемещение, вращение, 3D

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

Рубрика: CSS основы | 4 комментария

Анимированная шапка для сайта

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

Рубрика: CSS основы, Новости | 4 комментария

Слайдер CSS

Здравствуйте уважаемые начинающие веб-мастера. Вот самый простой в мире слайдер на чистом CSS. К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер. А … Читать далее

Рубрика: CSS основы | 3 комментария

Курсор CSS

спецсимволы Цвета HTML Горячие клавиши css псевдоэлементы микроразметка microformats.org (микроформат) микроразметка schema.org (микродата) Здравствуйте уважаемые начинающие веб-мастера. Вид курсора задаётся свойством cursor, кторое может принимать различные значения. Определённый вид для курсора можно задать любому элементу. Например, при наведении на ссылку … Читать далее

Рубрика: CSS основы | Оставить комментарий

Плавающий блок CSS

Наведи курсор Здравствуйте уважаемые начинающие веб-мастера. Всем встречались оживающие пункты меню и другие элементы при наведении курсора. Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow. Величина и направление перемещения задаются свойством transform, причём изменяя значения в этом … Читать далее

Рубрика: CSS основы | Оставить комментарий

Часы CSS

12 3 6 9 В предыдущей статье Анимация CSS для начинающих я обещал примеры анимаций. Начнём с простейшего и сделаем вот такие часы. Чтобы заставить стрелки двигаться применим свойство animation и правило @keyframes Для лучшей наглядности примера я запустил минутную … Читать далее

Рубрика: CSS основы | Оставить комментарий

Анимация CSS для начинающих

Элементы анимации не только делают дизайн удобнее и элегантнее, но и вызывают у пользователей положительные эмоции, которые буквально притягивают к сайту. Это что касается пользовательских показателей. Что же касается веб-разработки — анимация оживляет элементы контента средствами CSS, без привлечения JavaScript, … Читать далее

Рубрика: CSS основы | 3 комментария