CSS. Tricks & Tips

Веб-разработчикам и верстальщикам достаточно часто приходится сталкиваться с необходимостью сверстать какие-то необычные или нестандартные элементы. Иногда решение получается находить самим, чаще приходится прибегать к помощи коллег или гугла. Из-за редкости использования этих "трюков" они не запоминаются надолго, и это приводит к необходимости искать решение снова. Поэтому я решила собрать в этой статье самые необходимые из них (большинство – с использованием метаязыка SCSS).

Многоточие в конце строки


Простое и элегантное решение этой достаточно часто встречающейся проблемы представлено всего в нескольких строках.

<div class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque vel arcu id dapibus.</div>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}

Что же мы сделали, чтобы многоточие в конце предложения заработало? Назначили ширину (width), при превышении которой текст обрезается (overflow: hidden), запретили перенос строки (свойство white-space) и в качестве свойства, отвечающего за поведение текста при выходе за предела элемента-контейнера (text-overflow), назначили многоточие (ellipsis).

Выравнивание по вертикали

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

<div class="col col-md-2"><div class="modal-next">Next</div></div>
@mixin vertical-align {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.modal-prev, .modal-next {
  @include vertical-align;  
}

Добились желаемого результата всего лишь относительным позиционирование элемента на 50% по вертикали.

Центрирование картинки в контейнере с фиксированными размерами

А что же делать в случае, когда картинку надо поместить внутрь контейнера с определённой высотой и шириной? Есть ли способ подгонять её размеры под размеры контейнера? Конечно же, есть!

<div class="img-bordered">
  <img src="image1.jpg">
</div>
@mixin container($img, $height, $width: $height) {
  background-color: #f1f1f1;
  display: table-cell;
  height: $height;
  text-align: center;
  vertical-align: middle;
  width: $width;
  #{$img} {
    max-height: $height - 10;
    max-width: $width - 10;
    vertical-align: middle;
  }
}

.img-bordered {
  @include container('img', 185px);   
}
.img-bordered {
  background-color: #f1f1f1;
  display: table-cell;
  height: 185px;
  text-align: center;
  vertical-align: middle;
  width: 185px;
}

.img-bordered img {
  max-height: 175px;
  max-width: 175px;
  vertical-align: middle;
}

Здесь, во-первых, мы задаём свойства контейнера (цвет фона; высота; ширина, по умолчанию равная высоте), делаем выравнивание по центру (свойства text-align, vertical-align) и табличное отображение (display: table-cell). Во-вторых, свойства изображения (высота и ширина на 10 пикселей меньше, чем у контейнера, и выравнивание по вертикали (vertical-align: middle). Такую конструкцию с использованием mixin можно с лёгкостью использовать для различных ситуаций:

@include container('img', 100px , 87px);  
@include container('.main-image', 200px);

Кроссбразуерная градиентная заливка фона

У свойства background есть значение для градиентной заливки linear-gradient, но далеко не все браузеры его "понимают". Напишем небольшой mixin, позволяющий этому свойству работать во всех современных браузерах:

<div class="padination">Previous</a>
@mixin gradient-background($color1, $color2) {
  background: -moz-linear-gradient($color1, $color2);
  background: -ms-linear-gradient($color1, $color2);
  background: -o-linear-gradient($color1, $color2);
  background: -webkit-gradient($color1, $color2);
  background: -webkit-linear-gradient($color1, $color2);
  background: linear-gradient($color1, $color2);
}

.pagination {
  @include gradient-background(white, #eee); 
}

"Пузырек" с текстом

Не знаю, как лучше назвать этот элемент, но он хорошо знаком всем любителям комиксов. И легко реализуем с помощью css-селекторов :before/:after и свойства border.

<div class="text text-arrow-left">              
  ...  
</div>

<div class="text text-arrow-right">             
  ...  
</div>
.text {
  background: white;
  position: relative;
}
.text:after {
  border: 9px solid;
  content: '';
  height: 0;
  position: absolute;
  width: 0;
}
.text-arrow-right:after {
  border-left-color: white; 
  left: 100%;
  margin-top: -9px;
  top: 35px;
}
.text-arrow-left:after {
  border-right-color: white; 
  margin-top: -9px;
  right: 100%;
  top: 35px;
}

Последние твиты

Контакты