Кнопки из фреймворка от Twitter'а — Bootstrap, которые выглядят довольно таки интересно и современно. Прекрасно поддерживаются в IE7 и выше.
Для создания кнопок используются многие вещи из CSS3, например, такие как: border-radius, linear-gradient, box-shadow, text-shadow, rgba и т.д, для достижения удивительного эффекта.
В прошлых статьях мы проделали неплохую работу, разобрав то, как в целом создаются строки и как происходит их построение. Но на таком рубеже не следует останавливаться, потому что это далеко не конец, а лишь начало нашего путешествия в мир под названием "Контекст форматирования".
Продолжая разбирать строчное форматирование, я предлагаю вам коснуться ещё одной познавательной и необходимой для изучения темы. Высота строки — одна из важных особенностей при построении строк. Выстраивая нашу строку и заполняя её инлайн-боксами, мы не задумывались о том, откуда берётся и от чего зависит их высота.
CSS изначально был создан очень снисходительным к ошибкам. Когда браузер натыкается на нечто непонятное в CSS-файле, он испытывает минимальное "удивление", а затем продолжает как ни в чем ни бывало.
Для этого есть важная причина. Мы знаем, что CSS будет расширяться со временем, к нему будут добавляться новые свойства, новые значения и другие новинки. "Новые" вещи выглядят в точности как "невалидные" для старых браузеров, так что, если вам нужно, чтобы язык аккуратно обрабатывал новинки, вам придется оснастить его "умной" обработкой ошибок.
Матричные функции — matrix() and matrix3d() — две самые головоломные в плане понимания штуковины в CSS3-трансформациях. В большинстве случаев, ради простоты и ясности, вы будете пользоваться функциями вроде rotate() и skewY(). Но всё же за каждой трансформацией скрывается эквивалентная матрица. Полезно хоть слегка понимать, как они работают, так что давайте взглянем.
В блочном контексте форматирования поля (margin), отступы (padding) и границы (border) могут оказывать влияние на любые координаты и расположение элемента, и так же могут влиять на окружающий контекст. Но что происходит в этом плане в инлайновом контексте? Давайте разберёмся.
Спецификация сообщает нам, что в инлайн-форматировании горизонтальные margin, border и padding между инлайн-боксами учитываются, а вот вертикальные не дают никакого эффекта и не могут влиять на окружающий контекст. Да, сразу стоит уточнить, что речь идет о инлайн-боксах, создаваемых обычными элементами с display:inline (читайте первую часть цикла), а не об инлайн-блоках или замещаемых элементах вроде картинок.
Некоторым может показаться, что здесь всё прозрачно, но на самом деле это не так. Поэтому я решил, что нам следует подробнее разобрать эти моменты, и начнём мы, пожалуй, с margin.
Добрый день, уважаемые коллеги!
Как вы уже наверное знаете, мы стремимся создать, действительно, профессиональное сообщество. Сообщество веб-разработчиков, которое разговаривает на языках HTML, CSS и JS.
Но, к сожалению, наших физических возможностей не хватает на то, чтобы часто пополнять сайт интересным материалом, поэтому мы вынуждены попросить помощи у сообщества. Если у кого-то из вас вдруг возникнет желание быть причастным к великому делу и внести свой вклад в его развитие, то мы бы были безумно этому рады. В частности нам нужны переводчики. Люди, хорошо владеющие английским языком, желающие помогать сообществу и развиваться в этом направлении.
Все ваши предложения пишите на почту: psywalker@css-live.ru
В основе этой статьи лежит перепевка спецификации CSS 2.1 по телефону Рабиновичем SelenIT-ом. Если что-то вышло криво — я не виноват, это всё он. Конструктивная критика и предложения по улучшению материала приветствуются!
Перед тем как погрузиться в мир инлайнового контекста, мне казалось, что это не очень сложная тема, и что понять её будет не трудно. Но, чем больше я углублялся в процесс изучения, тем больше понимал, что это далеко не простая и даже очень обширная и сложная тема для понимания.
Ещё больше я боялся за то, что не смогу передать на бумаге все тонкости и особенности построения этого механизма нашим читателям. Поэтому каждую статью цикла я буду стараться писать так, чтобы каждая её деталь была написана на доступном и понятном языке.
Ну, как говорится — с Богом!
Web Performance Working Group способствует реализации двух кандидат-рекомендаций:
Узнать больше о Деятельности по созданию богатых веб-приложений.
Web Applications Working Group огласила три первые редакции рабочих черновиков:
Узнать больше о Rich Web Client Activity.
Internationalization Core Working Group опубликовала Заметку Группы Интернационализации веб-сервисов. Документ описывает улучшения SOAP, сообщая о предоставлении интернационализации и локализации операций использующих локальные и интернациональные настройки. Применение этих механизмов обеспечит широкий спектр моделей разработки для международного использования. Узнать больше о Деятельности по интернационализации.
Web Applications Working Group опубликовала предложенные рекомендации для интерфейса виджетов. Данная спецификация определяет прикладной програмный интерфейс (API) для виджетов, которые дают среди прочих возможностей функциональность для доступа к метаданным виджета и постоянному хранению данных. До 19 июня приветствуются комментарии . Узнать больше о деятельности по разработке богатых веб-клиентов.
Истинная рок-звезда веб-разработки Брюс Лоусон, знакомый нам не только по проекту html5doctor.com, но и по другим музыкальным хитам (например, этому), недавно представил свой новый хит "Like A Rounded Corner" — задорную, но удивительно душевную кантри-балладу об уставшем веб-разработчике, спасающемся от творческого кризиса благодаря новым возможностям HTML5 и CSS3. В клипе впервые приняли участие восходящие звездочки — группа The Standartettes. Не пропустите это верстально-музыкальное событие уходящего мая!
В начале месяца в Гамбурге состоялась встреча Рабочей группы CSS (CSS WG) . Подробности можно прочитать здесь.
W3C запустил новую Группу Разработки Независимых Пользовательских Интерфейсов (Indie UI Working Group), которая совместно с Группой Разработки Событий (Web Events WG) займется совершенствованием взаимодействия пользователя с web-приложением. Ее разработки послужат промежуточным звеном между модальными событиями и событиями устройств, и функциональностью, необходимой для web-приложения, такой как, прокрутка видимой области, получение объектом фокуса и т.п. Новая группа определит, как действия пользователя (прокрутка на сенсорном экране, с помощью голоса или колеса мыщи) будут преобразованы в простые события, дабы разработчики web-приложений могли оперировать ими на различных устройствах не задумываясь о том, каким из способов пользователь совершил то или иное действие. Узнать больше можно из рассылки и по этой ссылке.
В то время, как модуль медиавыражений 3-го уровня (CSS3 Media Queries) достиг предпоследней стадии зрелости (Proposed Recommendation), полным ходом идет разработка нового черновика — CSS4 Media Queries. Недавно в него была добавлена возможность проверки доступности скриптов (ключевое слово "script" с двумя возможными значениями 0 и 1), а сегодняшний редакторский черновик дополнился еще двумя возможностями: проверки точности указателя (ключевое слово "pointer") и возможности наведения ("hover").