Инвесторы видят перспективу
Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.
Что думает общественность
В реальности существует только Ubuntu с таким странным именем "Зайцелоп".
Технологии. Размытие на CSS. Разметка для Вступления
2 октября 2010 в 23:09Вёрстка колонками средствами CSS3
- CSS
Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения.Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически.
На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками.
Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count и/или column-width .column-count
По-умолчанию, column-count имеет значение auto . Т.е. если задать column-width , браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент..column
{
-webkit-column-count :2 ;
-moz-column-count :2 ;
}
column-width
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %..column
{
-webkit-column-width :15em ;
-moz-column-count :15em ;
}
Конечно же можно комбинировать column-width и column-height :
.column
{
-webkit-column-count :2 ;
-moz-column-count :2 ;Webkit-column-width :15em ;
-moz-column-width :15em ;
}
Интервалы и линейки
Если полиграфические дизайнеры привыкли думать в терминах колонок и интервалов, то веб-дизайнеры были вынуждены работать с границами и отступами.Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS.
colomn-gap
Спецификация W3C определяет значение интервала по-умолчанию в 1em, в примере мы и будем его использовать:.column
{
-webkit-column-gap :1em ;
-moz-column-gap :1em ;
}
column-rule
Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size , column-rule-style и column-rule-color , а можно использовать column-rule для указания всех трёх свойств.Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета:
.column
{
-webkit-column-rule :1em solid #000 ;
-moz-column-rule :1em solid Black ;
}
Приколы использования
На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla.Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx.
Что будет если колонки ограничить по высоте
Браузер добавит колонок, чтобы уместить текст.Спасает overflow :hidden .
Отображение линейки в одной колонке
Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.WebKit:
Mozilla:
Свойства, которые есть в спецификации, но не поддерживаются
Это свойства column-break и column-span .Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h2.
.column h2
{
column-break-before :always ;
}
Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки.
.column h1
{
column-span :all ;
}
Заключение
Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.При выборе технологий верстки я руководствуюсь двумя принципами:
- идти в ногу со временем, используя все существующие возможности HTML, CSS и JavaScript.
- осматриваться назад и не оставлять на произвол судьбы браузеры-ветераны, которыми до сих пор пользуются в государственных учреждениях. По желанию заказчика я поддерживаю работу старых версий браузеров, в том числе Internet Explorer 6.
Таким образом, верстая сайты, я выбираю наиболее оптимальные решения. Верстаю сайты только на осмысленном HTML5, использую красивые возможности CSS3, придаю динамику сайту с помощью jQuery.
Блочная верстка
Что касается наболевшей темы DIV против Table, могу смело сказать, что таблицами для разметки структуры страницы не пользуюсь уже давно. Для этого существует специальный тег
— блок. Отсюда и название верстки — блочная. Таблицы использую только для верстки табличных данных. На практике пока не встречал макетов, которые невозможно реализовать без помощи таблиц. Как правило, блочная верстка легче табличной, в ней меньше кода, блочная верстка намного понятнее и более гибкая, чем верстка табличная.Семантическая верстка
В то же время, блочная верстка не предполагает использование только тега
. Многие начинающие верстальщики не правильно применяют этот тег и используют его там, где не нужно. У каждого тега есть свое применение, свой смысл. Заголовки, списки, таблицы, абзацы, цитаты, ссылки, изображения и другие теги придуманы не с проста. Каждый из них несет свой смысл, а между собой теги образуют смысловые отношения. Верстка, которая наделена смыслом, которую может читать не только человек, но и компьютер, называется семантической версткой. Семантика (фр. s?mantique от др.-греч. - обозначающий). Почему я использую в работе семантическую верстку? Потому что она легче, она понятнее, она дает возможность видеть страницу по HTML коду, быстрее вносить изменения в код, тем самым экономить время и деньги.Проверить семантическая верстка или нет можно отключив CSS в HTML документе. Если верстка семантическая, то мы должны увидеть документ напоминающий книгу, где ко всем элементам будут применены CSS стили по умолчанию . В семантической верстке должны четко выделяться заголовки разных уровней (h1-h6), расположенные по порядку, списки нумерованные (ol), маркированные (ul) и список определений (dl), таблицы (table), картинки (img), абзацы (p), выделение текста жирным (strong), курсивом (em) и другие элементы.
Кроссбраузерная верстка
С появлением новых браузеров и выпуском очередных версий старых у верстальщика появляется еще больше работы. Значение кроссбраузерности нельзя недооценивать, так как основная задача верстальщика — это передать замысел дизайнера конечному пользователю, предоставить ему возможность просматривать страницу с любого устройства, с любым разрешением, с различной скоростью подключения к интернету, сделать его работу удобной и приятной.
Самым проблемным браузером, как правило, является IE6, поэтому я к нему пишу отдельный CSS файл, который подключаю через условный комментарий. Таким образом все другие браузеры этот стиль не увидят и будут применять к HTML документу общие стили. Как правило, для других браузеров не приходится писать какие-либо хаки, т.к. в 95% случаев при возникновении проблем с кроссбраузерностью в современных браузерах, первым делом стоит искать ошибку у себя в коде.
Сверстанный мной макет одинаково выглядит во всех популярных браузерах (Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +). Проверить кроссбраузерность можно через специализированные сервисы .
Валидная верстка
В первом сверстанном мной сайте я нашел более 100 ошибок валидации. Тогда я подумал: «Наверное эта профессия не для меня, я закопаюсь, разбирая все эти ошибки». Но со временем я понял, что все не так страшно. Чтобы разобраться с ошибками валидации и не допускать их при верстке, первое что бы я посоветовал — это почитать спецификацию HTML и CSS. Макет сделанный по спецификации будет проходить валидацию с первого раза и радовать глаз верстальщиков зеленым цветом и надписью: «This document was successfully checked as HTML5!». Как правило, все документы, которые я верстаю проходят валидацию без дополнительных поправок. Но несмотря на это, каждую верстку я проверяю на наличие
Здравствуйте уважаемые посетители моего блога. Изучая верстку и обучая других заметил одну всеобщую проблему преподавателей и учителей в этом направлении. Единицы ведут обучение на практических примерах верстки сайта с нуля (psd) и до логического завершения (размещение в сети). Сегодня я постараюсь исправить это дело, а именно начать серию постов, рассматривая в каждом реальный пример верстки сайта шаг за шагом.
Это будут видеоуроки, которые я буду выкладывать на youtube и размещать здесь в записях. Перед каждым роликом я проведу краткое описание или коль хотите план действий в данном сюжете, чтобы перед просмотром вы уже понимали, чего я там буду делать.
Прежде чем мы приступим, я хочу поблагодарить всех вас, за то, что вы посещаете мой блог, за каждый прочтенный пост и оставленный отзыв. Я на вас не зарабатываю миллионы и даже тысячи))), мне просто приятно помогать тем, кто как и я хочет чему то научиться, а не лениться сидя сутками на пролет во вКонтакте и подобным соц-сетям.
Самый простой способ научиться чему либо, это начать это делать самому. Именно делать, а в нашем случае верстать, ведь просмотрев десятки и сотни видео и прочитав не одну книгу вы далее теории не сдвинетесь ни на шаг. Теория без практического занятия ничто!
Что будем верстать
В этом курсе мы сверстаем одностраничный вебсайт на чистом HTML5 и CSS3 . Обработаем простой макет, который был нарисован в Photoshop. Дизайн макета имеет достаточно распространенный и довольно простой вид, но его нам будет более чем достаточно для изучения основных техник верстания вебсайтов. А вот собственно и сам скриншот будущего сайта
Макет рисовал не я, но это не помешает нам использовать его для наглядного пособия при верстке.
Инструментарий для полноценной верстки
Чтобы вы могли повторять за мной последовательность верстки и сами могли пройти путь от А до Я вам нужно иметь следующие программы на своем ПК:
- Adobe Photoshop CS3 и выше
- Редактор кода Notepad++, Sublime Text, Brackets или другой
- Понимание основ HTML (или HTML5)
- Понимание основ CSS (или CSS3)
- Веб браузеры (Google Chrome, Opera, Mozilla Firefox, Safari)
Вам так же будет необходим макет сделанный в Photoshop. Вы можете найти PSD файл вот по этой ссылке . Если у вас нет фотошоп, можно скачать с офф-сайта триал версию (30 дней), текстовый редактор можно выбирать любой на ваше усмотрение, я буду работать в Brackets из-за присутствия в нем возможности видеть результат вашей работы без сохранения документа и перезагрузки браузера.
Знакомство с макетом будущего сайта
- Header (Шапка)
- Navigation Menu (Навигационное меню)
- Calltoaction (Призыв к действию)
- Body (Тело)
- Sidebar (Боковое меню)
- Secondary Calltoaction (Второй призыв к действию)
- Footer (Подвал)
Макет данного сайта прост и эффективен. Элементы используемые в данном макете очень распространены и большинство из них, если не все, используются в большинстве макетах сайтов. Вебсайт, который мы создаем будет использовать очень распространенное расположение элементов.
И вашему вниманию первое вступительное видео, где я рассказываю о своем плане по поводу верстки данного макета.
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
CSS 3 на полную катушку
В данной статье мы познакомимся с возможностями новой технологии оформления HTML документов - CSS 3. Данная технология еще находится на стадии разработки, но, тем не менее, уже давно активно используется многими разработчиками.
Следовательно, напрашивается первый вопрос: технология новая, значит не кроссбраузерная? Стоит ли мне ее использовать?
Это пара из множества других вопросов, которые может задать себе каждый. Отвечу я Вам следующее: прогресс не стоит на месте, и новые технологии нужно знать, внедрять в свои проекты.
Пользователей со старыми версиями браузеров по статистике очень маленький процент, и совсем не рационально подстраиваться именно под них.
Для них же это лишний повод обновить свой браузер до новой версии. Я думаю, единственным важным критерием в принятии решения использования нового подхода может стать ТЗ на Ваш проект, которое будет требовать от Вас поддержки его в старых браузерах, но, как показывает практика, большинство заказчиков и разработчиков активно ориентируются на новую технологию CSS 3. Выбор за Вами!
Подробнее о CSS 3…
Использование технологии CSS 3 значительно упрощает стилизацию и сам подход к стилизации любого веб-сайта. В данную версию были включены новые свойства, которые позволят Вам:
1. Создавать элементы со скругленными углами;
2. Разнообразно стилизовать элементы, текст, надписи на веб-странице, применяя к ним тени;
3. Задавать цвета в новом формате;
4. Использовать любые шрифты, которые буду успешно отображаться, даже если их нет на компьютере конечного пользователя;
5. Устанавливать прозрачность элементам на странице;
6. Создавать всевозможные фоновые градиенты;
7. Применять переходы к свойствам элементов, достигая плавного отображения различных свойств (изменение цвета, позиции и т.д.);
8. Применять анимацию к элементам;
9. Применять трансформацию к элементам;
10. Разбивать большой текст на необходимое количество столбцов, подобно газетному варианту.
Итак, рассмотрим каждый пункт.
1. Скругленные углы
Часто, в оформлении дизайна сайта используются скругленные углы у различных элементов. CSS 3 предоставляет удобное свойство border-radius , которое позволяет скруглять углы любого блока по заданному параметру. Свойство принимает единственный параметр - радиус скругления в px. Например:
Div{ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
Для поддержки свойства border-radius браузеры FireFox, Chrome, Safari используют специальные префиксы, подставляемые к данному свойству: -webkit- , -moz- . Не забывайте.
Что же касается IE ниже 9 версии, есть хорошее решение - border-radius.htc . Для его использования скачиваем себе данный фикс и подключаем к нашим свойствам блока таким образом:
Div{ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; behaviol: url(border-radius.htc); }
Также мы может задать нужное скругление каждому из четырех углов блока. Делается это таким вот образом:
Div{
border-top-left-radius: 8px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-top-left-radius: 8px;
-moz-border-top-right-radius: 40px;
-moz-border-bottom-left-radius: 40px;
-moz-border-bottom-right-radius: 8px;
behaviol: url(border-radius.htc);
}
2. Тени
В CSS 3 тени можно применять как к тексту, используя свойство text-shadow , так и к другим блочным элементам, используя свойство box-shadow .
Text-shadow:
Div{ text-shadow: 1px 2px 3px #000; }
Данное свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени.
Дополнительно можно задавать несколько теней тексту . Это достигается путем перечисления всех значений свойств через запятую.
double text-shadow
Div{ text-shadow: 1px 2px 3px #000, 0px -2px 2px red; }
Box-shadow:
Блоку можно задавать как внешнюю, так и внутреннюю тень, с помощью свойства box-shadow . Рассмотрим для начала добавление внешней тени к блоку:
Div{ box-shadow: 0px 3px 6px #000; }
Свойство принимает 4 параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени в px, цвет применяемой тени. Принцип аналогичен добавлению тени к тексту, о котором я рассказывал выше.
Теперь рассмотрим добавление внутренней тени к блоку:
inset box-shadow
Div{ box-shadow: inset 0px 3px 6px #000; }
Как видите, чтобы добавить внутреннюю тень, необходимо указать дополнительный параметр inset в начале свойства.
Дополнительно можно задавать несколько теней одному и тому же элементу . Это достигается путем перечисления всех значений через запятую, как и в случае с текстовой тенью.
inset box-shadow
Div{
box-shadow: inset 0px 3px 6px #000, inset 2px 0 3px red;
}
3. Цвета в новом формате HSL
HSL - формат цвета, с помощью которого Вы можете задавать оттенок, яркость, насыщенность.
Div{ background-color: hsl(30,60%,50%); }
Свойство принимает 3 параметра: hsl (градус положения цвета, насыщенность цвета, яркость цвета).
Параметр градус положения цвета задается в градусах относительно цветового круга, расположенного на рисунке ниже:
где красный - это 0 градусов, а оранжевый - 90 градусов. Относительно таких координат и выбирается цвет.
Параметр насыщенность цвета задается в процентах: чем ниже процент, тем цвет более блеклый. Параметр яркость цвета задается в процентах значением от 0% (темный) до 100% (светлый).
4. Используйте любые шрифты на Вашем сайте!
Когда мы применяем нестандартные шрифты для своего сайта, то беспокоимся о том, что у пользователя на компьютере их может просто не оказаться.
Конечно, можно указать альтернативный шрифт про замену, например, тот же Verdana или Tahoma. Но, бывают сайты, где нужно применять именно уникальные красивые шрифты, не подлежащие стандартной подмене.
Так вот, в CSS 3 свойство @font-face служит для уникальной загрузки необходимых шрифтов для вашего сайта, которые будут автоматически подгружены на странице у любого пользователя Вашего ресурса.
Выбранный шрифт нужно просто разместить на сервере и подключить таким образом:
@font-face{ font-family: "romic"; src: url("romic.ttf"), url("romic.eof"); }
Шрифт подключается в двух форматах - .ttf и .eof для обеспечения кроссбраузерности данного свойства.
5. Прозрачность элементов
Любому элементу на веб-странице можно установить прозрачность с помощью свойства opacity , с параметром от 0 (невидимый) до 1 (исходная прозрачность, установленный цвет). Например, opacity: 0.5 сделает элемент полупрозрачным.
Div{ opacity: 0.5; }
Для решения проблемы с прозрачность в любимом IE , используется свойство filter c указанием значения прозрачности alpha в пределах от 0 до 100.
Div{
opacity: 0.5;
filter: alpha(opacity=50);
}
6. Градиенты
CSS 3 позволяет нам создавать свои уникальные градиенты, без использования фоновых целых или дублированных изображений.
Градиент задается с помощью метода linear-gradient (линейный градиент) или radial-gradient (сферический градиент) свойства background-image .
Linear-gradient
Div{ background-image: linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%); background-image: -webkit-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%); background-image: -moz-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%); background-image: -o-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%); background-image: -ms-linear-gradient(left,#FFEFD5 0%,#FFEBCD 30%,#FFE4C4 60%); }
Как видите, с помощью данного свойства мы получили такой легкий и приятный трехцветный линейный градиент.
Не забывайте указывать специальные префиксы методу linear-gradient для поддержки браузерами. Для создания градиента в браузере IE ниже 9 версии используется свойство filter :
Div{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEFD5", endColorstr="#FFE4C4",GradientType=0); /*если GradientType равен 0, то это относится в линейному градиенту, если 1, то к радиальному.*/ }
Для IE 9 добавьте класс gradient элементу на странице, к которому применяется градиент, и в между тегами head добавьте следующее переопределение для полной поддержки свойства:
Метод linear-gradient получает следующие параметры: направление градиента, цвет градиента и его положение.
Параметр направление градиента может принимать значения: left, right, top, bottom.
Цвет градиента задается в любом цветовом формате (мы задавали в формате HEX), а рядом указывается положение, где данный цвет вступит в отображение.
Скажем, если положение какого-либо цвета выставлено в 0%, это означает, что данный цвет начнет применяться с самого начала блока, а если, например, задано 50% для цвета, то это означает - с середины выбранного блока. Такова логика работы градиента.
Вы можете манипулировать как хотите и использовать столько цветов и положений, сколько Вам потребуется.
Radial-gradient
Радиальный градиент задается по тем же принципам, что и линейный, но только при помощи свойства radial-gradient . Радиальный градиент может быть эллипсной формы (ellipse ) и круговой (circle ).
Ellipse radial-gradient
Div{
background-image: radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -webkit-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -moz-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -o-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -ms-radial-gradient(ellipse,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8470FF", endColorstr="#6495ED",GradientType=1);
}
Circle radial-gradient
Div{
background-image: radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -webkit-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -moz-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -o-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
background-image: -ms-radial-gradient(circle,#8470FF 0%,#6A5ACD 20%,#6495ED 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8470FF", endColorstr="#6495ED",GradientType=1);
}
7. Переходы
Чтобы добиться плавного перехода цвета в другой при наведении на ссылку или плавно отобразить список меню и т.д., в CSS 3 используется свойство transition .
Рассмотрим пример, плавного изменения цвета блока, при наведении на него:
Div{ background-color: #00BFFF; transition: background-color 3s; } div:hover{ background-color: #6A5ACD; }
Основными значениями данного свойства являются:
Имя свойства элемента для которого применяется переход;
- длительность применения перехода;
- тип перехода;
- время задержки перед началом.
В нашем случае, мы применяли переход для свойства backgroud-image с длительностью в 3 секунды.
Если Вы хотите применять переход ко всем свойствам элемента, то в параметре имя свойства элемента для которого применяется переход, следует указать all .
Дополнительныv функциональным параметром можно указать тип перехода . По умолчанию стоит linear и время задержки по умолчанию 0 секунд (запускается мгновенно).
Div{ transition: background-color 3s linear 0s; }
Но есть и другие типы переходов. Ниже я приведу Вам очень распространенную динамическую таблицу, по которой вы поймете, как работают типы переходов (наведите курсор на любой блок).
Можно указывать несколько переходов одновременно для разных свойств элемента. Например: изменить фон и цвет шрифта. Давайте попробует сделать это:
Background and Color transition
Div{ background-color: #00BFFF; color:#BEBEBE; transition: background-color 3s ease-out, color 3s; -webkit-transition: background-color 3s ease-out, color 3s; -moz-transition: background-color 3s ease-out, color 3s; -o-transition: background-color 3s ease-out, color 3s; } div:hover{ background-color: #7B68EE; color: #E6E6FA; }
Чтобы применить несколько переходов, просто указывайте их через запятую с необходимыми параметрами.
8. Анимация
В CSS 3 для создания анимации используется свойство @keyframes . Данное свойство представляет из себя инструкцию, которая содержит различные свойства, которые будут выполнять при запуске анимации.
@keyframes name{ from(css); to(css); }
В данном примере name - это имя нашей "инструкции" или анимации, а css - это css-свойства, которые будут выполняться при выполнении анимации от начала from до конца to .
Данное свойство принимает значения:
Имя анимации;
- длительность выполнения;
- тип перехода;
- задержка перед выполнением;
- сколько раз должна выполниться анимация.
Свойство тип перехода по умолчанию установлен как ease , но при желании можно установить свой. Все типы переходов рассматривались в пункте Переходы (transition).
Свойство задержка перед выполнением по умолчанию установлено в 0 секунд (мгновенно).
Рассмотрим пример. Для начала создадим блок и, при наведении на него курсора, будет изменяться его ширина и добавляться тень.
@keyframes anim { from {width:200px;} // 0% {width:200px;} to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;} } @-webkit-keyframes anim { from {width:200px;} // 0% {width:200px;} to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;} } @-moz-keyframes anim { from {width:200px;} // 0% {width:200px;} to {width:400px;box-shadow: 0 3px 4px #000;} // 100% {width:400px;box-shadow: 0 3px 4px #000;} } div:hover{ animation: anim 4s 3; -webkit-animation: anim 4s 3; -moz-animation: anim 4s 3; }
Не забывайте указывать дополнительные префиксы: -webkit , -moz .
Свойства from и to являются алиасами, под ними понимается аналогичное значение from - 0% и to - 100% . Исходя из этого, свойства анимации мы можем указывать в процентном виде, тем самым показывая, как и что на определенном отрезке анимации мы хотим выполнить с данным элементом. Например:
@keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
@-webkit-keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
@-moz-keyframes anim2{
0% {width: 200px;}
30% {color: red;}
60% {color: orange;}
100% {width: 400px;}
}
div:hover{
animation: anim2 3s linear;
-webkit-animation: anim2 3s linear;
-moz-animation: anim2 3s linear;
}
9. Трансформация
Трансформация в CSS 3 позволяет преобразовывать элементы, их вид, положение, но все в пределах 2D трансформации. За трансформацию отвечает свойство transform . В качестве параметра данное свойство принимает одну из функций трансформирования элементов:
- translate(x,y)
- сдвигает элемент на X px влево и Y px вниз;
- rotate(X)
- поворачивает элемент на X deg (градусов);
- scale(x,y)
- растягивает элемент на коэффициент X в ширину и Y высоту;
- skew(x,y)
- скосить элемент на X px по горизонтали и Y px по вертикали.
translate
Div{ transform: translate(10px,20px); -webkit-transform: translate(10px,-20px); -moz-transform: translate(10px,-20px); -o-transform: translate(10px,-20px); -ms-transform: translate(10px,-20px); }
Мы сдвинули элемент на указанное количество пикселей. Это видно по отношению к сестринскому блоку No translate .
div{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
Данная функция растягивает элемент на указанный коэффициент. Коэффициент ширины и высоты по умолчанию равен 1 .
div{ transform: scale(1,1.4); -webkit-transform: scale(1,1.4); -moz-transform: scale(1,1.4); -o-transform: scale(1,1.4); -ms-transform: scale(1,1.4); }
Высота была изменена с коэффициентом 1.4 , ширина оставлена без изменений, т.е. равна коэффициенту 1 .
div.skew{ transform:skew(40deg,20deg); -webkit-transform: skew(10deg,20deg); -moz-transform: skew(10deg,20deg); -o-transform: skew(10deg,20deg); -ms-transform: skew(10deg,20deg); }
Вы можете экспериментировать со значениями как хотите, так что пробуйте.
10. Многоколоночный текст
Свойство column-count позволяет разбить текст в выбранном элементе на определенное количество столбцов.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, atque numquam asperiores reprehenderit quidem commodi in error ullam et nostrum harum similique molestias autem voluptates ipsam possimus reiciendis. Alias, saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum asperiores recusandae fugiat obcaecati aliquid voluptatibus commodi labore repudiandae eligendi porro. Quasi, earum aliquam voluptatem culpa voluptates in ducimus vero facere?.
Div{ column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; column-gap:10px; -webkit-column-gap:30px; -moz-column-gap:30px; column-width:90px; -webkit-column-width:90px; -moz-column-width:90px; column-rule: 2px double red; -webkit-column-rule: 2px double red; -moz-column-rule: 2px double red; }
Свойство column-gap задает ширину между столбцами. Свойство column-width задает ширину каждого столбца. Свойство column-rule задает визуальную разделительную линию между столбцами.
Недостатком является тот факт, что IE не поддерживает данное свойство.
Вывод
Развитие CSS 3 дало новый толчок в стилизации HTML-документов. Новые свойства, более быстрый подход к стилизации документа и его компонентов. Используйте новые технологии, но не забывайте о старых.
Материал подготовил Сергей Губарев специально для сайта сайт
P.S. Иизучаете CSS для того, чтобы освоить верстку сайтов? Рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …
Как хорошо, что придумали компьютеры. Вы можете создать себе нужную атмосферу, чтобы в спокойной обстановке начать творить. Собственно этим мы сейчас и займёмся.
Для выполнения заданий вам потребуются (будет повод обновиться):
Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5 . Пройдите по ссылке http://html5test.com , там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?
В этом тьюториале, мы:
- создадим с вами страницу по стандарту HTML5
- воспользуемся новыми семантическими элементами,
- немного порисуем,
- проверим как выводится видео на нашей странице,
- проверим работу новых элементов формы.
Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css . В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.
Готовим каркас страницы
Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.
Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег . Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.
Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.
Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.
Всё что мы здесь описали есть в листинге №1:
Листинг 1. Базовая структура документа HTML5
Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу больше ничего не нужно кроме lang . Для метатега достаточно написать charset . Кроме того, для тега link не нужно указывать type .
Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.
Делаем разметку контента
Разместим на каркасе семантические блоки
Теперь давайте поточнее определимся с тем, что у нас будет размещаться на странице. Будем исходить из следующего: нам нужно по максимуму использовать новые семантические элементы HTML5.
Наша страница будет служить для показа полного текста новости о компании, которой посвящён сайт. На неё будет происходить переход либо с главной страницы, где размещаются последние новости, либо из архива новостей.
Разместим блоки в контейнере
. Будем придерживаться следующей последовательности этих элементов:– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer
В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer , в котором мы разместим дополнительную информацию о контенте наших страниц.
Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами
… .Листинг 2. Размещение семантических блоков HTML5
ООО Рога и копыта
Полный текст новости
Теперь страницу можно рассмотреть в браузере. Однако, она пока выглядит невзрачно. Но мы ведь не зря уже позаботились и подключили файл со стилями.
Покрасим фасад
У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana . Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.
Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.
box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px
, либо других линейных единицах (em
, pt
), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset
. Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.
text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.
border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius
ещё и в эту парочку параметров.
Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css .
Листинг 3. CSS для новых семантических элементов HTML5
* { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 480px; margin: 0px auto; } header.mainH { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px; text-align: center; } header h1 { font-size: 36px; margin: 0px; } header h2 { font-size: 18px; margin: 0px; color: #888; font-style: italic; } nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #EFD3D3; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; } article > header time { font-size: 14px; display: block; width: 26px; padding: 2px; text-align: center; background-color: #993333; color: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; float: left; margin-bottom: 10px; } article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; } article > header h1 { font-size: 20px; float: left; margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888; } article > header h1 a { color: #993333; text-decoration: none; } article > section header h1 { font-size: 16px; } article p { clear: both; } footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } article > section { -moz-border-radius: 6px 0 0 0; -webkit-border-radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; }
Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР
Рисунок 1. Вид стилизованой страницы
Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.
Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.
