10 простых и полезных CSS сниппетов

10 простых и полезных CSS сниппетов

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

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

1. Вертикальное выравнивание чего угодно

Если вы работаете с CSS, то не раз задавались вопросом как выровнять текст или любой другой элемент вертикально внутри блока контейнера? Теперь, с использованием CSS3 трансформаций, можно решить эту задачу весьма элегантно.

.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.

2. Растянуть элемент на всю высоту окна. Элемент на 100% высоты окна.

В некоторых случаях, вам может понадобится растянуть элемент по вертикали на всю высоту окна. Обычное изменение размера элемента — даст ему максимум высоту контейнера в котором он находится. Чтобы задать блоку высоту в 100% от всего окна, необходимо убедится что высота самых первых контейнеров html и body равна 100%, то есть высоте окна.

html,
body {
  height: 100%;
}

Теперь применяем 100% высоту к нужному нам блоку, вот так:

div {
  height: 100%;
}

3. Разное оформление для разных ссылок — на файлы, почту, или разные типы файлов

Иногда у вас есть несколько ссылок, которые вы хотите оформить непохожими на другие ссылки. Чтобы выизуально было лече их различать, какая ссылка ведет на внешний сайт, какая откроет email для отправки письма, а какая используется для скачивания файлов. Этот сниппет добавит иконку перед текстом ссылки, и иконка будет разная, в завсимости от того н что ссылается ссылка (на сайт, почту или файл).

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;
}

Вот как это будет выглядеть:

See the Pen Links Icons — different styles for links by Yurij (@rightblog) on CodePen.18493

4. Сделать изображения черно-белыми

Обесцвечивание изображений в черно-белые цвета может помочь сделать ваш сайт более стильным и материалистичным. Это можно сделать применив черно-белый фильтр используя SVG. Вот что мы сделаем чтобы применить черно-белый тон:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

Чтобы сделать это решение кросс-браузерным, добавим CSS свойство filter :

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

5. Градиентный фон и его анимация

Одна из наиболее привлекательных возможностей в CSS это возможность анимации. Можно анимировать цвет фона, прозрачность, размер, но не градиентную заливку. Несмотря что напряму не поулучится задать анимацию градиенту, вам может помочь этот сниппет. Он двигает позицию фона, таким образом что жто будет выглядеть как анимация.

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;
}

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

6. Автоматическая ширина колонок в таблице с помощью CSS

Таблицы это головная боль, особенно когда это касается ширины колонок. Однако, есть решение которое нам поможет. Добавив white-space: nowrap для каждой td ячейки мы легко поправим то как таблица оборачивает текст внутри .

td {
    white-space: nowrap;
}

Посмотрите демо и сравните результат.

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

7. 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) on CodePen.18493

8. Обертка для блока с длинным текстовым контентом

Чтобы понять, зачем это нужно лучше срау посмотреть на пример. Допустим у нс есть кнтейнер, шириной в 200px. И в нем кроме обычных слов есть длинная ссылка на сайт. Наверняка вы знаете что длинные слова или в данном случае ссылка — не будут разбиваться на переносы. Таким образом контент вылезет за пределы блока.

8. Обертка для блока с длинным текстовым контентом

Исправить этот баг нам поможет простой CSS сниппет, который подгонит текст под размеры контейнера.

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

Вот как теперь будет выглядеть данный текст в контейнере:

8. Обертка для блока с длинным текстовым контентом

9. Сделать «размытый» текст

Хотиете добавить эффект размытия к тексту? Это можно достичь сделав текст прозрачным, и добавив к нему CSS свойство text-shadow вот так:

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

«Размытый» текст готов!

See the Pen Blurry Text by Yurij Rightblog.ru (@rightblog) on CodePen.18493

10. Анимация для многоточия, используя только CSS анимацию

Этот пример поможет сделать анимацию с многоточием, часто используется когда надо отобразить состояние загрузки или ожидания. Теперь вы сможете сделать это на CSS, не используя гиф изобрадения.

.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.18493

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

  • Anton

    Двигать по странице элемент с относительным позиционированием? Что, правда?

    • Если нужно делать без флексов, то да. Правда.
      И все зависит о конкретной задачи. Здесь перечислены способы, которыми можно достичь нужный эффект.

      • Anton

        А потом обрести себе проблемы? Ладно, двигать элемент с абсолютным позиционированием. Но с относительным..

        • Про какой именно пункт идет речь?

          • Anton

            Про 1. Элемент-то выровняется по центру, но только визуально, но в основном потоке документа он останется. Там, где он находился, будет пустое место, и браузер будет считать, что элемент до сих пор там, что в большинстве случаев принесет неприятности при дальнейшей верстке. .

          • Вообще да. Там лучше позиционировать его абсолютно и уже потом двигать.