Обновить
142.54

CSS *

Каскадные таблицы стилей

Сначала показывать
Период
Уровень сложности

Использование CSS Flexbox для позиционирования блоков на странице

Время на прочтение2 мин
Охват и читатели14K

Задача


В блоке на странице требуется разместить два вложенных блока таким образом, чтобы один блок имел максимальную высоту, а второй — занимал все оставшееся в родительском блоке свободное место по высоте. Причем, в случае, если контент не помещается в блок, добавлять ему скролл.

image

Читать дальше →

Альтернатива для .clearfix

Время на прочтение4 мин
Охват и читатели35K

.clearfix — который так полюбился большинству верстальщиков, его использование мотивируется простотой и отсутствием других способов работы с float блоками. Хочу представить вашему вниманию другой способ — не менее действенный и не более сложный. Хотя по привычке многие скажут, что .clearfix влепил — и все работает, но его использование не всегда оправдано, а иногда и невозможно, но каким-то образом нужно налаживать сопряжение блоков, что иногда вызывает трудности и увеличивает продолжительность верстки, а чаще всего отладки или добавления новых элементов в окружение.


Читать дальше →

Java библиотека для эффективной передачи CSS и JavaScript

Время на прочтение8 мин
Охват и читатели9.1K
В данной статье описывается способ передачи JavaScript и CSS методом соединения ресурсов, с последующими их минимизацией и сжатием, при помощи небольшой Java библиотеки «Combinatorius», что позволяет ускорить и упростить передачу контента.

Демо: combinatorius.dkiriusin.com
GitHub: github.com/deniskiriusin/combinatorius

Основные возможности библиотеки


  1. Соединение JavaScript и CSS в один JavaScript и CSS ресурс соответственно для сокращения количества HTTP запросов.
  2. Локальное кэширование сгенерированных данных для улучшения времени отклика.
  3. Правильные Expires и Cache-Control HTTP заголовки для помощи браузеру с условными запросами.
  4. Поддержка ETag для определения соответствия между кэшем браузера с данными на сервере.
  5. Сжатие методом gzip для уменьшения размера HTTP ответа.
  6. Поддержка YUI Compressor.
  7. Поддержка версий передаваемых ресурсов (fingerprinting & static resources versioning).
  8. Поддержка CSS тем через параметры URL или Cookies.
  9. Простая конфигурация.
Читать дальше →

Web. История одной технологии

Время на прочтение6 мин
Охват и читатели31K
Когда-то давно, когда мамонты ещё были живы, а огонь был главным технологическим достижением человечества, наши предки оставляли зарисовки на земле, чтобы сообщить другим племенам, кто тут хозяйничает. Именно так зарождались первые веб-сайты.
Об истории одного из наших любимых в GeekBrains направлений мы и поговорим.



Читать дальше →

Сравнение css-фреймворков/библиотек на живом примере. Часть 1

Время на прочтение5 мин
Охват и читатели37K
сравнение css-фреймворков на примере

Пролог


В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

В вводной статье Вы узнаете о фреймворках и библиотеках и об их различиях. Расскажу, на какие типы они делятся. Укажу планируемый список готовых решений для анализа.

Читать дальше →

Адаптивное видео как фон шапки сайта

Время на прочтение3 мин
Охват и читатели41K
Недавно столкнулся с интересной задачей: в шапку сайта установить видео в качестве фона. Шапка всегда занимает первый экран и установлена по принципу background-position: 50% 0. Суть в том, что на планшете мы видим видео полностью, а на телефоне оно обрезается по краям и снизу остается только центральная часть.


Читать дальше →

Telegram-like анимированный placeholder для HTML-инпутов

Время на прочтение2 мин
Охват и читатели12K
В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.

Как-то раз я заметил интересную анимацию placeholder'a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.
Читать дальше →

BEMIT: Следующий шаг в развитии BEM по версии Гарри Робертса

Время на прочтение5 мин
Охват и читатели7.4K
Все, кто следил за мной или моей работой на протяжении какого-либо времени, бесспорно знают, что я огромный фанат соглашения о наименованиях БЭМ. То, о чем я расскажу в этой статье, является не альтернативным или другим соглашением о наименованиях БЭМ, а дополнением к нему: небольшими добавками, которые поднимут БЭМ на ступеньку выше. Этот расширенный синтаксис БЭМ окрестили BEMIT, так как он включает некоторые парадигмы и шаблоны из (еще неопубликованной) архитектуры CSS в виде перевернутого треугольника (ITCSS). BEM + ITCSS = BEMIT.

Вспомним, что такое БЭМ – он работает за счет разбивки всех классов в базе кода на три группы:
Читать дальше →

Знакомство с архитектурой веб-интерфейсов

Время на прочтение8 мин
Охват и читатели9.5K
Добрый день, коллеги.

Среди новинок издательства «O'Reilly», готовящихся к выходу, наше внимание привлекла следующая книга Мики Годболта, которая, несмотря на небольшой объем, может открыть новую страницу в истории веб-разработки.

UPDATE под катом

Читать дальше →

Разработка CSS в GitHub

