Знакомство с CSS 3

Показывать лекцию целиком

Презентацию к данной лекции можете скачать здесь.

Каскадные таблицы стилей (CSS, CascadingStyleSheet) позволяют осуществлять так называемое "разделение кода и представления", когда способ форматирования веб-страницы описывается отдельно от html-кода. Совместно с нарождающимся стандартом html5 используется новая версия стандарта каскадных таблиц стилей - CSS3.

В предлагаемой лекции хотелось бы обсудить некоторые новые возможности, предоставляемые этой технологией. Большинство приведенных ниже примеров получены за счет небольшой переделки образцов кода, предлагаемых Microsoft с целью демонстрации возможностей IE10 (http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx).

Пример 1. Прокрутка изображения (sample_1)

В CSS3 появилась возможность просмотра большого изображения в небольшом окне благодаря возможности вертикальной и горизонтальной прокрутки. Наберите в блокноте следующий код.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .container {
        overflow-x: auto;
        overflow-y: hidden;
        -ms-scroll-snap-type: mandatory;
        -ms-scroll-snap-points-x: mandatory snapInterval(0%, 100%);
        width: 640px;
        height: 480px;
    }

    .imageContainer {
        -ms-scroll-chaining: chained;
        -ms-overflow-style: none;
        -ms-content-zooming: zoom;
        -ms-scroll-rails: none;
        -ms-content-zoom-limit-min: 100%;
        -ms-content-zoom-limit-max: 500%;
        -ms-scroll-snap-type: proximity;
        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
        -ms-overflow-style: none;
        width: 640px;
        height: 480px;
        overflow: auto;
    }
</style>
</head>
<body>
<div class="container">
<div class="imageContainer">
<img alt="Gingo" src="pic_1.jpg"/>
</div>
</div>
</body>
</html>

Пример 2. Прокрутка последовательности изображений (sample_2)

В небольшом окне при желании можно просматривать целую серию изображений. Наберите в блокноте следующий код.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">
/* -- Copyright © Microsoft Corporation. All rights reserved. */
select {
    margin-bottom: 20px;
}

/* Styles used for setting mandatory panning snap-points via snapInterval. */
.MandatorySnapInterval {
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(0%, 100%);
}

/* Styles used for setting proximity panning snap-points via snapInterval. */
.ProximitySnapList {
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
}

.ManipulationContainer {
    width: 640px;
    height: 480px;
}

.Horizontal {
    overflow-x: auto;
    overflow-y: hidden;
}

.Image_Row {
    width: 2400px;
    height: 480px;
    display: -ms-grid;
    -ms-grid-columns: 640px 640px640px640px640px;
    -ms-grid-rows: 360px;
}

.Image_Rowimg {
    width: 640px;
    height: 480px;
}

/* Following class is used to put items in a row */
.row1 {
    -ms-grid-row: 1;
}

/* Following classes are used to put items in a column */
.col1 {
    -ms-grid-column: 1;
}

.col2 {
    -ms-grid-column: 2;
}

.col3 {
    -ms-grid-column: 3;
}

.col4 {
    -ms-grid-column: 4;
}

.col5 {
    -ms-grid-column: 5;
}
</style>
</head>
<body>
<div class="resultContent">
<div id="Scenario2_Scroller" class="ManipulationContainer Horizontal MandatorySnapInterval">
<div class="Image_Row">
<img alt="Gingo" src="pic_1.jpg" class="row1 col1" />
<img alt="Gingo" src="pic_2.jpg" class="row1 col2" />
<img alt="Gingo" src="pic_3.jpg" class="row1 col3" />
<img alt="Gingo" src="pic_4.jpg" class="row1 col4" />
<img alt="Gingo" src="pic_5.jpg" class="row1 col5" />
</div>
</div>
</div>
</body>
</html>

Пример 3. Применение фильтра "Размытие Гаусса" (sample_3)

CSS3 позволяет применять к изображениям разнообразные фильтры. Рассмотрим некоторые из них. Наберите в блокноте следующий код.

