Сайт стандартов W3C и статьи стилистов о CSS3

Официальный сайт разработчиков, правда нет на нем CSS3, но есть обучение, инструменты, сервисы (софт для разработчиков), новости и, конечно, справочники. Вот официальный валидатор CSS
Вот хорошая подборка на русском языке с действующим кодом. Можно поиграть с настойками в Firebug. Main View – блог о веб дизайне и веб разработке

Примеры из хороших блогов
Возможности броузеров
Кнопки раздвигаются
Create a 3D Cube in Pure CSS3
IE9 Is Here! 7 Cross-Browser CSS
CSS3 transform

Второй блок media Наш халтурщик, но с дизайном

Второй блок code Блог в клеточку Text shadow

......просто текст в самом нижнем текстовом блоке, он поднимается, или нет?

Школа CSS, js, jQuery, PHP, HTML, XML...

java scripts
CSS

Здесь не только учебники, справочники... но и "живые" примеры, которые можно использовать для отладки кода. Слов нет, как удобно. Клик по картинке - и попадешь на jQuery.

Справочник CSS и форумы Styling help for CMS

Помимо генератора (так себе), здесь интересен форум Styling help for CMS, blogs and social network sites such as Drupal, Wordpress, Joomla, Friendster, MySpace...
Кроме того, интересен дизайн кнопок меню и панель социальных сетей...
Есть и руководство для начинающих, причем внимание уделяется и описаниям философии построения CSS таблиц Basic steps to build a site from a design

#primary a {
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
text-shadow: 1px 1px 1px white;
}
#primary a {
color: #50A4AB;
font-weight: bold;
border: solid 1px #CCC;
background: url(/sites/all/themes/csscr_six/images/buttonslice.png) repeat-x;
margin: 0;
padding: .5em .5em .3em .5em;
line-height: 2em;
text-decoration: none;
}

Шпаргалки для блоггера на русском

В "Шпаргалке для блоггера" есть хорошие посты про форматирование, js скрипты, AJAX загрузка страниц, даже оптимизация. Здесь ссылка на код для скругления углов (клик по картинке)

Закругленные углы CSS 
Kак написать текст на изображении 
Как сделать градиенты на CSS
Как задать CSS тень текста
Как показать виджет на выбранных страницах

Вот еще один хороший блог с переводами
"Data tags for layouts", "Widget Tags for Layouts",
 "Page Elements Tags for Layouts" от izhurnal

А вот генератор кода углов, теней,
градиентов, прозрачности CSS3

Подбор теней и ракраска блока с CSS3 PIE

Поэкспериментировать и настроить границы блока, тень от блока, градиент двух цветов с ColorPicker

2.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

Вот два фрагмента CSS из Firebug левый - для внутренненго элемента меню, правый для li первого уровня.
Все хаки здесь. Главный хак - вставка в "ul#nav li a " форматирования "-webkit-box-shadow:"...., менял еще где-то padding,
Главный недостаток полученного слоя - все внутренние списки выглядят также, как и главные.

1.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

В этом году в панели управления Blogger появился сервис дизайна шаблонов. На основании предустановленных шаблонов теперь можно строить полноценный качественный дизайн... Хочется написать об этом, но некогда..., да и лучше сначала "показать", что можно сделать, а потому ограничусь промежуточным, но очень важным постом о хаках CSS для того, чтобы прилепить jQuery SooperFish Multi-Column Animated Drop-down меню к боковой стенке окна броузера (т.е. сделать меню неподвижным. (Меню можно посмотреть и скачать, если кликнуть по картинке).
Итак, начнем с HTML шаблона виджета темы Blogger`a

Прячем Google navbar, заголовок и освобождаем место для TopUp

Берем за основу шаблон Корпорация "Чудеса" из нового (сервиса) дизайнера шаблонов Блоггера.
Во вкладке "Дополнительно" находим опцию "Добавить CSS" и сдвигаем весь блог вправо, прячем панель Google navbar и название блога.

.content-inner {float: right;}
#navbar {height: 0px; visibility: hidden; display: none;}
#header {height: 0px; visibility: hidden; display: none;}

Хаки в дизайт Navbar Apycom (начало)

вот файл CSS с хаками

Оставлю, пожалуй, здесь всё, как было... а вот в блоге "Исследование рынка" я попробовал подобрать приличное горизонтальное меню. Пришлось сделать несколько вставок в файл menu.css Кроме того, в сам файл шаблона вставил вот это.

<!-- navbar -->
<link href='http://altersego2007.narod.ru/se1/jquery/navbarApycom/apycom.com-13-whiteSE/menu.css' rel='stylesheet' type='text/css'/>
<script src='http://altersego2007.narod.ru/se1/jquery/navbarApycom/0apycom.com-13-whiteSE/menu.js' type='text/javascript'/>
<!-- http://gettopup.com/releases/latest/top_up-min.js TopUp - popup windows sidebars*************** http://altersego2007.narod.ru/se1/jquery/TopUp_latest/1.7.1/javascripts/top_up-min.js ****************************************************************************-->
<script src='http://gettopup.com/releases/latest/top_up-min.js' type='text/javascript'/>
<!-- yahoo mediaplayer -->
<script src='http://mediaplayer.yahoo.com/js' type='text/javascript'/>

Как "отлепить" горизонтальное меню (navbar) от верхней кромки страницы.

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

Вот блоки горизонтального меню:
<div id="HTML1" class="widget HTML">
<div class="widget-content">
<div id="menu">
<!-- id="menu" это уже блок не блоггера,
а плагина JQuery -->

А вот стили для них:
#main .widget {
padding-bottom:10px;
margin-bottom:20px;
border-bottom:dotted 1px $bordercolor;
clear: both;
}

Вопросы, возникшие у меня при изучении шаблона (вот он полность, кстати ;
весь код код ):
1) в таблице CSS задан стиль для класса "widget", а в коде есть class= "widget HTML", но нет просто класса "widget"... Стоп..., припоминаю, кажется здесь присвоение сразу двух классов... в одних кавычках через пробел... ?
2) что такое clear: both; эта строчка встречается очень часто..., все лень посмотреть...

А мне нужно исправить следующие недостатки посредством CSS: Штрих линия - убрать вообще,

Пример хака старого шаблона Blogger

В процессе редактирования стилей шаблона, я обнаружил, что кнопка AddThis, которую я поместил в строку других иконок (почта, редактирование) под постом, выше на целых 5 пикселей, что выглядит гм...гм неэргономично...

Зраво поразмыслив, я решил, что надо бы родные блоггеровские иконки переместить наверх..., а под постом хорошо бы смотрелся ряд иконок-ссылок на социальные сервисы и закладки. Получил вот этот код на AddThis. Вставил под старым, просто окружил тегами "span", в результате блок div разворотил мне всю строку, но это не страшно (см. первый пост)...

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4ba11177184f5626' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'></a>
<a class='addthis_button_myspace'></a>
<a class='addthis_button_google'></a>
<a class='addthis_button_twitter'></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ba11177184f5626"></script>
<!-- AddThis Button END -->

Зато теперь можно добавить любое количесвто иконок в любом порядке, вот только где я могу найти их названия? Во-первых, на сайте есть хороший хелпер, а вот сюрприз sirprise API для настройки кнопок AddThis

CSS и структура шаблона Блоггера

#outer-wrapper {
margin-top: 0px;
margin-$endSide: 3em;
margin-bottom: 0;
margin-$startSide: 3em;}

Это в начале, а в конце:

body#layout #outer-wrapper {
margin-top: 0px;
margin-$endSide: 50px;
margin-bottom: 0;
margin-$startSide: 50px;}

Посмотрим на шаблон этого блога. Вот весь простой шаблон Блоггера (1 столбец, без боковых полей "сайдбаров") . Мои комментарии в тексте выделены красным шрифтом. Обратим внимание, что в-основном используются ID и классы, а для блока "outer-wrapper" есть два определания стиля, здесь странные идентификаторы вроде $endSide - это переменные, которые определяются в шаблоне (XML) Блоггера:

<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">

Толковых описаний языка я так и не нашел, но из картинок понятно, что по умолчанию значения соответствуюе "left" "right", ...а вот как их можно менять, использовать?  Может быть посмотрим код уже сформированной страницы блога. Прояснится что-нибудь...?
Посмотрел... Нет, скорее запутает... Оказалось, что блок "outer-wrapper" находится сразу внутри body, а элемента с ID="layout" вообще не видать в сформированном коде HTML. Ну ладно, пока не очень то и хотелось..., нам до завтра надо перечисленные баги исправить, а не шарады разгадывать.
Перекур. Вместе с сигаретными канцерогенами в башку заскакивает паскудная мыслишка.

Экспериментируя с форматированием, я решил вставлять стили в теги, используя style="...". Потом посмотрел раздел "Шрифты и цвета" и понял, что можно (точнее-нужно) подобрать цвет фона и блоков под цвета Navbar, это проще, чем возится с картинками и CSS горизонтального меню Apicon.  Значит, нужно будет в каждом написанном посте заменять атрибуты style на class. Утомительное это дело... Так что надо скорее сочинить свои классы и прописать их в таблице стилей Блоггера... И этим я займусь сразу после ловли CSS-багов... Дураков работа любит...

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

TopUp Narod

Плавающая картинка или объект

Скрипты Picasa блокируют TopUp окна. Что делать?

Это как же здорово получилось, две картинки - снимки верхней части и футера страницы этого блога встроенный редактор так здорово сжал, что они сцепились так, что и не определишь, что это два нестыкующихся кусочка одного поста, добавим было в код ссылки каждого кусочек кода (тип class="top_up"). Однако, в Picasa стоят скрипты, блокирующие всплывающие окна (см. код):

class="tu_iframe_800x600" открывается было окно, но быстро потом открывается в той же вкладке, даж при наличии в коде target="_blank"
class="top_up" - виснет намертво так, что все ссылки (со всеми классами) не работают
target="_blank" - без определения свойств класса работает, как положено

Код с теми же классами из Navbar работает, а ссылки на Пикасу подвешивают скрипты TopUp... Ничего не остается, как использовать target="_blank"... Стоп, стоп, стоп... А если я буду открывать этот (к примеру) пост во фрейме, то, при клике по превью-картинке, во фрейме откроется каринка, а как вернуться от нее назад к тексту? Кнопок то для возврата нет... Получается, что в эти посты лучше вставлять картинки такого размера, чтобы их не надо было увеличивать.... Либо найти другой сервис... картинок..., угу, можно же встаdлять картинки прямо из сети по URL..., к примеру, из Jino... Тогда можно и не сохранять их на винчестер... Интересная мысль, однако. Надо будет попробовать.

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

Настраиваем Navbar

<!-- navbar -->
<link href='http://dl.dropbox.com/u/5038506/menu.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/5038506/jquery.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/5038506/menu.js' type='text/javascript'/>

На сайте apycom.com можно выбрать и настроить вариант горизонтального меню. Вот инструкция под дальнейшей настройке. Help"
Весь код размещен в трех файлах (два скрипта и один css) для области head и ненумерованного списка ссылок в горизонтальном виджете
Я разместил скрипты сначала на сервисе dropbox, но поскольку там со внешними прямыми ссылками есть ограничения, то экспериментировать проще с Narod'a
И провел я чудные 2 часа, загрузил все меню сначала к в компьютер, а потом в народ. Подставлял новые ссылки в шаблон и рассматривал разные меню. Надоеллллло.... Эксплорер не хочет закрывать ТопАп окна, по клику на кресте, но делает это клавишей "Escape"... "Escape from New York" was one of the first video, vhich I had seen... Past Indefinite or Past Perfect?... I forgot... forget-forgot-forgotten... hrrrrrrrrrrrrrr... what is the russian for "to be asleep"

Форматирование текучего поста

Сначала о том, какие блоки использовать:

<div style="float: left; padding: 1em 1em;"> Плавающая картинка или объект</div> 

<div heigh="80" width="200" style="background-color: #eeeeee; text-align: left;overflow: hidden;float: left; margin: 2em 1em; padding: 2px 2px;"> Это блок с кодом фон голубой </div>

<div style="text-align: justify;">А это блоки с текстом </div>

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

С первым блоком всё ясно, здесь только свойство padding, дабы текст не прилипал к картинке, сначала верх=низ, а потом лево-правые отступы. Почему не поля? Да, можно и поля, просто не знаю, iexplorer по-прежнему их "не так показывает"?

Во втором блоке не работают свойства width и heigh... надо разобраться - почему?

А в третьем... есть justify, которое штатный блоггер вставляет в каждый блок div, а сами блоки щедро создает и вставляет для каждого абзаца... Спрашивается, для моих "жидких" постов эти текстовые блоки-абзацы будут затекать между блоками картинок и кода (как в нижнем посте), как они это будут делать? Как найти оптимальный размер текстового блока? А редактор что выкинет?

И еще вопросы:

1.Пробовал текстовый блок, он неудобен, поскольку нельзя разделить код на строки (нет ли там какого свойства? Посмотреть в справке...)

2. В текстовом блоке также не работали свойства width и heigh... (там по умолчанию маааленькая фитюлька выскакисает вместо блока)...

И наконец, увидел, что не вставил jusyify, выделил весь пост и нажал кнопку в редакторе. Смотрю код...  да, там где выравнивание было задано, оно осталось..., а текст был разбит на блоки со свойством style="text-align: justify;"

Пробуем фреймы с MindMeister (navbar)

Как показали первые эксперименты, вставить новую строчку в здоровенном меню в окошечке редактирования виджета  - задача для  усидчивых маньяков. Потому, проще сразу напихать в меню побольше пунктов и подпунктов, и для этого использовать какой-нибудь Notepad++ (редактор кода). Здесь и будем продумывать структуру меню! И, пожалуй, используем для этого Вот этот "забавный" сервис

Вот такой код:
<iframe frameborder="0" height="400" scrolling="no" src="http://www.mindmeister.com/maps/public_map_shell/14834322?width=600&amp;height=400&amp;zoom=1" style="overflow: hidden;" width="600"></iframe>

И здесь возникает сразу несколько вопросов:
1. Вставка во фрейме!!!, значит количество таких схем определяется только ограничениями к количеству бесплатных публикаций на самом сервисе. В бесплатной версии вроде бы недоступно "online" обновление? Это что же? ребята просто генерируют картинку для вставки в блог? А фрейм используют, чтобы "завлечь" народ на свой сервис... Коли так, то мы и без них этих картинок сможем наплодить изрядно...

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

2. Этот пост получится довольно обширным, здесь следует наладить форматирование для "текучих" блоков: картинка в тексте, блок с кодом - в рамке и ведет себя как картинка в тексте... стоит ли открывать эти картинки в дополнительноп поп-ап окошке? Ясное дело, что хочется выпендрится, а зачем? Пока непонятно...

Как убрать Blogger navbar

Редактируем HTML (в соответствующей вкладке админки), а именно, в шаблоне в разделе таблиц стилей (лучше перед body) всталяем код:

#navbar-iframe {height: 0px; visibility: hidden; display: none;}

всего и делов то...

Платный "темогенератор" для Blogger

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

Рекомендации по скорости загрузки для Blogger

1. Уменьшить количество постов на странице.
2. Явускрипт - на дно страницы (на дно сайдбара).
3. Стили - наверх
4. Картинки - из Picasa, размеры превьюшек уменьшить.
5. Проверять скорость загрузки разных частей сервисом Stopwatch
6. Важный контент грузится первым.

2. Как устроен Widget

Описание дано в Widget Tags for Layouts 1
Тут есть:
<*b:includable id='main' var='thiswidget'>
[insert whatever content you want here]

Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need. If you make more includables with different IDs, they will not be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with <*b:include name='new' /> and it will display that way.

<*b:includable id='main'>
<*b:loop var='i' values='posts'>
name='post' data='i'/>



<*b:includable id='post' var='p'>
Title:


The attributes for the b:include tag are as follows:

• name: (Required) An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
• data: (Optional) An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.

<*b:loop var='i' values='data:posts'>
<*h2>
<*/b:loop>

• <*b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.
• <*b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).
• <*b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.
• <*b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.