Знакомтесь: Дэн Седерхольм

Дэн Седерхольм – дизайнер, писатель, оратор, муж и отец, живущий в Салеме, штат Массачусетс. Дэн является основателем SimpleBits, небольшой студии веб-дизайна. Признанный эксперт в области стандартах веб-дизайна, Дэн работал с YouTube, Microsoft, Google, MTV, ESPN, Electronic Arts, Blogger, Fast Company, Inc Magazine, и другими. С каждым новым проектом, приходит возможность минимизировать разметку и принять гибкость CSS. Дэн является соучредителем и дизайнером Dribbble, динамичного сообщества для обмена скриншотами. В настоящее время он носит бейсболку.

• CSS3 для веб-дизайнеров (CSS3 For Web Designers);
• CSS ручной работы (Handcrafted CSS);
• Пуленепробиваемый веб-дизайн (Bulletproof Web Design);
• Решения веб-стандартов (Web Standards Solutions);

20 декабря 2011 года Дэн Седерхольм опубликовал радостную новость на своем блоге он сообщил своим читателям о выходе 3-го издания книги «Пуленепробиваемый веб-дизайн», книга уже появилась на Amazon.com. Подробнее об этой новости читайте на странице.

Дэн Седерхольм: CSS ручной работы

Мне очень приятно, что в мире есть такие люди как Дэн Седерхольм, которые меняют мир веб-дизайна, обучая других людей, передавая им свой опыт, через книги. Благодаря великим мастерам своего дела, в том числе и Дэну Седерхольм мир веб-дизайна стал веселым, ярким и увлекательным. После того, как в мои руки попала книга которую написал Дэн Седерхольм «CSS ручной работы», я ее прочитал понимая то, что этой книге нет цены.

Книгу Дэн Седерхольм «CSS ручной работы» я прочитал этим летом несколько раз, книга доступно написана и прочесть ее будет полезно всем веб – мастерам, которые хотят повысить свои навыки в веб – дизайне.

В книге раскрываются такие вопросы как использование в веб-дизайне новых свойств CSS3, гибкая работа с цветом при помощи RGBA, работа с «плавающими» элементами, использование «резиновой» верстки и гибких элементов дизайна,  фоновые элементы, а также массу других аспектов с помощью технологий CSS.

Одним словом могу сказать, это сильная книга по веб – дизайну, которую мне приходилось читать. В заключении хочу поделиться с вами еще одной книгой из списка Дэна, которую в ближайшее время я начну читать – книга CSS3 для веб – дизайнеров(CSS3 For Web Designers).

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

Введение в CSS3 – Часть 6: Фон

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

Размер

Перед CSS3, размер фона определяется реальным размером изображения. Это будет возможно при следующем пересмотре CSS указать в процентах или пикселях, насколько большой фоновое изображение должно быть. Это позволит вам в дальнейшем использовать изображения в нескольких различных контекстах, а также расширить фон, чтобы заполнить площадь более точно.

Ниже приводится простой пример изменения размера логотипа в качестве фона в верхней левой части:

.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;
}

Фон

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

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

.multiplebackgrounds {
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

В заключение …

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

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

Серии из статьи

Введение в CSS3 – Часть 1: Что это такое?
Введение в CSS3 – Часть 2: Границы
Введение в CSS3 – Часть 3: Текстовые эффекты
Введение в CSS3 – Часть 4: Пользовательский интерфейс
Введение в CSS3 – Часть 5: Несколько столбцов
Введение в CSS3 – Часть 6: Фон

Автор статьи: Дэвид Апльярд
Автор перевода: Александр Яценко

Введение в CSS3 – Часть 5: Несколько столбцов

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

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

Несколько столбцов с помощью CSS3

В настоящее время эта функция доступна в Firefox и Safari 3. Когда модуль будет  завершен в CSS3 спецификации он будет принят другими браузерами и проката в их обновления.

Есть четыре свойства, которые относятся к нескольким расположениям колонки в CSS3, что позволяет установить число столбцов, ширина, разрыв между каждым столбцом и границы:

• column-count

• column-width

• column-gap

• column-rule

Код, который будет использоваться для создания в две колонки с 1px  между колонками будет:

.multiplecolumns {
     -moz-column-width: 130px;;
     -webkit-column-width: 130px;
     -moz-column-gap: 20px;
     -webkit-column-gap: 20px;
     -moz-column-rule: 1px solid #ddccb5;
     -webkit-column-rule: 1px solid #ddccb5;
}

Spanning столбцов

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

h2 {
     column-span: all
}

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

В заключение этой серии …

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

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

Серии из статьи

Введение в CSS3 – Часть 1: Что это такое?
Введение в CSS3 – Часть 2: Границы
Введение в CSS3 – Часть 3: Текстовые эффекты
Введение в CSS3 – Часть 4: Пользовательский интерфейс
Введение в CSS3 – Часть 5: Несколько столбцов
Введение в CSS3 – Часть 6: Фон