Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье описаны некоторые из них: многоколоночность, flexbox и сеточная разметка.
Поддержку новых функций браузерами можно проверить на сайте caniuse.com:
Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.
Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка оформлена в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.
Про БЭМ (методология написания CSS от Яндекс — Блок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да).
Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?
За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.Читать полностью »
Привет всем! В этой статье я хочу акцентировать внимание о такой интересной вещи в CSS3, как 3D — преобразования. Тема, на мой взгляд очень интересная и перспективная.
Основное свойство для совершения пространственных операций с элементами страницы, это свойство transform. Про это свойство можно почитать, например, вот тут .
Также нам понадобятся очень важное свойство transform-style, которое позволит видеть всё содеянное в формате 3D.
Для того, чтобы продемонстрировать возможности всех этих “плюшек”, я решил создать дом в 3D, на чистом CSS3.
Читать полностью »
Что такое tilt-shift? Эффект tilt-shift называется еще эффектом миниатюры — суть заключается в том, что бы поместить точку фокуса на какой-то один объект на фото и размыть окружение.
Существовало множество решений для этого — от плагинов для Photoshop и фильтра в Instagram до отдельных программ.
От переводчика: на мой взгляд, данный плагин является великолепным примером для демонстрации возможностей фильтров в CS33
Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-shift эффекта. Это всего лишь «proof of concept» и работает только в Chrome & Safari 6.
На странице плагина можно глянуть примеры (с оригиналами фотографий).
Читать полностью »
Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »
«Самый популярный фронтенд шаблон», — именно такая фраза красуется на официальном сайте. Тем не менее, приведу отрывок описания из предыдущей версии.
HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.
После более чем двух лет разработки, мы собрали лучшие хаки для кросс-браузерной совместимости, настройки производительности и даже таких вещей, как кросс-домменых Ajax запросов и Flash. А наш пример .htaccess для Apache поможет настроить правила кеширования, сжатия (gzip!) и подготовит ваш сайт к работе с HTML5 видео и @font-face.
Boilerplate — это не фреймворк. Мы также не навязываем какой-либо конкретный тип разработки. Это просто набор штуковин, помогающий быстро и безболезненно начать делать ваш сайт.
Недавно столкнулся с необходимостью сделать небольшой сайт-галерею (захотелось приятно удивить любимую девушку, показав ей сие творение). Поэтому я решил обратиться к Гуглу за помощью. Просидев часик-другой за компьютером я все же наткнулся именно на то, что и требовалось. После некоторых изменений, внесенных мною, получилось совсем недурно. Ниже я опишу процедуру создания подобной галереи. Думаю, что некоторым новичкам в области web-дизайна будет полезно.
Читать полностью »
