10 Лучших CSS сниппетов

Не смотря на свою простоту, с помощью CSS иногда довольно-таки сложно сделать какие-то определенные задачи. В этом примере рассмотрим 10 полезных примеров решения частых проблем

1. Вертикальное выравнивание

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

Для решения этой проблемы существует вот такое решение:

.verticalcenter{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

С помощью этого примера можно выровнять строку текста, абзац или любой блок по вертикали. CSS3 Трансформации работают в Chrome4, Opera 10, Safari 3, Firefox 3, и Internet Explorer 9.

Вытягивание элемента на всю ширину окна браузера

Иногда тербуется растяжение элмента по высоте на всю высоту окна браузера.

Для этого нужно всего указать высоту для html и body равную 100%, после этого нужному нам блоку указать высоту 100%

html,
body {
  height: 100%;
}
div {
  height: 100%;
}

Различное оформление для ссылок разных типов

Иногда необходимо установить разные стили для ссылок разных типов: например для ссылки - перехода на сайт, для ссылки типа mailto, для ссылки на документ.

Для каждого вида ссылок можно указать свои стили без присваивания им отдельных классов

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
  
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

Сделать все изображения на сайте черно-белыми

Если ваш сайт подразумевает использование только черно-белых картинок, но вам не хочется обрабатывать отдельно каждое изображение - можно обойтись простым CSS свойством с использованием SVG фильтра

Чтобы данный пример был кроссбраузерным зададим ему нужные свойства:

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

Таким образом все картинки станут на сайте черно-белыми

Анимация градиента

анимации в CSS3 имеют широкие возможности, с их помощью можно анимировать все что угодно, кроме ... Градиентов

Но в данном случае можно обойтись таким хаком: Анимировать не сам градиент а его позицию

button {
  background-image: linear-gradient(#5187c4, #1c2f45);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;
} 
button:hover {
  background-position: 0 0;
}

Таким образом изменение позиции background будет выглядеть как анимация

See the Pen Gradient background Animation by Yurij Rightblog.ru (@rightblog) on CodePen.

Автоматическая ширина таблицы по контенту

Таблицы в html довольно-таки сложно поддаются кастомизации из-за повторяющихся тегов tr и td. Очень часто встречается проблема сворачивания текста

Чтобы избавится от этой проблемы - можно задать для тега td свойство: white-space: nowrap;

td {
    white-space: nowrap;
}

See the Pen CSS Table Column Autowidth by Yurij Rightblog.ru (@rightblog) on CodePen.

Тень box-shadow только с одной стороны

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

Для решения данной проблемы нужно будет обратится к псевдо элементу after со следующими свойствами

.box-shadow {
    background-color:#FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px#000000;
       -moz-box-shadow: 0px 0px 8px 2px#000000;
            box-shadow: 0px 0px 8px 2px#000000;
}

See the Pen Box Shadow on One Side by Yurij Rightblog.ru (@rightblog) on CodePen.

Обертка текста в блок меньшего по ширине чем текст

Если мы имеем блок шириной 200px и нам нужно вписать туда длинный текст, то текст вылезет вправо за пределы блока (особенно это касается ссылок, т.к. они не имеют пробелов)

div {
  white-space: pre-line;
  word-wrap: break-word;
}

Таким образом мы принудительно переносим текст на новую строку не только по пробелу

Blur для текста

Для эффекта размытия в css существует фильтр blur но он не применим для текста. Эффект размытия текста можно сделать с помощью text-shadow. В тоже время тексту нужно задать полную прозрачность

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Анимированное многоточие с помощтю css3 анимации

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

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

See the Pen Animating Ellipsis Using CSS by Yurij Rightblog.ru (@rightblog) on CodePen.