CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3...». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.

Несмотря на то, что стандарт HTML5 официально не утвержден, использовать его можно уже сейчас. Большинство браузеров уже понимают новые структурные элементы и для его использования достаточно добавить новый doctype.

В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]

Доброго дня.

Изображение честно позаимствовано с Dribbble.com

Прошло немногим менее два года с момента публикации моего первого топика по теме. Что за это время произошло? Mail.ru, Rambler, Yahoo и Яндекс дружно перелопатили свои почтовые интерфейсы, и как следствие — парсеры писем, что доставило приятных эмоций, т.к. было исправлено много противных багов. Gmail стал поддерживать фоновые изображения. Ну а благодаря развитию рынка мобильных платформ к нам на помощь приходят media queries.

Смысл поста — подытожить методику верстки писем под сегодняшние реалии, при этом не забывая про ископаемые клиенты.

И да, в посте картинок почти нет. За картинками прошу в обзоры css3 фич.

На данный момент занимаюсь версткой писем, скорей как хобби, поэтому времени на тестирование opera mail, sparrow и прочих «вроде как популярных» клиентов не было. Речь пойдет о следующих:

— Все версии MS Outlook
— Mail.ru
— Rambler почта (в новом интерфейсе не исключены баги)
— Яндекс почта
— Gmail
— Yahoo!
— Thunderbird начиная с версии 2.0
— Hotmail
— Windows Live Mail
— Apple Mail начиная с третьей версии
— AOL Mail
— Lotus Notes 8-8.5.
— theBat! дотошно не тестировал, но и нареканий особенно не было

Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Вступление

Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

Meny

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



Демонстрация Скачать исходники

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

 

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.



Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div'ов. Но все может стать намного проще с CSS3 Multi Column Module.

Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье я описал некоторые из них: многоколоночность, flexbox и сеточная разметка.

Поддержку новых функций браузерами можно проверить на сайте caniuse.com:

Сделал небольшую подборку новых полезных материалов для веб-дизайнеров за сентябрь 2012. Надеюсь, будет полезна хабровчанам.

Полезные сервисы

Easel.io — отличный сервис для прототипирования прямо в браузере.

Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.

Последние изменения на free-lance.ru создали большое недовольство в среде фрилансеров.
Многие озвучили намерение уйти на другие биржи. Довольно часто звучал вопрос «Как мне вернуть деньги за PRO-аккаунт?»
Правила сайта free-lance.ru гласят, что начисленные на счет средства не возвращаются.

Однако, как показывает практика, вернуть деньги можно.

Процесс достаточно прост и интуитивно понятен, но, на всякий случай, описываю в подробностях. Вдруг пригодится сомневающимся и ленящимся.

_{картинку предоставили free-free-lance.com}

Сразу после объявления администрацией free-lance.ru запрета на публикацию контактных данных заказчиков и фрилансеров на сайте, начали появляться проекты, позволяющие обойти этот бредовый запрет. Пока я знаю три таких сайта:

• free-lance-contacts.ru — запустился раньше всех, включает в себя базу в 17 тыс. контактов, собранных из открытого доступа в августе. Есть функционал добавления своих контактов, аппрув (чтобы левые люди не выдавали себя за раскрученных фрилансеров) посредством личного сообщения автору проекта на фрилансе.

• free-free-lance.com — разработка бывших сотрудников free-lance.ru, есть функционал добавления своих контактов. База пополняется самими фрилансерами. Работает верификация аккаунтов с помощью кодовой фразы, которую выбирает пользователь.

• freelancecontacts.net — запустились, сайт пополняется данными фрилансеров после верификации.

• freefreelance.ru — не хватает верификации аккаунтов

• find-freelancer.pro — отличается наличием открытого каталога фрилансеров, поиск фрилансеров работает по собственной базе и популярным биржам фриланса (например, если контакты пользователя закрыты на free-lance.ru, вы сможете связаться с ним на weblancer — очень удобно).

• free-lance-surveys.ru — сервис обмена отзывами и поиска контактов фрилансеров.

Заказчики, работодатели, не проходите мимо! Упростите жизнь фрилансерам и себе. По своему опыт могу сказать, что фрилансеры часто гуглят тех, чьи заказы заинтересовали — поэтому не ленитесь, добавляйте свои контакты в эти базы. Давайте уже дадим понять некоторым любителям грести всё под себя, что опускать железные занавесы на вебе — бесполезно.

