Главная » Записи по метке: html

Эффект биения сердца на чистом CSS3

Эффект биения сердца на чистом CSS3 Как "нарисовать" хорошо всем знакомый символ сердца с помощью css3, показал на примере в одной из своих статей: "Рисуем сердце с помощью CSS3". Сегодня хочу показать, как можно оживить это сердечко, добавив визуальный эффект биения. Для этого нам понадобится чуточку магии свойств CSS3 и несколько строк несложного кода. Анимация CSS при правильном её использовании порой вообще творит чудеса, это лишь один из самых простейших примеров её ...

4 простых hover-эффекта для кнопки на чистом CSS

Различные эффекты при наведении на активные элементы интерфейса сайтов, стали настолько привычными, что привлечь внимание и удивить чем-то, искушенного пользователя, становится всё труднее. Материальный дизайн, опять же добавил ощутимую порцию движухи, ссылки, кнопки, элементы меню, поля ввода форм и чекбоксы, просто оживают под курсором. Достигается это по разному, с помощью javascript и на чистом css. Наверное проще использовать готовые ...

Набор правил CSS для формирования уведомлений

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

Фиксированные подписи к изображениям

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

Онлайн-генератор стартового HTML шаблона

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

Пример адаптивной верстки Портфолио с фильтрацией работ на jQuery

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

Адаптивный шаблон страницы ошибки 404

Страница ошибки 404 важна для любого сайта или блога, как и все его содержание. Без нее не обходится ни один мало-мальски приличный сайт имеющий хоть какое-то наполнение. Наверное каждому из вас частенько, при попытке зайти на какой-либо сайт, приходилось видеть страницу с сообщением об ошибке 404, вещающей о том, что ссылка, по которой вы сюда попали — нерабочая, т.е битая напрочь.

Анимированные подсказки для элементов текста и ссылок с помощью свойств CSS3

Анимированные подсказки для элементов текста и ссылок с помощью свойств CSS3 Здравствуйте всем! Подсказки для ссылок, или же элементов текста всегда выглядят привлекательно, да и пользователю подсказки порой облегчают понимание того что он вообще хочет получить посетив тот или иной сайт. Подсказки бывают разные и по формам и по исполнению, с применением картинок в оформлении, работающие на javascript, даже говорящие и с проигрыванием музыки. Вариантов много и все они по своему хороши, тут уж дело вкуса. Сегодня я ...

Стиль контактной формы CSS

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

Стильные CSS3 — кнопки без графики

Стильные CSS3 — кнопки без графики

Доброго времени суток!

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

Приемы оформления границ блока с помощью CSS

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

Создание кнопок с помощью CSS, HTML без javascript

Какая то фобия у наших пользователей в отношении использования javascript, довольно часто встречаю в комментариях вопросы о том, что при отключенных скриптах в браузерах, что то перестает работать. Люди порой не удосуживаются даже вникнуть в процесс создания того или иного решения. Ну, а раз есть потребность и неуемное желание не использовать javascript в работе, на примере создания кнопок покажу, как можно создать и придать динамичность ...
1 2