Посты из категории "CSS трюки"

user gravatar

Умное позиционирование блоков в CSS с помощью calc()

Умное позиционирование блоков в CSS с помощью calc()

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

.block { position: absolute; top: 100%; }

Этот код решает проблему, но проблема возникает когда вам нужно сделать отступ…

user gravatar

CSS Sans - шрифт на чистом CSS

CSS Sans - шрифт на чистом CSS

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

И тут на помощь приходит [CSS SANS][1]. Создатели этого шрифта подготовили буквы начиная с…

user gravatar

Как сжать CSS и Javascript файлы используя UglifyJS

Как сжать CSS и Javascript файлы используя UglifyJS

UglifyJS - это инструмент для парсинга, компрессинга JavaScript. Его можно использовать для объединения и сжатия нескольких JavaScript файлов в один. Это очень полезно если вам нужно снизить нагрузку на свой сайт/блог. К тому же есть ещё один момент - СЕО оптимизация. Далеко не секрет,…

user gravatar

Сборка из 74 веб шрифтов с иконками платежных систем и сервисов

Сборка из 74 веб шрифтов с иконками платежных систем и сервисов

PaymentFont - веб-шрифты, подобные таким проектам как Font Awesome и Glyphicons. Только в отличии от них, PaymentFont содержит только иконки популярных платежных систем и сервисов.

Если вам хотелось иметь под рукой иконки таких платежных систем как Paypal, MasterCard,…

user gravatar

Lining.js - библиотека для контроля каждой строки через CSS

Lining.js - библиотека для контроля каждой строки через CSS

Конечно же в CSS уже имеется псевдо селектор ::first-line. Но нет таких псевдо селекторов как ::nth-line() или ::nth-last-line или даже ::last-line. И тут на помощь приходит [Lining.js][1] с помощью которого вы сможет получить доступ к каждой строке.

Он позволяет вам совершать вот…

user gravatar

12 полезных CSS инструментов и генераторов для разработчиков

12 полезных CSS инструментов и генераторов для разработчиков

Каждый веб-дизайнер и разработчик старается сэкономить немного времени при разработке сайтов. Благодаря этому они могут улучшить продуктивность и выполнить большую часть работы за меньший срок. Здесь вы найдете коллекцию полезных CSS инструментов, которые помогут дизайнерам и разработчикам сэкономить драгоценное время.

CSS инструменты и…

user gravatar

Waves - библиотека для добавления эффекта волн как в Material Design

Waves - библиотека для добавления эффекта волн как в Material Design

[Waves][1] - эффект при клике, появился он благодаря вдохновению от нового дизайна Google - Material Design. Пользоваться скриптом очень легко. Просто скачайте библиотеку с гитхаба. После этого вам остаётся только подключить два файла: waves.min.css и waves.min.js.

Waves поддерживается…

user gravatar

Адаптивная фоновая картинка средствами CSS

Адаптивная фоновая картинка средствами CSS

В этом туториале, мы покажем вам простейшую технику, которая позволит растянуть фоновую картинку во всю ширину и высоту браузера. Для этого мы будем использовать CSS-свойство background-size и ни строчки JavaScript.

Концепт Использование свойства backgroud-size для растяжения картинки

CSS-свойство background-size имеет значение cover. Значение cover говорит браузеру автоматически и…

user gravatar

Вертикальный текст средствами CSS3

Многие HTML элементы с самого начала задумывались, чтобы они были горизонтальными. Но иногда бывают ситуации, когда хочется вывести [текст вертикально] [1].

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

CSS код вертикального текста:

Добиться вывода текста как задумывалось…

user gravatar

Применение Media Queries в JavaScript

Применение Media Queries в JavaScript

Адаптивный дизайн - это тренд в веб дизайне. Если вы один из тех, кто применяет его, то вы используете множество [медиа запросов] [1] (Media Queries). Медиа запросы - это CSS функция, которая позволяет вам задать определенные стили, если страница удовлетворяет определенным условиям. В этой статье я расскажу как запускать определенный…