Css справочник

Space Invader


CSS

#space-invader{

box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red;

background: red; width: 1em; height: 1em; overflow: hidden;

margin: 50px 0 70px 65px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

#space-invader{

box-shadow

1emred,

1em1emred,

-2.5em1.5em.5emred,

2.5em1.5em.5emred,

-3em-3emred,

3em-3emred,

-2em-2emred,

2em-2emred,

-3em-1emred,

-2em-1emred,

2em-1emred,

3em-1emred,

-4emred,

-3emred,

3emred,

4emred,

-5em1emred,

-4em1emred,

4em1emred,

5em1emred,

-5em2emred,

5em2emred,

-5em3emred,

-3em3emred,

3em3emred,

5em3emred,

-2em4emred,

-1em4emred,

1em4emred,

2em4emred;

backgroundred;

width1em;

height1em;

overflowhidden;

margin50px70px65px;

}

Magnifying Glass

CSS

#magnifying-glass { font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em; } #magnifying-glass::before { content: «»; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

#magnifying-glass {

font-size10em;/* This controls the size. */

displayinline-block;

width0.4em;

height0.4em;

border0.1emsolidred;

positionrelative;

border-radius0.35em;

} #magnifying-glass::before {

content»»;

displayinline-block;

positionabsolute;

right-0.25em;

bottom-0.1em;

border-width;

backgroundred;

width0.35em;

height0.08em;

-webkit-transformrotate(45deg);

-moz-transformrotate(45deg);

-ms-transformrotate(45deg);

-o-transformrotate(45deg);

}

TV Screen

CSS

#tv { position: relative; width: 200px; height: 150px; margin: 20px 0; background: red; border-radius: 50% / 10%; color: white; text-align: center; text-indent: .1em; } #tv:before { content: »; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

#tv {

positionrelative;

width200px;

height150px;

margin20px;

backgroundred;

border-radius50%10%;

colorwhite;

text-aligncenter;

text-indent.1em;

}

#tv:before {

content»;

positionabsolute;

top10%;

bottom10%;

right-5%;

left-5%;

backgroundinherit;

border-radius5%50%;

}

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Facebook Icon

CSS

#facebook-icon { background: red; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid red; border-bottom: 0; } #facebook-icon::before { content: «/20»; position: absolute; background: red; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px; } #facebook-icon::after { content: «/20»; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

#facebook-icon {

backgroundred;

text-indent-999em;

width100px;

height110px;

border-radius5px;

positionrelative;

overflowhidden;

border15pxsolidred;

border-bottom;

}

#facebook-icon::before {

content»/20″;

positionabsolute;

backgroundred;

width40px;

height90px;

bottom-30px;

right-37px;

border20pxsolid#eee;

border-radius25px;

}

#facebook-icon::after {

content»/20″;

positionabsolute;

width55px;

top50px;

height20px;

background#eee;

right5px;

}

Нестандартные фигуры

В принципе, разные фигуры создаются с помощью комбинации указанных выше. Так можно создать почти любую нестандартную фигуру. Например, сердце создается значительно сложнее.

#heart {
    position: relative;
}

#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Здесь применяется свойство transform-origin, позволяющее задать точку, относительно которой и будет трансформироваться элемент. С помощью комбинации треугольника и прямоугольника можно сделать бабл для комментария.

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

Вообще, зачем нам треугольник?

Этот элемент очень часто используется дизайнерами, а нам верстальщиками приходится постоянно нарезать всевозможные треугольнички, сносочоки, стрелочки и т.п.

Всегда можно решить задачу, нарезав еще несколько картинок, добавив нужное наложение слоев с абсолютным позиционированием и т.п. Но разве можем вы называть себя верстальщиками с большой буквы «В», если не обошлись минимумом картинок из макета? 🙂

Откуда берется треугоник?

Все контейнеры в HTML изначально — прямоугольники, так где же взять этот пресловутый треугоник? Давайте рассмотрим следующий пример контейнера с очень толстой границей.

