10 полезных фрагментов CSS для веб-разработчиков

CSS является основным языком, который дает веб-сайтам свой внешний вид. Хотя CSS – простой язык, и его легко выучить, в некоторых случаях его может быть сложно использовать. Бояться нечего, есть обходные пути, которые вы можете найти в Интернете, и вот только 10 удобных, которые вы можете использовать.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

  1. Вертикальное выравнивание чего-либо
    Если вы работаете с CSS, то это вызовет у вас ошибку: как выровнять текст или элемент по вертикали контейнера? Теперь, используя CSS3 Transforms, мы можем решить эту проблему более элегантно, например так:

.verticalcenter {
положение: относительное;
верх: 50%;
-webkit-transform: translateY (-50%);
-опреобразование: translateY (-50%);
transform: translateY (-50%);
}
Используя эту технику, все – от одной строки текста, серии абзацев или прямоугольника – выровняется по вертикали. Что касается поддержки браузера, CSS3 Transform работает в Chrome 4, Opera 10, Safari 3, Firefox 3 и Internet Explorer 9.
2. Растянуть элемент до полной высоты окна
В некоторых случаях может потребоваться растянуть элемент до полной высоты окна. Изменение размера базового элемента будет изменяться только до размера контейнера, поэтому для того, чтобы элемент охватывал высоту всей высоты окна, нам нужно охватить самый верхний элемент: html и body.

HTML,
тело {
высота: 100%;
}
Затем примените высоту 100% к любому элементу, например так:

div {
высота: 100%;
}
3. Применение различных стилей на основе формата файла
Иногда у вас может быть несколько ссылок, которые вы хотите, чтобы они отличались от других, чтобы было легче узнать, куда идет ссылка. Этот фрагмент ниже добавит значок перед текстом ссылки и будет использовать разные значки или изображения для разных типов источников, которые в этом примере являются внешней ссылкой.

[href^=”http://”]{
отступ справа: 20 пикселей;
фон: url (external.gif) без повтора центра справа;
}
/ * электронные письма * /[href^=”mailto:”]{
отступ справа: 20 пикселей;
background: url (email.png) без повтора по центру справа;
}

/ * pdfs * /[href$=”.pdf”]{
отступ справа: 20 пикселей;
фон: url (pdf.png) без повтора по центру справа;
}
Вот как это выглядит.

  1. Кросс-браузер изображения в градациях серого
    Оттенки серого могут придать вашему веб-сайту более глубокий оттенок, сделав его более стильным и иногда минималистичным. Здесь мы добавим фильтр серого к изображению, используя SVG. Вот что мы делаем, чтобы применить оттенки серого:

И чтобы доставить этот кросс-браузер, мы используем свойство фильтра следующим образом:

img {
фильтр: url (filters.svg # оттенки серого); / * Firefox 3.5+ * /
фильтр: серый; / * IE6-9 * /
-вебкит-фильтр: оттенки серого (1); / * Google Chrome, Safari 6+ и Opera 15+ * /
}
5. Анимация градиентного фона
Одной из самых заманчивых функций в CSS является возможность добавлять эффект анимации. Вы можете анимировать цвет фона, непрозрачность, размер, но, к сожалению, не для цвета градиента. В настоящее время вы не можете анимировать градиентный фон, однако этот фрагмент может помочь. Он перемещает фоновое положение, чтобы оно выглядело так, как будто оно анимируется.

кнопка {
background-image: линейный градиент (# 5187c4, # 1c2f45);
размер фона: авто 200%;
background-position: 0 100%;
переход: фоновая позиция 0,5 с;
}
кнопка: hover {
background-position: 0 0;
}
Вот демонстрация, чтобы показать вам, что он делает.

  1. Автоматическая ширина столбца таблицы CSS
    Таблицы являются болью, особенно когда дело доходит до регулировки ширины столбцов. Тем не менее, есть ярлык, который вы можете использовать. Добавьте пробел: nowrap в элемент td, чтобы легко исправить перенос текста.

тд {
пустое пространство: nowrap;
}

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

  1. Отображение тени только на одной или двух сторонах
    Если вы хотите иметь тени от ящиков, попробуйте этот трюк, который может дать вам тени от ячеек по обе стороны от ящика. Чтобы сделать это, сначала определите поле с определенной шириной и высотой. Добавьте тень, используя: after псевдоэлемент, и поиграйте, чтобы получить правильное расположение. Это код для создания тени только снизу:

.box-shadow {
цвет фона: # FF8020;
ширина: 160 пикселей;
высота: 90 пикселей;
margin-top: -45px;
поле слева: -80px;
положение: абсолютное;
верх: 50%;
слева: 50%;
}
.box-shadow: after {
содержание: “”;
ширина: 150 пикселей;
высота: 1 пикс;
маржинальная вершина: 88px;
поле слева: -75px;
дисплей: блок;
положение: абсолютное;
слева: 50%;
z-индекс: -1;
-webkit-box-shadow: 0px 0px 8px 2px # 000000;
-moz-box-shadow: 0px 0px 8px 2px # 000000;
тень от рамки: 0px 0px 8px 2px # 000000;
}
Это демо:

  1. Обтекание длинного текстового контекста
    Если вы когда-нибудь встретите слово, которое длиннее самого контейнера, этот трюк будет вам полезен. По умолчанию текст будет заполняться по горизонтали независимо от ширины контейнера, например:

С помощью простого кода CSS вы можете настроить текст на ширину контейнера.

до {
пустое пространство: предварительная линия;
перенос слов: брейк-слово;
}
Вот как это выглядит сейчас:

  1. Создание размытого текста
    Хотите сделать текст размытым? Что мы можем сделать, так это сделать цвет прозрачным, затем добавить текстовую тень следующим образом.

.blurry-text {
цвет: прозрачный;
тень текста: 0 0 5px rgba (0,0,0,0,5);
}
И вуаля, у тебя есть какой-то размытый текст.

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

.loading: после {
переполнение: скрытое;
дисплей: встроенный блок;
выравнивание по вертикали: снизу;
анимация: многоточие 2с бесконечное;
содержание: ” 2026″; / * код ascii для символа многоточия * /
}
@keyframes ellipsis {
от {
ширина: 2 пикселя;
}
к {
ширина: 15 пикселей;
}
}
Давайте посмотрим демо.

Поиграйте с фрагментами и поэкспериментируйте с тем, что еще можно с ними сделать.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *