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

CSS с нуля

Анимация CSS примеры и готовый код

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

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

Кнопки CSS эффекты при наведении и нажатии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ползунок html + CSS

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

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

Написание css

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

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

Меню для адаптивных версий сайта

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

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

Адаптивный сайт

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

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

Что такое псевдокласс pseudo-class в CSS

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

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

Как сделать страницу с загнутым уголком в CSS :after и :before

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

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

:first-letter как сделать красивую заглавную букву CSS

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

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

Псевдо-элемент CSS что это такое

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

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

Как сделать изображение кнопки в Paint

Здравствуйте уважаемые начинающие веб-мастера. Давайте сделаем простенькую кнопку с помощью всем доступного Paint.

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