Jump to content
  • 0

Как правильно сверстать этот блок?


hetsketch
 Share

Question

В общем, есть такой блок(см. прикрепленные файлы). Так же есть спрайт с иконками для каждого пункта. Я написал такой код для каждого айтема. И у меня возник такой вопрос: как лучше разместить иконки в айтеме? Читал, что нужно делать в CSS через background, но тогда придется дублировать код и нужно будет давать уникальные имена айтемам. Или же всё таки в этом случае использовать тэг img? Хотелось бы услышать мнение бывалого специалиста)

 p.s. для разметки использовалась сетка bootstrap

<div class="row">
  <div class="services">
    <div class="col-md-4">
      <div class="service-item">
        <h3>Photography</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, itaque.</p>
      </div>
    </div>
    ...
  </div>
</div>

 

MoGo.jpg

Edited by hetsketch
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Я для подобных задач использую compass, в коде это выглядит довольно лаконично.

/* это общии стили для позиционирования всех картинок */
&::before {
  content: "";
  width: 45px;
  height: 45px;
  position: absolute;
  top: 5px;
  left: 5px;
}

/* а это для позиционирования каждой отдельной картинки */ 
@each $i in photo, html, css {
  &--#{$i}::before {
  background: sprite($site-sprite, service_#{$i});
  }
}

Тут фишка в том что нужно добавить класс каждому элементу, и соответствующее название для картинки. В данном случае у первого элемента будет название service-item--photo, а у картинкам service_ photo.png .

ЗЫ Не всем понравится подобное решение, но оно довольно гибкое, картинки в проекте можно менять вообще не трогая код.

Можно обойтись и без дополнительных классов, только имена картинок будут pictname_1.png, pictname_2.png и т.д.

$i: 6;
@while $i > 0 {
  &:nth-child(#{$i}) { 
	background: sprite($site-sprite, pictname_#{$i});
  }
  $i: $i - 1;
}

Без компаса , с уже готовым спрайтом придётся свой миксин использовать . Раньше я так и делал. Кода в этом случае будет ещё меньше. 

Link to comment
Share on other sites

  • 0

@andrey7287, да уж... Это пока сложно для моего понимания) Как я понял код написан на SCSS, сейчас пытаюсь в нем разобраться. Попробую сделать без компаса пока, правда не очень хорошо понимаю, как это всё реализовать. Ну а вообще подход делать через background правильный? Или это не так принципиально?

Link to comment
Share on other sites

  • 0

На самом деле определить, что использовать - img или background - можно, задав себе вопрос, чем является эта картинка. Если это часть контента - то img, если она нужна для визуального оформления - то background. 

Link to comment
Share on other sites

  • 0

Короче проблему решил так: создал свой миксин, который из спрайта вытягивает иконку по номеру. И в цикле каждому nth-child(i) задавал i-ю иконку с помощью миксина.

@mixin add-icon($sprite-url, $image-width, $n, $offset-x: 0)
  background-image: url($sprite-url)
  @if $n == 1
    background-position: 0 0
  @else
    background-position: ($n - 1)*($image-width+$offset-x)*(-1) 0px
@for $i from 1 through 6
    & :nth-child(#{$i})
      .service-item
       &:before
         @include add-icon("../img/icons.png", 32px, $i, 10px)

Всем спасибо за ответы

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy