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

 В этом уроке мы будем делать шестигранник, который будет иметь фоновое изображение. Для этого будем использовать средства  CSS3. С помощью трансформаций css3 мы можем поворачивать и делать различные манипуляции элементов DOM. Для этого будем использовать otate и masking. В области стилей урок может показаться немного сложным, но он объяснен иллюстрациями. Давайте приступим.

 

 

 

Демо                         Скачать исходные файлы

HTML

Этот шестиугольник может иметь два разных стиля. Это может быть текстовый контент или обычное изображение. Разметка HTML достаточно проста.

Как видим из разметки, у нас есть два блока DIV corner-1 и corner-2,  которые мы будем поворачивать на 60 градусов для получения нужной формы.

 

<div class="hex hex-3">
    <div class="inner">
            <h4>CONTACT US</h4>
            <hr />
            <p>We Open Everyday</p>
    </div>
    <a href="#"></a>
    <div class="corner-1"></div>
    <div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/2.jpg);">
    <a href="#"></a>
    <div class="corner-1"></div>
    <div class="corner-2"></div>
</div>

CSS

 

Стили CSS будут немного сложнее, чем разметка. Наш шестиугольник будет иметь шесть ребер и углы по 60 градусов. Шестиугольник будем строить с помощью  трех прямоугольников.  Как видим с картинки ниже, прямоугольники будем вращать на 60 градусов таким образом, чтобы получить шестиугольник.

 

 

Чтобы заставить фоновое изображение отображаться правильно, нужно прописать другие стили. Поскольку мы вращаем наши блоки, фоновое изображение будет также вращаться. Чтобы исправить это, используем :before, чтобы дублировать содержание, повернуть его обратно и замаскировать его overflow:hidden.

 

.hex {
    width:150px;
    height:86px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float:left;
    margin:25px 5px;
    text-align:center;
    zoom:1;
}

    .hex.hex-gap {
        margin-left: 86px;
    }

    .hex a {
        display:block;
        width: 100%;
        height:100%;
        text-indent:-9999em;
        position:absolute;
        top:0;
        left:0;
    }
    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;
        z-index:-2;
        overflow:hidden;
        backface-visibility: hidden;
    }

    .hex .corner-1 {
        z-index:-1;
        transform: rotate(60deg);
    }

    .hex .corner-2 {
        transform: rotate(-60deg);
    }

    .hex .corner-1:before,
    .hex .corner-2:before {
        width: 173px;
        height:    173px;
      content: '';
      position: absolute;
      background: inherit;
      top:0;
      left: 0;
      z-index: 1;
      background: inherit;
      background-repeat:no-repeat;
        backface-visibility: hidden;
    }            

    .hex .corner-1:before {
        transform: rotate(-60deg) translate(-87px, 0px);
      transform-origin: 0 0;
    }            

    .hex .corner-2:before {
        transform: rotate(60deg) translate(-48px, -11px);
        bottom:0;
    }        

    /* Custom styles*/
    .hex .inner {
        color:#eee;
    }

    .hex h4 {
        font-family: 'Josefin Sans', sans-serif;
        margin:0;
    }

    .hex hr {
        border:0;
        border-top:1px solid #eee;
        width:60%;
        margin:15px auto;
    }

    .hex p {
        font-size:16px;
        font-family: 'Kotta One', serif;
        width:80%;
        margin:0 auto;
    }
    .hex.hex-1 {
        background: #74cddb;
    }

    .hex.hex-2 {
        background: #f5c53c;
    }
    .hex.hex-3 {
        background: #80b971;
    }

 

Демо                         Скачать исходные файлы

 

Автор: Kevin Liew

Перевод: Дежурка

 

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

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

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

5

      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

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