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

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

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

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

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

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

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

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

Здравствуйте уважаемые начинающие веб-мастера. Правила оформления css, рекомендованные Google, для создания таблиц стилей. Выполнение данных правил необходимо для повышения качества кода, облегчения совместной работы, и поддержки инaраструктуры.

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

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

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

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

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

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