Как «нарисовать» хорошо всем знакомый символ сердца с помощью css3, показал на примере в одной из своих статей: «Рисуем сердце с помощью CSS3». Сегодня хочу показать, как можно оживить это сердечко, добавив визуальный эффект биения. Для этого нам понадобится чуточку магии свойств CSS3 и несколько строк несложного кода. Анимация CSS при правильном её использовании порой…
Различные эффекты при наведении на активные элементы интерфейса сайтов, стали настолько привычными, что привлечь внимание и удивить чем-то, искушенного пользователя, становится всё труднее. Материальный дизайн, опять же добавил ощутимую порцию движухи, ссылки, кнопки, элементы меню, поля ввода форм и чекбоксы, просто оживают под курсором. Достигается это по разному, с помощью javascript и на чистом css.…
На сегодняшний день эффективная интерактивность и интуитивный дизайн являются ключевыми составляющими при создании успешного проекта. Различные элементы взаимодействия с пользователями несомненно добавляют движухи любому сайту или блогу. Одним из таких интерактивных элементов являются информационные блоки, уведомления, которые появляются когда пользователь совершает какие-либо важные действия. Чаще всего используется общепринятый набор уведомлений, включающий 4 вида…
Вывод подписей к изображениям организовать можно по-разному, например используя различные hover-эффекты (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.), или же просто, сделать их фиксированными, расположенными вне тела картинки, или непосредственно на изображении, в той или иной его части. В данном уроке продемонстрирую несколько простейших вариантов вывода фиксированных…
Небольшой модуль стилей CSS для создания красивых кнопок, отлично реагирующих на изменения размеров экранов пользовательских устройств. Btns.css — это очень лёгкий набор простых правил CSS, которые вы сможете использовать в своих проектах. При желании, будет очень просто изменить, настроить и расширить теми или иными свойствами, в соответствии с общим дизайнерским стилем ваших сайтов. В сжатом виде,…
Практически на всех интернет-ресурсах, будь-то простенький сайт, тяжеловесный новостной портал или персональный блог, используется заветная кнопка «Читать далее» (read more), чаще всего это главная страница с кратким анонсами записей, страницы рубрик, архивы тегов или временные архивы, там где большая часть текста постов скрыта и заменена на ссылку «Читать далее». Оформляют эту ссылку, кто во что…
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных…
Благодаря новым функциям CSS3 стало возможным отказаться от использования изображений при оформлении элементов интерфейса сайта, на смену картинкам приходит чистый код CSS. Так например, всё чаще поступают при формировании кнопок, используемых на сайте. Однажды я уже рассказывал, как пользуясь исключительно средствами CSS3, можно «нарисовать» красивую кнопку в стиле 3d. Сегодня, предлагаю очередной набор правил CSS3,…
Здравствуйте всем! Сегодня будет не полноценный урок, а всего лишь небольшая демонстрация, ещё одного варианта всплывающего модального окна, реализованного исключительно средствами CSS3, без javascript и дополнительных изображений в формировании стилей. За основу взят первый вариант: «Модальные всплывающие окна с помощью CSS3 без Javascript», проверенный и ставший довольно популярным среди пользователей, читающих мой блог. …
Форма обратной связи, или если по другому, контактная форма, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные формы, должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению. Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами…
Приобретая данный курс, вы получаете целостный продукт, в котором есть всё необходимое для изучения и работы с WordPress
