Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »
Рубрика «css3» - 19
Internet Explorer 7-9: выбор инструментов для максимальной поддержки CSS3, HTML5
2012-09-03 в 8:23, admin, рубрики: css, css3, html, html5, internet explorer, web-разработка, Веб-разработка, верстка, сайты, метки: css, css3, html, html5, Internet Explorer, web-разработка, верстка, сайтыВышел HTML5 Boilerplate 4.0.0
2012-08-29 в 12:02, admin, рубрики: boilerplate, css, css3, html, html5, html5 boilerplate, метки: boilerplate, css3, html5, html5 boilerplate 
Экономьте время. Создайте с уверенностью.
«Самый популярный фронтенд шаблон», — именно такая фраза красуется на официальном сайте. Тем не менее, приведу отрывок описания из предыдущей версии.
HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.
После более чем двух лет разработки, мы собрали лучшие хаки для кросс-браузерной совместимости, настройки производительности и даже таких вещей, как кросс-домменых Ajax запросов и Flash. А наш пример .htaccess для Apache поможет настроить правила кеширования, сжатия (gzip!) и подготовит ваш сайт к работе с HTML5 видео и @font-face.
Boilerplate — это не фреймворк. Мы также не навязываем какой-либо конкретный тип разработки. Это просто набор штуковин, помогающий быстро и безболезненно начать делать ваш сайт.
Фотогалерея на HTML и CSS3
2012-08-25 в 18:24, admin, рубрики: css, css3, html, web-design, веб-дизайн, метки: css3, html, web-design Недавно столкнулся с необходимостью сделать небольшой сайт-галерею (захотелось приятно удивить любимую девушку, показав ей сие творение). Поэтому я решил обратиться к Гуглу за помощью. Просидев часик-другой за компьютером я все же наткнулся именно на то, что и требовалось. После некоторых изменений, внесенных мною, получилось совсем недурно. Ниже я опишу процедуру создания подобной галереи. Думаю, что некоторым новичкам в области web-дизайна будет полезно.
Читать полностью »
Как создать интерактивный график используя CSS3 и jQuery
2012-08-24 в 6:26, admin, рубрики: css3, javascript, веб-дизайн, Веб-разработка 
В этом учебном руководстве мы создадим интерактивный график, используя jQuery и CSS3. При этом будем использовать популярный плагин jQuery «Flot». Flot — это библиотека графического изображения JavaScript для jQuery. Он непрерывно производит набор графических участков данных со стороны клиента. Этот плагин прост, но в нем достаточно функций для того, чтобы создать хорошие и интерактивные графики. Для получения дополнительной информации можете посмотреть на документацию. Вы можете найти дизайн графиков на Impressionist UI, которые сделал Владимир Кудинов.
Подборка CSS3-генераторов для упрощения фронтэнд-разработки
2012-08-20 в 5:02, admin, рубрики: css, css generators, css3, Веб-разработка CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).
Читать полностью »
Сетки без заморочек
2012-08-18 в 14:42, admin, рубрики: css, css3, html, html5, Веб-разработка, сеткиПодавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.
Если требуется реализовать более сложные сетки, то люди прибегают к помощи фреймворков. Они считают, что сетки это сверх сложная вещь, которую лучше доверить настоящим знатокам CSS. Уверенность в этом укрепляется тем фактом, что большинство сеточных фреймворков, с которыми они имеют дело, являются очень сложными.
В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Читать полностью »
jQuery 1.8 box-sizing: width(), css(«width») и outerWidth()
2012-08-17 в 8:21, admin, рубрики: css3, javascript, jquery, jquery 1.8 Одна из отличных новых возможностей jQuery 1.8 — это встроенное понимание свойства box-sizing: border-box, которое поддерживается всеми современными браузерами. (IE6 и IE7, покурите в сторонке, я же сказал, современными браузерами.)
Прим.: CSS-свойство box-sizing введено в стандарте CSS3, и может иметь два значения: content-box — соответствует стандарту CSS2 и является значением по умолчанию, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ, новое значение border-box говорит браузеру о том, что свойства width и height должны включать в себя значения полей и границ, но не отступов (margin).Читать полностью »
Эксперимент со страницей результатов поиска
2012-08-13 в 11:07, admin, рубрики: ajax, css 3, css3, deploy, history api, javascript, Блог компании Яндекс, яндекс, метки: ajax, css 3, css3, deploy, history api, javascript, яндексСтраница результатов поиска — одна из самых популярных страниц Яндекса. Её загружают около 130 миллионов раз в день. Это при среднем размере страницы в 25КБ дает нам 3ТБ трафика в сутки.
Несмотря на кажущуюся простоту, за тем, из чего состоит эта страница, — огромная работа большого количества людей и много сложных технологий.
Развивая интерфейсы, обычно мы идём по эволюционному пути, меняем страницу поэтапно. Проверяем наши решения, внедряя их на небольшой процент пользователей, — проводим эксперименты. Нас уже не устраивают небольшие изменения: хотим развивать продукт, построив новую технологическую платформу, на которой в будущем будем реализовывать свои проекты.
Сегодня мы начинаем эксперимент с новой страницей результатов поиска. И для этого мы выбрали нашу площадку для тестирования поиска по мировому интернету — yandex.com. Читать полностью »
Hover-эффекты для круглых элементов с использованием CSS Transitions
2012-08-09 в 11:40, admin, рубрики: css, css3, css3 transition, Веб-разработка 
Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!Читать полностью »
Пять интересных эффектов при наведении с использованием нескольких фоновых изображений
2012-08-02 в 22:01, admin, рубрики: css, css3, transition, веб-дизайн, переводы Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.
Ниже приведены пять различных примеров, которыми вы можете воспользоваться для создания собственных удивительных эффектов.
Что должно получиться
Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.
