Хабрахабр: коллективные http://habrahabr.ru/rss/blogs/css/ ru editor@habrahabr.ru habrahabr.ru Tue, 09 Feb 2010 18:07:05 GMT http://habrahabr.ru/ http://habrahabr.ru/i/logo.gif Хабрахабр <![CDATA[Каскадные Таблицы Стилей / [Перевод] Анимированный AT-AT Walker из Звездных войн на чистом CSS3]]> http://habrahabr.ru/blogs/css/83411/ http://habrahabr.ru/blogs/css/83411/ демо

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

В этой статье мы рассмотрим, как можно сделать AT-AT Walker из V эпизода Звездных войн с помощью CSS3 анимации. Начнем с обзора тех свойств CSS3, которые делают эту анимацию возможной. Затем рассмотрим список частей AT-AT и CSS код для движения каждой части.

подробнее...]]> Mon, 08 Feb 2010 06:02:57 GMT Kron0S AT-AT Walker Star Warscss анимацияcss3 <![CDATA[Каскадные Таблицы Стилей / Golden Grid CSS: PSD-шаблон]]> http://habrahabr.ru/blogs/css/82732/ http://habrahabr.ru/blogs/css/82732/ Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.

Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.

Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.

Скачать (.zip, 20 кб)]]> Mon, 01 Feb 2010 12:00:46 GMT Altzgamer CSSgrid 960grid designgridsblueprintgolden gridpsdшаблоншаблоныphotoshopвёрстка <![CDATA[Каскадные Таблицы Стилей / [Ссылка] 3D банка Колы на чистом CSS]]> http://habrahabr.ru/blogs/css/82062/ http://habrahabr.ru/blogs/css/82062/ Исходник для изучения тут: http://www.romancortes.com/ficheros/css-coke.html]]> Tue, 26 Jan 2010 12:13:29 GMT yoihj css <![CDATA[Каскадные Таблицы Стилей / Колоночная верстка]]> http://habrahabr.ru/blogs/css/81193/ http://habrahabr.ru/blogs/css/81193/
Плюсы
  • Есть прижимающийся к полу футер
  • Колонки меню растягиваются по 100% высоте
  • Колонок может быть сколько душе угодно
  • Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
  • Ширина как резиновая, так и фиксированная
  • Критический минимум хаков
  • Не используется Javascript
  • Не используются бекграундовые изображения для создания эффекта колонки
  • Никаких таблиц
  • Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы
  • Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
  • Есть несколько абсолютно-позиционируемых блоков
Читать дальше →
]]> Tue, 19 Jan 2010 07:31:30 GMT dioteos cssрезиновый дизайн100divприлипающий footer <![CDATA[Каскадные Таблицы Стилей / Opera 10.50 и CSS-хаки]]> http://habrahabr.ru/blogs/css/79256/ http://habrahabr.ru/blogs/css/79256/
Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.
Читать дальше →
]]> Thu, 24 Dec 2009 23:19:06 GMT bolk operacss hackcss hacks <![CDATA[Каскадные Таблицы Стилей / Инструменты css, экономящие ваше время]]> http://habrahabr.ru/blogs/css/79128/ http://habrahabr.ru/blogs/css/79128/ 15 Time Saving CSS Tools You Should Be Aware Of
Под катом текст, графика, ссылки
Читать дальше →
]]> Wed, 23 Dec 2009 18:34:30 GMT doctorgrif cssинструменты <![CDATA[Каскадные Таблицы Стилей / Поддержка CSS3 в Opera 10.50]]> http://habrahabr.ru/blogs/css/79046/ http://habrahabr.ru/blogs/css/79046/
Но сегодня, в пре-альфе версии 10.5, Опера анонсирует поддержку интересных и давно ожидаемых фич CSS3, в частности это — CSS3 Transitions и 2D Transform. Правда пока, это еще далеко не рабочее решение, и поэтому, для того что бы посмотреть как это работает в Опере, используем префикс -o. Подробности по ссылке

Все это стало возможно, не без помощи движка Opera’s Presto 2.5

И наконец-то, долгожданная поддержка CSS3 Backgrounds и Borders. И кстати, Опера первый браузер, который позволяет использовать эти прелести без префиксов -moz или -webkit

Читая новость, дойдя до слова префикс -o, я подумал, блин, еще один префикс, но за это (см. абзац выше) — я готов простить Опере новый префикс и сказать, а ведь не зря, используя CSS3 в своих проектах, я писал еще и просто border-radius (помимо -moz и -webkit)

