<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Эффект серого оттенка на CSS.

Эффект серого оттенка на CSS.

Всем привет! В этой статье я расскажу, как сделать эффект серого оттенка на CSS.

Чтобы долго не томить, сразу привожу вам HTML и CSS код. Скопируйте его и посмотрите на результат.

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Эффект серого оттенка</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="profile">
   <img src="images/profile.png" alt="Эффект серого оттенка">
  </div>
</body>
</html>

CSS

.profile img {
  border-radius: 50%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.5s ease;
  -webkit-transition: filter 0.5s ease;
}

.profile img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

Мы создали div с классом profile не просто так, так как это очень хорошее применение для данного эффекта. Дальше, в css, мы применили свойство filter и его функцию grayscale, которая как раз и делает серый оттенок. Чтобы все это было плавно, мы также использовали свойство transition.

Вот так просто можно сделать очень красивый и интересный эффект серого оттенка.

Спасибо за внимание и до следующей статьи!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

maxsaenko maxsaenko 17.07.2014 01:42:49

Интересный релиз... а если сделать через так: box-shadow: 2px 2px 2px 2px #333333; -webkit-box-shadow: 2px 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px 2px #333333; В принципе получим тоже самое... или я ошибаюсь?!

Ответить

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