Независимо от того, какой сайт или веб приложение разрабатывается, всегда возникает необходимость создавать стили для заголовков, подобных h1 или h2 . В данном уроке мы рассмотрим несколько эффектов, которые применяются для заголовков, с использованием псевдо-элементов.
Почему применяются псевдо-элементы? Ответ прост: не нужна дополнительная разметка.
HTML
Прими урок со смирением
Никакой специальной разметки. Обычный заголовок с указанием класса.
CSS
Body{ width: 60%; margin: 50px auto; padding: 15px; position: relative; /*необходимо для заголовка 4*/ z-index: 0; /* необходимо для заголовка 4*/ border: 7px solid #cecece; border: 7px solid rgba(0,0,0,.05); background: #fff; background-clip: padding-box; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); } h1{ font-family: "Droid Sans", sans-serif; font-size: 22px; }
Обратите внимание на декларацию background-clip: padding-box . Она помогает получить интересный эффект: прозрачную рамочку для нашего контейнера. Свойство CSS background-clip определяет, будет ли фон элемента (цвет или изображение) взаимодействовать с ниже лежащими слоями.
Вот такой простой и приятный эффект получается с использованием свойства border:
Headline1 { border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px; }
Заголовок 2
Такой стиль можно получить с помощью метода треугольника:
Headline2 { border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; } .headline2:before, .headline2:after{ content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; } .headline2:after{ border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px; }
Заголовок 3
А вот такой эффект ленты можно тоже использовать для оформления заголовка:
Headline3{ position: relative; margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/ margin-right: -22px; padding: 15px; background: #e5e5e5; background: -moz-linear-gradient(#f5f5f5, #e5e5e5); background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background: -webkit-linear-gradient(#f5f5f5, #e5e5e5); background: -o-linear-gradient(#f5f5f5, #e5e5e5); background: -ms-linear-gradient(#f5f5f5, #e5e5e5); background: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; text-shadow: 0 1px 0 #fff; } .headline3:before, .headline3:after{ position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px solid transparent; } .headline3:before{ border-top: 6px solid #555; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; }
С помощью свойства box-shadow также можно создать отличный заголовок:
Headline4{ position: relative; border-color: #eee; border-style: solid; border-width: 5px 5px 5px 0; background: #fff; margin: 0 0 15px -15px; padding: 5px 15px; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0,0,0,.3); } .headline4:after { content: ""; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
Оформление текстовой информации в Web имеет свои определенные особенности. Если вы размещаете на сайте какой-то контент, то, как правило, он должен быть хорошо структурированным — для этого используются заголовки. С их помощью тексты получаются максимально легкими для чтения и восприятия.
Перед тем как начать пару моментов:
- Все шрифты из примеров являются бесплатными и доступны в Google WebFonts.
- В примерах имеются только заголовки Н1-Н4 так как они наиболее часто используемы.
- Автор CSS стилей использовал модель при которой [ширина] = [фактическая ширина элемента] + [отступы padding] + [границы borders]. Для этого в коде расположен сниппет:
| *, *: after , *: before { box-sizing : border-box ; } |
*, *:after, *:before { box-sizing: border-box; }
Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной . Итак, во всех примерах CSS стилей используется один и тот же «ритм»:
| h1 { font-size : 36px ; line-height : 40px ; } h2 { font-size : 30px ; line-height : 40px ; } h3 { font-size : 24px ; line-height : 40px ; } h4 { font-size : 18px ; line-height : 20px ; } |
h1 { font-size: 36px; line-height: 40px; } h2 { font-size: 30px; line-height: 40px; } h3 { font-size: 24px; line-height: 40px; } h4 { font-size: 18px; line-height: 20px; }
Теперь можно переходить непосредственно к практике.
Пример 1
Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:
| .demo-1 .main h1 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-weight : normal ; font-family : "Ultra" , sans-serif ; font-size : 36px ; line-height : 42px ; text-transform : uppercase ; text-shadow : 0 2px white , 0 3px #777 ; } .demo-1 .main h2 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-weight : normal ; font-size : 30px ; line-height : 40px ; font-family : "Orienta" , sans-serif ; } .demo-1 .main h3 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-size : 22px ; line-height : 40px ; font-weight : normal ; text-transform : uppercase ; font-family : "Orienta" , sans-serif ; letter-spacing : 1px ; font-style : italic ; } .demo-1 .main h4 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-size : 18px ; line-height : 20px ; font-weight : normal ; font-family : "Orienta" , sans-serif ; } |
Demo-1 .main h1 { margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: "Ultra", sans-serif; font-size: 36px; line-height: 42px; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; } .demo-1 .main h2 { margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-size: 30px; line-height: 40px; font-family: "Orienta", sans-serif; } .demo-1 .main h3 { margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px; font-weight: normal; text-transform: uppercase; font-family: "Orienta", sans-serif; letter-spacing: 1px; font-style: italic; } .demo-1 .main h4 { margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: normal; font-family: "Orienta", sans-serif; }
Пример 2
Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).
| .demo-2 .main h1 { margin : 1em 0 0.5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; position : relative ; font-size : 36px ; line-height : 40px ; padding : 15px 15px 15px 15% ; color : #355681 ; box-shadow : inset 0 0 0 1px rgba (53 , 86 , 129 , 0.4 ) , inset 0 0 5px rgba (53 , 86 , 129 , 0.5 ) , inset -285px 0 35px white ; border-radius : 0 10px 0 10px ; background : #fff url (../images/bartoszkosowski.jpg ) no-repeat center left ; } .demo-2 .main h2 { margin : 1em 0 0.5em 0 ; font-weight : normal ; position : relative ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.6 ) ; font-size : 28px ; line-height : 40px ; background : #355681 ; background : rgba (53 , 86 , 129 , 0.8 ) ; border : 1px solid #fff ; padding : 5px 15px ; color : white ; border-radius : 0 10px 0 10px ; box-shadow : inset 0 0 5px rgba (53 , 86 , 129 , 0.5 ) ; font-family : "Muli" , sans-serif ; } .demo-2 .main h3 { margin : 1em 0 0.5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; position : relative ; text-shadow : 0 -1px 1px rgba (0 , 0 , 0 , 0.4 ) ; font-size : 22px ; line-height : 40px ; color : #355681 ; text-transform : uppercase ; border-bottom : 1px solid rgba (53 , 86 , 129 , 0.3 ) ; } .demo-2 .main h4 { margin : 1em 0 0.5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; position : relative ; font-size : 18px ; line-height : 20px ; color : #788699 ; font-family : "Muli" , sans-serif ; } |
Demo-2 .main h1 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; color: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 0 5px rgba(53,86,129, 0.5), inset -285px 0 35px white; border-radius: 0 10px 0 10px; background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left; } .demo-2 .main h2 { margin: 1em 0 0.5em 0; font-weight: normal; position: relative; text-shadow: 0 -1px rgba(0,0,0,0.6); font-size: 28px; line-height: 40px; background: #355681; background: rgba(53,86,129, 0.8); border: 1px solid #fff; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; } .demo-2 .main h3 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-size: 22px; line-height: 40px; color: #355681; text-transform: uppercase; border-bottom: 1px solid rgba(53,86,129, 0.3); } .demo-2 .main h4 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 18px; line-height: 20px; color: #788699; font-family: "Muli", sans-serif; }
Пример 3
Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).
| .demo-3 .main h2: after , .demo-3 .main h3: after , .demo-3 .main h4: after { position : absolute ; content : "" ; left : 0 ; top : 0 ; bottom : 0 ; width : 5px ; border-radius : 2px ; box-shadow : inset 0 1px 1px rgba (0 , 0 , 0 , 0.5 ) , 0 1px 1px rgba (255 , 255 , 255 , 0.3 ) ; } .demo-3 .main h2: after { background : #0AF ; } .demo-3 .main h3: after { background : #3BF ; } .demo-3 .main h4: after { background : #6Cf ; } .demo-3 .main h1 { font-size : 36px ; line-height : 40px ; margin : 1em 0 .6em 0 ; font-weight : normal ; color : white ; font-family : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.4 ) ; position : relative ; color : #6Cf ; } .demo-3 .main h2 { margin : 1em 0 .6em 0 ; padding : 0 0 0 20px ; font-weight : normal ; color : white ; font-family : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.4 ) ; position : relative ; font-size : 30px ; line-height : 40px ; } .demo-3 .main h3 { margin : 1em 0 .6em 0 ; padding : 0 0 0 20px ; font-weight : normal ; color : white ; font-family : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.4 ) ; position : relative ; font-size : 24px ; line-height : 40px ; font-family : "Questrial" , sans-serif ; } .demo-3 .main h4 { margin : 1em 0 .6em 0 ; padding : 0 0 0 20px ; font-weight : normal ; color : white ; font-family : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.4 ) ; position : relative ; font-size : 18px ; line-height : 20px ; font-family : "Questrial" , sans-serif ; } |
Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); } .demo-3 .main h2:after { background: #0AF; } .demo-3 .main h3:after { background: #3BF; } .demo-3 .main h4:after { background: #6Cf; } .demo-3 .main h1 { font-size: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; color: #6Cf; } .demo-3 .main h2 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 30px; line-height: 40px; } .demo-3 .main h3 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 24px; line-height: 40px; font-family: "Questrial", sans-serif; } .demo-3 .main h4 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 18px; line-height: 20px; font-family: "Questrial", sans-serif; }
Пример 4
Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.
| .demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i { padding-right : 10px ; color : #A8D13B ; font-size : 0.8em ; } .demo-4 .main h2: after , .demo-4 .main h3: after , .demo-4 .main h4: after { position : absolute ; content : "" ; height : 1px ; border-radius : 2px ; left : 0 ; bottom : 0 ; box-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.1 ) , 0 1px 0 rgba (255 , 255 , 255 , 0.6 ) ; } .demo-4 .main h2: after { width : 100% ; } .demo-4 .main h3: after { width : 75% ; } .demo-4 .main h4: after { width : 50% ; } .demo-4 .main h1 { margin : 1em 0 0.75em ; padding : 0 0 5px 0 ; color : #6B5344 ; font-weight : normal ; position : relative ; text-shadow : 0 2px 0 rgba (255 , 255 , 255 , 0.5 ) ; font-size : 36px ; line-height : 40px ; font-family : "Carrois Gothic" , sans-serif ; } .demo-4 .main h2 { margin : 1em 0 0.75em ; padding : 0 0 5px 0 ; color : #6B5344 ; font-weight : normal ; font-family : "Scada" , sans-serif ; position : relative ; text-shadow : 0 2px 0 rgba (255 , 255 , 255 , 0.5 ) ; font-size : 30px ; line-height : 40px ; } .demo-4 .main h3 { margin : 1em 0 0.75em ; padding : 0 0 5px 0 ; color : #6B5344 ; font-weight : normal ; font-family : "Scada" , sans-serif ; position : relative ; text-shadow : 0 2px 0 rgba (255 , 255 , 255 , 0.5 ) ; font-size : 24px ; line-height : 40px ; } .demo-4 .main h4 { margin : 1em 0 0.75em ; padding : 0 0 5px 0 ; color : #6B5344 ; font-weight : normal ; font-family : "Scada" , sans-serif ; position : relative ; text-shadow : 0 2px 0 rgba (255 , 255 , 255 , 0.5 ) ; font-size : 18px ; line-height : 20px ; } |
Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i { padding-right: 10px; color: #A8D13B; font-size: 0.8em; } .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after { position: absolute; content: ""; height: 1px; border-radius: 2px; left: 0; bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); } .demo-4 .main h2:after { width: 100%; } .demo-4 .main h3:after { width: 75%; } .demo-4 .main h4:after { width: 50%; } .demo-4 .main h1 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 36px; line-height: 40px; font-family: "Carrois Gothic", sans-serif; } .demo-4 .main h2 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; } .demo-4 .main h3 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 24px; line-height: 40px; } .demo-4 .main h4 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 18px; line-height: 20px; }
Пример 5
Еще одно интересное и не совсем обычного цветовое решение — возможно, подтолкнет вас к каким-то своим идеям и реализациями. Заголовки, в принципе, не всегда могут иметь жирный большой шрифт — бывают и такие варианты.
| .demo-6 .main h1 { margin : 1em 0 0.5em 0 ; font-weight : 100 ; text-transform : uppercase ; color : #00caa6 ; font-style : italic ; font-family : "Josefin Sans" , sans-serif ; font-size : 58px ; line-height : 54px ; text-shadow : 2px 5px 0 rgba (0 , 0 , 0 , 0.2 ) ; } .demo-6 .main h2 { margin : 1em 0 0.5em 0 ; color : #148773 ; font-size : 26px ; line-height : 40px ; font-weight : bold ; font-family : "Josefin Sans" , sans-serif ; } .demo-6 .main h3 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-size : 22px ; line-height : 40px ; font-weight : 100 ; text-transform : uppercase ; font-family : "Josefin Sans" , sans-serif ; letter-spacing : 1px ; font-style : italic ; } .demo-6 .main h4 { margin : 1em 0 0.5em 0 ; color : #343434 ; font-size : 18px ; line-height : 20px ; font-weight : bold ; font-family : "Josefin Sans" , sans-serif ; } |
Demo-6 .main h1 { margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif; font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); } .demo-6 .main h2 { margin: 1em 0 0.5em 0; color: #148773; font-size: 26px; line-height: 40px; font-weight: bold; font-family: "Josefin Sans", sans-serif; } .demo-6 .main h3 { margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px; font-weight: 100; text-transform: uppercase; font-family: "Josefin Sans", sans-serif; letter-spacing: 1px; font-style: italic; } .demo-6 .main h4 { margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: "Josefin Sans", sans-serif; }
Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.
P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.
Независимо от того, какой сайт или веб приложение разрабатывается, всегда возникает необходимость создавать стили для заголовков, подобных h1 или h2 . В данном уроке мы рассмотрим несколько эффектов, которые применяются для заголовков, с использованием псевдо-элементов.
Почему применяются псевдо-элементы? Ответ прост: не нужна дополнительная разметка.
HTML
Прими урок со смирением
Никакой специальной разметки. Обычный заголовок с указанием класса.
CSS
Body{ width: 60%; margin: 50px auto; padding: 15px; position: relative; /*необходимо для заголовка 4*/ z-index: 0; /* необходимо для заголовка 4*/ border: 7px solid #cecece; border: 7px solid rgba(0,0,0,.05); background: #fff; background-clip: padding-box; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); } h1{ font-family: "Droid Sans", sans-serif; font-size: 22px; }
Обратите внимание на декларацию background-clip: padding-box . Она помогает получить интересный эффект: прозрачную рамочку для нашего контейнера. Свойство CSS background-clip определяет, будет ли фон элемента (цвет или изображение) взаимодействовать с ниже лежащими слоями.
Вот такой простой и приятный эффект получается с использованием свойства border:
Headline1 { border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px; }
Заголовок 2
Такой стиль можно получить с помощью метода треугольника:
Headline2 { border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; } .headline2:before, .headline2:after{ content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; } .headline2:after{ border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px; }
Заголовок 3
А вот такой эффект ленты можно тоже использовать для оформления заголовка:
Headline3{ position: relative; margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/ margin-right: -22px; padding: 15px; background: #e5e5e5; background: -moz-linear-gradient(#f5f5f5, #e5e5e5); background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background: -webkit-linear-gradient(#f5f5f5, #e5e5e5); background: -o-linear-gradient(#f5f5f5, #e5e5e5); background: -ms-linear-gradient(#f5f5f5, #e5e5e5); background: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; text-shadow: 0 1px 0 #fff; } .headline3:before, .headline3:after{ position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px solid transparent; } .headline3:before{ border-top: 6px solid #555; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; }
С помощью свойства box-shadow также можно создать отличный заголовок:
Headline4{ position: relative; border-color: #eee; border-style: solid; border-width: 5px 5px 5px 0; background: #fff; margin: 0 0 15px -15px; padding: 5px 15px; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0,0,0,.3); } .headline4:after { content: ""; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.
Шапка сайта – какой она бывает
Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.
Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.
Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.
Как в CSS можно оформить шапку сайта?
Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.
Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.
Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:
< header > < / header > |
Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.
header{ width: 100%; background: #D8E3AB; height: 70px; }
header { width : 100 % ; background : #D8E3AB; height : 70px ; |
Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.
Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.
Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.
< div id = "wrap" > < header > < / header > < / div > |
Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.
Рис. 1. Пока это только контейнер, в котором будет все содержимое.
Что обычно содержится в шапке?
Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.
Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:
Для этого достаточно дописать некоторые правила к фону:
background: #D8E3AB url(logo.png) no-repeat 5% 50%;
background : #D8E3AB url(logo.png) no-repeat 5% 50%; |
То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.
Добавим в шапку какое-то содержимое. Например, заголовок и меню.
< div class = "title" > Названиесайта< / div > < ul class = "menu" > < li > < a href = "#" > Контакты< / a > < / li > < li > < a href = "#" > Онас< / a > < / li > < li > < a href = "#" > Услуги< / a > < / li > < / ul > |
Теперь все это оформим.
Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }
Title { font - size : 36px ; padding - top : 10px ; text - align : center ; |
: убрали лишние теги h из элементов шаблона, вывели название каждой статьи в теге h1, назначили анонсам постов в рубриках теги h2.
Теперь с помощью тегов h1-h6 можно придать постам четкую структуру, которую так любят поисковики. Но вот беда – стили заголовков, мягко говоря, оставляют желать лучшего.
Простой большой черный шрифт выглядит слишком скучно. Яркие краски явно просятся в заголовки.
Название статьи в h1 так и хочется выделить какой-нибудь линией, рамочкой или даже красивым фоновым изображением с обрезными краями. А еще желательно, чтобы у заголовка следующего низшего уровня шрифт был чуть меньше, чем у предыдущего.
Хотите, чтобы ваш сайт радовал глаз? Тогда давайте учиться назначать стили заголовкам сайта.
По традиции работать будем с шаблоном Twenty Eleven. Ниже я приведу несколько стилей заголовков, которые вы сможете изменить на свой вкус. А пока давайте сразу разберемся где в шаблоне прописаны стили заголовков и куда мы будем вставлять свой код.
Где в шаблоне выводятся стили заголовков?
Откройте «Внешний вид» — «Редактор». Найдите таблицу стилей style.css. Найдите блок текста с названием /* =Global.
В нем есть строчки:
/* Headings */ h1,h2,h3,h4,h5,h6 { clear: both; }
Вот с ними мы и будем работать.
Нам нужно вместо этого кода написать следующее:
/* Headings */ h1 {бла бла бла } h2 {бла бла бла } h3 {бла бла бла } h4 {бла бла бла }
Вместо бла бла бла вы подставите свои значения шрифтов, отступов, градиентов.
Если какое-то значение, например, размер шрифта работать не будет, значит возник конфликт стилей. В этой конкретной строчке перед точкой с запятой нужно вписать волшебное словечко!important Это словечко отменяет действие стилей из других частей документа и заставляет выполнять именно эту заданную команду.
Выглядеть это будет так:
Font-size: 23px !important;
В общем, было так:
Готовые стили заголовков для сайтов
Заголовок с фоновой картинкой в рамке
В этом стиле для фона заголовка используется сплошная заливка и картинка. CSS код построен грамотно: отступы указываются в процентах, чтобы при уменьшении изображения текст заголовка не слился с фоновой картинкой. Шрифты — Titillium Web (sans-serif), Muli (sans-serif).
На основе этого стиля я сделала заголовки здесь на сайте.
H1 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; color: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 0 5px rgba(53,86,129, 0.5), inset -285px 0 35px white; border-radius: 0 10px 0 10px; background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left; } h2 { margin: 1em 0 0.5em 0; font-weight: normal; position: relative; text-shadow: 0 -1px rgba(0,0,0,0.6); font-size: 28px; line-height: 40px; background: #355681; background: rgba(53,86,129, 0.8); border: 1px solid #fff; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: "Muli", sans-serif; } h3 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-size: 22px; line-height: 40px; color: #355681; text-transform: uppercase; border-bottom: 1px solid rgba(53,86,129, 0.3); } h4 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 18px; line-height: 20px; color: #788699; font-family: "Muli", sans-serif; }
Используемое в примере изображение я приведу в полную величину.
Вместо предложенной картинки можно взять любую другую, например, интересную текстуру.
Адрес картинки прописывается в строке:
Background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left;
Указывайте полный адрес изображения на вашем сайте. Вы можете добавить картинку на сайт через загрузчик медиафайлов, не публикуя в статье. Там же в менеджере загрузок вы можете посмотреть адрес вашей новой картинки.
Цвет текста можно поменять на любой другой в строчке
Color: #355681;
Заголовок для сайта с темным дизайном
На лицо контраст яркого голубого цвета и темно-серого фона. Шрифты — Hammersmith One (sans-serif), Questrial (sans-serif).
H2:after, h3:after, h4:after { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); } h2:after { background: #0AF; } h3:after { background: #3BF; } h4:after { background: #6Cf; } h1 { font-size: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; color: #6Cf; } h2 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 30px; line-height: 40px; } h3 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 24px; line-height: 40px; font-family: "Questrial", sans-serif; } h4 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 18px; line-height: 20px; font-family: "Questrial", sans-serif; }
Заголовок на фоне деревянной текстуры
Шрифты — Scada (sans-serif), Carrois Gothic (sans-serif). Листочек для заголовка h2 реализован через шрифт, а не через картинку.
H1 i, h2 i, h3 i, h4 i { padding-right: 10px; color: #A8D13B; font-size: 0.8em; } h2:after, h3:after, h4:after { position: absolute; content: ""; height: 1px; border-radius: 2px; left: 0; bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); } h2:after { width: 100%; } h3:after { width: 75%; } h4:after { width: 50%; } h1 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 36px; line-height: 40px; font-family: "Carrois Gothic", sans-serif; } h2 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; } h3 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 24px; line-height: 40px; } h4 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 18px; line-height: 20px; }
Заголовки с нежирным шрифтом
Простенько и ненавязчиво. Может быть это цветовое решение натолкнет вас на какую-то новую идею.
H1 { margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif; font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); } h2 { margin: 1em 0 0.5em 0; color: #148773; font-size: 26px; line-height: 40px; font-weight: bold; font-family: "Josefin Sans", sans-serif; } h3 { margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px; font-weight: 100; text-transform: uppercase; font-family: "Josefin Sans", sans-serif; letter-spacing: 1px; font-style: italic; } h4 { margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: "Josefin Sans", sans-serif; }
Простые заголовки в стиле газеты
Стиль отлично подойдет для сайта СМИ. Без изысков. Шрифты – Ultra (sans-serif), Orienta (sans-serif).
Англоязычный источник этих стилей: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/
Заголовок в стиле web 2.0
Заголовок выполнен на одном CSS без картинок. Полупрозрачный блок накладывается на основной текст. Цвет, фон, размеры можно изменить на свой вкус.
Если использовать несколько элементов с разной степенью прозрачности, то можно покрасить текст заголовка полосочками или создать красивый градиент.
Пример 1. Заголовок в стиле web 2.0
H3#example { font: normal 27px tahoma; position: relative; background: #000; color: #0cf; padding: 10px 0px; } h3#example span { position: absolute; top: 29px; left: 0; width: 100%; height: 15px; background: #000; /* цвет накладываемого блока, должен совпадать с цветом фона основного блока */ overflow: hidden; opacity: 0.45; filter: alpha(opacity=45); }
Правда у этого метода есть один недостаток: ту часть текста, которая находится под полупрозрачным блоком, нельзя выделить курсором.
Заголовок с узором
Здесь накладывается не полупрозрачный блок, а полноценная картинка в формате PNG или GIF. Картинка может представлять собой любой узор. В спектре узора должен быть только один цвет — цвет фона.
Пример 2. Оформление заголовка узорами
H3#example2 { font: normal 27px tahoma; position: relative; background: #000; color: #0cf; padding: 10px 0px; } h3#example2 span { position: absolute; top: 15px; left: 0; width: 100%; height: 30px; background: url(lines.gif); /* картинка-узор */ overflow: hidden; opacity: 0.60; filter: alpha(opacity=60);/ }
В этом примере текст заштрихован, но ему можно задать любую текстуру: металлический отблеск, зернистость, градиент, узор цветочками.
На основе любого из этих стилей вы можете создать свои собственные уникальные заголовки. В заключение приведу небольшую табличку основных свойств текста, которые могут вам пригодиться.
| Свойства | описание |
|---|---|
| font-size | размер текста |
| font-family | шрифт текста |
| text-align | расположение текста |
| text-indent | красная строка |
| letter-spacing | расстояние между буквами |
| line-height | межстрочный интервал |
| word-spacing | расстояние между словами |
| white-space | отображает пробелы между словами |
| font-variant | вывод текста большими/маленькими буквами |
| font-weight | толщина букв |
| text-shadow | тень вокруг текста |
