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

CSS с нуля

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

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

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

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

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

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

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

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

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

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

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

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

Значки меню CSS

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

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

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

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

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

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

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

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

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

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

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

Слайдер CSS

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

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

Курсор CSS

Здравствуйте уважаемые начинающие веб-мастера. Вид курсора задаётся свойством cursor, кторое может принимать различные значения. Определённый вид для курсора можно задать любому элементу. Например, при наведении на ссылку курсор может приобретать вид ладони с поднятым пальцем, а при наведении на рамку, … Читать далее

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

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

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

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

Часы CSS

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

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

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

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

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

Красивые кнопки CSS с оригинальными эффектами

В этой статье, Вашему вниманию представлены 13 кнопок с различными Эффектами при наведении и нажатии. Различные формы и цвета для кнопки на Ваш вкус сделать не сложно, и об этом подробно в статье Блок с закруглёнными углами и тенью. Эллипс … Читать далее

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

Текст на изображениях

Пять оригинальных эффекта появления текста на изображениях, при наведении курсора. Вариант 1 Текст появляется из глубины изображения.

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