<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS эффекты при наведении на картинку

CSS эффекты при наведении на картинку

CSS библиотека imagehover – это коллекция различных CSS эффектов при наведении на картинку (hover effects), которые можно применять как к одиночным картинкам, так и к галереям.

Ссылка на сайт: http://imagehover.io/

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

Демонстрация примера

Что находится внутри CSS файла библиотеки? В бесплатной версии вы найдете 44 эффекта, каждый эффект имеет свой класс, в котором прописаны соответствующие свойства и их значения. В платной версии находятся стили 216 эффектов, но вам с головой хватит и 44 эффекта.

4 шага для запуска hover эффекта:

1) Скачать и подключить библиотеку

Скачайте архив и вытащите оттуда всего один CSS файл imagehover.min (сжатая версия) и подключите к вашему проекту.

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

2) Выберите эффект

На главной странице imagehover.io, выберите нужный эффект и запомните название его класса, например мне понравился класс imghvr-slide-up.

3) Создайте галерею на HTML

Создадим ряд row с тремя колонками column, в каждую из которых поместим превью картинку, текст-описание и ссылку. Вставьте название класса imghvr-slide-up в тег figure. Замените цвет подложки у тега figcaption, на более гармонирующий с дизайном сайта, по умолчанию фон под текстом – синий. У тега a, вместо решетки поставьте URL.

<div class="row">
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="cat.jpg" alt="cat">
    <figcaption style="background-color:#000;">
      <h2>Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="dog.jpg" alt="dog">
    <figcaption style="background-color:#000;">
      <h2> Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
  <div class="column">
    <figure class="imghvr-slide-up">
    <img src="zebra.jpg" alt="zebra">
    <figcaption style="background-color:#000;">
      <h2> Наведение на картинку</h2>
      <p>imghvr-slide-up</p>
    </figcaption>
    <a href="#"></a>
    </figure>
  </div>
</div>

4) CSS стили

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

<head>
// подключить ниже файла imagehover.min.css
<link rel="stylesheet" href="css/style.css">
</head>

Для того, чтобы поставить три колонки в ряд, применим технологию flexbox, которая принудительно удерживает блоки в ряду, не давая им встать друг под другом.

.row {
    display: flex;
    margin: 20px;
}

Поделим ряд на три одинаковых по ширине колонки и поставим по центру, контент (картинки) внутри блоков.

.column {
    flex: 33.33%;
    padding: 5px;
    text-align: center;
}

При изменении ширины экрана, картинки будут масштабироваться, не ломая созданную структуру.

img {
    width: 100%;
    border: 1px solid #ddd; /* серая рамка */
}

Ошибка в документации

Обратите внимание, что на сайте библиотеки в документации раздела Background Color, есть ошибка. Правильно будет поменять цвет фона с дефолтного на ваш, добавив строчку кода к тегу figcaption, вместо figure.

style="background-color: #код_вашего_цвета;
CSS эффекты при наведении на картинку.

Если вы все ещё размышляете о создании портфолио с вашими работами по веб-разработке, обратите внимание на видео-курс "О создании лендинга под ключ".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.