Добрый день Уважаемые!
В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.
Читать полностью »
Рубрика «css» - 151
Вступительные титры из Star Wars на JS+CSS3
2012-03-14 в 14:14, admin, рубрики: css, css3 transform, Интересное, метки: css3 transform, интересноеЗдравствуй Хабрахабр.
Вдохновленный недавно законченым курсом «Learn Jquery in 30 days» и статьей про генерацию изображения в виде кода матрицы, решил прокачать свой js до уровня чуть выше плинтуса, попробовать заработать инвайт и сделать что-нибудь интересное, что-то что можно показать, не сгорая от желания провалится под землю, такому искушенному сообществу как хабр.
Читать полностью »
Готовим css-спрайт в Spritepad
2012-03-14 в 13:50, admin, рубрики: css, css sprites, веб-дизайн, метки: css, css sprites 
Как мы часто составляем спрайты:
1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спарайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.
Да, у всех может немного отличаться этот процесс. Можно воспользоваться гугловым сервисом групировки всех картнок в спрайт, но он не так гибок.
Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» (Мы целуемся?) с проектом Spritepad.
Вырезаете всеЧитать полностью »
Адаптируем графику под Retina экран
2012-03-10 в 7:28, admin, рубрики: css, javascript, media queries, retina display, server-side, svg, метки: css, javascript, media queries, retina display, server-side, svg 
Очень часто мне встречаются сайты которые отвратительно выглядят на iPhone4, и дело даже не в том, что большинство из них не адаптированы под маленький экран, а в том, что разработчики не учитывают новый тип экранов. На иконки не хочется смотреть, на кнопки не хочется нажимать, а от картинок вообще хочется… закрыть сайт. То, что призвано завлечь пользователя на сайт, вникнуть в его суть, а не покинуть его тут же — теперь работает совершенно наоборот. Но пользователи iPhone в целом привыкли к такой ситуации, т.к. телефон не может заменить полноценного браузинга.
Однако, совсем недавно AppleЧитать полностью »
Каскадные Таблицы Стилей / Новый метод замены текста картинкой, или избавляемся от -9999px
2012-03-02 в 23:24, admin, рубрики: css, html-верстка, переводы, метки: css, html-верстка, переводыХотелось бы поговорить о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы.
Немного об истории решения этого вопроса.
Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая <a rel="nofollow"Читать полностью »
HTML5 / [Из песочницы] HTML-атрибуты data-* для хранения параметров и получения их в js
2012-03-01 в 14:25, admin, рубрики: css, html, html5, javascript, jquery, плюшки, метки: css, html, html5, javascript, jquery, плюшки В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.
Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.
Например, для сохранения уникального номера блока часто пишут так:
<div class="items">
<div class="item1">...</div>
<div class="item3">...</div>
<div class="item6">...</div>
<div class="item1">...</div>
...
Читать полностью »
HTML5 / Игра Survivor (Commodore 64) на html, css и javascript
2012-02-29 в 17:40, admin, рубрики: css, game, html 5, javascript, метки: css, game, html 5, javascript 
Довольно качественная эмуляция игры на HTML + CSS + JavaScript, для рисования используются именно html блоки, а не canvas.
Представьте, что на дворе сейчас 1982 год и вы играете в аркаду. Это было любимое времяпрепровождение у подростков того времени. Ваша задача — уничтожить все, что можно :) Для управления используйте стрелки, для стрельбы — shift или ctrl, для мин — пробел. Цель игры — уничтожить базу, при этом не попасться противникам и не убиться об стенки.
Игра Survivor изначально была написана для Atari 2600 в 1982 году и была портирована на Commodore 64 годом позднее. ДаннуюЧитать полностью »
Каскадные Таблицы Стилей / Необычный баг в Chrome с CSS селектором
2012-02-27 в 14:28, admin, рубрики: css, css selectors, Google Chrome, webkit, баги, костыль, метки: css, css selectors, Google Chrome, webkit, баги, костыль Многие веб-мастера для придания оформления ссылкам, используют css селекторы вида [href^=”http://samedomen”], чтобы ссылки на определенный адрес по разному оформлялись не используя классы.
В одной админке использовал такой селектор, для придания иконки ссылке в зависимости от url. Однако у себя на Google Chrome 17 столкнулся с багом, что иконки у всех ссылок одинаковые. Во всех остальных браузерах(В том числе и в IE8 и Safari 5), все нормально. Ниже скриншот с простейшим примером.
Для простоты примера, я убрал из кода все лишнее.
<!DOCTYPE html> <html> <head> <metaЧитать полностью »