<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.svgContainer
{
    display: inline-block;
    height: 150px;
    margin: 0 20px 40px 0;
    width: 200px;
}
.svgRoot
{
    height: 150px;
    width: 200px;
}
.svgText
{
    fill: mediumvioletred;
    font-size: 20pt;
    stroke: mediumvioletred;
    stroke-width: 2px;
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" aria-labelledby="
resultLabel" aria-live="assertive">
<h2 id="resultLabel">Результат</h2>

<div class="resultContent">
<div class="svgContainer">
<div>(no filter)</div>
<svg class="svgRoot">
<image x="0" y="0" width="100%"
 height="100%" xlink:href="pic_1.jpg" />
<text class="svgText" x="25%" y="90%">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>feGaussianBlur</div>
<svg class="svgRoot">
<defs>
<filter id="blur">
<feGaussianBlurstdDeviation="2" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%"
 xlink:href="pic_1.jpg" filter="url(#blur)" />
<text class="svgText" x="25%" y="90%" filter="url(#blur)">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>feMorphology</div>
<svg class="svgRoot">
<defs>
<filter id="pixelate">
<feMorphology operator="erode" radius="2" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" 
xlink:href="pic_1.jpg" filter="url(#pixelate)" />
<text class="svgText" x="25%" y="90%" 
filter="url(#pixelate)">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>feColorMatrix</div>
<svg class="svgRoot">
<defs>
<filter id="saturate">
<feColorMatrix type="saturate" values="3.3" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" 
xlink:href="pic_1.jpg" filter="url(#saturate)" />
<text class="svgText" x="25%" y="90%" 
filter="url(#saturate)">Тест</text>
</svg>
</div>
</div>
</div>
</body>
</html>

Пример 4. Применение фильтра "Сепия" (sample_4)

Наберите в блокноте следующий код.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">
        /* -- Copyright © Microsoft Corporation. All rights reserved. */
.svgContainer
{
    display: inline-block;
    height: 150px;
    margin: 0 20px 40px 0;
    width: 200px;
}
.svgRoot
{
    height: 150px;
    width: 200px;
}
.svgText
{
    fill: mediumvioletred;
    font-size: 20pt;
    stroke: mediumvioletred;
    stroke-width: 2px;
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h2 id="resultLabel">Резульат</h2>

<div class="resultContent">
<div class="svgContainer">
<div>(no filter)</div>
<svg class="svgRoot">
<image x="0" y="0" width="100%" 
height="100%" xlink:href="pic_1.jpg" />
<text class="svgText" x="25%" y="90%">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>Sepia tone effect</div>
<svg class="svgRoot">
<defs>
<filter id="sepia">
<feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626
                                .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" 
xlink:href="pic_1.jpg" filter="url(#sepia)" />
<text class="svgText" x="25%" y="90%" 
filter="url(#sepia)">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>Edge detection effect</div>
<svg class="svgRoot">
<defs>
<filter id="edge">
<feColorMatrix type="luminanceToAlpha" />
<feConvolveMatrix order="3" kernelMatrix="-1 -2 -1 0 0 0 1 2 1" />
<feConvolveMatrix order="3" kernelMatrix="-1 -2 -1 0 0 0 1 2 1" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" 
xlink:href="pic_1.jpg" filter="url(#edge)" />
<text class="svgText" x="25%" y="90%" 
filter="url(#edge)">Тест</text>
</svg>
</div>
<div class="svgContainer">
<div>Wavy effect</div>
<svg class="svgRoot">
<defs>
<filter id="wavy">
<feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2"
                                result="turbulence_3" />
<feDisplacementMapxChannelSelector="R" yChannelSelector="G" in="SourceGraphic"
in2="turbulence_3" scale="40" />
</filter>
</defs>
<image x="0" y="0" width="100%" height="100%" 
xlink:href="pic_1.jpg" filter="url(#wavy)" />
<text class="svgText" x="25%" y="90%"
 filter="url(#wavy)">Тест</text>
</svg>
</div>
</div>
</div>
</body>
</html>

Пример 5. Эффекты при работе с текстом (sample_5)

Наберите в блокноте следующий код.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.resultContent div
{
    border: 0px solid #333333;
    font-size: 32pt;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin: 0px auto 3px auto;
    vertical-align: middle;
}
.fire
{
    background: black;
    color: white;
    font-family: Impact, Sans-Serif;
    padding-top: 25px;
    text-shadow: 0px 0px 4px white, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px 
      #f80, 2px -25px 18px #f20;
}
.block
{
    background: #999999;
    font-family: Tahoma, Sans-Serif;
    color: #663300;
    text-shadow: #FF9933 1px 1px, #FF9933 2px 2px, #FF9933 3px 3px, #FF9933 4px 4px, 
      #FF9933 5px 5px, #FF9933 6px 6px, #FF9933 7px 7px;
}
.liney
{
    background: #CCFFFF;
    font-family: Impact, Sans-Serif;
    color: #000033;
    text-shadow: #CCFFFF 2px 2px, #3399CC 4px 4px;
}
.cartoon
{
    font-family: Comic Sans MS, Sans-Serif;
    font-size: 42pt;
    background: #FFFFEE;
    color: rgba(255, 51, 155, .6);

    /* Fallback if spread distance parameter is not supported on CSS3 text-shadow */
    text-shadow: rgba(255, 255, 255, 1) -2px -2px -5px, #FF3399 0px 0px, black 0px 0px 5px;

    /* Text-shadow including spread distance parameter */
    text-shadow: rgba(255, 255, 255, 1) -2px -2px 3px -5px, #FF3399 0px 0px, black 0px 0px0px 5px;
}
.engraved
{
    font-family: Verdana, Sans-Serif;
    background: #999999;
    color: transparent;

    /* Fallback if spread distance parameter is not supported on CSS3 text-shadow */
    text-shadow: black 0px 0px -2px, #666666 0px 0px0px, white 1px 1px 0px;

    /* Text-shadow including spread distance parameter */
    text-shadow: black 0px 0px0px -2px, #666666 0px 0px0px0px, white 1px 1px 0px 0px;
}
.text3d
{
    font-size: 32pt;
    font-family: Tahoma, Sans-Serif;
    background: black;
    color: red;

    /* Fallback if spread distance parameter is not supported on CSS3 text-shadow */
    text-shadow: white 0px -1px 4px, rgba(255, 0, 0, .8) 0px -4px 7px, rgba(255, 0, 0, .5)
       0px -6px 12px, rgba(255, 0, 0, .5) 0px -7.5px 15px;

    /* Text-shadow including spread distance parameter */
    text-shadow: white 0px -1px 0px 4px, rgba(255, 0, 0, .8) 0px -4px 0px 7px, rgba(255, 0, 0, .5) 
      0px -6px 0px 12px, rgba(255, 0, 0, .5) 0px -7.5px 0px 15px;

    padding-top: 20px;
    padding-bottom: 5px;
}


</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h2 class="resultLabel">Результат</h2>

<div class="resultContent">
<div class="fire">Firey Text</div>
<div class="block">Block Text</div>
<div class="liney">Semi-Outlined Text</div>
<div class="cartoon">Cartoony Text*</div>
<div class="engraved">Engraved Text*</div>
<div class="text3d">3D Text*</div>
<p>
                Text examples marked by an asterisk (*) use the fourth, optional parameter
                of the 'text-shadow' property (spread distance) and may not be supported
                on all browsers that implement CSS3 text-shadow.
</p>
</div>
</div>

</body>
</html>

Пример 6. Многоколоночный текст (sample_6)

В предлагаемом примере мы выведем текст в несколько колонок. Пример состоит из двух веб-страниц: index.html и content.html. Наберите в блокноте следующий код.

index.htm

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.content-source {
 -ms-flow-into: content;
}

.s3-grid {
 display: -ms-grid;
 -ms-grid-columns: 1fr 1fr1fr;
 -ms-grid-rows: 1fr 1fr;
 width: 100%;
 height: 768px;
}

.s3-region {
 -ms-flow-from: content;

 width: 100%;
 height: 100%;
 border: 1px solid #ccc;
}

.s3-region-1 {
 -ms-grid-column: 1;
 -ms-grid-row: 1;
}

.s3-region-2 {
 -ms-grid-column: 2;
 -ms-grid-row: 1;
}

.s3-region-3 {
 -ms-grid-column: 3;
 -ms-grid-row: 1;
}

.s3-region-4 {
 -ms-grid-column: 1;
 -ms-grid-row: 2;
 -ms-grid-column-span: 3;
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h3 id="resultLabel">Результат</h3>
<div class="resultContent">
<iframe class="content-source" src="content.html"></iframe>
<div class="s3-grid">
<div class="s3-region-1 s3-region"></div>
<div class="s3-region-2 s3-region"></div>
<div class="s3-region-3 s3-region"></div>
<div class="s3-region-4 s3-region"></div>
</div>
</div>
</div>
</body>
</html>

content.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Default Template</title>
<style type="text/css">
        body {
            font-family: "Segoe UI Light";
            color: #2a2a2a;
        }

        p {
            margin-top: 0px;
}
</style>
</head>
<body>
<p>- Хочется мне вам сказать, панове, что такое есть наше товарищество. Вы слышали от отцов и дедов, 
в какой чести у всех была земля наша: и грекам дала знать себя, и с Царьграда брала червонцы, и города были пышные,
 и храмы, и князья, князья русского рода, свои князья, а не католические недоверки. Всё взяли бусурманы, всё пропало. 
 Только остались мы сирые, да, как вдовица после крепкого мужа, сирая так же, как и мы, земля наша! 
 Вот в какое время подали мы, товарищи, руку на братство! Вот на чем стоит наше товарищество! 
 Нет уз святее товарищества! Отец любит свое дитя, мать любит свое дитя, дитя любит отца и мать. 
 Но это не то, братцы: любит и зверь свое дитя. Но породниться родством по душе, а не по крови, 
 может один только человек. Бывали и в других землях товарищи, но таких, как в Русской земле, не было таких товарищей. 
Вам случалось не одному помногу пропадать на чужбине; видишь, и там люди! также Божий человек, 
и разговоришься с ним, как с своим; а как дойдет до того, чтобы поведать сердечное слово, - видишь: нет, 
умные люди, да не те; такие же люди, да не те! Нет, братцы, так любить, как русская душа, - любить не то, 
чтобы умом или чем другим, а всем, чем дал Бог, что ни есть в тебе, а... - сказал Тарас, и махнул рукой, 
и потряс седою головою, и усом моргнул, и сказал: - Нет, так любить никто не может! 
Знаю, подло завелось теперь на земле нашей; думают только, чтобы при них были хлебные стоги, 
скирды да конные табуны их, да были бы целы в погребах запечатанные меды их. Перенимают, 
чорт знает, какие бусурманские обычаи; гнушаются языком своим; свой с своим не хочет говорить; 
свой своего продает, как продают бездушную тварь на торговом рынке. 
Милость чужого короля, да и не короля, а поскудная милость польского магната, 
который желтым чоботом своим бьет их в морду, дороже для них всякого братства. 
Но у последнего подлюки, каков он ни есть, хоть весь извалялся он в саже и в поклонничестве, 
есть и у того, братцы, крупица русского чувства. И проснется оно когда-нибудь, и ударится он, 
горемычный, об полы руками, схатит себя за голову, проклявши громко подлую жизнь свою, 
готовый муками искупить позорное дело. Пусть же знают они все, что такое значит в Русской земле товарищество! 
Уж если на то пошло, чтобы умирать, - так никому ж из них не доведется так умирать!.. 
Никому, никому!.. Не хватит у них на то мышиной натуры их! </p>
<p>Так говорил атаман и, когда кончил речь, всё еще потрясал посеребрившеюся в козацких делах головою. 
Всех, кто ни стоял, разобрала сильно такая речь, дошед далеко, до самого сердца. 
Самые старейшие в рядах стали неподвижны, потупив седые головы в землю; 
слеза тихо накатывалася в старых очах; медленно отирали они ее рукавом. 
И потом все, как будто сговорившись, махнули в одно время рукою и потрясли бывалыми головами. 
Знать, видно, много напомнил им старый Тарас знакомого и лучшего, что бывает на сердце у человека, 
умудренного горем, трудом, удалью и всяким невзгодьем жизни, или хотя и не познавшего их, 
но много почуявшего молодою жемчужною душою на вечную радость старцам-родителям, родившим его</p>
<p>А из города уже выступало неприятельское войско, выгремливая в литавры и трубы, и, подбоченившись, 
выезжали паны, окруженные несметными слугами. Толстый полковник отдавал приказы. 
И стали наступать они тесно на козацкие таборы, грозя, нацеливаясь пищалями, 
сверкая очами и блеща медными доспехами. Как только увидели козаки, что подошли они на ружейный выстрел, 
все разом грянули в семипядные пищали и, не перерывая, всё палили они из пищалей. 
Далеко понеслось громкое хлопанье по всем окрестным полям и нивам, сливаясь в беспрерывный гул; 
дымом затянуло всё поле, а запорожцы всё палили, не переводя духу: задние только заряжали да передавали передним, 
наводя изумление на неприятеля, не могшего понять, как стреляли козаки, не заряжая ружей. 
Уже не видно было за великим дымом, обнявшим то и другое воинство, не видно было, как то одного, 
то другого не ставало в рядах; но чувствовали ляхи, что густо летели пули, и жарко становилось дело; 
и когда попятились назад, чтобы посторониться от дыма и оглядеться, то многих не досчитались в рядах своих. 
А у козаков, может быть, другой-третий был убит на всю сотню. 
И всё продолжали палить козаки из пищалей, ни на минуту не давая промежутка. 
Сам иноземный инженер подивился такой, никогда им не виданной тактике, сказавши тут же, 
при всех: "Вот бравые молодцы-запорожцы! Вот как нужно биться и другим в других землях!" 
И дал совет поворотить тут же на табер пушки. Тяжело ревнули широкими горлами чугунные пушки: дрогнула, 
далеко загулявши, земля, и вдвое больше затянуло дымом всё поле. 
Почуяли запах пороха среди площадей и улиц в дальних и крайних городах. Но нацелившие взяли слишком высоко: 
раскаленные ядра выгнули слишком высокую дугу.</p>
</body>
</html>

Пример 7. Градиент (sample_7)

CSS3 позволяет создавать интересные визуальные эффекты. В нескольких примерах мы покажем способы создания градиентов. Наберите в блокноте следующий код.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.resultContent div
{
    display: inline-block;
    height: 200px;
    margin: 0 10px;
    width: 200px;
}
#twoStops
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-linear-gradient(315deg, #FFFFFF 0%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
    background-image: -moz-linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
    background-image: -o-linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
}

#threeStops
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-linear-gradient(315deg, #FFFFFF 0%, #7EE581 50%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right bottom, 
    color-stop(0, #FFFFFF), color-stop(0.5, #7EE581), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #00A3EF 100%);
    background-image: -moz-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #00A3EF 100%);
    background-image: -o-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #00A3EF 100%);
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #00A3EF 100%);
}

#fourStops
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-linear-gradient(315deg, #FFFFFF 0%, #7EE581 50%, #E0A565 75%, #00A3EF 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), 
    color-stop(0.5, #7EE581), color-stop(0.75, #E0A565), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #E0A565 75%, #00A3EF 100%);
    background-image: -moz-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #E0A565 75%, #00A3EF 100%);
    background-image: -o-linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #E0A565 75%, #00A3EF 100%);
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #7EE581 50%, #E0A565 75%, #00A3EF 100%);
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h2 class="resultLabel">Результат</h2>

<div class="resultContent">
<div id="twoStops"></div>
<div id="threeStops"></div>
<div id="fourStops"></div>
</div>
</div>
</body>
</html>

Пример 8. Градиент (sample_8)

Продолжим изучение различных способов создания градиентов. Наберите в блокноте следующий код.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.resultContent div
{
    display: inline-block;
    height: 200px;
    margin: 0 5px;
    width: 150px;
}
#twoStops
{
    background-image: radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);
    background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
    background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
    background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
}

#threeStops
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-radial-gradient(center, ellipse farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #00A3EF 100%);
    background-image: -moz-radial-gradient(center, ellipse farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #00A3EF 100%);
    background-image: -o-radial-gradient(center, ellipse farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #00A3EF 100%);
    background-image: -webkit-radial-gradient(center, ellipse farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #00A3EF 100%);
    background-image: radial-gradient(ellipse farthest-corner at center,
    #FFFFFF 0%, #10BCA3 50%, #00A3EF 100%);
}

#fourStops
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-radial-gradient(center, ellipse 
farthest-corner, #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: -moz-radial-gradient(center, ellipse farthest-corner,
     #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: -o-radial-gradient(center, ellipse farthest-corner,
     #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: -webkit-radial-gradient(center, ellipse farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: radial-gradient(ellipse farthest-corner at center,
     #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
}

#fourStopsCircle
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%); 
    background-image: -webkit-radial-gradient(center, circle farthest-corner,
     #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
    background-image: radial-gradient(circle farthest-corner at center, 
    #FFFFFF 0%, #10BCA3 50%, #9DC245 75%, #00A3EF 100%);
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h2 class="resultLabel">Результат</h2>

<div class="resultContent">
<div id="twoStops"></div>
<div id="threeStops"></div>
<div id="fourStops"></div>
<div id="fourStopsCircle"></div>
</div>
</div>
</body>
</html>

Пример 9. Градиент (sample_9)

Рассмотрим новые градиенты. Наберите в блокноте следующий код.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<style type="text/css">
    /* -- Copyright © Microsoft Corporation. All rights reserved. */
.resultContent div
{
    display: inline-block;
    height: 200px;
    margin: 0 5px;
    width: 150px;
}
#repeatingLinear
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-repeating-linear-gradient(315deg, #FFFFFF 20px, #00A3EF 40px);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, 
    color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-repeating-linear-gradient(to bottom right, 
    #FFFFFF 20px, #00A3EF 40px);
    background-image: -moz-repeating-linear-gradient(to bottom right, 
    #FFFFFF 20px, #00A3EF 40px);
    background-image: -o-repeating-linear-gradient(to bottom right,
     #FFFFFF 20px, #00A3EF 40px);
    background-image: repeating-linear-gradient(to bottom right, 
    #FFFFFF 30px, #00A3EF 60px);
}

#repeatingCircle
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-repeating-radial-gradient(center, ellipse farthest-corner, #FFFFFF 30px, #00A3EF 60px);
    background-image: -moz-repeating-radial-gradient(center, ellipse farthest-corner, #FFFFFF 30px, #00A3EF 60px);
    background-image: -o-repeating-radial-gradient(center, ellipse farthest-corner, #FFFFFF 30px, #00A3EF 60px);
    background-image: -webkit-repeating-radial-gradient(center, ellipse farthest-corner, #FFFFFF 30px, #00A3EF 60px);
    background-image: repeating-radial-gradient(ellipse farthest-corner at center, #FFFFFF 30px, #00A3EF 60px);
}

#repeatingEllipse
{
    /* Internet Explorer 10 versions lower than Release Preview */
    background-image: -ms-repeating-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 30px, #00A3EF 60px);
    background-image: -moz-repeating-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 30px, #00A3EF 60px);
    background-image: -o-repeating-radial-gradient(center, circle farthest-corner,
     #FFFFFF 30px, #00A3EF 60px);
    background-image: -webkit-repeating-radial-gradient(center, circle farthest-corner, 
    #FFFFFF 30px, #00A3EF 60px);
    background-image: repeating-radial-gradient(circle farthest-corner at center, 
    #FFFFFF 30px, #00A3EF 60px);
}
</style>

</head>
<body>
<!--Rendered result-->
<div class="resultRegion" role="region" 
aria-labelledby="resultLabel" aria-live="assertive">
<h2 class="resultLabel">Результат</h2>

<div class="resultContent">
<div id="repeatingLinear"></div>
<div id="repeatingCircle"></div>
<div id="repeatingEllipse"></div>
</div>
</div>
</body>
</html>

Пример 10. Трехмерные трансформации (sample_10)

CSS3 обладает богатыми возможностями в области двухмерных и трехмерных трансформаций. В папке sample_10 находится соответствующий пример.

Пример 11. Анимации (sample_11)

CSS3 обладает большими возможностями в плане анимации. В папке sample_11 находится соответствующий пример.

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Пример 1. Прокрутка изображения (sample_1)

Пример 2. Прокрутка последовательности изображений (sample_2)

Пример 3. Применение фильтра "Размытие Гаусса" (sample_3)

Пример 4. Применение фильтра "Сепия" (sample_4)

Пример 5. Эффекты при работе с текстом (sample_5)

Пример 6. Многоколоночный текст (sample_6)

Пример 7. Градиент (sample_7)

Пример 8. Градиент (sample_8)

Пример 9. Градиент (sample_9)

Пример 10. Трехмерные трансформации (sample_10)

Пример 11. Анимации (sample_11)

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!