В Ivideon нет рекламы. Вообще. Даже несмотря на то, что существенная часть наших пользователей подключены бесплатно.
Мы запустили сервис видеонаблюдения почти год назад и он был бесплатным без всяких ограничений для всех. Три месяца назад мы запустили коммерческие тарифы и ввели ограничения. Две камеры — бесплатно, включая возможность их трансляции на собственном сайте, а дополнительные камеры — за небольшую абонентскую плату. Большинству не корпоративных пользователей двух камер более чем достаточно.

Но самое важное, мы оставили сервис бесплатным почти для 100 000 аккаунтов, которые были зарегистрированы до ввода тарифов, независимо от количества подключенных камер. Мы не хотели терять наших клиентов из-за желания заработать больше.

И все равно у нас нет рекламы. Потому что мы не хотим, чтобы наш сервис ассоциировался с прокладками, жевательной резинкой или стиральным порошком. Даже сейчас, когда у нас ведутся переговоры о привлечении нового раунда инвестиций, одним из условий вхождения мы ставим отсутствие рекламы в видеопотоке. По крайней мере такой топорной и бессмысленной, какую используют сегодня популярные видеохостинги. Наша финансовая модель и так выглядит достаточно привлекательно без этой составляющей дохода.

Но речь не об этом. С момента появления нашего блога и нашей первой статьи на Хабре о том как создавался Ivideon, мы ни разу не рассказали о том, а что же мы сделали и зачем? То, что обычно компании первым делом публикуют на Хабре в виде собственной рекламы, мы пропустили. Позвольте нам сделать это сейчас и не получить уж слишком много минусов. Тем более мы просто хотим рассказать о нашем продукте, который позволяет не только в реальном времени наблюдать за яйцами.
Если просто, то Ivideon дает удобную возможность объединить в одном интерфейсе личного кабинета неограниченное количество камер, разбросанных географически. Они могут находиться как в одном офисе, так и на разных континентах.

Вчерашние изменение правил сайта free-lance.ru вызвало широкий резонанс у общественности, особенно у специалистов IT области. Многие задаются вопросами, чем вызвана подобная политика биржи и к чему это приведет.

Новость не обошла стороной даже популярные издания вроде Lenta.ru.

Вычитав всю ленту обсуждения в теме Free-lance.ru сошел с ума я решил аккумулировать самые задаваемые вопросы и в виде открытого интервью направить их администрации сайта, в надежде получить ответы.

Спустя сутки мы получили ответы от генерального директора free-lance.ru

В 4 часа утра, без объявления войны… Нет, не так: проверяю почту с утра, вижу непрочитанные сообщения с фриланса. Лезу на сайт отвечать — там меня встречает огромный баннер во весь экран «Вся работа только через сделку без риска! Обмен личными контактами запрещён!» — по привычке закрыл такой баннер, практически не читая, кликаю на ссылку сообщения и вижу вот такую вот картину:



Для тех, кто free-lance.ru не пользуется, поясню: «Сделка без риска» — это их функционал проведения сделок через сайт, подразумевающий обязательный %, который отстёгивается им за эту работу + бюрократизацию всего процесса, включая проверку обстоятельств работы, тз и прочего. Теперь, значит, фриланс решил сделать это обязательным для всех.

Что же получается:

1. новшество, кардинально меняющее всю механику взаимоотношений на сайте, было внедрено без консультаций с аудиторией — оно и понятно, любой опрос на эту тему дал бы результат «99% против»
2. новшество было внедрено без предупреждения — просто поставили перед фактом. Т.е. я, пользователь, который уже платит фрилансу деньги за аккаунт pro регулярно сейчас лишён возможности пользоваться сайтом — вот так завис над этой формой с предупреждением и не решаюсь ставить галочку, потому что
3. фриланс официально заявляет, что не только читает ЛИЧНЫЕ сообщения на сайте, но и считает себя вправе их модерировать. До такой наглости даже признанные империи зла и добра не доходили.

В связи с прочтением соседнего поста предлагаю перечислить список бирж, на которых можно найти альтернативу тому унылому говну, в которое превратился free-lance.ru, ибо терпеть планомерный геноцид я больше не намерен.

Несколько раз по работе сталкивался с необходимостью верстать баллуны (облачка, филактеры). Если кто не в курсе, это такие штуки, с помощью которых в комиксах озвучивают реплики персонажей. В интерфейсах же сайтов их обычно используют для всяческих всплывающих подсказок к элементам.