div { border: 40px solid #000; width: 25px; height: 25px; border-top-color: red; background-color: white; }

1 2 3 4 5 6 7


div{

border40pxsolid#000;

width25px;

height25px;

border-top-colorred;

background-colorwhite;

}

Мы получим вот такое оформление для DIV контейнера:

Видно, что толстые границы на стыке образуют угол. Получается треугоник, который направлен от границы контейнера в центр. Если мы возьмем контейнер нулевых размеров, и сделаем прозрачные границы, то получим треугольник.

div { border: 40px solid transparent; width: 0px; height: 0px; border-top-color: red; background-color: white; }

1 2 3 4 5 6 7

div{

border40pxsolid transparent;

width0px;

height0px;

border-top-colorred;

background-colorwhite;

}

Вот, что получилось:

Теперь давайте применим наши новые знания для чего то полезного.

Pentagon

CSS

#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } #pentagon:before { content: «»; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#pentagon {

positionrelative;

width54px;

border-width50px18px;

border-stylesolid;

border-colorredtransparent;

}

#pentagon:before {

content»»;

positionabsolute;

height;

width;

top-85px;

left-18px;

border-width45px35px;

border-stylesolid;

border-colortransparenttransparentred;

}

Chevron

CSS

#chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; } #chevron:before { content: »; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: »; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }​

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

#chevron {

positionrelative;

text-aligncenter;

padding12px;

margin-bottom6px;

height60px;

width200px;

}

#chevron:before {

content»;

positionabsolute;

top;

left;

height100%;

width51%;

backgroundred;

-webkit-transformskew(0deg,6deg);

-moz-transformskew(0deg,6deg);

-ms-transformskew(0deg,6deg);

-o-transformskew(0deg,6deg);

transformskew(0deg,6deg);

}

#chevron:after {

content»;

positionabsolute;

top;

right;

height100%;

width50%;

backgroundred;

-webkit-transformskew(0deg,-6deg);

-moz-transformskew(0deg,-6deg);

-ms-transformskew(0deg,-6deg);

-o-transformskew(0deg,-6deg);

transformskew(0deg,-6deg);

}​

Что насчет IE?

Microsoft Internet Explorer (до версии 8 включительно, текущая версия на момент написания статьи) не поддерживает API Canvas. Тем не менее, Internet Explorer поддерживает фирменную технологию Майкрософт, называемую VML, которая может делать многие из тех же вещей, что и элемент <canvas>. Так и родился excanvas.js.

Explorercanvas (excanvas.js) является JavaScript-библиотекой с открытым исходным кодом, которая реализует API Canvas в Internet Explorer. Чтобы ее использовать, включите следующий <script> в верхнюю часть страницы.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Dive Into HTML5</title> <!—> <script src=»excanvas.js»></script> <!—> </head> <body> … </body> </html>

Фрагмент <!—> и <!—> это условные комментарии. Internet Explorer интерпретирует их следующим образом: «если текущий браузер это любая версия Internet Explorer, то выполнить этот блок». Любой другой браузер будет рассматривать весь блок как комментарий HTML. Конечным результатом является то, что Internet Explorer скачает скрипт excanvas.js и выполнит его, а другие браузеры будут игнорировать скрипт вообще (не будут его скачивать, выполнять или еще что-нибудь делать). Это делает ваши страницы загружаемыми быстрее в тех браузерах, в которых холст реализован изначально.

Как только вы включите excanvas.js в <head> вашей страницы, вам не нужно ничего делать для настройки Internet Explorer. Просто включите элементы <canvas> в разметку или создайте их динамически через JavaScript. Следуйте инструкциям в этой главе, чтобы отобразить контекст  элемента <canvas>, и вы можете рисовать фигуры, текст и картинки.

Ну…, не совсем. Есть несколько ограничений.

  1. Градиенты могут быть только линейными, радиальные градиенты не поддерживаются.
  2. Картинки должны повторяться в обоих направлениях.
  3. Области кадрирования не поддерживаются.
  4. Неравномерное масштабирование работает некорректно с контурами.
  5. Это медленно. Это не должно вызвать шок у кого-либо, так как анализатор JavaScript в Internet Explorer с самого начала медленнее, чем в других браузерах. Как только вы начинаете сложные составные формы с помощью JavaScript-библиотеки, которая переводит команды в полностью другие технологии, все начинает увязать в трясине. Вы не заметите снижение производительности на простых примерах вроде рисунка с несколькими линиями и преобразованием изображения, но увидите его сразу, как только начнете делать анимацию на холсте и другие сумасшедшие штуки.

Существует еще одно предостережение об использовании excanvas.js и это проблема с которой я столкнулся при создании примеров в этой главе. ExplorerCanvas инициализирует собственный интерфейс лжехолста автоматически, когда вы включаете скрипт excanvas.js в вашу HTML-страницу. Но это не означает, что Internet Explorer готов к использованию сразу же. В определенных ситуациях вы можете получить состояние, когда интерфейс лжехолста готов к использованию, но не совсем. Основным симптомом этого состояния является то, что Internet Explorer будет жаловаться всякий раз, что «объект не поддерживает это свойство или метод», когда вы попытаетесь сделать что-нибудь с элементом <canvas>, подобное получению контекста рисования.


