Мы не редко пользуемся окнами в стиле. Они нередко реализуются на JavaScript и даже на Flash. Я покажу как сделать можно одиночное окно на чистом CSS.
Рубрика «css» - 135
Коллекция паттернов поведения для элементов отзывчивого веб-дизайна
2012-09-12 в 10:41, admin, рубрики: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Веб-разработка, Дизайн в IT, Мобильный веб, Отзывчивый веб-дизайн, метки: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Отзывчивый веб-дизайн 
Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Читать полностью »
О практических применениях свойства float
2012-09-12 в 9:39, admin, рубрики: css, float, html, Веб-разработка, верстка, метки: css, float, html, верстка 
Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.
Читать полностью »
Прибитый к низу футер своими руками
2012-09-12 в 7:03, admin, рубрики: css, HabrAjax, userstyles, будущее здесь, Веб-разработка, юзабилити, метки: HabrAjax, userstyles, юзабилитиВсе, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social/ — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.
Так, 
вместо того, чтобы 
.
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.
Читать полностью »
Увидев на просторах сети пару впечатляющих примеров 3D-трансформаций средствами CSS — заинтересовался, решил разобраться в теме, прочитал несколько статей, вроде бы что-то понял. Но, как известно, теория без практики – как зомби — мертва, хоть и может съесть мозг.
Для усвоения материала необходимо самому сделать что-нибудь любопытное с использованием прочитанного. Какой трехмерный объект сделать легче всего? Пожалуй, кубик. А чтобы результат получился интереснее и красивее, пусть это будет игральный кубик с точками на гранях. Поехали.
Для нетерпеливых и тех, кто смотрит Хабр ради забавных картинок – конечный результат. Работает в Chrome, последних версиях Firefox, Safari. Opera 12.01 — пока никак, ну а про IE вы и сами все знаете.
Читать полностью »
Привет всем! В этой статье я хочу акцентировать внимание о такой интересной вещи в CSS3, как 3D — преобразования. Тема, на мой взгляд очень интересная и перспективная.
Основное свойство для совершения пространственных операций с элементами страницы, это свойство transform. Про это свойство можно почитать, например, вот тут .
Также нам понадобятся очень важное свойство transform-style, которое позволит видеть всё содеянное в формате 3D.
Для того, чтобы продемонстрировать возможности всех этих “плюшек”, я решил создать дом в 3D, на чистом CSS3.
Читать полностью »
Предисловие
Многое, ранее сделанное с использованием JS, можно реализовать средствами CSS, часто это упрощает некоторые задачи. В статье будет рассказано о том, как выравнить треугольную стрелку балуна по середине по вертикали и о том, как избежать использования изображения для отрисовки этого самого треугольника.
Читать полностью »
tiltShift.js — jQuery-плагин для эффекта tilt-shift
2012-09-05 в 3:28, admin, рубрики: css, css3, jquery, tilt-shift, Веб-разработка, метки: css3, jquery, tilt-shift 
Что такое tilt-shift? Эффект tilt-shift называется еще эффектом миниатюры — суть заключается в том, что бы поместить точку фокуса на какой-то один объект на фото и размыть окружение.
Существовало множество решений для этого — от плагинов для Photoshop и фильтра в Instagram до отдельных программ.
От переводчика: на мой взгляд, данный плагин является великолепным примером для демонстрации возможностей фильтров в CS33
Встречайте: tiltShift.js!
Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-shift эффекта. Это всего лишь «proof of concept» и работает только в Chrome & Safari 6.
На странице плагина можно глянуть примеры (с оригиналами фотографий).
Читать полностью »
iPhone Style чекбокс для Twitter Bootstrap
2012-09-04 в 18:11, admin, рубрики: Bootstrap, controls, css, iphone, javascript, twitter, user interfaces, Веб-разработка, интерфейсы, метки: bootstrap, controls, css, iPhone, javascript, user interfacesЗдравствуйте, уважаемые читатели.
Так случилось, что в ходе разработки моего игрушечного веб-приложения я решил сделать в интерфейсе чекбоксы в стиле iPhone. Так как вся клиентская часть разрабатывается на Twitter Bootstrap, то я решил поискать реализацию таких чекбоксов, но не нашел. Тогда я решил сделать форк вот этого проекта,
взял его за основу, перерисовал картинки, подправил css и в итоге получил примерно вот такой чекбокс
