Cтатьи по тегу «CSS»

Перевод статьи Best Practice for Creating Custom Elements с сайта www.broken-links.com, c разрешения автора — Питера Гастона.

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

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

Перевод статьи Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36 с сайта hacks.mozilla.org, автор — Брайан Гринстед.

На канале Версии для разработчиков только что появился Firefox 36, поэтому давайте взглянем на самые важные изменения в Инструментах разработчика, включенные в этот релиз. Мы также рассмотрим некоторые отличия от Firefox 35, поскольку он был издан незадолго до первого анонса Версии для разработчиков. Тут есть о чем поговорить, поэтому давайте начнем.

Перевод статьи Breaking up with Sass: it’s not you, it’s me с сайта benfrain.com, автор — Бен Фрейн.

В данный момент мой процесс работы с CSS налажен практически идеально. Я пишу на Sass, компилирую код с помощью Libsass и добавляю браузерные префиксы с помощью PostCSS/Autoprefixer через Gulp/Grunt. Так зачем же мне рушить всё это?

Меньше года назад мой интерес привлек пост Николаса Галлахера. В нем Николас описывал, как он/они (команда Twitter) использовали JS-инструмент для постобработки CSS.

Перевод статьи Using AngularJS for Data Visualisations с сайта css-tricks.com, автор — Ник Мортон.

Перед вами гостевой пост от Ника Мортона. Должен сказать, что я весьма заинтригован этой идеей. Знаю, что я люблю работать с HTML, SVG и CSS, поэтому, когда Ник поделился со мной мыслью, что мы можем использовать это для создания структуры, и использовать данные непосредственно для стилизации графиков, я заинтересовался. Кроме того, понимание, что благодаря использованию Angular график может автоматически изменяться при изменении данных… это чертовски круто.

Как только я попробовал использовать AngularJS, меня осенило, что его способность брать данные и использовать их прямо в разметке может позволить создать очень быстрый и простой способ для визуализации данных.

В этом уроке я расскажу о создании трех различных видов графиков с помощью встроенных CSS и SVG.

Перевод статьи Four More Ways To Hide & Show Elements with HTML and CSS с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

В первых двух статьях этого цикла я представил концепцию и код для собственного аудиоплеера. Прототип, который сконструирован к этому моменту – «сырой», без какого-либо оформления: HTML5 и JavaScript был написан на скорую руку, чтобы убедиться, что базовая концепция работает. В этой статье я сосредоточусь на улучшении внешнего вида плеера и добавлении микроданных, прежде чем вводить дополнительные функции в четвёртой статье.

Перевод статьи Exploring object-fit с сайта hacks.mozilla.org (лицензия СС3.0), автор — Крис Миллс.

При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?

Если разрешить соотношению сторон заполнять все пространство элемента-контейнера, то в большинстве случае это будет выглядеть ужасно. А кадрировать и менять размеры динамически «на лету» может оказаться не в ваших силах. (Допустим, если вы работаете с CMS и имеете права только для редактирования содержимого страницы.)

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера.

Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом:

1. Поместите все SVG-иконки в одну папку
2. Запустите Grunticon в этой папке, и он подготовит всё, что необходимо
3. Поместите в <head> крохотный скрипт
4. И используйте HTML в формате <div class="icon-image"></div> там, где вам понадобится использовать иконки
5. Наслаждайтесь!

Перевод статьи Fun with line-height! с сайта css-tricks.com, c разрешения автора — Криса Койера.

Свойство line-height в CSS управляет расстоянием между строками текста. Его часто устанавливают в безразмерное значение (напр. line-height: 1.4;), чтобы оно было пропорционально размеру шрифта. Это свойство крайне необходимо для управления типоргафикой. Если расстояние между строк слишком маленькое, то строки неуклюже придавлены друг к другу; а если слишком большое, то строки выглядят неуклюже растопыренными. Оба случая тормозят чтение текста. Но, вероятно, вы уже сами это знаете.

Перевод статьи Why we can’t do real responsive images with CSS or JavaScript с сайта brucelawson.co.uk, c разрешения автора — Брюса Лоусона.

Среда, 21 января 2015

Я пишу доклад на тему <picture>, srcset и их «товарищей» для конференции Awwwards в Барселоне через месяц (да, я знаю, что это неслыханный запас по времени; но я планирую поехать отдохнуть в течении двух недель). Я решил, что, прежде чем перейти к основной теме, я должен ответить на вопрос «Зачем вся эта новая сложная разметка? Почему бы просто не использовать CSS или JavaScript?», поскольку его неизменно задают.

Перевод статьи AngularJS is not for websites с сайта wolfslittlestore.be, c разрешения автора — Йохана Ронсе.

Я хотел написать небольшую предысторию про мой комментарий в Твиттере об AngularJS и сайтах, и тем самым предоставить более детальный обзор.

Люди, поймите, AngularJS не предназначен для сайтов. Два новых крупных сайта в Бельгии, финансируемые деньгами налогоплательщиков, не доступны для слепых. Это больно видеть.

— Йохан Ронсе (@wolfr_) 14 Октября 2014

Я не знаю, о чем я думал, когда писал, что это больно «видеть». Шутки в сторону, этот комментарий о недавних редизайнах antwerpen.be и stubru.be.

Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.

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

• Демо: Адаптирующиеся картинки-заставки на CSS

Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+

Перевод статьи Уилла Бойда «Fun Times with CSS Counters» с сайта codersblock.com.

CSS-счетчики — одна из тех интересных возможностей CSS, про которые хочется сказать «ух ты, не знал, что CSS так умеет». Проще говоря, они позволяют вам считать элементы по порядку в CSS – без использования JavaScript.

Сегодня среда, а значит время посмотреть тринадцатый выпуск нашей (почти) еженедельной рубрики Inspiration. Мы поменяли название рубрики на более короткое, понятное и вдохновляющее. :) Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Простые сайты с интересными решениями.

Друзья, предлагаю сегодня новую подборку красивых сайтов. В веб-дизайне постоянно появляется невероятное количество новых сайтов, поражающие своей креативностью нетрадиционным подходом к созданию интерфейса.
Устойчивым трендом продолжают оставаться сайты одностраничники, большие фоновые изображения для веб-сайтов. Остаются актуальными на своих позициях типографика, минимализм и адаптивный веб-дизайн, который обусловлен массовым использованием мобильного интернета. Пользуется популярностью плавная анимация с использованием HTML5, CSS3 и jQuery. Относительно новые тенденции — это плоский дизайн. Ко всему прочему — для творческих людей нужно постоянно находить новые идеи, решения, поэтому здесь вы сможете почерпнуть массу интересного для себя.

Добрый вечер, верстальщики! [Задание по верстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #19]

Лучшим на этой неделе снова стал Blowup, поздравляем. Коротко по каждой из представленных работ:

• Юлия — хорошая работа, но есть различия с макетом — вся правая сторона в header чуть ниже;
• Blowup — все отлично;
• Potato — хорошо, но надо больше спрайтов;
• akaSpy, Андрей — ребята меньше дивов, больше спрайтов).

Благодарим участников за участие и смотрим новое задание.