Самое простое решение данной проблемы это отложить все манипуляции с холстом пока не сработает событие onload. Это может занять какое-то время — если ваша страница содержит много изображений или видео, они приведут к задержке события onload, но это даст ExplorerCanvas время для работы над своей магией.

Curved Tail Arrow

CSS

#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } #curvedarrow:after { content: «»; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

#curvedarrow {

positionrelative;

width;

height;

border-top9pxsolidtransparent;

border-right9pxsolidred;

-webkit-transformrotate(10deg);

-moz-transformrotate(10deg);

-ms-transformrotate(10deg);

-o-transformrotate(10deg);

}

#curvedarrow:after {

content»»;

positionabsolute;

bordersolidtransparent;

border-top3pxsolidred;

border-radius20px;

top-12px;

left-9px;

width12px;

height12px;

-webkit-transformrotate(45deg);

-moz-transformrotate(45deg);

-ms-transformrotate(45deg);

-o-transformrotate(45deg);

}

Star (5-points)

CSS

#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: »; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);

} #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: »; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

#star-five {

margin50px;

positionrelative;

displayblock;

colorred;

width0px;

height0px;

border-right100pxsolidtransparent;

border-bottom70pxsolidred;

border-left100pxsolidtransparent;

-moz-transformrotate(35deg);

-webkit-transformrotate(35deg);

-ms-transformrotate(35deg);

-o-transformrotate(35deg);

}

#star-five:before {

border-bottom80pxsolidred;

border-left30pxsolidtransparent;

border-right30pxsolidtransparent;

positionabsolute;

height;

width;

top-45px;

left-65px;

displayblock;

content»;

-webkit-transformrotate(-35deg);

-moz-transformrotate(-35deg);

-ms-transformrotate(-35deg);

-o-transformrotate(-35deg);

  }

#star-five:after {

positionabsolute;

displayblock;

colorred;

top3px;

left-105px;

width0px;

height0px;

border-right100pxsolidtransparent;

border-bottom70pxsolidred;

border-left100pxsolidtransparent;

-webkit-transformrotate(-70deg);

-moz-transformrotate(-70deg);

-ms-transformrotate(-70deg);

-o-transformrotate(-70deg);

content»;

}

Треугольник

Для создания треугольника нужно прописать, див, границей которой будем манипулировать с помощью CSS. Достаточно будет прописать длину каждой из сторон треугольника и задать цвет заливки.

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Можно развернуть треугольник в обратную сторону. Для этого заменяем свойство border-bottom на border-top.

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Можно направить треугольник влево и вправо. Для этого необходимо сделать противоположную границу больше, чем две другие стороны. Например, так.

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Badge Ribbon

CSS

#badge-ribbon { position: relative; background: red; height: 100px; width: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } #badge-ribbon:before, #badge-ribbon:after { content: »; position: absolute; border-bottom: 70px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left: -10px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -o-transform: rotate(-140deg); } #badge-ribbon:after { left: auto; right: -10px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); -o-transform: rotate(140deg); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

#badge-ribbon {

positionrelative;

backgroundred;

height100px;

width100px;

-moz-border-radius50px;

-webkit-border-radius50px;

border-radius50px;

} #badge-ribbon:before,

#badge-ribbon:after {

content»;

positionabsolute;

border-bottom70pxsolidred;

border-left40pxsolidtransparent;

border-right40pxsolidtransparent;

top70px;

left-10px;

-webkit-transformrotate(-140deg);

-moz-transformrotate(-140deg);

-ms-transformrotate(-140deg);

-o-transformrotate(-140deg);

}

#badge-ribbon:after {

leftauto;

right-10px;

-webkit-transformrotate(140deg);

-moz-transformrotate(140deg);

-ms-transformrotate(140deg);

-o-transformrotate(140deg);

}

Контуры

IE Firefox Safari Chrome Opera iPhone Android
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

* Internet Explorer поддерживает только с библиотекой explorercanvas.

Представьте, что вы чернилами рисуете картину. Вы же не будете начинать сразу с чернил, потому что можете сделать ошибку. Вместо этого вы начнете рисовать линии и кривые карандашом, а когда будете удовлетворены, обведете эскиз чернилами.

