phpjsJqueryhtmlcssblog

Прямоугольник html пример

Как сделать Простой прямоугольник html, что такое прямоугольник html.Сделаем несколько прямоугольников с текстом Мы уже сделали несколько тем по поводу фигур html + css время подошло к созданию прямоугольника html

Прямоугольник html css примеры

1. Простой прямоугольник html.
2. Прямоугольник с цветным задним фоном
3. Текст в прямоугольнике html
4. Прямоугольник с эффектом парения над холстом
5. Как вставить прямоугольник в html

Скопировать ссылку



Простой прямоугольник html.

Вначале мы должны дать определение, что такое прямоугольник! Прямоугольник - это геометрическая фигура, у которой три угла прямые т.е. равны 90 градусам! И я бы добавил еще, что прилежащие стороны не равны. Если прилежащие стороны равны, то прямоугольник превращается в квадрат.


Закончили с определениями...

Пример простого прямоугольника html.

Для того, чтобы прямо здесь вывести прямоугольника html, нам потребуется div, внутрь ставим атрибут style со свойствами высоты и ширины нашего прямоугольника width и height, чтобы мы смогли увидеть прямоугольник добавим ему бордюр -> border:1px solid;, ну и чтобы было веселее поставим данный блок посередине текстового поля -> margin:auto;
<div style="width: 70%; height: 50px; border:1px solid; margin:auto;"></div>
Скопировать ссылку



Прямоугольник с цветным задним фоном

Возьмем из выше идущего пункта наш прямоугольник и атрибут style, превратим его в тег style? вынесем стили за пределы прямоугольника и добавим ему заливку в виде цветного заднего фона background: background: #25537b;:


<style>

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;

</style>

Пример прямоугольника с задним цветным фоном

Скопировать ссылку



Текст в прямоугольнике html

В выше приведенным пример прямоугольника с заливкой добавим текст и у нас получится прямоугольник с текстом

Прямоугольник с текстом слева

К предыдущему классы добавим новый класс text, чтобы могли его увидеть на темном фоне сделаем его белым color: #ffffff;

.rectangle{

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;}

.text{

color: #ffffff;

}

<div class="rectangle text">прямоугольник с текстом слева</div>

Пример прямоугольника html текст слева

Текст в прямоугольнике расположен слева, это обычная настройка теста, если расположение не обозначено:

прямоугольник с текстом слева

Прямоугольник с текстом по центру

Для того, чтобы поставить текст посередине в прямоугольнике добавим ему новый класс text_center, со стилем текста посередине text-align: center;

.rectangle{

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;}

.text_center{

color: #ffffff;

text-align: center;

}

<div class="rectangle text_center">текст внутри прямоугольника по центру</div>

Пример прямоугольника html текст по центру

текст внутри прямоугольника по центру

Прямоугольник с текстом справа

Для того, чтобы поставить текст справа в прямоугольнике добавим ему новый класс text_right, со стилем текста справа text-align: right;

.rectangle{

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;}

.text_right{

color: #ffffff;

text-align: right;

}

<div class="rectangle text_right">текст внутри прямоугольника справа</div>

Пример прямоугольника html с текстом справа

текст внутри прямоугольника справа

Прямоугольник с текстом текст посередине и по вертикали

Для того, чтобы поставить текст посередине и по вертикали посередине в прямоугольнике добавим ему новый класс text_center_middle, со стилем текста посередине и по вертикали посередине text-align: center; line-height: 50px;, самое простое выбрать line-height равным высоте блока...


.rectangle{

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;}

.text_center_middle{

color: #ffffff;

text-align: center;

line-height: 50px;

}

<div class="rectangle text_center_middle">текст посередине и по вертикали</div>

Пример прямоугольника html с текстом посередине и по вертикали

текст посередине и по вертикали
Скопировать ссылку



Прямоугольник с эффектом парения над холстом

Для того, чтобы создать эффект парящего прямоугольника -создадим ему тень!

.rectangle{

width: 70%;

height: 50px;

border:1px solid;

margin:auto;

background: #25537b;}

.text_with_shadows{

color: #ffffff;

text-align: center;

line-height: 50px;

box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), 0 4px 12px rgba(0, 0, 0, 0.31);

}

<div class="rectangle text_with_shadows">парящий прямоугольник</div>

Пример прямоугольника html с эффектом парения над холстом

парящий прямоугольник
Скопировать ссылку



Как вставить прямоугольник в html

Для того, чтобы вставить прямоугольник в html вам понадобится скопировать стили для этого прямоугольника, скопировать сам блок, который будет выглядит со стилями как прямоугольник. Открыть страницу html и вставить туда, все скопированное!

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---