Подборка 10 css3 кнопок / Каскадные Таблицы Стилей. С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами. В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений. 1.
Super Awesome Buttons. Данный набор кнопок использует набор css3 а также раскраску RGBA. Добавить данный набор кнопок к себе на страницу не сложно, необходимо подключить css шаблон и добавить необходимые классы к ссылкам, чтобы изменить их цвет, форму итд. Пример подключения: <a class="large awesome">Super Awesome Button »</a><a class="large blue awesome">Awesome Blue Button »</a><a class="large magenta awesome">Awesome Magenta Button »</a><a class="large red awesome">Awesome Red Button »</a><a class="large orange awesome">Awesome Orange Button »</a><a class="large yellow awesome">Awesome Yellow Button »</a> Подробнее о Super Awesome Buttons » 2. 3. 4.
Тема-Конструктор для Wordpress / Wordpress. Уже прошел год с момента анонса темы Конструктор на Хабре, и все это время проектик продолжал жить и развиваться, и дальше я опишу до чего же он дорос… Начну с предистории — данную тему я создавал прежде всего для своих нужд — вы не представляете, как часто знакомые-знакомых просят «да простенький сайтец, что тебе стоит», хотя, может, и представляете ;) В итоге я решил создать тему-заготовку, которая минимизирует время, необходимое на создание «простеньких» и уникальных сайтов визиток на базе CMS Wordpress.
Затем решился залить тему в репозиторий wordpress.org, и там тема нашла свою нишу — т.н. тем-фреймворков. На момент попадания темы в топ репозитория я не смог найти в нем темы с подобным функционалом, сейчас ситуация, правда, изменилась. Думаю не стоит утруждать читателя изучением предыдущего анонса, поэтому буду описывать все фичи, реализованные в данной теме. Если кому интересна именно история изменений — я старался вести историю версий. Темы <? Макет Шаблоны «Шапка» сайта Контент Шрифты. Обзор свежих материалов, декабрь 2010-февраль 2011 / Интерфейсы. Irisar Centena / Эти пользовательские интерфейсы. Хабравчане, хочу вас «поздравить» с знаменательной датой 10\10\10 10:10. Как принято, на праздники с подарками. Специально для этой даты я подготовил мультицветной toolkit с динамической настройкой палитры цветов. Использовать его можно в любом вашем (коммерческом и нет) проекте, а приемы irisar и centesimo помогут вам модернизировать его под ваш интерфейс.
Подробнее под катом. В конец поста добавлено видео демонстрации смены цветов через kuler.adobe.com Радужная сотня Я ленив. По мере получения опыта в моем арсенале появилось множество приемов, ускоряющих процесс создания интерфейсов, но больше всего я благодарен двум — плавилу «centésimo» и irisar (прошу не пугаться испанских слов, звучание испанского языка заставляет трепетать мое сердце и я рад возможности жить и работать с этими звуками). Centésimo — сотка. Правило «centésimo». Irisar. Сегодня сложно найти человека, связанного с предоставлением информации и не знакомого с продуктом компании Adobe — Kuler. Рождение CentenaCe PS HQ jpeg. Html5a.jpg (изображение «JPEG», 1200x1312 пикселов) Разработка привлекательных реалистичных пользовательских интерфейсов / Дизайн.
Cекрет разработки привлекательных интерфейсов заключается в реализме. Ваша задача — придать плоским элементам объём, используя свойства реальных объектов, вроде неровностей и шероховатостей, бликов и теней, различных текстур поверхностей. В идеале они должны выглядеть как предметы на вашем столе. Создавая классный интерфейс, в первую очередь нужно думать не «как», а «почему». Объёмное мышление Работая над реалистичным элементом интерфейса, спросите себя, как он выглядел бы в реальном мире. Кнопка нарисована так, что выглядит немного приподнятой, у неё матовая поверхность, небольшая выпуклость и тонкий контур. В Pastebot — приложении от Tapbots — используются панельки похожие на пример кнопки выше и расположенные одна за другой: Источник света находится сверху, поэтому у каждой панельки есть тень внизу и блик на верхней кромке.
Элементы интерфейса, которые нам нравятся, как правило выглядят реалистично, поэтому нужно уделять больше внимания рисованию правильных бликов и теней. Дрессируем box-shadow / Каскадные Таблицы Стилей. Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому можно получать весьма интересные результаты, если использовать это свойство нетривиальным образом.
В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий». Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Клонирование (шлейф) Свойство box-shadow позволяет создать множество теней, что можно использовать весьма своеобразно. Как получилось у меня? Как выходит у браузеров? Свечение Всякую тень, которую можно окрасить в яркий цвет и сильно размыть, можно использовать для эффекта свечения. Как получилось у меня? Как выходит у браузеров? Мнократный border Возможно, у вас иногда будет появляться необходимость использовать две или больше линий вокруг элемента. Как получилось у меня? Как получилось у меня? Стремимся к минимализму (подборка сайтов, где можно черпать вдохновение) / Веб-дизайн.
22 марта 2011 в 11:49 Ни для кого не секрет, что в настоящее время многие стремятся к минимализму в дизайне чего бы то ни было. Действительно, когда нет ничего лишнего, то повышается и восприимчивость информации. Но это все лирика. Сказано было это еще до меня и много. Предлагаю вашему вниманию подборку сайтов, посещение которых может направить ваши мысли по поводу разрабатываемого дизайна в нужное русло. www.siiimple.com minimalexhibit.com www.mnimal.com siteinspire.net simpledesktops.com www.minimalsites.com UPD: В аську мне написал читатель хабра, которого на хабре нет (ник — designiac) и предложил добавить в пост ресурс с сайтами, построенными по модульной сетке.
Grid-based.com Говорить тут особо нечего. P.S.: есть еще примеры таких сайтов-подборок? Только зарегистрированные пользователи могут оставлять комментарии.