В итоге получилось это:

Demo

Наверное нет смысла описывать как и что делал, приводить листинги и т.д., кому станет интересно – заглянет в исходный код. Пришлось повозиться с анимацией, банально много кода вышло. Хотелось еще позаниматься с трансформациями, но их тут впихнуть некуда, в другом эксперименте попрактикуюсь ) Здесь же еще постараюсь уделить время для отрисовки всего экрана: курочки, травка, сам «герой» (кстати, из-за героя то я и переименовл игру из «Ну, погоди!» в «Микки Мауса», мыша будет попроще отрисовать в CSS3). Ну и, если азарт не пропадет, попрактикуюсь в JS и сделаю «играбельной» всю эту штуковину. Девайс накодил исключительно «для себя» с целью прокачаться в CSS3, промежуточным вариантом доволен

Наверное сразу возникает вопрос: нахрена я вообще винчестер запихнул в коробку?

У меня есть карман, который подключается по mini-usb, но то ли девай некачественный, то ли я сильно ёрзаю – короче отваливается постоянно, обидно когда это происходит в процессе работы. Когда я купил в ноут SSD, к нему прилагался кабель (тот что на картинке), вот я и решил его заюзать, теперь вообще не отваливается. Ну а коробка ни что иное, как антивандальная защита (кофе, дети).

А вот и карман, который теперь разве что для поездок:

Надо наверное док-станцию прикупить…

К столу добавились две самодельные полочки, закуплены и использованы по назначению зажимы для бумаги, теперь они у меня как и у всех держат провода. Хлам типа коробок заброшен на верхнюю полку и дальше с каждой полкой чем ниже, тем нужнее вещи ) Планшет используется в качестве интернет-радио.

Под столом приютился простенький домашний сервер из старого железа, там  же сканер, который пока ну никак не хочет дружить ни с убунтой ни с виндой 7.

Я сомневался, что после доработок стола мне хватит места, но за неделю использования недостатка в пространстве я не ощутил. И теперь всё на своих местах!

Так почему же я всё-таки сделал выбор в пользу нового стандарта?

Первое - это семантика, структура ложится ну прям сама, код четкий и структурированный. Я в последнее время частенько забываю оставлять программистам комментарии по структуре, а они, в свою очередь, и не просят меня об этом )

Второе – опять семантика. Но здесь уже речь идет о добавлении семантической разметки для структурирования данных в HTML-коде, или, если проще, о микроданных. Я не во всех проектах использую микроданные, т.к. это пока еще не осело в мозгу на том уровне как например CSS. Обычно я их добавляю при верстке магазинов и карточек людей и компаний. Почти всегда я делаю хлебные крошки именно с оглядкой на микроданные. Чаще всего я руководствуюсь документацияй Google.

Микроданные поддерживаются Google, Bing, Yahoo! и частично Яндексом. Не могу сказать о том, что сейчас это влияет на позиции в поисковой выдаче, т.к. исследований я не проводил, но уверен, что очень скоро будет влиять достаточно, чтобы не забывать о микроданных при верстке.

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

Четвертое – в режиме HTML5 некоторые свойства CSS работают более правильно. Еще говорят, что для JavaScript HTML5 тоже предпочтительнее, но я здесь доводов привести не могу, так как не обладаю глубокими знаниями JS )

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

Кстати, каждую неделю в понедельник я анализирую процент использования различных браузеров за прошедшую неделю, результат выкладываю коротко в Twitter и расширенно в Facebook. Было бы интересно писать еще более расширенно здесь или это уже лишнее?

P.S.: Поздравляю всех с тем, что вчера спецификация CSS 2.1 перешла в статус рекомендации, теперь им можно пользоваться (ну да, грешен, и до этого пользовался). Теперь все усилия Рабочей группы CSS будут сосредоточены только на CSS3.

Demo: Micro clearfix hack

Поддерживаются браузеры: Firefox 2+, Safari 2+, Chrome, Opera 9.27+, IE 6+, IE Mac.

Я не буду переводить полный текст статьи, выложу самое основное – код. В общем то он на столько логичен, что пояснения вряд ли кому-то потребуются

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}
 
.cf:before,
.cf:after {
    content: "";
    display: table;
}
 
.cf:after {
    clear: both;
}