Время на прочтение7 мин
Охват и читатели11K
От переводчика:
Статья написана от лица Mark Otto, одного из ведущих мейнтейнеров популярного front-end фреймворка Twitter Bootstrap, ныне разработчика CSS в GitHub
.

Я всегда был заинтересован в процессе разработки разных приложений, особенно их стайлгайдов и их подходу к разработке CSS. Учитывая мою склонность к иногда бессмысленным деталям в разработке CSS, я решил немного написать о процессе разработки CSS в GitHub.

Краткая характеристика


Обзор текущего состояния CSS кода показывает:

  • Использование SCSS в качестве препроцессора;
  • У нас более 100 отдельных исходных таблиц стилей, которые мы компилируем перед выпуском в продакшен;
  • Скомпилированный CSS разделен на 2 файла, чтобы избежать лимита на количество селекторов в версиях IE<10;
  • Два этих файла имеют общий вес в 90KB;
  • Мы не придерживаемся какого-то определенного подхода в архитектуре CSS;
  • Мы используем пиксели в качестве единицы измерения, хотя иногда мы также пользуемся em;
  • Мы используем Normalize.css и смешение наших собственных сбрасывающих стилей.

Читать дальше →

ТТТ: jQuery-плагин анимации текста от Contorra

Время на прочтение1 мин
Охват и читатели9K
Рабочее название — TTT, или Тасующаяся Трансформация Текста. 
Разработан по спецзаказу digital-агенства Contorra.
Этот плагин позволяет сменить один текст на другой посредством событий «клика» или «наведения» на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст.

Демо
Читать дальше →

CSS GuideLines, часть 2. Комментирование кода

Время на прочтение3 мин
Охват и читатели22K


В каждом проекте есть определенные нюансы и тонкости, которые помнят далеко не все, и худшее, что может случиться с разработчиком — это работа с кодом, который писал не он. Даже запоминание тонкостей своего собственного кода является возможным только до определенной степени, не говоря уже о чужом коде. Именно поэтому CSS надо комментировать.
Читать дальше →

Скидка на книгу «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств»

Время на прочтение1 мин
Охват и читатели19K
Налетай! На днях у нас вышла книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств». Для наших преданных поклонников с Хабры мы предлагаем скидку 25% на бумажную и цифровую версию книги. Акция действует до конца сентября! Чтобы получить скидку, при оформлении заказа введите промо-код f1f30831b892c163f476c.


Читать дальше →

Ближайшие события

CSS Sticky Footer — новая версия

Время на прочтение1 мин
Охват и читатели4.3K
Обновился код CSS Sticky Footer (мой перевод старой версии).

Автор отказался от clearfix-хака в пользу простого overflow: auto и двух селекторов для Оперы и IE8.

По его заверениям, футер надежно прилипает более чем в 50 браузерах.

Как и раньше, решение не подходит для тех, кому футер хочется сделать резиновым.

IE, Quirks mode и ошибки при отображении полей ввода в зависимости от того, вводятся латинские или кириллические символы

Время на прочтение5 мин
Охват и читатели3.3K
Добрый день всем

Старичок IE не перестает нас удивлять и подкидывать все новые проблемы, в самых неожиданных местах.

При работе над проектом столкнулся с неожиданным поведением полей ввода input и textarea при работе IE в режиме quirks mode. И все бы ничего, в общем-то — кого сегодня удивишь странностями и багами IE. Интересное заключается в том, при каких условиях проявляется проблема. В этот раз это происходит в зависимости от того, какие символы вводятся в поле ввода — кириллические или латинские. Кириллица вызывает проявляение проблемы, латинница вводится нормально и проблема не проявляется. Это показалось мне достаточно интересным и я решил поделиться наблюдением собщественностью.

мне интересно, расскажите

Правильная прозрачность

Время на прочтение2 мин
Охват и читатели87K
dfsdfs

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.
Читать дальше

Верстка с закрытыми глазами

Время на прочтение3 мин
Охват и читатели3K
Заказчик дает задание на верстку, и его всегда интересуют 2 основных вопроса: стоимость и время. Начинающий верстальщик не может сам оценить работу и, как правило, смотрит сколько за нее просят другие. Опытный же верстальщик знает себе цену и оценивает верстку исходя из затраченного времени.
Но как определить точное время на разработку, ведь клиент хочет знать его до того, как выберет исполнителя. От чего зависит время верстки?

Читать дальше →

Сдвиг блока

Время на прочтение1 мин
Охват и читатели3.6K
Здравствуйте.
Есть идея к добавлению в спецификацию CSS.

Свойство skew сдвигает один указанный угол или сторону блока по горизонтали или вертикали на установленное смещение. Сдвиг стороны сдвигает оба угла этой стороны, образуя параллелограмм. Текст и внутренние элементы сохраняют своё положения (в отличии от свойства rotation) и не искажаются соответственно преобразованиям блока.
Читать дальше →

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 3

Уровень сложностиСложный
Время на прочтение13 мин
Охват и читатели8.6K

Последняя часть по созданию своего starter-kit.

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

Читать далее

Snake, альтернатива Slick slider на чистом JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.8K

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции.

Читать далее

Вклад авторов