Каждый холст имеет контуры подобные рисунку карандашом. Вы можете нарисовать что угодно, но это не будет частью готовой работы, пока вы не возьмете перо и не обведете ваши контуры чернилами.

Чтобы рисовать прямые линии карандашом, можно использовать следующие два метода:

  1. moveTo(х, у) перемещает карандаш к указанной начальной точке.
  2. lineTo(х, у) рисует линии до указанной конечной точки.

Чем чаще вы вызываете moveTo() и lineTo(), тем длиннее получается контур. Это «карандашные» методы — вы можете обращаться к ним так часто, насколько хотите, но вы ничего не увидите на холсте, пока не обратитесь к одному из «чернильных» методов.

Давайте нарисуем серую сетку.


Рисование вертикальных линий

for (var x = 0.5; x < 500; x += 10) { context.moveTo(x, 0);context.lineTo(x, 375); }

Рисование горизонтальных линий

for (var y = 0.5; y < 375; y += 10) { context.moveTo(0, y);context.lineTo(500, y); }

Это все были «карандашные» методы. На самом деле, на холсте еще ничего не нарисовано, нам нужны «чернильные» методы, чтобы сделать рисунок видимым.

context.strokeStyle = «#eee»;context.stroke();

stroke() является одним из «чернильных» методов. Он принимает сложный контур, заданный всеми вызовами moveTo() и lineTo(), и рисует его на холсте. strokeStyle управляет цветом линии. Вот результат.

Спроси профессора Маркапа

☞В. Почему мы начинаем x и y c 0.5, а не с 0?

О. Представьте каждый пиксел как большой квадрат. Все целочисленные координаты (0, 1, 2, …) являются углами этих квадратов. Если вы рисуете однопиксельную линию между целыми координатами, она будет перекрывать противоположные стороны пиксельного квадрата, в результате будет нарисована ширина два пиксела. Чтобы нарисовать  линию шириной только в один пиксел, необходимо сместить координаты на 0.5 перпендикулярно к направлению линии.

К примеру, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер будет рисовать линию с перекрытием в полпиксела по обе стороны от x=1. На экране невозможно отобразить половину пиксела, поэтому линия будет расширена для покрытия двух пикселов.

Если вы попробуете нарисовать линию от (1.5, 0) до (1.5, 3), браузер нарисует линию с перекрытием полпиксела на каждой стороне от x=1.5, что в результате дает истинную однопиксельную линию.

Спасибо Джейсону Джонсону за эти графики.

Теперь нарисуем горизонтальную стрелку. Все линии и кривые на контуре нарисованы тем же цветом (или градиентом — да, мы скоро до него доберемся). Мы хотим нарисовать стрелку другим цветом — черным, а не серым, так что мы должны начать новый контур.

Новый контур

context.beginPath(); context.moveTo(0, 40); context.lineTo(240, 40); context.moveTo(260, 40); context.lineTo(500, 40); context.moveTo(495, 35); context.lineTo(500, 40); context.lineTo(495, 45);

Вертикальная стрелка выглядит почти так же. Поскольку она того же цвета, что и горизонтальная стрелка, нам не нужно начинать еще один новый контур. Две стрелки будут частью одного и того же контура.

Не новый контур

context.moveTo(60, 0); context.lineTo(60, 153); context.moveTo(60, 173); context.lineTo(60, 375); context.moveTo(65, 370); context.lineTo(60, 375); context.lineTo(55, 370);

Я сказал, что эти стрелки будут черными, но strokeStyle установлен в серый (fillStyle и strokeStyle не сбрасываются, когда вы начинаете новый контур). Это нормально, потому что мы просто запустили серию «карандашных» методов. Но прежде чем нарисовать реально в «чернилах», мы должны установить strokeStyle черным. В противном случае эти две стрелки будут серыми, и мы вряд ли их заметим. Следующие строки изменяют цвет на черный и рисуют линии на холсте.

context.strokeStyle = «#000»; context.stroke();

Вот результат.

Diamond Narrow

CSS

#diamond-narrow { width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid red; position: relative; top: -50px; } #diamond-narrow:after { content: »; position: absolute; left: -50px; top: 70px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#diamond-narrow {

width;

height;

border50pxsolidtransparent;

border-bottom70pxsolidred;

positionrelative;

top-50px;

}

#diamond-narrow:after {

content»;

positionabsolute;

left-50px;top70px;

width;

height;

border50pxsolidtransparent;

border-top70pxsolidred;

}


С этим читают