P.S. Опубликовал этот топик именно в этот блог, так как фанаты Оперы еще явно что-то напишут в блог Оперы.]]> Wed, 23 Dec 2009 05:18:45 GMT shaggysmile css3opera <![CDATA[Каскадные Таблицы Стилей / [Ссылка] Вослед за ноябрьскими собраниями TPAC (W3C Technical Plenary / Advisory Committee) наблюдается рост статуса модулей будущего стандарта CSS3]]> http://habrahabr.ru/blogs/css/78480/ http://habrahabr.ru/blogs/css/78480/
Модуль «CSS3 Multicolumn Layout» достиг статуса «Candidate Recommendation».

Рабочие черновики модулей «CSS3 Transitions» и «CSS3 2D Transforms» обновлены, статус «Last Call» недалёк уж от них.

Модуль «CSS3 Color» достиг статуса «Candidate Recommendation».

Блог CSS3.info поведывает обо всех этих событиях и приводит гиперссылки, ведущие ко стенограммам заседаний TPAC.]]> Wed, 16 Dec 2009 17:02:01 GMT Mithgol TPACCSS3стенограмма <![CDATA[Каскадные Таблицы Стилей / Еще одна причина не использовать @import]]> http://habrahabr.ru/blogs/css/78045/ http://habrahabr.ru/blogs/css/78045/ «Не используйте @import», если еще не — советую прямо сейчас. К слову, в комментариях можно отыскать еще пару заметок: при использовании import браузер не лезет на сервер с заголовком If-modified-since и не ждет 304. Он полезет если упорно нажать F5 или ctrl+f5., и IE 6 (и вроде IE 7) может загружать только 32 <link> элемента идущих в шапке. Хотя про последний вроде тоже многие знают.

А сегодня я нашел еще одну неприятную особенность использования @import.

При попытке сохранения документа «Полностью», браузеры не подхватывают импортированные стили, и страница отображается без них. IE так вообще ругается, и ничего сохраняет, только если выбрать режим «Веб-архив», да и тогда сайт отображается не всегда корректно. Проверял в IE7/8, FF3, Chrome 3, Opera 10.]]> Fri, 11 Dec 2009 22:36:02 GMT waitekk importcss <![CDATA[Каскадные Таблицы Стилей / WebKit и expression]]> http://habrahabr.ru/blogs/css/74565/ http://habrahabr.ru/blogs/css/74565/
.myclass {behavior:expression((function(){})(this))}

читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах "{" и "}", которые в сумме вызывают какие-то метаморфозы в браузерах. Причём если убрать "{", то баг исчезает, а если "}", то остаётся. Естественно, наличие ";" в конце правила, тип селектора (т.е даже если это будет селектор для ИЕ, вроде * html [selector]), тип правила (например предварение правила "//" или "_") ситуации НЕ исправляют, иначе было бы не так уж и страшно!

Особенно знание этого бага полезно людям, любящим объединять все стили в один файл, не вынося стили для IE в отдельный файл, вместо этого используя star-hack и иже с ним! В любом случае если вы относитесь к тем, кто не выносит стили для Internet Explorer'a в отдельный файл, то пишите хотя бы expression'ы в конце файла, иначе долго будете искать причину проблем!]]> Sat, 07 Nov 2009 12:47:48 GMT Olegbl4 webkitbug <![CDATA[Каскадные Таблицы Стилей / [Ссылка] Анимация только средствами CSS3 и 2d-преобразования с помощью CSS3]]> http://habrahabr.ru/blogs/css/74336/ http://habrahabr.ru/blogs/css/74336/
2d-преобразования поддерживаются Firefox 3.5, Safari 4, Chrome 3.
Анимация средствами CSS3 поддерживается только webkit-ом (Safari 4, Chrome 3).]]> Thu, 05 Nov 2009 08:30:16 GMT mester css3css transitionfuturecss animationcss transform <![CDATA[Каскадные Таблицы Стилей / Фиксим png в IE6 с помощью expression, одним классом и без использования однопиксельного gif'а]]> http://habrahabr.ru/blogs/css/74105/ http://habrahabr.ru/blogs/css/74105/
Читать дальше →
]]> Mon, 02 Nov 2009 16:14:08 GMT Olegbl4 cssie6png <![CDATA[Каскадные Таблицы Стилей / [Перевод] 11 примеров использования CSS3]]> http://habrahabr.ru/blogs/css/73975/ http://habrahabr.ru/blogs/css/73975/

1. Закругление углов


Rounded Corners

Классический путь


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>

<div class="box">
<!--CONTENT-->
</div>

