Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 15 видеоуроку по CSS Размер: 279.1 kB, скачали: 678 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Что такое спрайт?
Спрайт — это изображение, в состав которого включено некоторое количество более мелких изображений. На своих экранах вы видите пример спрайта. В нем находится 12 маленьких изображений. Давайте посмотрим, что мы имеем на данный момент, и что мы будем иметь в конце видеоурока. Мы видим горизонтальное меню, которое располагается по центру экрана вне зависимости от его ширины. При наведении на пункт меню, у нас меняется фон и цвет текста. При нажатии на пункт меню, у нас тоже меняется фон, но браузер Opera моей версии этого не отображает. Однако все другие современные браузеры это показывают. Поэтому в этом видеоуроке мы будем работать с браузером Firefox.
Горизонтальное меню с помощью CSS спрайтов
Давайте перейдем в код, и пошагово будем создавать меню. CSS спрайт, из которого мы будем создавать меню, будет находиться в дополнительных материалах и лежать в папке img.
Первым делом давайте вернем наши три абзаца текста в блок content.
<div id="content"> <div id="container"> <img src="img/trash_full.png" alt="" id="trash"> <h3>Что такое Lorem Ipsum?</h3><img src="img/man_grey.png"><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p><br> <h3>Где его взять?</h3><img src="img/f_user.png"><p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. </p><br class="clear"> <h3>Почему он используется?</h3><img src="img/barak_obama.png"><p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. </p><br class="clear"> <h3>Откуда он появился?</h3><img src="img/photo.png"><p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </p><br> </div> </div>
После каждого шага мы будем проверять, как это смотрится в браузере.
Вторым этапом давайте уберем верхнее изображение. Мы не будем исключать его из кода, а просто зададим ему минусовой z-индекс.
#header img#pic2 {
width: 100px;
height: 100px;
position: absolute;
top: 68px;
left: 490px;
z-index: -2;
}
Далее нам нужно определиться с тем, в каком блоке будет располагаться наше меню. Мы можем его расположить в блоке контента либо в оболочке wrapper. Нам нужно, чтобы наше меню находилось в центре экрана, но позиционировать меню мы будем по центру блока, в котором оно находится и никак иначе. Если оно будет находиться в блоке content, то оно будет позиционироваться по центру блока content, но так как наше правое меню больше, чем левое, то блок с нашим горизонтальным меню не будет находиться по центру. Именно поэтому нам нужно располагать наше меню по центру оболочки wrapper. Возможно, это сейчас непонятно, но если вы попробуете расположить меню в блоке content, а потом в оболочке wrapper, то вы заметите разницу.
Давайте пропишем код меню на нашей странице. Я его вставляю после блока content, так как оно должно располагаться над этим блоком.
<ul id="menu"> <li id="home"> <a href="page.html" title="Главная">Главная</a> </li> <li id="author"> <a href="#" title="Обо мне">Обо мне</a> </li> <li id="about"> <a href="#" title="О сайте">О сайте</a> </li> <li id="contact"> <a href="#" title="Контакты">Контакты</a> </li> </ul>
Давайте разберем код нашего меню. Это обычный ненумерованный список. Он имеет идентификатор menu, внутри него есть теги <li></li> — пункты нашего меню, внутри которых находятся ссылки на страницы нашего сайта. В каждом пункте меню по одной ссылке. Сохраняем и смотрим, что у нас получается.
Мы видим, что меню отобразилось ниже всего сайта и виден только пункт меню «Главная» и половина пункта «Об авторе». Чтобы это исправить, нам нужно добавить стили для идентификатора нашего меню.
Переходим в таблицу стилей. Наш спрайт имеет ширину 420 пикселей и высоту 180 пикселей. Для списка с идентификатором menu мы задаем абсолютное позиционирование. Так как оболочка wrapper у нас имеет позиционирование относительное, то это меню будет позиционироваться относительно оболочки wrapper. Потом мы задаем меню left, равный 50%. Чтобы наше меню располагалось по центру крана, мы прописываем ему margin-left, равный -210 пикселей — половина ширины нашего спрайта. Благодаря таким манипуляциям, наше меню будет находиться по центру не зависимо от ширины экрана. Я надеюсь, это понятно. Ну и последний пункт — top в 70 пикселей. Он нужен нам для того, чтобы меню располагалось не в самом верху страницы, а на пересечении хедера и контента.
ul#menu {
margin-left: -210px;
position: absolute;
left: 50%;
top: 70px;
}
Далее мы задаем стили тегам <li>, которые находятся в нашем меню. Каждому пункту меню мы задаем фоновое изображение — наш спрайт. Следует заметить, что фон не должен повторяться. Чтобы наши пункты меню располагались горизонтально, мы прописываем им обтекание left. Ставим значения высоты и ширины каждому пункту меню. Если посмотреть на примере, то синий прямоугольник показывает ширину и высоту каждого пункта меню.
ul#menu li {
background: url('img/menu.png') no-repeat;
float: left;
height: 60px;
width: 105px;
}
Дальше мы прописываем стили для ссылок, которые находятся в данном меню. Мы их пока уберем и просто посмотрим, что у нас получается на данный момент. Мы видим, что наши пункты меню имеют фоновое изображение. Оно не кликабельно. На этих фоновых изображениях у нас есть ссылки, которые кликабельны.
Теперь давайте добавим стили для ссылок. Значение display: block делает наши ссылки блочным элементом. Мы им задаем ширину и высоту 100%, что означает, что они будут занимать всю область пункта меню. Свойство text-indent с большим отрицательным значением прячет наш текст ссылки за область экрана. Зачем нам текст ссылки, если у нас есть спрайт, на котором мы увидим и фон, и текст?
ul#menu li a {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px;
}
Сохраняем. Смотрим, что получается. У нас исчез текст ссылки, и пункт меню стал полностью кликабельным. Хочу сказать, что половину дела мы уже сделали.
Давайте перейдем в код и добавим еще стили для трех состояний пункта меню home: простое состояние, состояние при наведении и состояние при нажатии. Это только для одного пункта меню. В каждом состоянии мы прописываем лишь одно свойство — background-position. А вот значения в разных состояниях отличаются.
ul#menu li#home {
background-position: 0px 0px;
}
ul#menu li#home:hover {
background-position: 0px -60px;
}
ul#menu li#home:active {
background-position: 0px -120px;
}
Давайте посмотрим на примере. Синий прямоугольник показывает вам пункт меню home. Мы видим, что этот пункт включает лишь левую верхнюю часть всего спрайта. Также мы видим две оси: ось Х (значение left) и ось Y (значение top). Простое состояние пункта меню home находится в значении ноль по оси X и Y. Если мы посмотрим, то мы это и прописали. При наведении на пункт меню у нас должна высвечиваться другая часть спрайта. Чтобы это сделать, мы должны переместить фон вверх, а чтобы переместить его вверх, нам нужно задать значение top в -60 пикселей. Здесь обязательно обратите внимание, что мы двигаем не пункт меню, а спрайт. Именно поэтому у нас значение будет отрицательным. То есть по оси Х получается 0 пикселей, а по оси Y — -60. Посмотрим это в коде. Так и есть. Для третьего состояния принцип тот же. По оси X получается 0 пикселей, а по оси Y — -120.
Давайте сохраним и проверим в браузере, что у нас получилось. Наводим мышку на пункт меню «Главная» — она меняет у нас фон и цвет текста. А теперь попробуем нажать. Фон становится чуть темнее.
Теперь давайте пропишем стили для второго пункта меню «Об авторе». Здесь у нас уже будет отрицательное значение и по оси Х. Мы ставим -105 пикселей по оси Х, а дальше все происходит по тому же принципу.
ul#menu li#author {
background-position: -105px 0px;
}
ul#menu li#author:hover {
background-position: -105px -60px;
}
ul#menu li#author:active {
background-position: -105px -120px;
}
Сохраняем. Смотрим, что получается. Второй пункт меню тоже заработал.
То же самое делаем и с остальными пунктами меню.
ul#menu li#about {
background-position: -210px 0px;
}
ul#menu li#about:hover {
background-position: -210px -60px;
}
ul#menu li#about:active {
background-position: -210px -120px;
}
ul#menu li#contact {
background-position: -315px 0px;
}
ul#menu li#contact:hover {
background-position: -315px -60px;
}
ul#menu li#contact:active {
background-position: -315px -120px;
}
Все пункты меню у нас работают, и на этом можно было бы закончить, но мы видим, что меню мешает заголовку первого абзаца. Эта проблема решается быстро. Нам просто нужно задать отступ от верхнего края для блока content. Зададим 20 пикселей.
#content {
background-color: #fff;
margin: 20px 20% 0 120px;
padding-bottom: 40px;
}
Вторая возможная проблема — это когда мы будем уменьшать сайт, то наше горизонтальное меню может залезть на левое и правое меню. Чтобы этого не случилось, мы уже знаем, что нам нужно задать минимальную ширину для блока wrapper. Меняем 600 пикселей на 720.
#wrapper {
width: 80%;
min-width: 720px;
max-width: 1200px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0 auto;
background-color: #fff;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
Сохраняем. Проблема решена.
Поздравляю вас с новыми знаниями. Чтобы их не забыть, вам следует их потренировать на практике. Создайте, например, какое-нибудь красивое вертикальное меню или оформите с помощью спрайтов весь свой сайт. Возможно, это покажется удивительным. Как это так — весь сайт оформить с помощью спрайтов? Но хочу вам сказать, что многие интернет сайты делают большую часть своего оформления при помощи CSS спрайтов, так как они сокращают скорость загрузки сайта. Все-таки есть разница: загрузите вы одно изображение или штук двадцать.
Сервис создания CSS спрайтов
Напоследок хочу вас познакомить с сайтом, который поможет вам в создании CSS спрайтов — . Если у вас уже есть изображения. Например, одно — фон страницы, другое — фон меню, третье — фон хедера, то при помощи кнопки «Обзор» вы их можете загрузить на этот сайт. Если вам требуется больше изображений, то нажмите «need more?». В опциях вы можете отрегулировать отступы между элементами, рамку для изображений, положение элемента (слева или сверху) и фоновый цвет (прозрачный либо RGB). Потом нажимаете кнопку «generate!», после чего у вас генерируется изображение. Чуть ниже у вас есть таблица. В левой колонке указаны все участвующие изображения, а справа указаны стили, чтобы использовать эти изображения. Спрайт вы можете загрузить в формате png либо просмотреть его в формате html. У нас получился спрайт, состоящий из четырех изображений.
Спасибо за внимание. До встречи в следующем видеоуроке!
Info-line.net
Олег, левая закрепленная полоса с 10-ю пиктограммами соцсетей на Вашем сайте — выполнена как спрайт?
Да. Вот ссылка на этот спрайт — info-line.net/share42/icons.png
Спасибо!
Столько ошибок наделал я на своей работе что пришлось впервые скатать твой доп. материал кстати там если я не ошибаюсь когда катаешь его там ошибка есть ты в коде page не указал класс вот этот class="img1" и class="img2" ну это для того чтобы картинки оказались справа и слева а то когда я загрузил картинки были над текстом =)
только что проверил) вроде все указал и загружается нормально 🙂
Олег, можете сказать какой программой видео снимаете?
Да, Филипп. Видео снимаю в программе Camtasia Studio 7.
Спасибо!
Привет Олег! Скажи пожалуйста а можно ли использовать формат jpg или gif вместо pdg есть другой способ сделать горизонтальное меню с помощью css?? 8)Этим способом очень долго примерно 2 часа делал... макет тоже входит во время!!(((
Привет! Конечно можно!) PNG — это один из форматов, вы можете использовать любой. Но учтите, что формат JPG не сохраняет прозрачность, GIF и PNG — сохраняют.
Я показал самый выгодный и самый профессиональный способ. Обычно на сайте имеется не более двух горизонтальных меню, не жалейте потратить на них время.
Есть еще один вариант — использовать множество изображений, но у него есть минус — скорость. Этот вариант не сильно отличается от настоящего и связан с использованием ссылок и псевдоклассов. Тебе нужно будет добавить в изображения в CSS-стили, чтобы получить графическое меню. Он не намного легче этого способа и отличается лишь тем, что вместо CSS-спрайтов используются простые изображения (которые можно очень легко сделать спрайтом с помощью сервиса rel="nofollow">CSS Sprites), поэтому я советую пользоваться способом, описанным в данном видеоуроке. Он не так сложен, как кажется на первый взгляд. С другой стороны, если для тебя трудно не само создание меню, а создание изображений, то я планирую в ближайшем времени записывать видеокурс по PhotoShop, в котором мы это будем изучать.
Ах, да!) Не ленись, главное! Если в голове получилась каша, то делай меню поэтапно, используя этот видеоурок (т.е. запускай и останавливай его в нужные моменты). Таким образом не запутаешься. Желаю удачи 😉
Спасиб!!Я знаю что спрайты ускоряют работу сайта чем обычные стили css)))Когда выдут твои PНP уроки очень их жду???..Вот эта тема самая сложна для меня в css если чесно...Просматриваю уже 10 раз прочитал тоже много раз!((как думаешь этот сайт подходит для создания так сказать облегчения работы со спрайтом??))
До PHP еще далеко. В ближайшие 6 месяцев точно не будет видеокурса по PHP.
На счет сайта немного не понял. Для создания какого «облегчения работы со спрайтом»?) Чем может помочь? Как-то слова не вяжутся 🙂
Вот сылка на сайт-------->>>>>> ruseller.com
Где можно так сказать увидить код css а не самому вводить)))
Я понял про сайт. Но не понял, каким образом там можно увидеть код CSS?) Или ты меня спрашиваешь, как посмотреть код CSS?
В любом случае — если помогает — пользуйся. Но я так и не понял, что ты имеешь ввиду.
Олег нет забудь о спрайтах я сайт перепутал не тот скинул...(на том сайте можно было сделать онлайн css спрайт с кодом) ну фиг с ним!! вообще было бы круто если у тебя на сайте были готовые спрайты...в инете я не нашел ни одного точнее в топе точно их нету(((А видео урок по создание интернет магазина у тебя будет???просто как бы хотелось бы узнать как он создается)
Видеокурс скорее будет 😉
Вообщем все круто я научился создавать меню более менее ...))Возникает следущий вопрос Как ты создал комментарии к своим статьям??? как они у тебя отпровляются в верх...Это ведь не просто формы...Точнее это формы но тут полюбас есть MySQL =-O =-O %) ???..
Да PHP+MySQL. В ближайшем времени планируется запуск тренинга по созданию такого сайта как у меня и даже лучше 😉 Подпишись на RSS или по e-mail, чтобы не пропустить.
И если не затруднит попробуй об этом написать более подробно!!))))спасиб...
Если писать это вручную, то для этого нужно было бы несколько видеоуроков.
Если пользоваться уже готовым решением, то это мы будем рассматривать в будущем тренинге.
я не как не могу своей встроенной таблица в таблице задать css он не хочет с ним работать А первая таблица спокойна контачит прям без проблем (((((((((((Все правельно прописал и таблица создается в html но если привязываю css к ней то не че не происходит
Почти ничего не понял из ваших слов, а ваше предыдущее сообщение попало в спам из-за того, что вы неправильно вставили код. Единственное, что на данный момент могу подсказать — проверьте путь к css файлу. Для более подробного разбора, вставьте html и css коды в комментариях, обрамив их тегами — [(/)html] и [(/)css] соответсвенно. В круглых «()» скобках указан символ для закрывающего тега.
Все проблема решена... Вообщем там дело было как я хотел создать 2 меню горизонтальное и вертикальное... проблема была в том что я прописывал и НА ОДНОМ CSS ...
ul { margin-left: 20px; /* отступ списка от левого края */ margin-top: 20px; /* отступ списка сверху */ width: 96px; /* ширина списка */ height: 130px; /* высота списка */ } li { text-align: center; /* выравнивание такста в списке по центру */ list-style-type: none; /* отключение стандартного стиля списка */ line-height: 25px; /* отступ сверху */И плюс к этому было еще точно такоеже только вертикальное меню...