Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
;__background-position:_top_left;__background-repeat:_no-repeat;){kind=link}
|
282 Часть 2. Применение CSS Например, посередине слева изображение на рис. 8.17 является радиальным гради- ентом, который начинается с отступом на 20 % от левого края элемента и с отступом на 40 % от верхнего края элемента. Значения позиционирования указываются перед ключевыми словами, определяющими форму и цвета: background-image: radial-gradient(20% 40%, circle, red, blue); Чтобы указать размер градиента, можно воспользоваться одним из четырех клю- чевых слов. closest-side — предписывает браузеру создать градиент, распространяющийся из центра только до ближайшей к центру стороне элемента. Например, в сред- нем левом изображении на рис. 8.17 ближайшей к центру градиента стороной является верхний край элемента, поэтому радиус окружности простирается от центра до этого края. Тем самым весь градиент остается внутри элемента. Код для создания этого градиента имеет следующий вид: background-image: radial-gradient(20% 40%, circle closest-side, red, blue); Когда ключевое слово closest-side применяется к эллиптическому градиенту, для вычисления x и y радиусов эллипса используются обе ближайшие стороны (то есть верхняя или нижняя и левая или правая). closest-corner — приводит к вычислению ширины градиента из его центра до бли- жайшего угла элемента (изображение справа посередине на рис. 8.17). Это может означать выход градиента за пределы элемента. Например, окружность, нарисо- ванная в верхней части среднего правого изображения на рис. 8.17 показывает фактический размер градиента. Часть градиента выходит за границы элемента: background-image: radial-gradient(20% 40%, circle closest-corner, red, blue); farthest-side — приводит к вычислению радиуса окружности от ее середины до самой дальней стороны элемента. В случае эллиптического градиента это рас- стояние от центра до любой самой дальней верхней или нижней стороны и до любой самой дальней левой или правой стороны. Код, с помощью которого со- здано нижнее левое изображение на рис. 8.17, имеет следующий вид: background-image: radial-gradient(20% 40%, circle farthest-side, red, blue); farthest-corner — приводит к вычислению радиуса окружности от ее центра до самого дальнего угла элемента. Код, с помощью которого создано нижнее правое изображение на рис. 8.17, имеет следующий вид: background-image: radial-gradient(20% 40%, circle farthest-corner, red, blue); Как и в случае использования линейных градиентов, можно применять несколь- ко цветовых опорных точек и указывать для них конкретные места. Предположим, например, что нужно создать круговой градиент, составленный из темно-красного, оранжевого и желтого цветов. Нужно, чтобы красный цвет сохранялся на некото- ром протяжении до его перехода в оранжевый, а затем оранжевый цвет сохранялся на некотором протяжении до перехода в желтый, появляющийся в конце градиен- та. Чтобы указать места появления того или иного цвета, можно воспользоваться процентными значениями: background-image: radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); Глава 8. Добавление графики на веб-страницы 283 Разумеется, как и в случае линейного градиента, можно воспользоваться допус- тимыми в CSS цветовыми значениями и переписать этот код следующим образом: background-image: radial-gradient(20% 40%, circle, rgb(255,0,0) 20%, rgb(255,165,0) 80%, #FFFF00); Как и в случае с линейными градиентами, Internet Explorer 9 и более ранние версии при использовании радиальных градиентов также не будут понимать, о чем идет речь, то же самое касается версий Safari, предшествующих версии 5.1 (и iOS 5). Нужно до- бавить резервный фоновый цвет, а также все префиксы производителей. Например: background-color: red; background: -webkit-radial-gradient(20% 40%, circle, red 20%, orange 80%, yel- low); background: -moz-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); background: -o-radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); background: radial-gradient(20% 40%, circle, red 20%, orange 80%, yellow); Повторяющиеся радиальные градиенты Как и в случае с линейными градиентами, радиальные градиенты также можно со- здать повторяющимися, что подойдет для изображения подобия бычьего глаза или для гипнотизирования посетителей вашего сайта. Чтобы браузер знал размер отдель- но взятого радиального градиента и смог его повторить, нужно обязательно доба- вить к различным цветовым опорным точкам процентные, пиксельные или em-зна- чения. Например: background-image: repeating-radial-gradient(circle, red 20px, orange 30px, yellow 40px, red 50px); Учтите, что для создания повторяющихся радиальных градиентов без резких пе- реходов, градиент нужно завершать тем же цветом, с которого он начинался (в данном примере это красный цвет). Тем самым будет обеспечено плавное возвращение цвета к начальному. Если этого не сделать (например, если последним цветом в показанном выше коде сделать желтый), то получится резкая граница там, где заканчивается по- следний цвет и в повторяющемся градиенте начинается первый цвет. СОВЕТ Поскольку веб-браузеры считают линейные и радиальные градиенты просто фоновым изображени- ем, для них можно использовать и другие свойства фоновых изображений, такие как background- size, background-position и т. д. Кроме того, в одном и том же стиле можно применять несколько градиентов, перечислив их через запятую, точно так же, как ранее это делалось с несколькими фоновыми изображениями. На самом деле в одном и том же элементе можно смешивать изображе- ния с градиентами. Применение градиентов, создаваемых с помощью Colorzilla Сложность градиентов и их ограниченная поддержка браузерами могут скло- нить вас к решению не использовать их в своих таблицах CSS. К счастью, есть 284 Часть 2. Применение CSS интерактивное средство, позволяющее создавать большинство типов градиентов (за исключением повторяющихся) буквально одним щелчком. Это средство на- зывается Ultimate CSS Gradient Generator ( www.colorzilla.com/gradient-editor/ ), и по- казано на рис. 8.18. Слева, ближе к верхнему краю страницы, вы найдете галерею уже созданных градиентов. Можете выбрать один из градиентов в качестве от- правной точки и настроить его цвета и цветовые опорные точки в соответствии с собственными представлениями о будущем градиенте или же создайте свой собственный градиент. Рис. 8.18. Самым простым способом начала работы с градиентами является использование такого интерактивного средства, как Ultimate CSS Gradient Generator Хотя это интерактивное средство представлено всего лишь одной веб-страни- цей, у него имеется множество настроек. Рассмотрим один из способов его приме- нения. Глава 8. Добавление графики на веб-страницы 285 1. Начните с предварительной установки, выбрав один из градиентов в окне Presets (Предустановки) (см. рис. 8.18, 1). Это делать необязательно, но создание градиента может пойти значительно бы- стрее, если начать с чего-нибудь похожего на желаемый результат. 2. В меню Orientation (Ориентация) укажите тип градиента (см. рис. 8.18, 2). Выбор в этом средстве ограничен радиальными и линейными градиентами, сле- дующими сверху вниз, слева направо, из верхнего левого в нижний правый угол, из нижнего левого в верхний правый угол или по диагонали. Но после создания кода можно заменить ключевое слово угла ( top left , например) значением гра- дуса (допустим, 65deg ). Средство также создает эллиптические радиальные гра- диенты. Если нужен круговой градиент, следует просто найти ключевое слово ellipse и заменить его в итоговом коде CSS ключевым словом circle Но создавать повторяющиеся линейные или повторяющиеся радиальные гра- диенты это средство не позволяет. 3. Для изменения цвета или позиции цветовой опорной точки щелкните на ней, чтобы появилась возможность выбора (см. рис. 8.18, 3). Если вам не подойдут предустановленные цвета, нужно будет отредактировать каждую цветовую опорную точку. 4. Для изменения цвета цветовой опорной точки щелкните на поле Color (Цвет) (см. рис. 8.18, 4). Появится окно выбора цвета. Можно щелкнуть на нужном цвете или, если из- вестно значение цвета в RGB, в шестнадцатеричном виде или в схеме HSL, ввес- ти это значение. Чтобы выбрать новый цвет и закрыть это окно, щелкните на кнопке OK 5. Дополнительно в поле Location (Расположение) справа от поля выбора цвета можно установить позицию цветовой опорной точки (см. рис. 8.18, 5). Наберите процентное значение или, что еще проще, перетащите цветовую опор- ную точку на панели градации (см. рис. 8.18, 3). ПРИМЕЧАНИЕ Чтобы удалить цветовую опорную точку, выберите ее на панели градации (см. рис. 8.18, 3) и щел- кните на кнопке delete (Удалить), расположенной ниже панели. 6. Добавьте дополнительные цветовые опорные точки, щелкнув ниже панели гра- дации в том месте, где нужно добавить такую точку. После добавления новой цветовой опорной точки измените ее цвет и располо- жение в соответствии со своими предпочтениями (шаги 4 и 5). 7. Можно также изменить прозрачность градиента, что сделает его начало или конец немного или полностью прозрачными. Выберите одну из опорных точек выше панели градации (см. рис. 8.18, 6), а затем настройте ее прозрачность и по- зицию (см. рис. 8.18, 7). ПРИМЕЧАНИЕ Ultimate CSS Gradient Generator также пытается создать градиент, каким-то образом работающий в Internet Explorer 9 и более ранних версиях. Установите флажок IE в верхней правой части обла сти предварительного просмотра (Preview) (см. рис. 8.18), чтобы включить эффект, использующий 286 Часть 2. Применение CSS собственное свойство Internet Explorer под названием filters для получения градиента. К сожалению, Internet Explorer может имитировать только линейные градиенты, которые простираются слева направо или сверху вниз и не работает ни с радиальными градиентами, ни с градиентами, устанав- ливаемыми под определенным углом. 8. После создания градиента укажите на область CSS и щелкните на появившейся кнопке copy (скопировать) (см. рис. 8.18, 8). Код CSS будет скопирован в буфер обмена вашего компьютера. Затем можно будет перейти в избранный вами текстовый редактор и вставить код в тот стиль, в который нужно добавить фоновый градиент. Для имитации градиента для Internet Explorer 9 и более ранних версий Ultimate CSS Gradient Generator использует свойство IE-only (Только Internet Explorer). Фактически предоставляются два альтернативных варианта: один для Internet Explorer 9 и один для более ранних версий. Вариант, предназначенный для Internet Explorer 9, для достижения требуемого результата использует другую технологию вывода изображений — SVG (Scalable Vector Graphics, масштабируемая векторная графика), применение которой представляется весьма неплохой идеей. А в том варианте, который предназначен для более ранних версий Internet Explorer, задей- ствуется фильтр ( filter ), который не всегда может правильно имитировать градиент и замедляет производительность работы Internet Explorer. По этой причине лучше будет проигнорировать Internet Explorer 8 и более ранние версии. Для этого нужно сделать следующее. 1. Установить флажок IE9 Support (Поддержка Internet Explorer 9) в нижнем пра- вом углу, ниже области кода CSS (см. рис. 8.18). После этого будет добавлен код для создания SVG-градиента. 2. Скопировать код CSS (шаг 8 в предыдущем списке действий) и вставить его в свой CSS. 3. Найти код фильтра Internet Explorer и удалить его. Последняя строка скопированного кода должна иметь примерно следующий вид: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#7ed6d3',GradientType=1 ); /* Internet Explorer 6-8 не показвают горизонтальный градиент */ Если вам действительно нужна поддержка Internet Explorer 8, не используйте этот код, а протестируйте градиент в Internet Explorer 8, чтобы убедиться в его правильном отображении. 4. И наконец, добавьте свойство background-color в тот промежуток, где находился удаленный код фильтра Internet Explorer; этот цвет будет появляться в фоне для Internet Explorer 8 и более ранних версий. Обучающий урок 1: совершенствуем изображения Фотогалерея — отличный пример привлекательной веб-страницы. Этот обуча- ющий урок наглядно демонстрирует различные способы стилизации изображений. Мы попрактикуемся в форматировании изображений с добавлением рамок и над- писей, создадим универсальную фотогалерею, легко адаптируемую для просмотра Глава 8. Добавление графики на веб-страницы 287 в браузерах с различными размерами окна, применим рассмотренное ранее свой- ство box-shadow для создания профессиональных визуальных теневых эффектов. Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб- ный материал. Как это сделать, рассказывается в конце гл. 2. Файлы текущей обу- чающей программы находятся в папке 08 Заключение изображения в рамку Мы будем работать над веб-страницей вымышленного сайта CosmoFarmer.com (рис. 8.19). У нас уже имеется присоединенная внешняя таблица стилей, созда- ющая модель веб-страницы и обеспечивающая ей простейший дизайн. 1. Откройте файл image.html из папки 08\image_ex в браузере. На рис. 8.19 форматирование веб-страницы выполнено исключительно сред- ствами языка HTML. Имеются недостатки. В частности, изображения занима- ют на странице слишком много места (см. рис. 8.19, вверху). С помощью кода CSS (см. рис. 8.19, внизу) вы легко можете заключить изображение в симпатич- ную рамку и визуально выделить его из основного текстового содержимого. 2. Откройте файл styles.css из папки image_ex в текстовом редакторе. Этот файл представляет собой внешнюю таблицу стилей, используемую в image. html . Вы начнете с добавления класса стиля к этой таблице, а затем примените класс к тегу в файле HTML. 3. Перейдите к концу файла и наберите следующее: img.figure { } Селектор img.figure воздействует на любой тег , к которому применен класс figure . Вы будете использовать его для выборочного форматирования некоторых изображений (вы могли бы назвать стиль просто .figure , но в таком случае он применялся бы к любому тегу с этим классом, а не только к изображениям). 4. Добавим в только что созданный стиль свойства float и margin : float: right; margin: 10px; Свойство float смещает изображение к правой стороне веб-страницы, припод- нимая текст вверх и создавая обтекание фотографии с левой стороны. Поля обеспечивают небольшие свободные промежутки, отделяющие фото от текста. Теперь добавим границу-рамку и небольшие отступы, чтобы изображение боль- ше походило на настоящий фотоснимок. 5. Добавим границу, цвет фона и отступы. Законченный вариант стиля должен иметь следующий вид: img.figure { float: right; margin-left: 10px; margin-bottom: 10px; border: 1px solid #666; background-color: #CCC; padding: 10px; } 288 Часть 2. Применение CSS Рис. 8.19. Два варианта веб-страницы: до (вверху) и после (внизу) CSS-стилизации Глава 8. Добавление графики на веб-страницы 289 Если вы сохраните и просмотрите веб-страницу в браузере прямо сейчас, то не будет видно никаких изменений, поскольку стилевой класс не возымеет эффек- та, пока его не применить к тегу. 6. Сохраните и закройте файл styles.css и откройте image.html . Найдите тег и примените к нему стилевой класс так, чтобы тег имел следу- ющий вид: images/grass.jpg" alt="Apartment Grass" width="200" height="200" /> Теперь изображение приобретет все форматирующие параметры, определенные для стилевого класса .figure 7. Просмотрите веб-страницу в браузере. Она должна выглядеть так, как страница, представленная на рис. 8.19, внизу. Конечную версию веб-страницы, получившейся в данном обучающем уроке, вы сможете найти в папке 08_finished\image_ex , файл image.html Изображение может заменить тысячу слов, но иногда все-таки требуется не- большой комментарий, поясняющий рисунок. В следующей части данной обу- чающей программы мы добавим под фотографией текстовую подпись. Нередко требуется добавить к изображению подрисуночную подпись с под- робной информацией об объекте, месте съемки и т. д. При этом вы наверняка захотите, чтобы комментарий был связан с изображением, чтобы рядом сто- ящий текст обтекал надпись так же, как и само изображение. Лучший спо- соб — заключить изо бражение и текст в контейнер, для которого будет опре- делено единое форматирование. При этом методе фотография и связанный с ней текст обрабатываются как цельный блочный элемент. Если вы позже решите изменить их размещение на веб-странице и, возможно, установить обтекание с выравниванием по левому краю страницы — никаких проблем: вам потребуется просто изменить форматирование для всего элемента-кон- тейнера. К счастью, в HTML5 именно для решения нашей задачи включены два новых тега: тег предназначен для заключения в него изображения, из которо- го нужно сделать иллюстрацию. В дополнение к нему может использоваться тег , который включает в себя подпись под изображением. Сначала нужно немного подправить HTML-код. ПРИМЕЧАНИЕ Чтобы заставить Internet Explorer 8 и более ранние версии распознавать теги Explorer 8 понимать HTML5» в разделе «Дополнительные теги в HTML5» гл. 1. 8. Вернитесь в текстовый редактор к файлу image.html . Найдите в коде тег и сначала удалите , который был добавлен при выполнении шага 6, а затем добавьте перед этим тегом тег . Он отметит собой начало 290 Часть 2. Применение CSS контейнера. Теперь будет добавлена подпись, и тег будет закрыт, чтобы обозначить конец контейнера. 9. После тега добавьте код, выделенный ниже полужирным шрифтом, чтобы HTML-код приобрел следующий вид: height="200"/> should be avoided by the indoor farmer. 10. Прокрутите файл до стиля .figure , созданного ранее, и удалите этот стиль. Для элемента figure будет добавлен новый стиль. 11. Добавьте следующий стиль к файлу styles.css : figure { float: right; width: 222px; margin: 15px 10px 5px 10px; } В предыдущем уроке свойство float: right уже использовалось, а свойство margin добавит вокруг всех четырех сторон тега небольшое пустое пространство. Возникает вопрос: а для чего применяется свойство width ? Хотя у фотографии и есть установленная ширина (200 пикселов), ее нет у абзаца подписи. Если не указать ширину, абзац заставит тег стать шире фотографии. В данном слу- чае нужно, чтобы подпись была такой же по ширине, как фотография и ее рамка. Значение 222 пиксела получилось в результате небольших математических вы- числений общей области, занимаемой фотографией на странице: хотя сама фо- тография занимает в ширину 200 пикселов, у нее есть по 10 пикселов отступов влево и вправо, а также у изображения имеется рамка, занимающая слева и спра- ва по 1 пикселу, что в целом и составляет ширину фотографии от одной грани- цы к другой (см. подраздел «Вычисление фактических размеров блочных эле- ментов» раздела «Определение параметров высоты и ширины» гл. 7). Затем мы добавим форматирование к изображению. 12. Добавьте к файлу styles.css следующий стиль: figure img { border: 1px solid #666; background-color: #CCC; padding: 10px; } Этот селектор потомка воздействует на любой тег , который находится внутри тега . Поскольку здесь используется селектор потомка, класс к тегу добавлять не нужно. Затем добавим стиль к подписи. Глава 8. Добавление графики на веб-страницы 291 13. Добавьте к таблице стилей styles.css следующий стиль: figcaption { font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif; color: #333; text-align: center; } В этом стиле используются некоторые свойства, рассмотренные в гл. 6, с помо- щью которых осуществляется выравнивание по центру, задание полужирного шрифта и серого цвета для подписи, выполняемой шрифтом Verdana. К счастью сокращенная форма записи свойства font в первой строке позволяет свернуть четыре разных свойства в одно объявление стиля. Чтобы выделить подпись еще больше, добавим к ней фоновый цвет и рамку. 14. Добавьте к стилю figcaption три свойства: figcaption { font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif; color: #333; text-align: center; background-color: #e6f3ff; border: 1px dashed #666; padding: 5px; } Свойства background-color , border и padding предназначены для создания расцве- ченного прямоугольника, охватывающего подпись. А теперь настало время по- смотреть на результаты труда. 15. Сохраните файлы image.html и styles.css и просмотрите файл image.html в веб- браузере. 16. Теперь можно понять одну из причин, по которой разработку дизайна проще вести с использованием внешней таблицы стилей — приходится работать толь- ко с одним файлом, а не с двумя и сохранять только его. Страница должна иметь вид, показанный на рис. 8.20. (Полную версию этой страницы можно найти в папке 08_finished\01_image_ex .) Обучающий урок 2: создание фотогалереи Раньше веб-дизайнеры создавали фотогалереи на основе HTML-тега таблицы |