В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.
Вот так будет выглядеть наша страница, когда мы закончим:
Практически обычный дизайн вашего ежедневного блога. Заголовок с названием, горизонтальная навигация, контент с комментариями и формой отправки, сайдбар и подвал. Ничего особенного. Давайте начнем. Ничего особенного. Давайте начнем.
HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.
Основная структура
Прежде чем мы создадим разметку страницы, нужно представить общую структуру:
В HTML5 есть специальные тэги для создания разметки заголовка, навигации, сайдбара и подвала. Сначала взгляните на разметку, а затем я объясню, что это значит:
Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:
Вместо того чтобы использовать тэг
Разметка для Навигации
Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .
Разметка для Вступления
Мы уже описали новую секцию документа, используя тег section . Теперь просто добавим немного контента.
Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header , для заключения элемента h2 . Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.
Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко.
Разметка для Записи
Посмотрите разметку, и я расскажу о новых элементах ниже.
Posted on by Mads Kjaer - 3 comments Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...This is the title of a blog post
Мы откроем новую секцию и поместим всю статью блога в тэги article . Тэг article используется для обозначения независимой записи в блоге, обсуждении, энциклопедии и т.д., и он идеален для использования здесь. Так что, если мы просматриваем отдельную запись, у нас на странице один тэг article , а на главной странице блога, мы должны заключить в него каждый пост.
Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:
Год, затем тире (знак минус)
Разметка для Комментариев
Разметка для комментариев очень простая. Никаких новых тэгов и атрибутов не используется.
Разметка для Формы Комментирования
В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.
Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.
Разметка сайдбара и подвала очень простая. Несколько секций, с некоторым контентом, внутри соответствующих тэгов aside и footer .
Вы можете взглянуть на окончательный результат разметки . Теперь перейдем к стилям.
CSS 3 основывается на принципах стиля, селекторов и каскада, как нам хорошо известно из предыдущих версий CSS .CSS 3 содержит множество новых функций, селекторов, псевдо-классов и свойств. Использование новых возможностей, значительно облегчит верстку ваших макетов. Давайте начнем.
Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д.Все это должно быть вам известно еще из CSS 2.1.
/* Makeshift CSS Reset */ { margin: 0; padding: 0; } /* Tell the browser to render HTML 5 elements as block */ header, footer, aside, nav, article { display: block; } body { margin: 0 auto; width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; background: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p { padding-bottom: 22px; }
Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.
Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.
Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или % . Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS 3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.
Вот так будет выглядеть страница с применением базового стиля. Теперь можно переходить к стилизации остальной части страницы. Для заголовка не требуется никакого специально стиля, так что мы сразу переходим к навигации.
Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:
Nav { position: absolute; left: 0; width: 100%; background: url("nav_background"); }
Мы позиционировали элемент nav абсолютно, выровняли его по левому краю окна и растянули по всей доступной ширине. Теперь центрируем вложенный список, для его отображения в границах нашей раскладки:
Nav ul { margin: 0 auto; width: 940px; list-style: none; }
После этого мы добавим некоторые дополнительные стили, чтобы навигационный список выглядел красивее, и расположим его в сетке, на которой основан наш макет. Я также добавил стиль для подсветки текущей страницы и настроил внешний вид RSS -ссылки.
Nav ul li { float: left; } nav ul li a { display: block; margin-right: 20px; width: 140px; font-size: 14px; line-height: 44px; text-align: center; text-decoration: none; color: #777; } nav ul li a:hover { color: #fff; } nav ul li.selected a { color: #fff; } nav ul li.subscribe a { margin-left: 22px; padding-left: 33px; text-align: left; background: url("rss.png") left center no-repeat; }
Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS 3-свойств, чтобы сделать ее более привлекательной.
#intro { margin-top: 66px; padding: 44px; background: #467612 url("intro_background.png") repeat-x; background-size: 100%; border-radius: 22px; }
Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.
Второе новое свойство это – border
— radius
, которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px
, для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.
К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .
#intro { ... /* Background-size not implemented yet */ -webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; /* Border-radius not implemented yet */ -moz-border-radius: 22px; -webkit-border-radius: 22px; }
После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.
#intro h2, #intro p { width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; }
Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции #intro .
#intro { ... background: #467612 url("intro_background.png") top left (287px 100%) repeat-x, url("intro_flower.png") top rightright (653px 100%) no-repeat; ... }
Мы назначили два фоновых изображения, измерив напоследок, чтобы убедиться, что они не перекрывают друг друга. Обратите внимание на короткую запись свойства background-size .
К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS .
Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!
«Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.
Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:
#content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } aside { display: table-cell; width: 300px; }
Вот и все! Больше никаких флоатов, фоновых картинок, чистки потока или отрицательных полей. Мы сделали элементы похожими на таблицу, и благодаря этому разметка стала гораздо проще.
Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.
Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.
Lorem ipsum dolor sit amet...
Pellentesque ut sapien arcu...
Vivamus vitae nulla dolor...
...Теперь мы можем добавить два простых свойства.
BlogPost div { column-count: 2; column-gap: 22px; }
Нам нужно создать 2 колонки с расстоянием 22px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column —span , и написать всего лишь:
BlogPost { column-count: 2; column-gap: 22px; } .blogPost header { column-span: all; }
Конечно, свойства column —count и column —gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.
BlogPost div { /* Column-count not implemented yet */ -moz-column-count: 2; -webkit-column-count: 2; /* Column-gap not implemented yet */ -moz-column-gap: 22px; -webkit-column-gap: 22px; }
Box-shadow
Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .
BlogPost img { margin: 22px 0; box-shadow: 3px 3px 7px #777; }
Первые «3px » сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3px », сообщают, где мы хоти расположить тень по вертикали. Последние «7px », как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.
Наверное, вы не удивитесь, узнав, что это свойство еще не поддерживается во всех браузерах. Фактически оно работает только в Safari , и вам опять придется использовать специфические расширения браузеров.
BlogPost img { margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; }
Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript , затем прогон их в цикле и подсветка всех четных элементов. CSS 3 предоставляет псевдо-класс «nth —child », который делает это до смешного легко, без использования JavaScript . Мы используем его для полосатой раскраски комментариев.
Section#comments article:nth-child(2n+1) { padding: 21px; background: #E3E3E3; border: 1px solid #d7d7d7; /* Border-radius not implemented yet */ -moz-border-radius: 11px; -webkit-border-radius: 11px; }
Таинственное значение «2n +1», на самом деле очень простое, если вы понимаете что это значит:
2n – выбор каждого второго элемента списка. Если вы напишете 3n , будет выбран каждый третий элемент, 4n – четвертый, и так далее.
1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.
В качестве альтернативы, вы можете написать просто:
Section#comments article:nth-child(odd) { ... }
Здесь используется один из наиболее часто используемых стандартных значений, odd и even . Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.
Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border —radius , для добавления закругленных углов различным секциям.
Смотрите результат нашей работы , со всеми стилями.
Когда HTML 5 и CSS 3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript -кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.
Html Верстка - это основна любого сайта. Качественная верстка подразумевает собой знания html и css на хорошем уровне. В данной рубрике будем разбирать некоторые приемы и хитрости без которых не обходится ни один верстальщик.
Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!
Давно не писал на своем блоге. Причина все таже — катастрофическая нехватка времени. Помимо всех моих забот, которых итак у меня не мало я ввязался в такую большую авантюру, как строительство собственного дома. По стройке я здесь писать не буду, создам для него отдельный проект. Но сейчас не об этом…
Приветствую Вас дорогой коллега! Сегодня я хочу рассказать про такую технологию в веб-разработке, как БЭМ. А если точнее то, как называть классы объектам документа при верстке. Помню, когда я начинал и не знал про всякие методики типа БЭМ’а мне сложно было придумывать классы, я постоянно путался, у меня постоянно было пересечение классов, что в итоге сильно тормозило работу.
Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.
Здравствуйте уважаемые друзья! С вами снова на связи Заур Магомедов. В данной небольшой статье хочу показать, как можно сделать кнопку анимированной при возникновения определенного события, например, причем на чистом CSS, без использования картинок и скриптов.
Сначала посмотрите демо, как это смотрится…
Доброго времени суток всем, кто решил посетить мой интернет-дневник сайт. Вот и наступил 2016 год. Если вы заметили я в свой блог пишу очень редко и говорить о каких-то достижениях в ушедшем году я не буду. Не то, чтобы я совсем ничего не добился, просто результаты оказались не теми, что я ожидал. В любом случае это тема для отдельной заметки. А в этой статье я хочу затронуть такую тему, как иконочный шрифт . Давно хотел написать про иконочный шрифт, т.к. он стал в последнее время очень популярным, но все руки никак не доходили. Хотелось бы раскрыть эту тему более подробно.
Всем жаркий летний привет! Хотя, нужно пожелать прохладный привет. 🙂 Лето, жара ведь… Не знаю как у других, а в нашем регионе стоит ужасная жара. В данной своей заметке я хотел бы затронуть актуальную тему на сегодняшний день — адаптивный дизайн. Вообще, стоит ли заморачиваться адаптивным дизайном и дает ли это какой-либо эффект?
Всем привет! Пишу данный пост на кануне великого майского праздника — 9 мая. Поэтому свой пост начну с поздравления. Желаю вам успехов и процветания в жизни и самого главное мирного неба над головой. Пусть все самое плохое останется в прошлом, а нас с вами ждет светлое будущее.
Итак, теперь перейдем к нашей теме. Говорить сегодня будем про верстку. Почему я решил написать данный пост? Есть тому причины. А именно? Моя основная работа — это разработка сайтов, т.е. я создаю сайты клиентам на заказ. Естественно в этом деле не без конкурентов. Часто приходится сталкиваться с работой других верстальщиков. За 5 лет работы я накопил огромный опыт в верстке, но я тем не менее не считаю себя прям гуру верстальщиком и профи, мне есть еще чему учиться. Но извините меня, мне попадаются такие работы верстальщиков, что хочется кричать и вопить на весь интернет — корявая верстка, ужасно написанный код, скорость оставляет желать лучшего. И что самое главное, клиент ведь доволен. В общем, решил открыть глаза хоть немногим на это безобразие.
Здравствуйте уважаемые посетители моего блога. Изучая верстку и обучая других заметил одну всеобщую проблему преподавателей и учителей в этом направлении. Единицы ведут обучение на практических примерах верстки сайта с нуля (psd) и до логического завершения (размещение в сети). Сегодня я постараюсь исправить это дело, а именно начать серию постов, рассматривая в каждом реальный пример верстки сайта шаг за шагом.
Это будут видеоуроки, которые я буду выкладывать на youtube и размещать здесь в записях. Перед каждым роликом я проведу краткое описание или коль хотите план действий в данном сюжете, чтобы перед просмотром вы уже понимали, чего я там буду делать.
Прежде чем мы приступим, я хочу поблагодарить всех вас, за то, что вы посещаете мой блог, за каждый прочтенный пост и оставленный отзыв. Я на вас не зарабатываю миллионы и даже тысячи))), мне просто приятно помогать тем, кто как и я хочет чему то научиться, а не лениться сидя сутками на пролет во вКонтакте и подобным соц-сетям.
Самый простой способ научиться чему либо, это начать это делать самому. Именно делать, а в нашем случае верстать, ведь просмотрев десятки и сотни видео и прочитав не одну книгу вы далее теории не сдвинетесь ни на шаг. Теория без практического занятия ничто!
В этом курсе мы сверстаем одностраничный вебсайт на чистом HTML5 и CSS3 . Обработаем простой макет, который был нарисован в Photoshop. Дизайн макета имеет достаточно распространенный и довольно простой вид, но его нам будет более чем достаточно для изучения основных техник верстания вебсайтов. А вот собственно и сам скриншот будущего сайта
Макет рисовал не я, но это не помешает нам использовать его для наглядного пособия при верстке.
Чтобы вы могли повторять за мной последовательность верстки и сами могли пройти путь от А до Я вам нужно иметь следующие программы на своем ПК:
Вам так же будет необходим макет сделанный в Photoshop. Вы можете найти PSD файл вот по этой ссылке . Если у вас нет фотошоп, можно скачать с офф-сайта триал версию (30 дней), текстовый редактор можно выбирать любой на ваше усмотрение, я буду работать в Brackets из-за присутствия в нем возможности видеть результат вашей работы без сохранения документа и перезагрузки браузера.
Макет данного сайта прост и эффективен. Элементы используемые в данном макете очень распространены и большинство из них, если не все, используются в большинстве макетах сайтов. Вебсайт, который мы создаем будет использовать очень распространенное расположение элементов.
И вашему вниманию первое вступительное видео, где я рассказываю о своем плане по поводу верстки данного макета.
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
В данной статье мы познакомимся с возможностями новой технологии оформления 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 .
Данная функция растягивает элемент на указанный коэффициент. Коэффициент ширины и высоты по умолчанию равен 1 .
Высота была изменена с коэффициентом 1.4 , ширина оставлена без изменений, т.е. равна коэффициенту 1 .
Вы можете экспериментировать со значениями как хотите, так что пробуйте.
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 для того, чтобы освоить верстку сайтов? Рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
При выборе технологий верстки я руководствуюсь двумя принципами:
Таким образом, верстая сайты, я выбираю наиболее оптимальные решения. Верстаю сайты только на осмысленном 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!». Как правило, все документы, которые я верстаю проходят валидацию без дополнительных поправок. Но несмотря на это, каждую верстку я проверяю на наличие