Читать дальше →
]]> Sun, 01 Nov 2009 07:42:38 GMT Roma2Duo csscss 3примеры <![CDATA[Каскадные Таблицы Стилей / [Перевод] Создание прототипа с помощью CSS-фреймворка Grid 960]]> http://habrahabr.ru/blogs/css/70203/ http://habrahabr.ru/blogs/css/70203/ Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа.
Читать дальше →
]]> Tue, 27 Oct 2009 08:55:01 GMT dreamhelg cssфреймфоркgrid 960 <![CDATA[Каскадные Таблицы Стилей / [Ссылка] @font-face или назад в будущее]]> http://habrahabr.ru/blogs/css/73354/ http://habrahabr.ru/blogs/css/73354/
Первая реализация данного свойства состоялась и того раньше, в 1997 году, когда компания Microsoft выпустила на рынок браузер IE4, позволявший встраивать на вебстраницы шрифты с помощью нового CSS-свойства @font-face…]]> Mon, 26 Oct 2009 01:26:17 GMT Zigzag шрифтыfont-facecssEOTOTFSVGTTFWOFF <![CDATA[Каскадные Таблицы Стилей / 1001-ый способ вертикального выравнивания]]> http://habrahabr.ru/blogs/css/73113/ http://habrahabr.ru/blogs/css/73113/
Читать дальше →
]]> Thu, 22 Oct 2009 14:05:25 GMT piumosso cssвертикальное выравнивание <![CDATA[Каскадные Таблицы Стилей / [Ссылка] Различия в поддержке CSS браузеров IE6, 7 и 8]]> http://habrahabr.ru/blogs/css/72418/ http://habrahabr.ru/blogs/css/72418/ Wed, 14 Oct 2009 15:14:30 GMT Perez CSSinternet explorerсравнениеmicrosoft <![CDATA[Каскадные Таблицы Стилей / [Перевод] CSS3: Во веки веков!]]> http://habrahabr.ru/blogs/css/71835/ http://habrahabr.ru/blogs/css/71835/
Давайте посмотрим правде в глаза. Mozilla производит настолько много альф, ночных сборок, релизов для разработчиков, что если Вы так и не обратили внимания на выпущенную недавно версию — Firefox 3.6 alpha — то Вас можно вполне понять.

Хотя, на сей раз основания были очень даже веские, чтобы сосредоточить внимание гиков. Поскольку, среди прочих положительных нововедений, внесенные изменения предусматривают:
  • свойство -moz-background-size
  • множественные фоновые изображения
  • новую единицу длины rem
  • CSS градиенты
  • улучшенное представление display: table

Теперь давайте сделаем важное замечание для прояснения ситуации — это все еще альфа-релиз (alpha release), который пока будут использовать только малейший процент от пользовательской базы Firefox. Тем не менее, у нас есть все шансы увидеть эти изменения в стабильной версии Firefox в конце года.
Итак, давайте разберем подробнее, что же все таки сулят нам вышеобещанные нововведения...
]]> Thu, 08 Oct 2009 07:54:02 GMT KeJSaR csscss-селекторыfirefoxfirefox 3.6firefox 3.6 alpha 1селекторыдекларации <![CDATA[Каскадные Таблицы Стилей / Способ вертикального выравнивания блока с помощью настоящего vertical-align]]> http://habrahabr.ru/blogs/css/71236/ http://habrahabr.ru/blogs/css/71236/ не основан на превращении блоков в ячейки таблицы и не использует css-свойство position.

Требования

— Должна быть известна начальная высота родительского блока;
— Дочерний блок может иметь произвольный размер как по высоте, так и по ширине.

Возможности

— Работает в IE6+, O9+, FF2+, webkit;
— Тру vertical-align выравнивание со всеми допустимыми значениями;
— Одинаковое поведение во всех браузерах (незначительные отклонение при некоторых условиях в ие6 будут оговорены ниже);
— При вырастании дочернего блока выше «папочки», родительский блок расширяется;
— Ни грамма Javascript.
Читать дальше →
]]> Thu, 01 Oct 2009 18:54:06 GMT homm cssvertical-aligndivблокивертикальное выравнивание <![CDATA[Каскадные Таблицы Стилей / Сентябрьское от cssplay (впечатляет)]]> http://habrahabr.ru/blogs/css/71108/ http://habrahabr.ru/blogs/css/71108/ После битв за чистые стили, работающие в IE6, да валидные, да без лишних оберток — эти украшалочки вызывают тихий экстаз.

NO hacks, NO conditional comments, NO tables and NO javascript
Tested and working in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome

  1. Многоуровневое выпадающее меню, UL
  2. Одноуровневое выпадающее меню (раскрывается при наведении, либо по клику) UL
  3. Вертикальный боковой слайдер (в JS-библиотеках такое называется Accordion) — ни строчки скриптов DL-DT-DD
  4. Боковое меню с раскрытием пунктов над контентом, DL-DT-DD
]]> Wed, 30 Sep 2009 20:45:10 GMT dirtyHabrBobr csscssplay.co.ukвыпадающие менюflyoutdropdownmultilevel