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

CSS с нуля

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

Опубликовано 2019-09-18 автором stariс

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

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

background: gradient(); CSS. Плавный переход от одного цвета к другому

Опубликовано 2019-08-26 автором stariс

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

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

Готовый код сайта Html + CSS

Опубликовано 2019-08-04 автором stariс

Ранее я уже дал вам Код сайта на чистом HTML, теперь же применим CSS и напишем блочный шаблон сайта. В этой статье я дам вам не только код блочного шаблона сайта, а и подробно расскажу, и покажу, что и как … Читать далее →

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

Текст на изображениях, примеры и готовый код

Опубликовано 2019-07-12 автором stariс

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

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

Живое сердце CSS

Опубликовано 2019-07-10 автором stariс

Вот ещё один Оригинальный эффект CSS, который создаёт движение, а движение — это как известно жизнь. Я не стану подробно описывать свойства анимации и трансформации css, используемые в коде этого сердечка, так как для этого есть куча ресурсов, начиная с … Читать далее →

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

Блок перевёртыш CSS

Опубликовано 2019-07-08 автором stariс

Оригинальный эффект, привлекающий к себе внимание посетителя, и совершенно не портящий внешний вид страницы — блок-перевёртыш. Перевёртышем он становиться при наведении на него курсора мыши. Попробуйте, наведите курсор на мою фотографию.

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

Вращающийся куб баннер CSS

Опубликовано 2019-07-07 автором stariс

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем знакомство с Оригинальными эффектами CSS. Хотите такой кубик на свой сайт? Нет ничего проще, так как написан он на html и css, без скриптов и библиотек. А если Вы хоть немного знаете html и css, … Читать далее →

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

Как создать блоки на странице

Опубликовано 2019-06-30 автором stariс

В этой статье разберём, как сделать страницу из отдельных блоков для сообщений, анонсов, картинок, а затем посмотрим, как такую разбивку сделать в WordPress.

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

Ползунок html + CSS

Опубликовано 2019-05-18 автором stariс

Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS. Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=»range», как любой браузер поймёт, что на экране нужно вывести ползунок.

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

position: relative; относительное позиционирование

Опубликовано 2019-05-14 автором stariс

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

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

position: absolute; абсолютное позиционирование

Опубликовано 2019-05-14 автором stariс

Пример абсолютного позиционирования Здравствуйте уважаемые начинающие веб-мастера. В этой статье мы познакомимся с ещё одним свойством CSS — psition:absolute, и научимся позиционировать элемент относительно окна браузера, и относительно другого элемента. А так-же разберём несколько оригинальных решений, реализованных с помощью абсолютного … Читать далее →

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

overflow: auto; как сделать блок с полосой прокрутки

Опубликовано 2019-05-14 автором stariс

Если размер блока не позволяет вместить весь предназначенный для него текст, то в таком случае применяется, всем нам хорошо знакомая, прокрутка. Для задания блоку полосы прокрутки, применяется свойство overflow, со значением auto Смотрим пример. <!DOCTYPE html> <html lang=»ru»> <head> <meta … Читать далее →

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

Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:

Опубликовано 2019-03-30 автором stariс

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

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

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

Опубликовано 2019-02-12 автором stariс

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

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

text-shadow: и box-shadow: как сделать тень для текста, картинки, блока

Опубликовано 2019-01-11 автором stariс

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

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