Если вдруг кто-то не понял, что здесь написано, попробую вкратце описать алгоритм:
1. С помощью CSS создаем невидимые блоки
2. Эти блоки используем как отбивку (как то сразу мне не нравилось захламлять отбивками HTML)
3. п.1 не работает в IE6 и IE7, потому для этих чудных браузеров используем свои фиксы.

banner

Логически этой ролью наделяется шапка сайта (header). В этом блоке традиционно располагается логотип и название сайта, могут быть включены поиск и основное название страницы. role=«banner» должен быть в единственном экземпляре на странице.

search

Определяет область поиска на странице. Как правило, это форма, используемая для отправки поисковых запросов.

navigation

Набор навигационных элементов (как правило, ссылки) для навигации по документу или связанных с ним документов.

main

Основное содержание документа. В рамках любого документа или приложения, автор должен отметить не более одного элемента с главной ролью.

contentinfo

Обычно применяется к подвалу (footer). Так же данная роль может быть обозначена на странице лишь единожды.

complementary

Важная часть контента, но не основная. Обычно это различные информационные блоки (погода, краткий список новостей, мини-фотогалерея и т.д.). Чаще всего принадлежит к области страницы, называемой боковой колонкой (sidebar, leftbar, rightbar).

В упрощенном виде html-разметка может выглядеть так:

<header id="header" role="banner">
	<h1>Название блога</h1>
</header>
<nav id="nav" role="navigation">
	<ul>
		<li><a href="/">Главная</a></li>
		<li><a href="/news">Новости</a></li>
		<li><a href="/contacts">Контакты</a></li>
	</ul>
</nav>
<section id="content" role="main">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.</p>
</section>
<aside id="sidebar" role="complementary">
	<nav>
		<h3>Подменю</h3>
		<ul>
			<li><a href="#">Раз</a></li>
			<li><a href="#">Два</a></li>
			<li><a href="#">Три</a></li>
		</ul>
	</nav>
</aside>
<footer id="footer" role="contentinfo">
	<p>© 2011 Копирайт.</p>
</footer>

Конечно же есть и другие роли, если заинтересуетесь – курите спецификацию

Идем по порядку:

1. Делаем скриншот страницы – Alt+PrintScreen (скриним только активное окно):

2. В фотошопе создаем новый документ (фотошоп должен подхватить размеры скрина, просто соглашаемся):

3. Закрашиваем фон нужным цветом (для примера черным):

4. Вставляем скриншот – Ctrl+V:

5. Делаем трансформацию – Ctrl+T, после чего с вжатым Ctrl смещаем правые уголки:

6. Включаем режим маски – Q;

7. Градиентом формируем саму маску (градиент должен быть с «однобоким», показано на скриншоте):

8. Выходим из режима маски – Q;

9. У нас имеется выделение области, применим к нему фильтр Blur -> Gaussian Blur или друго фильтр из серии Blur (радиус добавляем по вкусу):

10. Обрезаем нужную область инструментом Crop:

11. Добавляем что-нибудь для красивости, например тень от ручки (на новом слое). Потом можно будет поиграться с прозрачностью для слоя:

11. Сохраняем то что получилось:

Конечный вариант слегка переделан, для размытия картинки вместо Gaussian Blur использован Shape Blur радиусом 5px и затем тот же Gaussian Blur с радиусом 3px, но это всё каждый определит для себя, кому что нравится…

Кому лень заморачиваться – прикладываю Acton.

P.S.: Можно наверное сделать лучше и качественнее, но, повторюсь, я не профи в этом деле

Форма с пропадающими LABEL при клике на INPUT[TYPE=TEXT]

<form class="search labeled">
<div class="field"><label for="idSearch">Введите запрос</label>
<input id="idSearch" type="text" /></div>
<div>
<input class="button" type="submit" value="ИСКАТЬ" /></div>
</form>

