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

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

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

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

Этот...

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

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

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

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

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

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

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

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

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

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

Если вам хотелось иметь под рукой ико...

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

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

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

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

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

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

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

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

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

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

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

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

Концепт

Использование свойства b...

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

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

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

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

Добиться вывода текст...

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

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

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