html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создание эффекта глянцевой фотографии при помощи CSS3

Все чаще и чаще мы создаем эффекты, которые обычно создавались в графическом программном обеспечении, таком как Adobe Photoshop, используя только CSS. И последнее время новые эффекты становятся достижимы с помощью CSS3. В этом уроке мы рассмотрим, как воссоздать распространенный эффект глянцевого изображения, используя некоторые градиенты CSS3.

 


Демо работы – Скачать

Структура HTML

В этом уроке мы будем использовать самые базовые настройки HTML5. Мы хотим добиться этого эффекта наиболее простым путем, используя в основном CSS. Так что наилучшая практика – создавать HTML настолько чистым и внятным, насколько это возможно.

Кроме структуры страницы и оболочки у нас изначально есть только один элемент DIVкласса photo, в который мы вложили тэг IMG.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Glossy Gradient Effect</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <!--[if IE]> 
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <div id="wrapper">

        <div class="photo">
            <img src="images/bag.jpg" alt="Bag">
        </div>    
    </div> <!-- END Wrapper -->
  </body>
  </html>

Вот и все с HTML. Теперь перейдем к CSS.

Создание стилей CSS

Общее

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

body {

    background: #EDEFF4;

}

#wrapper {

    margin: 30px auto;

    width: 600px;
}

Создание стилей для блока, содержащего фотографию

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

.photo {

    margin: 30px auto;

    height: 401px;

    width: 602px;

    position: relative;

    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);

    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);

    -o-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);

    box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);

}

.photo img {

    border: 1px solid rgba(255, 255, 255, .1);
}

 

Теперь изображение хорошо выглядит. Не хватает лишь одной вещи – самого глянцевого эффекта. Это последний шаг в этом уроке.

Создание стилей для псевдоэлемента фотографии :before

Это наиболее важный шаг всего эффекта. Мы собираемся создать стили пседоэлемента :before. Таким образом мы можем добавить стиль глянцевого вида поверх фото без необходимости добавления дополнительной разметки в HTML. Так более наглядно. Здесь мы устанавливаем абсолютное значение позиционирования этого элемента над фото, вот почему важно установить position: relative; в предыдущем шаге. И мы применяем некоторые CSS3 градиенты к фону этого нового псевдоэлемента.

.photo:before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));

    background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));

    background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

Все эти цифры могут выглядеть пугающе для начинающих. Но в сущности это значение RGBa, т.е., значения цвета, к которым мы можем применить прозрачность, внутри «остановок» градиента. Итак, опишем, что происходит, У нас есть две половины градиента, идущие от левого верхнего в правый нижний угол. Первая половина идет от полностью прозрачного до 50% прозрачного белого. Вторая половина идет в обратном направлении к полностью прозрачному и остается такой. Это то, что создает диагональную линию.

Демо – Скачать

Заключение

Конечный результат выложен на Github, так что не стесняйтесь заходить и развивать его! Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Harry Atkins
Перевод — Дежурка

Смотрите также:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

14

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции