АяксЛайн.ру

Сайт Elite By Designs опубликовал большую коллекцию обучающих материалов по CSS, включающую в себя как руководства по основам технологии CSS, так и статьи для опытных разработчико

Источник: Elite By Designs.

Антонио Лупетти опубликовал небольшую заметку в своем блоге, в которой рассказал о создании красивых меню с помощью CSS, украшенных значками RSS. Вот два примера из статьи:

HTML

<div id=”rss-menu”>

<h2>Subscribe My Feeds</h2>

<ul>

<li class=”feed-xml”>

<a href=”http://feeds.feedburner.com/Woork”>Subscribe to RSS Feed</a&gt;

</li>

<li class=”feed-yahoo”>

<a href=”http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork”>Add to My Yahoo</a>

</li>

<li class=”feed-newsgator”>

<a href=”http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork”>Subscribe in NewsGator</a>

</li>

CSS

.feed-yahoo{

background:url(pic/feed-yahoo.png) no-repeat;

}

.feed-newsgator{

background:url(pic/feed-newsgator.png) no-repeat;

}

.feed-netvibes{

background:url(pic/feed-netvibes.png) no-repeat;

}

.feed-bloglines{

background:url(pic/feed-bloglines.png) no-repeat;

}

.feed-xml{

background:url(pic/feed-xml.png) no-repeat;

}

.feed-google{

background:url(pic/feed-google.png) no-repeat;

}

Полную веерсию статьи вы можете прочитать в блоге Антонио Лупетти.

Джон Ресиг рассказал в своем блоге о поддержке следующих новых возможностей CSS в Firefox 3:

• Спецификация блоков CSS3

• Свернутые пробелы

• rgba() значения

• Встраиваемые блоки и таблицы.

Источник: блог Джона Ресига.

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

Источник: CSSNewbies.

Антонио Лупетти продолжает свою серию статей о верстке форм ввода данных без использования таблиц. На этот раз он рассказывает, об использовании упорядоченных списков при верстке форм ввода.

Источник:woork.

Сайт Noupe опубликовал большую коллекцию ссылок на статьи о проблемах и ошибках часто встречающихся при использовании CSS.В статьях представлены подробно разобранные способы  решения этих проблем.

Источник: Noupe.

Майкл Куэль опубликовал новую статью на сайте Switch on The Code, в которой рассказа о создании графических кнопок при помощи HTML и CSS. В статье пдробно рассмотрено создание графических кнопрок нескольких видо , с применением различных эффектов.

Источник:Switch On the Code.

Дэвид Уолш рассказал о своей системе оформления CSS файлов , включающей в себя следующие принципы:

• Запись селекторов и атрибутов на одной строке

• Отступы во вложенных классах

• Вынесение @Media элементов в отдельный файл.

• Строгий порядок групп селекторов

• Отступ перед фигурной скобкой 21 пробел

Источник: блог Дэвида Уолша.

Дэвид Уолш опубликовал небольшую заметку в своем блоге, в которой показа технологию использования спрайто с пощью CSS. Вот один из примеров приведенных в этой заметк:

CSS

#logo-link
{
width:191px;
height:151px;
text-decoration:none;
display:block;
background-image:url(dw-logo-sprite.jpg);
background-position:191px 0;
}
#logo-link:hover,#logo-link:active { background-position:0 0; }

Источник: блог Дэвида Уолша.

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

CSS

.add{

background:url(img/add.gif) no-repeat 10px 8px;

text-indent:30px;

display:block;

}

.delete{

background:url(img/delete.gif) no-repeat 10px 8px;

text-indent:30px;

display:block;

}

.user{

background:url(img/user.gif) no-repeat 10px 8px;

text-indent:30px;

display:block;

}

Источник:woork.

Дэвид Эппляррд опубликовал следующую статью, в которой он рассказывает об управлении фоновыми изображениями в CSS3. Вот один из примеров, приведенных в этой статье:

.backgroundsize {

background: url(http://www.designshack.co.uk/images/logo.gif);

-webkit-background-size: 137px 50px;

-khtml-background-size: 137px 50px;

-o-background-size: 137px 50px;

background-size: 137px 50px;

background-repeat: no-repeat;

padding: 60px 5px 5px 10px;

border: 3px solid #ddccb5;

}»

Источник: Design Shack.

Роб Глазебрук рассказал в своей статье о возможности подсветки устаревших HTML тэгов пр помощи специвльного CSS стиля . После применения подобного CSS стиля к странице , становится очень легко найти и заменить устаревшие теги.

Источник: CSS Newbies.

Килиан Вальхов опубликовал третью Часть своей статьи в которой он подробно рассказывает о позиционировании элементов с помощью CSS. На этот раз Килиан демонтрирует некоторые новые возможности позиционирования элементов, появившиеся в новом стандарте CSS3.

Источник: блог Килиана Вальхова.

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

Источник: блог Килиана Вальхофа.

Роб Глазербрук опубликовал статью в которой рассказал об еще одном способе создания выпадающих меню при помощи CSS. Автор статьи отмечает, что данный способ отличается своей простой.

Источник: CSSNewbies.

Шон Инман опубликовал в своем блоге побробную статью о выборочных CSS селекторах. В данной статье Шон подробно рассматривает все особенности таких селекторов. Вот постой пример выборочного CSS селектора:

a < img { border: none; }

Данное правило применяется ко всем тегам img вложенным напрямую в тег a. Полную версию статьи вы можете прочесть в блоге Шона Инмана.

Роб Глазербрук рассказал в своем блоге об управлении видимости слоями, при помощи CSS и Javascript. При помощи этой техники можно изменять внешний вид страницы безз ее перезагрузки. Также это открывает дополнительные возможности для поисковой оптимизации.

Источник: CSSNewbies.

Команда разработчиков Google Docs рассказала о том что теперь при оформлении документов Google Docs появилась возможность использовать CSS. Сообщение об этом размещено в официальной группе Google Docs. Также в этом сообщение содержится несколько кратких уроков по CSS.

Источник: Google Docs.

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

Источник: Noupe.

Майкл Лейгебер опубликовал в своем блоге статью в которой подробно рассказывает о применении сокращений в CSS. Также Майкл подготовил полезную памятку по использованию CSS сокращений в PDF формате.

Источник: блог Майкла Лейгебера.

Дэйв Хъятт  написал статью о поддержке CSS градиентов в WebKit.  В этой статье он рассказывает о двух типах градиентов линейных и радиальных, демонстрируя их применение на нескольких примерах.  Полную версию статьи вы можете прочесть на сайте Surfin’ Safari.

Эндрю Роулз рассказывает в своем блоге о том какк изменить внешний вид обычных HTML форм для ввода данных с помощью CSS. Вот один из примеров:

CSS

.cssform .submit { background:#FFF url(submitgrad.png) repeat-x bottom left; }.cssform
.reset { background:#FFF url(resetgrad.png) repeat-x bottom left; }

Результат

Прочитать полную версию статьи с остальными примерами вы можете на сайте TechKnack

.

Даниэль Отт рассказывает о новом способе создания эффекта скругленных уголков в CSS. Вот один из примеров:

HTML

<div class=”b_greyWhiteStroke”>
        <div class=”TL”></div>
        <div class=”BL”></div>
        <div class=”TR”></div>
        <div class=”BR”></div>
        <div class=”b_innerContainer”>
                <h2>This Is A Block</h2>
                <p> Lorem ipsum dolor sit amet…</p>
        </div>
</div>

CSS3

.b_greyWhiteStroke{
        position: relative;
        border-color: #dce3e7;
}

.TL, .BL, .TR, .BR{
        width: 6px;
        height: 6px;
        position: absolute;
        background-repeat: no-repeat;
        background-color: transparent;
        z-index: 9999 !important;
}

.TL{
        top:0;
        left:0;
}
.BL{
        bottom: 0;
        left: 0;
}
.TR{
        top:0;
        right:0;
}
.BR{
        bottom: 0;
        right: 0;
}

.b_greyWhiteStroke .TL{
        background-image: url(images/grey_whitestroke_tl.png);
}
.b_greyWhiteStroke .BL{
        background-image: url(images/grey_whitestroke_bl.png);
}
.b_greyWhiteStroke .TR{
        background-image: url(images/grey_whitestroke_tr.png);
}
.b_greyWhiteStroke .BR{
        background-image: url(images/grey_whitestroke_br.png);
}

.b_innerContainer{
        border-width: 1px;
        border-style: solid;
        padding: 2px 2px 8px;
}

.b_greyWhiteStroke .b_innerContainer{
        border-color: #dce3e7;
}

Полную версию статьи со всеми примерами вы можете найте на сайте Даниэля Отта.

Джон Ресиг опубликовал интересную статью в которой описывает улучшения в механизмах обработки JavaScript в новой версии Internet Explorer.  Также он отмечает улучшенную поддержку HTML5 и CSS.

Источник: Блог Джона Ресига.

Камерон Молл приступил к публикации свооекго нового цикла статей о создании Web интерфейсов с помощью CSS. В этот опубликована первая статья цикла, в которой кратко описывается важность создания подобных интерфейсов с помощью семантической, доступной и переносимой разметки. Полную версию статьи вы можете прочитать на сайте Authenthic boredom