/* Этот код реализует эффект градиента при наведении курсора мыши на ссылку*/
а {
цвет: #007c21;
переход: цвет .4s легкость;
}
а: наведите {цвет: #00bf32};Используя CSS3, вы можете создавать закругленные углы для большинства элементов, включая элементы форм, изображения и даже текст абзаца, без введения дополнительной разметки или изображений.
<!DOCTYPE html> <html lang="ru"> <голова> <meta charset="utf-8" /> <title>Закругленные углы</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </голова> <тело> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </тело> </html>
Четыре примера использования закругленных углов CSS, включая необходимые префиксы поставщиков для поддержки старых версий Android, Mobile Safari и браузеров Safari. Для .circle использование 75px имеет тот же эффект, что и 50% поскольку размер элемента составляет 150像素*150像素.
дел {
фон: #999;
плавать: влево;
высота: 150 пикселей;
поле: 10 пикселей;
ширина: 150 пикселей;
}
.all-corners {
-webkit-border-radius: 20 пикселей;
радиус границы: 20 пикселей;
}
.один угол {
-webkit-border-top-left-radius: 75px;
радиус верхнего левого края: 75 пикселей;
}
.эллиптические-углы {
-webkit-border-radius: 50 пикселей/20 пикселей;
радиус границы: 50 пикселей / 20 пикселей;
}
.круг {
-webkit-border-radius: 50%;
радиус границы: 50%;
} дел {
фон: #ff9;
граница: 5 пикселей, сплошная #326795;
плавать: влево;
высота: 150 пикселей;
поле: 10 пикселей;
ширина: 150 пикселей;
}
.пример-1 {
/* Делает радиус верхнего левого и нижнего правого углов равным 10 пикселей и
верхний правый и нижний левый углы 20 пикселей */
радиус границы: 10 пикселей 20 пикселей;
}
.пример-2 {
/* Делает радиус верхнего левого угла 20 пикселей, а всех остальных углов 0 */
граница-радиус: 20 пикселей 0 0;
}
.пример-3 {
/* Делает радиус верхнего левого угла 10 пикселей, верхнего правого угла 20 пикселей,
нижний правый угол 0 и нижний левый угол 30 пикселей */
радиус границы: 10 пикселей 20 пикселей 0 30 пикселей;
}-webkit-border-radius: r , где r — радиус скругления, выраженный в длине (в единицах измерения). Введите border-radius: r , где r — радиус скругления, используйте то же значение, что и на первом шаге. Это стандартный синтаксис краткой формы для этого свойства.-webkit-border-top-left-radius: r , где r — радиус верхнего левого угла, выраженный в длине (в единицах измерения). Введите border-top-left-radius: r , используя для r то же значение, что и на первом шаге. Это стандартный синтаксис длинной формы для этого свойства. Чтобы создать верхний правый угол, используйте top-right ; чтобы создать нижний правый угол, используйте bottom-right ; чтобы создать нижний bottom-left угол;-webkit-border-radius: x/y , где x — радиус скругления в горизонтальном направлении, y — радиус скругления в вертикальном направлении, оба выражаются в виде длины (в единицах измерения). . Введите border-radius: x/y , где x и y равны значениям на первом шаге.-webkit-border-radius: r , где r — радиус элемента (в единицах длины). Чтобы создать круг, используйте короткую форму синтаксиса, где значение r должно быть равно половине высоты или ширины элемента. Введите border-radius: r , где r — радиус элемента (в единицах длины), который на первом шаге равен r . Это стандартный синтаксис без префикса. Примечание. Старые браузеры, не поддерживающие border-radius будут отображать только элементы с прямыми углами. border-radius влияет только на углы элемента, к которому применяется стиль, а не на углы его дочерних элементов. Таким образом, если у дочернего элемента есть фон, фон может появиться в углах одного или нескольких родительских элементов, что повлияет на стиль закругленных углов. Иногда фон элемента (а не фон его дочерних элементов) виден сквозь его закругленные углы. Чтобы избежать этого, вы можете добавить правило стиля после объявления border-radius элемента: background-clip: padding-box;
Используйте text-shadow , чтобы добавлять эффекты динамической тени к тексту в абзацах, заголовках и других элементах без использования изображений для представления текста.
text-shadow: . Введите значения, представляющие x-offset (смещение по горизонтали), y-offset (смещение по вертикали), blur-radius (радиус размытия) и color соответственно (первые три значения имеют единицы длины, запятая отсутствует). между четырьмя значениями, разделенными), например -2px 3px 7px #999 .text-shadow: . Введите значения x-offset (горизонтальное смещение), y-offset (вертикальное смещение), blur-radius (радиус размытия) и color соответственно (первые три значения имеют единицы длины, запятая отсутствует) разделение между четырьмя ценностями). Значение blur-radius не является обязательным. Введите (запятая). Повторите второй шаг с разными значениями для четырех свойств.<!DOCTYPE html> <html lang="ru"> <голова> <meta charset="utf-8" /> <title>Текстовая тень</title> <link rel="stylesheet" href="css/text-shadow.css" /> </голова> <тело> <p class="basic">Базовые тени</p> <p class="basic-negative">Базовые тени</p> <p class="blur">Радиус размытия</p> <p class="blur-inversed">Радиус размытия</p> <p class="multiple">Несколько теней текста</p> </тело> </html>
тело {
фон: #fff;
цвет: #222;
шрифт: 100%/1,05 Helvetica, без засечек;
отступ-верх: 20 пикселей;
}
п {
цвет: #222; /* почти черный */
размер шрифта: 4,5em;
начертание шрифта: жирный;
поле: 0 0 45 пикселей;
}
р: последний ребенок {
маржа: 0;
}
.базовый {
текстовая тень: 3px 3px #aaa;
}
/* используются отрицательные смещения — вы также можете смешивать положительные и отрицательные смещения */.
.basic-негативный {
text-shadow: -4px -2px #ccc /* немного светлее серого, чем #aaa */
}
.blur {
текстовая тень: 2px 2px 10px серый;
}
.blur-инвертированный {
цвет: белый;
текстовая тень: 2px 2px 10px #000 /* черный */;
}
/* в этом примере две тени, но вы можете включить
больше, разделив их запятой */
.несколько {
текстовая тень:
2px 2px белый,
6 пикселей 6 пикселей RGB(50,50,50,.25);
} Эти классы демонстрируют несколько эффектов text-shadow . В первом, втором и пятом значениях радиуса размытия опущено. Класс .multiple сообщает нам, что к одному элементу можно добавить несколько стилей теней, при этом каждый набор атрибутов будет разделен запятыми. Таким образом, комбинируя несколько стилей теней, вы можете создавать особые и интересные эффекты.
То есть введите text-shadow: none; Этот атрибут не требуется вводить, и он использует префикс производителя.
Свойство text-shadow принимает четыре значения: x-offset с единицами длины, y-offset с единицами длины, необязательный blur-radius с единицами длины и значение color . Если blur-radius не указан, его значение предполагается равным 0. Значения x-offset и y-offset могут быть положительными или отрицательными целыми числами, что означает, что допустимы значения 1px и -1px . Значение blur-radius должно быть положительным целым числом. Все три значения могут быть 0. Хотя синтаксис text-shadow аналогичен синтаксису свойств border и background, он не может указывать четыре отдельных значения свойств, таких как border и background. Если text-shadow не указан, используется начальное значение none .
Используйте свойство text-shadow , чтобы добавить тень к тексту элемента, и используйте свойство box-shadow чтобы добавить тень к самому элементу. Их базовый набор свойств тот же, но box-shadow также позволяет использовать два дополнительных свойства: свойство ключевого слова inset и свойство spread (используется для расширения или сжатия тени).
Атрибут box-shadow принимает шесть значений: x-offset и y-offset с единицами длины, необязательный blur-radius с единицами длины, необязательное ключевое слово inset , необязательное значение spread с единицами длины и значение color . Если значения blur-radius и spread не указаны, они устанавливаются в 0.
<!DOCTYPE html> <html lang="ru"> <голова> <meta charset="utf-8" /> <title>Тень поля</title> <link rel="stylesheet" href="css/box-shadow.css" /> </голова> <тело> <div класс="тень"> <p>Тень с размытием</p> </div> <div class="shadow-negative"> <p>Тень с отрицательным смещением и размытием</p> </div> <div class="shadow-spread"> <p>Тень с размытием и распространением</p> </div> <div class="shadow-offsets-0"> <p>Тень с нулевым смещением, размытием и размытием</p> </div> <div class="inset-shadow"> <p>Встроенная тень</p> </div> <div class="несколько"> <p>Несколько теней</p> </div> <div class="shadow-negative-spread"> <p>Тень с размытием и отрицательным разбросом</p> </div> </тело> </html>
тело {
фон: #000;
цвет: #fff;
}
ч1 {
семейство шрифтов: без засечек;
размер шрифта: 2,25em;
высота строки: 1,1;
выравнивание текста: по центру;
}
/* ПРИМЕЧАНИЕ. URL-адреса фоновых изображений ниже, чем в примере, показанном в книге, поскольку я поместил изображения в подпапку (называемую «img»), как это обычно бывает при организации сайта. Я подумал, что вам будет полезно узнать, как создавать URL-адреса фонового изображения в таких обстоятельствах. Обратите внимание, что URL-адреса относятся к тому, где находится таблица стилей, а НЕ к HTML-странице, на которой отображается изображение */.
.ночное небо {
цвет фона: темно-синий; /* запасной цвет */
фоновое изображение:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
фоновая позиция:
50% 102%,
100% -150 пикселей,
0–150 пикселей,
50% 100%;
фоновое повторение:
не повторять,
не повторять,
не повторять,
повторить-х;
высота: 300 пикселей;
поле: 25px auto 0 /* немного отличается от книги */;
отступ-верх: 36 пикселей;
ширина: 75%;
} Приведенная выше программа используется для демонстрации эффекта использования box-shadow для добавления одной или нескольких теней. Каждый из первых пяти классов применяет разные стили затенения. Последний класс применяет две тени (можно применить больше). Браузеры, которые не понимают box-shadow , просто проигнорируют эти правила стиля CSS и отобразят страницу без тени.
-webkit-box-shadow: . Введите значения, представляющие x-offset , y-offset , blur-radius , spread и color соответственно (первые четыре значения имеют единицы длины), например 2px 2px 5px #333 . Введите box-shadow: и повторите второй шаг.-webkit-box-shadow: . Введите значения, представляющие x-offset , y-offset , blur-radius , spread и color соответственно (все первые четыре значения имеют единицы длины), например, 2px 2px 5px #333 . Введите inset после двоеточия, а затем введите пробел (вы также можете ввести inset и пробел перед вторым шагом). Введите box-shadow: и повторите шаги второй и третий.-webkit-box-shadow: . Введите значения, представляющие x-offset , y-offset , blur-radius , spread и color соответственно (все первые четыре значения имеют единицы длины), например, 2px 2px 5px #333 . При необходимости добавьте ключевое слово inset . Введите запятую. Повторите второй шаг с разными значениями для каждого атрибута. Введите box-shadow: и повторите шаги со второго по четвертый.-webkit-box-shadow: none; Введите box-shadow: none; Примечание. Значения x-offset , y-offset и spread могут быть положительными или отрицательными целыми числами. Значение blur-radius должно быть положительным целым числом. Все три значения могут быть равны нулю. Ключевое слово inset позволяет разместить тень внутри элемента.
Несколько фонов можно применить практически к любому элементу.
<!DOCTYPE html> <html lang="ru"> <голова> <meta charset="utf-8" /> <title>Несколько фонов</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </голова> <тело> <div class="ночное небо"> <h1>В ночном небе...</h1> </div> </тело> </html>
...
.ночное небо {
цвет фона: темно-синий; /* запасной цвет */
фоновое изображение:
URL(../img/ufo.png),
URL(../img/stars.png),
URL(../img/stars.png),
URL(../img/sky.png);
фоновая позиция:
50% 102%,
100% -150 пикселей,
0–150 пикселей,
50% 100%;
фоновое повторение:
не повторять,
не повторять,
не повторять,
повторить-х;
высота: 300 пикселей;
поле: 25px auto 0 /* немного отличается от книги */;
отступ-верх: 36 пикселей;
ширина: 75%;
}Примените несколько фоновых изображений к одному элементу (нет необходимости использовать префиксы поставщиков)
Введитеbackground-color: b , где b — альтернативный цвет фона, который вы хотите применить к элементу. Введите background-image: u , где u — список url на которые указывают абсолютные или относительные пути (разделенные запятыми). В браузерах, поддерживающих несколько фоновых изображений, изображения располагаются слоями и перекрываются друг с другом. Первое в списке отделяется знаком запятые изображение вверху) Введите background-position: p , где p — пара x-offset и y-offset (может быть положительным или отрицательным; с единицей измерения длины или ключевым словом, например, center top ). Наборы, разделенные знаком. запятые. Для каждого url , указанного на втором шаге, должен быть набор x-offset и y-offset . Введите background-repeat: r , где r — значение repeat-x , repeat-y или no-repeat , разделенное запятыми, по одному значению для каждого url указанного на втором шаге.Для нескольких фоновых изображений можно использовать стандартный краткий синтаксис, разделяя каждый набор параметров фона запятыми. Преимущество этого представления в том, что разработчики могут указать либо альтернативный цвет фона, либо изображение для старых браузеров.
.ночное небо {
/* запасной вариант с цветом и изображением */
фон: темно-синий URL(../img/ufo.png) без повторов по центру внизу;
/* для поддержки браузеров */
фон:
URL(../img/ufo.png) без повтора 50% 102%,
URL(../img/stars.png) без повтора 100% -150px,
URL(../img/stars.png) без повтора 0–150 пикселей,
URL(../img/sky.png) повтор-х 50% 100%;
высота: 300 пикселей;
поле: 25 пикселей авто 0;
отступ-верх: 36 пикселей;
ширина: 75%;
}<!DOCTYPE html> <html lang="ru"> <голова> <meta charset="utf-8" /> <title>Градиентные фоны</title> <link rel="stylesheet" href="css/gradients.css" /> </голова> <тело> <div class="vertical-down"><p>по умолчанию</p></div> <div class="vertical-up"><p>наверх</p></div> <div class="horizontal-rt"><p>вправо</p></div> <div class="horizontal-lt"><p>слева</p></div> <div class="angle-bot-rt"><p>в <br />внизу справа</p></div> <div class="angle-bot-lt"><p>в <br />слева внизу</p></div> <div class="angle-top-rt"><p>вверху справа</p></div> <div class="angle-top-lt"><p>вверх слева</p></div> <div class="angle-120deg"><p>120 градусов</p></div> <div class="angle-290deg"><p>290 градусов</p></div> <section class="радиальный"> <div class="radial-center"><p>по умолчанию</p></div> <div class="radial-top"><p>вверху</p></div> <div class="radial-size-1"><p>100 пикселей, 50 пикселей</p></div> <div class="radial-size-2"><p>70% 90% <br />слева внизу</p></div> <div class="radial-various-1"><p>разное 1</p></div> <div class="radial-various-2"><p>различные 2</p></div> </раздел> <section class="color-stops"> <div class="color-stops-1"><p>желтый 10 %, зеленый</p></div> <div class="color-stops-2"><p>вверху справа, желтый, <br>зеленый 70 %, <br>синий</p></div> </раздел> </тело> </html>
тело {
отступ: 1.25em; /* 20 пикселей/16 пикселей, то есть 20 пикселей с каждой стороны */
размер шрифта: 100%;
}
дел {
плавать: влево;
высота: 150 пикселей;
поле: 10 пикселей;
ширина: 150 пикселей;
}
п {
цвет: #fff;
шрифт: жирный 1,25em/1 без засечек /* 20 пикселей/16 пикселей */;
отступ-верх: 1.65em; /* 33px/16px */
выравнивание текста: по центру;
}
/* ПРИМЕЧАНИЕ. Градиенты ниже представлены в стандартном синтаксисе CSS3. Браузеры, которые их поддерживают: Chrome 26+, Firefox 16+, IE 10+ и Opera 12.10+. См. градиенты-with-browser-prefixes.css. эффекты градиента, но также включен код префикса поставщика, поэтому градиенты будут работать в нескольких старых браузерах. Фон с «резервным» комментарием — это цвет, который будет отображаться в браузерах. которые не поддерживают синтаксис градиента. Вы также можете использовать фоновое изображение в качестве запасного варианта (либо отдельно, либо в сочетании с цветом). Например, фон: красный url(gradient-image.jpg) no-repeat; .*/
/* ЛИНЕЙНЫЕ ГРАДИЕНТЫ
----------------------------------------- */
/* :::: Вертикально :::: */
.вертикально-вниз {
фон: серебро /* запасной вариант */
/* градиент по умолчанию, поэтому вам не нужно указывать «вниз» перед цветами */
фон: линейный градиент (серебристый, черный);
}
.вертикальный-вверх {
фон: серебро;
фон: линейный градиент (вверх, серебристый, черный);
}
/* :::: Горизонтально :::: */
.horizontal-rt {
фон: серебро /* запасной вариант */
фон: линейный градиент (вправо, серебристый, черный);
}
.horizontal-lt {
фон: серебро /* запасной вариант */
фон: линейный градиент (влево, серебристый, черный);
}
/* :::: Диагональные углы :::: */
/* Примечание. На рисунках на стр. 377 в качестве резервного цвета показан морской цвет, но я его поменял.
на темно-синий цвет ниже, потому что белый текст будет легче читать на темно-синем фоне */.
.angle-bot-rt {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (справа внизу, голубой, темно-синий);
}
.angle-bot-lt {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (слева внизу, голубой, темно-синий);
}
.angle-top-rt {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (вверху справа, голубой, темно-синий);
}
.angle-top-lt {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (вверху слева, голубой, темно-синий);
}
/* :::: Углы в градусах :::: */
.angle-120deg {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (120 градусов, голубой, темно-синий);
}
.angle-290deg {
фон: темно-синий; /* запасной вариант */
фон: линейный градиент (290 градусов, голубой, темно-синий);
}
/* РАДИАЛЬНЫЕ ГРАДИЕНТЫ
----------------------------------------- */
/* :::: Радиальный :::: */
.radial p {
текстовая тень: 0 0 3px #000;
}
.radial-center {
фон: красный /* запасной вариант */
фон: радиальный градиент (желтый, красный) /* по умолчанию */;
}
.radial-top {
фон: красный /* запасной вариант */
фон: радиально-градиентный (сверху, желтый, красный);
}
.radial-size-1 {
фон: красный /* запасной вариант */
фон: радиальный градиент (100 пикселей 50 пикселей, желтый, красный);
}
.radial-size-2 {
фон: красный /* запасной вариант */
фон: радиальный градиент (70% 90% внизу слева, желтый, красный);
}
.radial-various-1 {
фон: красный /* запасной вариант */
фон: радиальный градиент (ближайшая сторона 70–60 пикселей, желтый, салатовый, красный);
}
.radial-various-2 {
фон: красный /* запасной вариант */
фон: радиальный градиент (30 пикселей 30 пикселей при 65% 70%, желтый, салатовый, красный);
}
/* ЛИНЕЙНЫЕ ГРАДИЕНТЫ С ЦВЕТОВЫМИ ОСТАНОВКАМИ
----------------------------------------- */
.color-stops div {
поле внизу: 30 пикселей;
}
.color-stops p {
отступ-верх: 25 пикселей;
текстовая тень: 0 0 3px #000;
}
.color-stops-2 р {
размер шрифта: 18 пикселей;
высота строки: 1,05;
}
.color-stops-1 {
фон: зеленый /* запасной вариант */
фон: линейный градиент (желтый 10%, зеленый);
}
.color-stops-2 {
фон: зеленый /* запасной вариант */
фон: линейный градиент (вверху справа, желтый, зеленый 70%, синий);
} Введите background: color или background-color: color , где color может быть шестнадцатеричным числом, значением RGB или любым другим поддерживаемым именем цвета. Также можно использовать изображения. Лучше не использовать значения RGBA, HSL или HSLA в качестве резервных цветов фона (не волнуйтесь, если вы не планируете поддерживать IE), поскольку IE8 и предыдущие версии его не поддерживают.
background: linear-gradient( . Если вы хотите, чтобы направление градиента было сверху вниз (направление по умолчанию), вы можете пропустить этот шаг. Добавьте запятую после направления ввода, и направления относятся to top , to right , to bottom right , to top right и т. д. Или добавьте запятую после направления ввода, где направление относится к значению угла (например, 45deg , 107deg и т. д.). Определите цвет градиента в соответствии с «указанным цветом», упомянутым ниже );background: radial-gradient( . Укажите форму градиента. Если вы хотите указать размер, вы можете определить его самостоятельно на основе размера, указанного в шаге 3. В противном случае введите circle или ellipse . Укажите размер градиента Если вы хотите, чтобы размер был автоматически заданным значением (значение по умолчанию — ·самый дальний угол ·, самый дальний угол), в противном случае введите значение длины, представляющее ширину и высоту градиента (например, 200px или 7em ) или пару. значений, представляющих ширину и высоту ( 390px 175px или 60% 85% ) Обратите внимание: если используется только одно значение, оно не может быть процентным или вводить closest-side , farthest-side , closest-corner или farthest-corner . Эти ключевые слова определяют at top насколько далеко градиент может растягиваться относительно своего центра. Границы определяют размер градиента at right Вы можете пропустить этот шаг, если хотите, чтобы градиент начинался с центра элемента. at bottom left , at top right и т. д., чтобы указать положение центра градиента. Или введите пару координат, представляющих положение центра градиента, начиная at , например at 200px 43px , at 30% 40% , at 50% -10px и т. д. Определите цвет градиента ); Используйте атрибут opacity , чтобы изменить прозрачность элемента. Метод заключается в вводе opacity: x , где x представляет непрозрачность элемента (два знака после запятой, без единиц измерения).
Значение opacity по умолчанию — 1 (полностью непрозрачно), а диапазон — 0~1 .
Используя атрибут opacity и псевдоатрибут :hover , вы можете добиться интересных и практичных эффектов. Например, img { opacity: .75; } может установить для изображения непрозрачность 75% по умолчанию, а img:hover { opacity: 1; } может привести к тому, что элемент станет непрозрачным, когда пользователь наведет на него курсор мыши. Этот эффект часто наблюдается при связывании миниатюр с полноразмерными версиями. Для посетителей левитация усиливает движение изображения.
Атрибут opacity и цвет прозрачного фона, заданный с использованием RGBA или HSLA, — это два понятия, которые легко спутать. opacity влияет на весь элемент (включая его содержимое), а background-color: rgba(128,0,64,.6); такая настройка влияет только на прозрачность фона.
Использование псевдоэлементов :before и :after — отличный способ добавить невероятные дизайнерские эффекты на ваши страницы. Их можно комбинировать с атрибутом content для создания так называемого сгенерированного контента. Сгенерированный контент — это контент, созданный с помощью CSS, а не HTML.
... <p>Это одно из самых спокойных мест на вилле. Прогуливаясь по окрестностям, наслаждаясь тенью платанов и лавров и исполняя серенады брызг воды из двух скульптурных фонтанов, я не мог не подумать … href="victoria.html" class="more">Подробнее</a></p> ...
/* Сгенерированный контент */
.more:после {
содержание: " "";
} С помощью приведенного выше кода элемент с class="more" может отображать после себя двойную стрелку. Если вам понадобится изменить его в будущем, вам нужно будет только изменить класс .more не изменяя большое количество HTML-страниц.
Текст отображается в браузере быстро, но изображения замедляют загрузку страницы. Чтобы решить эту проблему, вы можете объединить несколько изображений в одно фоновое изображение ( sprite ), а затем контролировать, какая часть изображения отображается через CSS, используя атрибут background-position .
.документы ли {
маржа-верх: .45em;
}
/* Каждая ссылка в HTML имеет этот класс */
.икона {
отображение: встроенный блок;
высота строки: 1,1;
размер шрифта: .875em;
min-height: 16px; /* устанавливается на высоту значка, чтобы он вообще не обрезался */
отступ слева: 23 пикселя;
отступ сверху: 2 пикселя;
/* позволяет позиционировать значок абсолютно относительно элементов с class="icon" в HTML */
положение: относительное;
}
.значок:до {
фоновое изображение: URL(../img/sprite.png);
содержание: " ";
дисплей: блок;
высота: 16 пикселей /* высота значка */;
left: 0; /* по умолчанию, измените это, если хотите, чтобы значок появлялся в другом месте */
позиция: абсолютная;
ширина: 16 пикселей /* ширина значка */
top: 0; /* измените это значение, если хотите, чтобы значок появлялся в другом месте */
}
/* Сдвиг положения изображения спрайта для любого имени файла документа, оканчивающегося на .xls */
а[href$=".xls"]:перед {
позиция фона: -17px 0;
}
/* Сдвиг положения изображения спрайта для любого имени файла документа, оканчивающегося на .docx */
а[href$=".docx"]:перед {
позиция фона: -34px 0;
} sprite можно применять к любому количеству элементов. В приведенном выше примере используйте .icon:before для достижения желаемого эффекта. Таким образом, sprite является фоновым изображением пространства, созданным content: " "; Установите для него display: block; чтобы вы могли установить высоту и ширину в соответствии с размером значка. Без этих трех свойств изображение не будет отображаться. Используя background-position вы можете поместить правильный значок в это положение.
На этом завершается статья об использовании CSS3 для улучшения эффектов стиля. Для получения дополнительной информации об улучшении эффектов стиля CSS3, пожалуйста, найдите предыдущие статьи на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы будете поддерживать даункоды в будущем.