Как сделать квадрат html
Создаем простые геометрические фигуры на чистом CSS
Перевод статьи «CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS».
Вы только начинаете изучать веб-разработку и CSS? Вам случалось задуматься, как же создаются все эти прекрасные фигуры, которые можно видеть повсеместно в интернете? Можете больше не терзаться этим вопросом: вы пришли по нужному адресу.
Ниже я объясню самые основы создания геометрических фигур при помощи CSS. Тема эта большая, рассказывать можно очень долго. Поэтому я не буду даже пытаться охватить все инструменты и фигуры. Лучше я дам вам общую идею того, как эти фигуры создаются при помощи CSS.
Создание некоторых фигур требует большего количества приемов, чем создание других. Но вообще для создания фигур при помощи CSS обычно используется комбинация width, height, top, right, left, border, bottom, transform и псевдоэлементов, таких как :before и :after. У нас также есть и более современные CSS-свойства для создания фигур, такие как shape-outside и clip-path. О них я тоже напишу.
CSS-фигуры — базовый способ создания
Мы всегда можем создать самые основные геометрические фигуры (квадраты, круги и треугольники), используя обычные свойства CSS и несколько интересных приемов.
Квадраты и прямоугольники
Создавать квадраты и прямоугольники, пожалуй, проще всего. По умолчанию, div это всегда квадрат или прямоугольник.
Вы устанавливаете ширину и высоту, как показано в коде ниже. Дальше остается только задать цвет фона для элемента. Конечно, вы можете указывать и другие свойства, какие сочтете нужным.
Круги
Почти так же просто создать круг. Для этого мы можем установить border-radius элемента. Таким образом мы сделаем скругление углов.
Если мы установим значение этого свойства на 50%, мы получим круг. А если при этом ширина и высота будут разными, получится овал.
Треугольники
Создавать треугольники немного сложнее. Нам нужно установить границы элемента, чтобы они образовали треугольник. Если элементу установить нулевую ширину и высоту, его шириной станет ширина границы.
Имейте в виду, что края границы элемента находятся под углом в 45 градусов друг к другу. Вот почему этот метод подходит для создания треугольника. Если мы зададим одной границе цвет, а другим границам прозрачность, мы получим треугольник.
Если вам нужно, чтобы вершина треугольника была повернута в другом направлении, вы можете изменить значения border для той стороны, которая должна быть видимой. Или можно повернуть элемент при помощи свойства transform — если вам так больше нравится.
Это базовые фигуры, которые можно создать при помощи CSS. А вообще количество фигур, которые можно себе представить, пожалуй, безгранично. То, что я рассказал, это лишь основы, но проявив творческий подход и упорство, вы сможете достигнуть многого даже с этими базовыми свойствами CSS.
В некоторых случаях, когда речь идет о создании более продвинутых фигур, будет хорошей идеей использовать псевдоэлементы :after и :before.
Но у этого подхода есть один большой недостаток, с которым вы столкнетесь, если захотите, чтобы вашу фигуру обтекал текст (или чтобы текст был вписан в нее). Мы прописываем стили только для обычных HTML-элементов, а текст будет вести себя иначе.
На иллюстрации вы видите треугольник и то, каким образом его обтекает текст.
К счастью, вместо такого подхода мы можем использовать некоторые современные свойства CSS.
CSS-фигуры — другой способ создания
Сегодня мы можем использовать такое свойство CSS как shape-outside. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:
Совет! Вы также можете использовать свойство clip-path. С его помощью тоже можно создать нужную фигуру, но это свойство не позволит вам сделать обтекание текстом вокруг фигуры, как при использовании shape-outside.
Элемент, которому мы собираемся придать форму геометрической фигуры, должен быть плавающим (floated) и иметь определенную ширину и высоту. Это очень важно!
inset()
Базовая фигура inset() используется для создания прямоугольника или квадрата со смещением для обтекания текстом. Вы можете указать, насколько именно текст должен перекрывать фигуру.
Смещение можно установить одинаковое по всем направлениям: inset(20px). Также его можно указывать отдельно для каждого направления: inset(20px 5px 30px 10px).
Можно использовать и другие единицы для смещения, например, проценты. Значения указываются в таком порядке: inset(top right bottom left).
Посмотрите пример кода:
Также можно указать для inset() второе значение, определяющее border-radius смещения. Как здесь:
circle()
В этом случае при помощи свойства shape-outside создается круг. Здесь также нужно применить clip-path с соответствующим значением.
Свойство clip-path может принимать те же значения, что и свойство shape-outside, так что мы можем задать стандартную фигуру circle(), которую мы использовали для shape-outside. Обратите внимание, что я применил для элемента margin 20px, чтобы дать тексту немного пространства.
В этом примере я не указывал радиус круга. Я хотел, чтобы его размер совпадал с div (300px). Если хотите задать кругу его собственный размер, это тоже можно сделать.
Свойство circle() принимает два значения. Первое это радиус, а второе — позиция. Эти значения определяют центр круга.
В примере, приведенном ниже, я установил радиус в 50%. Затем я сместил центр круга на 30%. Обратите внимание, что между значениями радиуса и позиции должно использоваться слово «at».
Я также указал другое значение позиции для clip-path. Поскольку я задал позицию 0%, это обрежет круг наполовину.
ellipse()
Свойство ellipse() работает так же, как и circle(), за исключением того, что в итоге создает не круг, а овал. Вы можете задавать значение X и значение Y: ellipse(25px 50px).
Как и в случае с кругом, последнее значение это позиция.
polygon()
Многоугольник это фигура с разными координатами. Ниже я создал фигуру в форме буквы «Т». Я начал с координат 0,0 и двигался слева направо.
Изображения
Как при помощи только CSS и HTML вывести два квадрата на всю ширину окна браузера (вне зависимости от разрешения)?
Именно квадрата, не прямоугольника. Имеется следующий код, но это фиксированные величины, не подходит:
Вот печальный результат (а нужно на всю ширину):
Можно этим методом, но без псевдоэлемента, вычитая из нужной пропорции ширину элемента:
jsfiddle.net/vuh4zfcs
Точнее, делать padding как процентное соотношением ширины блока к общей ширине обёртки:
jsfiddle.net/d0y2pe34/2
Владимир Проскурин, циклом через 16 (но лучше, 2N, в зависимости от N, где N количество клеток по одной стороне ).
На счет красоты не уверена.
Красота: положить bg градиентом для контейнера, менять только bg-size и дело с концом 🙂
Красиво не получается. Выходит столько же строк, нужно делать миксин (чтобы для каждого селектора не создавался блок), еще even и odd сложно чередовать, приходится просто вставлять.
Способ хороший, и для статических сайтов подходит отлично. А для приложений удобнее наверное через класс назначать, как у меня, т.к. возможно потребуется увеличить размерность таблицы, динамично.
Красота: положить bg градиентом для контейнера, менять только bg-size и дело с концом 🙂
Владимир Проскурин, можно еще в строки обернуть, будет больше тегов, но проще с nth-child.
Какой способ я бы выбрала, не знаю, зависит от целей.
Гипотетически, наверное, либо классы либо nth-child.
Владимир Проскурин, Подскажите а нельзя убрать эти белые узкие поля слева и справа от квадратов?
Подскажите а нельзя убрать эти белые узкие поля слева и справа от квадратов?
Давайте порисуем
Перевод: Влад Мержевич
В HTML5 определен элемент как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Как же этот холст выглядит? В действительности, никак. У тега нет собственного контента и рамки.
Давайте добавим пунктирную рамку, чтобы увидеть, с чем мы имеем дело.
Теперь легко можно обнаружить элемент в DOM.
var a_canvas = document.getElementById(«a»);
Простые формы
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Каждый холст изначально пустой. Это скучно! Давайте что-нибудь нарисуем.
Событие onclick вызывает эту функцию:
function draw_b() <
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
>
Первая строка функции не делает ничего особенного, она просто находит элемент в DOM.
function draw_b() <
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
>
Спроси профессора Маркапа
О. Пока нет. Отдельные производители экспериментируют с собственным трехмерным API, но ни один из них не стандартизирован. В спецификации HTML5 отмечено: «в будущих версиях данной спецификации, вероятно, будет определен 3D-контекст».
Итак, у вас есть элемент и есть контекст рисования, где определены методы и свойства рисования. Имеется целая группа свойств и методов посвященных рисованию прямоугольников.
Спроси профессора Маркапа
☞ В. Можно ли «перезагрузить» холст?
О. Да. Установка ширины или высоты для элемента сотрет его содержимое и сбросит все свойства контекста рисования в значения по умолчанию. Вам даже не нужно менять ширину, вы можете просто установить ее в текущее значение, например, так:
var b_canvas = document.getElementById(«b»);
b_canvas.width = b_canvas.width;
Вернемся к предыдущему примеру.
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
Вызов метода fillRect() рисует прямоугольник и заполняет его текущим стилем заливки, исходно черный цвет, пока вы его не измените. Прямоугольник задается левым верхним углом (50, 25), шириной (150) и высотой (100). Чтобы лучше представить, как это работает, давайте посмотрим на систему координат.
Координаты холста
Холст это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста.
Координатная сетка была нарисована с помощью и включает в себя:
Тогда мы должны найти сценарий элемент в DOM и получить его в контекст рисования.
var c_canvas = document.getElementById(«c»);
var context = c_canvas.getContext(«2d»);
Теперь мы можем рисовать линии.
Контуры
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Представьте, что вы чернилами рисуете картину. Вы же не будете начинать сразу с чернил, потому что можете сделать ошибку. Вместо этого вы начнете рисовать линии и кривые карандашом, а когда будете удовлетворены, обведете эскиз чернилами.
Каждый холст имеет контуры подобные рисунку карандашом. Вы можете нарисовать что угодно, но это не будет частью готовой работы, пока вы не возьмете перо и не обведете ваши контуры чернилами.
Чтобы рисовать прямые линии карандашом, можно использовать следующие два метода:
Давайте нарисуем серую сетку.
Рисование вертикальных линий
for (var x = 0.5; x context.lineTo(x, 375);
>
Рисование горизонтальных линий
for (var y = 0.5; y context.lineTo(500, y);
>
Это все были «карандашные» методы. На самом деле, на холсте еще ничего не нарисовано, нам нужны «чернильные» методы, чтобы сделать рисунок видимым.
context.strokeStyle = «#eee»;
context.stroke();
Спроси профессора Маркапа
☞ В. Почему мы начинаем x и y c 0.5, а не с 0?
К примеру, если вы попытаетесь нарисовать линию от (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();
Текст
* Internet Explorer поддерживает только с библиотекой explorercanvas.
В дополнение к рисованию линий на холсте, вы также можете нарисовать текст. В отличие от текста окружающей веб-страницы, здесь нет боксовой модели. Это означает, что нет знакомых из CSS техник верстки: нет плавающих элементов, нет отступов, нет полей, нет переноса слов (хотя вы можете считать все это хорошей вещью). Вы можете установить несколько атрибутов шрифта, выбрать точку на холсте и нарисовать текст.
Следующие атрибуты шрифта доступны в контексте рисования.
Атрибут textBaseline хитрый, потому что сам текст такой (к тексту на английском это не относится, но вы ведь можете нарисовать любой символ Юникода). Спецификация HTML5 объясняет различия между базовыми линиями.
Верх площадки em (top) это примерно верх глифов в шрифте; выносная базовая линия (hanging) там, где привязаны некоторые глифы вроде आ; середина (middle) это половина между верхом и низом площадки em; алфавитная базовая линия (alphabetic) проходит там, где привязаны символы вроде Á, ÿ, f и Ω; идеографическая базовая линия (ideographic) располагается там, где привязаны символы вроде 私 и 達; низ площадки em это примерно низ глифов в шрифте. Верх и низ ограничивающего прямоугольника может быть далеко от базовой линии из-за того, что глифы выходят далеко за пределы прямоугольника em.
Изменение стиля шрифта
context.font = «bold 12px sans-serif»;
context.fillText(«x», 248, 43);
context.fillText(«y», 58, 165);
Метод fillText рисует собственно текст.
context.font = «bold 12px sans-serif»;
context.fillText(«x», 248, 43);
context.fillText(«y», 58, 165);
Спроси профессора Маркапа
☞ В. Могу ли я использовать относительные размеры шрифтов для рисования текста на холсте?
Для текста в левом верхнем углу, скажем, хочу, чтобы верх текста был при y=5. Но я ленивый, не хочу измерять высоту текста и вычислять базовую линию. Вместо этого я установлю textBaseline как top и укажу координаты левого верхнего угла окружающего текст прямоугольника.
Упс! Мы забыли точки в углах. Мы увидим, как рисовать окружности чуть позже. Пока же я немного схитрю и нарисую их в виде прямоугольников.
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);
И это все что написано! Вот финальный результат.
Градиенты
| Градиент | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Линейный | 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
| Радиальный | — | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Ранее в этой главе вы узнали, как нарисовать прямоугольник заполненный цветом, затем как обводить линию заданным цветом. Но формы и линии не ограничены сплошным цветом, вы можете воспользоваться всеми видами магии с градиентами. Давайте посмотрим на примере.
Разметка выглядит так же, как любой другой холст.
Вначале мы должны обнаружить элемент и его контекст рисования.
var d_canvas = document.getElementById(«d»);
var context = d_canvas.getContext(«2d»);
После того как мы задали контекст, можем определить градиент. Градиент это плавный переход между двумя или более цветами. Контекст рисования холста поддерживает два типа градиента:
Давайте сделаем линейный градиент. Градиенты могут быть любого размера, но я сделаю этот градиент шириной 300 пикселей, как и холст.
Создание градиентного объекта
var my_gradient = context.createLinearGradient(0, 0, 300, 0);
Поскольку значения у второго и четвертого параметра равно 0, этот градиент будет заполнен слева направо.
После того как мы получили градиентный объект, мы можем определить цвета градиента. Градиент имеет два или более цвета остановки, которые могут быть в любом месте вдоль градиента. Чтобы добавить цвет остановки, необходимо указать его позицию вдоль градиента, она может быть от 0 до 1.
Давайте определим градиент от черного цвета к белому.
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
Определение градиента не рисует что-либо на холсте, это просто объект, спрятанный где-то в памяти. Чтобы нарисовать градиент, установите fillStyle в градиент и нарисуйте фигуру вроде прямоугольника или линии.
Стиль заполнения градиентом
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Предположим, вы хотите градиент сверху вниз. Когда вы создаете градиентный объект, оставьте значения x (первый и третий параметр) постоянными и сделайте значения y (второй и четвертый параметр) в диапазоне от 0 до высоты холста.
Значения x равны 0, значения y меняются
var my_gradient = context.createLinearGradient( 0, 0, 0, 225 );
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Вы также можете сделать градиент по диагонали.
Оба значения x и y меняются
var my_gradient = context.createLinearGradient( 0, 0, 300, 225 );
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Изображения
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Контекст рисования холста определяет метод drawImage() для вывода изображений. Этот метод может иметь три, пять или девять аргументов.
Спецификация HTML5 поясняет параметры drawImage() :
Исходный прямоугольник это прямоугольник (в пределах исходного изображения), чьи углы это четыре точки (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
Прямоугольник назначения это прямоугольник (в холсте), чьи углы в четырех точках (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).
Чтобы нарисовать изображение на холсте, у вас должно быть изображение. Это может быть существующий элемент или вы можете создать объект Image() через JavaScript. В любом случае вы должны убедиться, что изображение полностью загружено, прежде чем его можно нарисовать на холсте.
src=»http://htmlbook.ru/html5/images/cat.png» alt=»Спящий кот» width=»177″ height=»113″>
Использование объекта Image()
Необязательные третий и четвертый параметры в методе drawImage() управляют масштабом изображения. То же самое изображение масштабировано до половины его ширины и высоты и повторяется с разными координатами в пределах одного холста.
Вот скрипт который производит «многокошечный» эффект.
cat.onload = function() <
for (var x = 0, y = 0;
x 88, 56 );
>
>;
Простой ответ в том, что вы также можете нарисовать текст на холсте. График координат включает текст, линии и формы. Более сложные диаграммы легко могут использовать drawImage() для включения иконок, спрайтов или других графических элементов.