.search .field{position:relative;}
	.search .field label{position:absolute; top:4px; left:11px; width:170px; font-size:12px; font-style:italic; color:#6C6E71; cursor:text;}
	.search .field input{width:150px; border:0; font-size:12px; background:none; outline:none;}

$('form.labeled input[type=text]').focus(function () {
	$(this).siblings('label').fadeOut(100);
});
$('form.labeled input[type=text]').blur(function () {
	 !$(this).val() && $(this).siblings('label').fadeIn(100);
});

Флотим пользовательские картинки в контенте

$("img[align='left']").attr("align", "").addClass("fleft");
$("img[align='right']").attr("align", "").addClass("fright");

.fleft{float:left; margin:3px 15px 0 0;}
.fright{float:right; margin:3px 0 0 15px;}

Анимация на примере изменения ширины страницы

<div id="wrapper">
<div id="header">
		<a class="logo" href="/">Lorem ipsum</a></div>
</div>

#wrapper{position:relative; width:1000px; margin:0 auto;}
#header{height:40px;}
.reSize{position:absolute; right:30px; font-size:18px; cursor:pointer;}

$('#header').prepend('
<div class="reSize">«»</div>
');
$(".reSize").toggle(function(){
	$("#wrapper").animate({
		width: "1200px"
	}, 500 );
	$(".reSize").html('»«');
}, function () {
	$("#wrapper").animate({
		width: "1000px"
	}, 500 );
	$(".reSize").html('«»');
});

Выполнение скрипта при ресайзе страницы

resizeWindow();
$(window).bind('resize', function() { 
	resizeWindow();
}); 
function resizeWindow(){
	$("#main").css('width', $("body").width() - 352);
}

Открываем страницы в новой вкладке правильно

$("a[rel=external]).attr('target', '_blank');

Кроме главного логотипа так же есть логотипы сопутствующих технологий:

Подробнее Вы сможете ознакомиться на странице логотипов.

Там же можно сгенерировать для своего проекта кнопочку, которая как бы намекает на качество сайта (ниже полный набор):

Обсуждение на хабре

Опрос для верстальщиков на хабре

Далее буду писать ориентируясь на людей с малым опытом подобных манипуляций.
Описание насыщено скриншотами, по которым можно кликнуть и посмотреть в реальном размере.

Настройка виртуальной машины

Скачиваем установщик VirtualBox, устанавливаем и запускаем.

Первое что нужно сделать, это создать новую машину, делаем это нажав кнопку «Создать». Получаем окно, как на скриншоте ниже:

Обзываем нашу новую машину:

Выделяем память, можно оставить по умолчанию. Я не жадный и дал своей виртуальной XP гиг оперативки (из 4х имеющихся):

Оставляем как есть:

Расположение можете оставить по умолчанию, я же указал удобную для меня папочку.
Я бы не рекомендовал уменьшать размер жесткого диска, т.к. если Вы его заполните до конца, увеличить будет уже очень проблематично. Я оставил 10 гигабайт, на жестком диске с установленной операионкой размер виртуальной машины занял меньше 2Гб.

Мы создали виртуальную машину, теперь пора поднастроить её. Нажимаем «Свойства» и видим много чего настраиваемого. Нам нужно совсем чуть-чуть.

Во вкладочке Дополнительно пункта Общие можно указать расположение для снимков. Вы можете оставить по умолчанию, я по обычаю указал удобную для меня папку:

Видео в пункте Дисплей я нежалеючи накрутил по максимуму (не обязательно):

В пункте Носители потребуется больше внимания. Для начала правым кликом мыши на пустом пространстве списка носителей вызываем контекстное меню и выбираем Добавить Floppy контроллер:

Добавляем виртуальный привод гибких дисков (он нам потребуется позднее):

Теперь нам нужно прикрепить в виртуальной машине (пусть дальше будет ВМ) установщик Windows XP. У Вас должен быть установочный диск или образ установочного диска, я для эксперимента скачал образ с торрента (через 30 дней обязательно удалю). Делаем как на скриншоте и выбираем привод хоста. У меня «Е» – это физический CD-привод, «F» – виртуальный, созданный программой UltraISO (есть тестовый период, для нашей задачи подойдет). Вы можете нарезать реальный диск либо использовать виртуальный если знаете как. Не забудьте после установки винды извлечь установочный диск.

Нам потребуется общая папка для работы с банковскими файлами:

Обязательно поставьте галочку Авто-подключение:

Всё, закончили с настройками ВМ, сохраняем, нажимая OK. Первый этап успешно завершен, переходим к следующему.

Установка Windows XP на виртуальную машину

Запускаем нашу ВМ и идём пить кофе/чай/пиво минут на 5. Установщик поработает самостоятельно до момента, показанного на скриншоте:

Быстренько форматируем раздел:

И идем продолжать распивать всякие там напитки еще минут на 20-25. По возвращению нас встретит такой экран:

Итак, мы завершили второй этап, пора переходить к настройке операционки.

Настройка Windows XP на виртуальной машине

Важное отступление. Чтобы перевести курсор мыши с гостевой операционной системы на основную жмём правый Ctrl.

Для начала проверим, есть ли на нашей свежей XP интернет:

У меня интернет заработал сразу, если у Вас возникнут сложности – поэксперементируйте с настройками ВМ (Свойства -> Сеть).

Устанавливаем дополнения гостевой ОС:

Жмем Next, Ok, Install – короче устанавливаем эту ерунду. По завершению нас попрося перезагрузиться, соглашаемся, НО предварительно извлечем установочный диск из CD-привода.

После перезагрузки у нас один курсор на основную и гостевую операционки, ну и так там всяких плюшек добавилось.

Я себе еще решил поставить антивирус для верности, Avast.

Напоследок убедимся, что общая папка подключилась успешно:

Всё, винда настроена, остался последний этап:

Установка клиент-банка на виртуальную машину

Это та самая часть, из-за которой я потерял много времени, пока не проникся сутью процесса.

Заходим в нашу общую папку и устанавливаем csp-win32-kc2-rus (по крайней мере в моём банке такую выдали). В инструкции было указано, что в процесс нужно будет поставить галочку в пункте про биологический датчик.

После установки нас снова попросят перезагрузиться. Повинуемся.

Теперь вспоминаем, что мы в начале делали виртуальный дисковод. Пришло время вставить в него виртуальную дискету. Сначала дискету нужно сделать, для этого качаем WinImage , устанавливаем и запускаем его. Жмем на пиктограмму чистого листа (создаем новую дискету) и выбираем 1.44. Сюда же копируем файлы ключей, выданные в банке:

Сохраняем образ дискеты, обязательно в .ima (в нем работает гарантированно).

Переходим к окну виртуальной машины и выбираем сохранённый образ дискеты:

Закончили с дискетой, переходим ко входу в клиент-банк.

Так как я обслуживаюсь в ГазЭнергоБанке, то в дальнейшем будем эксплуатировать их сайт.

При первом заходе на сайт браузер покажет кучу предупреждений и просьб, везде отвечаем положительно:

Теперь мы наконец-то можем ввести логин и пароль, хотя еще и не можем войти в клиент-банк Мы опять подтверждаем всё что просит браузер.

Если всё сделано правильно, то на появившейся странице Вы увидите себя. Пока не жмем далее:

На страничке есть тщательно замаскированная ссылочка «здесь», она то нам и нужна. Тыц.

Видим страничку с путями к носителям ЭЦП (выдают в банке, поройтесь в папочках, у меня был путь Ерошенков\7843-ключи\CRYPTO\PUBLIC\00000000\). Я просто перепрописал их на папку на жестком диске (зеленые пятна – это не пятна на Вашем мониторе, не трите, это я цыферки закрасил):

Оставлять пути по умолчанию или менять на свои – Ваше дело. Жмем ОК или ОТМЕНА и снова оказываемся в предыдущем окне. Жмем далее, получаем еще кучку вопросов от браузера и везде отвечаем утвердительно:

А теперь момент истины – если всё сделали верно, то увидим нечто похожее на:

Ура, мы их победили!!! Нас ржавыми вилами не заколешь!!!

Рекомендации по дальнейшей работе с виртуальной Windows XP

Если планируете провести много времени в клиент-банке, но можно открыть окно FullScreen:

Вернуться просто – внизу при наведении мыши выплывает панель.

Вы можете вообще не выключать виртуальную операционку, можно просто сохранять ее состояние, тогда старт будет быстрым и комфортным:

Теперь настоятельно рекомендую сделать снимок текущего состояния виртуальной машины, чтобы потом, в случае поломки, можно было быстро вернуться к рабочей версии (меня уже спасало):

Эпилог

Вот так благодаря непродуманному софту можно получить длительный секс

Всех с наступающими Новогодними праздниками!!!

P.S.: если вдруг данный пост прочитали разработчики клиент-банка ДБО BS-Client – ничего личного, я в корявости данного софта виню не исполнителей, а руководителей, которые таким образом наладили процесс. И, если вдруг не встречалось такое, … короче ссылочка.

Работа верстальщика предполагает постоянное взаимодействие с заказчиком, дизайнером, программистоом, иногда сеошником. Сверстав очередную страницу необходимо показать ее всем этим людям чтобы они одобрили или же сделали свои замечания. Раньше я по старинке выкладывал проекты на свой сервер и раздавал ссылочки всем, кому надо. Теперь я делаю проще: создаю папку в разделе Public, верстаю прямо там или выкладываю туда готовую верстку (в последнее время обычно первый вариант) и даю клиенту ссылку типа http://dl.dropbox.com/u/2930651/pro-price/html/index.html, а он уже сам раздает ее кому посчитает нужным. По завершению проекта я удаляю работу из публичной папки в свой архив.

Плюсы такого способа ведения проекта:

• Клиенту всегда доступна последняя версия
• Нет заморочек с выкладыванием проекта на сервер или отсылкой новой версии на email.
• Очень удобно при работе на нескольких компьютерах (у меня например ноут и десктоп)

Минусы:

• Клиенту всегда доступна последняя версия (не всегда хочется показывать промежуточные этапы)
• Размер расшаренных папок по умолчанию в бесплатно версии ограничен 2-мя гигами (есть способ увеличить в 4 раза, об этом ниже), поэтому PSD я иногда храню в другом месте.

Кроме того – с Dropbox можно вести командную работу. Для этого создаем и расшариваем папку проекта и рассылаем инвайты всем членам команды – всё, дальше работаем вместе

Описание работы с Dropbox

Для начала Dropbox нужно скачать (есть как под Windows, так и под Ubuntu и MacOS) и установить себе на машину. Дальнейшее описание будет под Windows.

После установки в трее появляется значек:

На жестком диске появляется папочка My Dropbox, с подразделами Public и Photos.

Здесь же вы можете создавать новый подраздел и расшарить его:

Далее пред вами предстанет страничка отправки инвайтов:

Отправляете инвайты и у всех членов команды появится такая же папка, содержимое которой будет синхронизироваться сразу же при изменении или добавлении файла (берем в расчет скорость интернет канала). Конечно же, у всех должен быть установлен Dropbox.

Чтобы показать файл публично, помещаем его в Public и делимся ссылкой с кем угодно и каким угодно способом:

Увеличиваем лимит до 8 гигабайт

У Dropbox есть партнерская программа, по которой можно приглашать людей и получать увеличение квоты на 250 мегабайт за каждого приглашенного. Например, если вы сейчас перейдете по ссылке http://www.dropbox.com/referrals/NTI5MzA2NTE5 и зарегистрируетесь – мне будет счастье в виде дополнительных 250Mb
Кстати, регистрация по ссылке выше не только мне счастье принесет, но и вам, т.к. вместо 2Гб вам дадут 2,25Гб!

Послесловие

Вообще Dropbox – хорошая штука! Практически у всех моих друзей и знакомых коллег он установлен.

Рекомендую этот инструмент как незаменимого помочника во взаимодействии как людей, так и компьютеров!

UPD: Увы, но правила дропбокса изменились и теперь он не открывает файлы .html

Не желая мириться с таким положением дел, я, как и в случае с Notepad++, написал макросы для самых частоупотребляемых записей, дабы сэкономить драгоценные секунды (да и лень честно говоря писать свойства целиком).

Примеры:

Alt+C bb TAB — border-bottom:1px solid #FFF*;
Alt+C p TAB — position:relative*; top:0; left:0;
Alt+C fw TAB — font-weight:900*;
Alt+C tb TAB — text-decorarion:underline*;
Alt+C bg TAB — background:#FFF url(../images/bg.png) repeat-x 0 0;
* — зачеркнутым показаны символы, которые будут выделены для изменения

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

Всего на данный момент написано 18 комбинаций, скорее всего добавится еще что-то, предлагайте варианты.
На скорую руку соорудил простенький cheat sheet:

Итак, если вы считаете, что такие макросы будут полезны в повседневной работе — качайте org-netbeans-modules-editor-settings-custommacros.xml.
Этот файлик нужно закинуть в c:\Users\habrauser\.netbeans\6.9\config\Editors\Macros\ (если у вас уже есть свои макросы — будте осторожны при копировании, перезатрете).

Еще в NetBeans существует такая классная штука, как шаблоны кода, которая превосходит по удобству макросы, в PHP они работают замечательно, в CSS мне не удалось ими овладеть

Буду благодарен за полезные советы и дополнения к вышенаписанному. По мере поступления идей (своих или чужих) макрос будет обновляться.

• all – Все типы. Это значение используется по умолчанию.
• aural – Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille – Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld – Наладонные компьютеры и аналогичные им аппараты.
• print – Печатающие устройства вроде принтера.
• projection – Проектор.
• screen – Экран монитора.
• tv – Телевизор.

Обычно верстка очередного макета ограничивается записью:

1

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

где media=«all» – это указание для всех девайсов использовать стить style.css. Немного реже можно увидеть где media=«print» для принтеров. Но мало кто из верстальщиков знают (или используют) всю мощь @media. Попробую на примерах показать некоторые «фишки».

В дальнейшем я буду использовать @media или @import в теле css-файла, подключение стилевых файлов по этим же правилам производиться аналогично.

Простые примеры медиа-импорта

1
2

/* Если ты "экран" - подключи стиль. */
@import url(style.css) screen;

Самое распространенное выражение.

1

@import url(style.css) screen, projection ;

Тоже самое, только с перечислением типов устройств.

Медиа-выражения

1
2

/* Если ты экран и при этом цветной - загрузи этот стиль! */
@import url(color.css) screen and (color);

1
2
3

/* Если твоя ширина больше или равна 500px - обработай. */
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

1
2
3
4
5
6
7
8

/* Если ты наладонник или экран с раширением не больше 480px - обработай */
@media  handheld,
		screen and ( max-width:480px ),
		screen and ( max-device-width:480px ) {
	BODY {
		font-size:1.3em;
		}
}

(пример взят у pepelsbey)

1
2

/* правило сработает в случае, если разрешение экрана по ширине в пределах от 400 до 700 пикселей */
@media screen and (min-width: 400px) and (max-width: 700px) { … }

1
2
3
4
5
6

/* Здесь мы определяем высоту экрана девайса. Иногда может быть полезным. */
<link rel="stylesheet" media="screen and (device-height: 600px)" />
<pre>
<pre lang="css" line="1">
/* Если ты в вертикальном положении (например, iPad) - обработай. */
@media all and (orientation: portrait) { … }

1
2

/* Ну ты понял... */
@media screen and (color), projection and (color) { … }

Логические выражения

1
2

<!-- Если ты не цветной экран - обработай. -->
<link rel="stylesheet" media="not screen and (color)" href="example.css" />

(проблемы с кроссбраузерностью)

1

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Разное

1
2
3
4
5

/* Правила для мониторов различных форматов */
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

1
2
3
4

/* Вертикальное расположение экрана. */
@media all and (orientation:portrait) { … }
/* Горизонтальное расположение экрана. */
@media all and (orientation:landscape) { … }

1
2
3

/* Что-то для терминалов с сеткой, лучше почитать спецификацию. */
@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

1
2

/* Стили для телефизоров с прогрессивной разверткой. */
@media tv and (scan: progressive) { … }

Кстати, я считаю, что тип TV – достаточно важный тип в будущем. Уже сейчас появляются телевизионне приставки с возможностью веб-серфинга, и, думаю, скоро это будет настолько же обыденно, как раньше видеомагнитофон или DVD-плеер. В одном я только сомневаюсь – будет девайс считать себя телевизором или компьютером?

P.S.: Наиболее интересные выражения находятся в первой половине поста, вторая половина – просто показать возможности @media и @import.

P.S.S.: Возможно в чем-то есть ошибки, буду благодарен за исправления.

При написании этого материала использовалась спецификация Media Queries, находящаяся в статусе возможной рекомендации (CR). Описано не всё, есть еще работа с цветами. Я сильно не уверен, что всё будет работать в реальных условиях, на работоспособность и кроссбраузерность всё не протестировал, буду делать это по мере возможности и дописывать.

Голосуйте!

Несколько дней назад меня попросили сделать сайт для детей-сирот. Безучастным остаться я не могу, поэтому готов помочь проекту на сколько это в моих силах.

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

Сайт проекта: dari-dobro-detyam.ru

Заранее всем спасибо!

Что требуется?

Сейчас, на этапе разработки сайта, требуется дизайн. Хотелось бы видеть что-то красивое и «в тему», без банальных «солнышек» и «ромашек». Логотипа тоже нет (весь существующий дизайн – одна из шкурок WP). Нужны идеи и их воплощение.

У меня комментариев нет! А у вас?