Как сделать выплывающий текст


Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст





Ранее рассмотрели , теперь же время сделать это средствами CSS.

Благодаря тому, что мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого. В качестве примера возьмём светлый и темный прямоугольник:

<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; } .svetlyi { background-color: #ccc; height: 50px; width: 250px; } </style> <div class="temnyi"> <div class="svetlyi"></div> </div>

Указав свойство position, мы не увидим изменений, но теперь светлый блок будет перемещаться в рамках тёмного благодаря свойствам left, top, right и bottom. Например, поместим светлый прямоугольник по центру тёмного

<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; position: relative;} .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; left: 125px; top: 50px;} </style> <div class="temnyi"> <div class="svetlyi"></div> </div>

125px ↔

50px ↕


Вышеуказанные свойства могут принимать отрицательные значения. Тогда элемент выходит за границы тёмного прямоугольника.

<style type="text/css"> .temnyi { background-color: #666; height: 150px; width:500px; position: relative;} .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 50px;} </style> <div class="temnyi"> <div class="svetlyi"></div> </div>

125px ↔

position: absolute и position:relative

Поскольку HTML код веб-документа представляет из себя матрёшку, где один элемент находится внутри другого, то посмотрим на ситуацию в целом. Например, с четырьмя слоями. Точкой отсчёта для свойств top, bottom, right, left является граница родительского элемента с не в значении static (по умолчанию).

<style type="text/css"> .temnyi2 { background-color: #222; padding: 25px 20px; display: inline-block; } .temnyi1 { background-color: #444; padding: 25px 20px; display: inline-block; } .temnyi { background-color: #666; height: 150px; width:500px; position: relative; } .svetlyi {background-color: #ccc; height: 50px; width: 250px; position: absolute; right: -125px; top: 0px;} </style> <body> ..... <div class="temnyi2"> <div class="temnyi1"> <div class="temnyi"> <div class="svetlyi"></div> </div> </div> </div> ..... </body> position:relative;
position:relative;
position:relative;
position:relative;
position:relative;

Отрицательные значения смещают светлый блок на территорию другого контейнера. Но эту часть блока мы не увидим, коли будет добавлено свойство .

position:relative; overflow: hidden;

Если же нужно показать только часть светлого блока, неравномерно убрав ненужные пиксели, то используется свойство clip: rect(вверх, вправо, вниз, влево); которое не применимо без position: absolute. auto показывает, что сторона остаётся без изменений.

свойство clip position:relative;

clip: rect(auto, 200px, auto, 30px);

Взаимодействие блока с position: absolute с другими элементами

Мы можем в одном блоке разместить несколько элементов. Для удобства восприятия, не буду указывать .

<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {} .svetlyi2 {} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>

А

Б


Если блоку А присвоить position: absolute, то блок Б расположиться так, словно блока А не существует - он займёт его место. Блок А уже не сможет влиять на положение блока Б ни посредством , ни своей площадью, словно он парит над ним.

<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {position: absolute; left: 125px; top: 30px;} .svetlyi2 {} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>

А

Б


Блок А перекрывает блок Б. Но стоит второму добавить position в значении relative, absolute или fixed, как ситуация измениться.

position: absolute;

position: relative;


position: absolute;

position: absolute;


Теперь приоритетным будет тот блок, который расположен ниже в коде, в данной случае белый Б. Для того, чтобы изменить естественный порядок, мы используем z-index. Чем больше значение этого параметра, тем выше находится элемент. Стоит помнить лишь то, что для position: static это свойство игнорируется (искл. свойство ) и то, что в IE существует .

<div style="position: relative;"> <div style="position: absolute; left: 125px; top: 30px; z-index: 2;"> А </div> <div style="position: absolute; z-index: 1;"> Б </div> </div>

Поскольку элементы не могут влиять на положение друг друга, то без указания для них значений (или если значения одинаковы) top, bottom, right, left, и margin, ложатся друг поверх друга. А высота родительского блока, коли она не установлена фиксировано, равна нулю. На этом принципе основаны многие вещи, в том числе .

<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {position: absolute;} .svetlyi2 {position: absolute;} .temnyi:hover .svetlyi2 {display: none;} </style> <div class="temnyi"> <div class="svetlyi1">А</div> <div class="svetlyi2">Б</div> </div>

А

Б


width (ширина) и position: absolute

width (или height) не применяется для большинства встроенных элементов. Имеет по умолчанию значение auto, что для блочного элемента равнозначно width: 100%.

<style type="text/css"> .temnyi {text-align: center;} .svetlyi {} </style> <div class="temnyi"> <div class="svetlyi">Блочный</div> Вст<span class="svetlyi" style="width: 250px;">роен</span>ный </div>

Блочный

Встроенный

Но не при position: absolute. Здесь блочный элемент не будет растягиваться на ширину родительского элемента. Зато встроенные элементы займут указанную ширину. Но на них по прежнему будут влияют такие свойства, как text-align (обратите внимание на ).

<style type="text/css"> .temnyi {position: relative; text-align: center;} .svetlyi {position: absolute;} </style> <div class="temnyi"> Вст<span class="svetlyi" style="width: 250px; top: 60px;">роен</span>ный <div class="svetlyi"></div> </div>

Блочный

Встроенный

width: 100%; для обоих - это ширина родителя, для которого задано позиционирование отличное от static.

<style type="text/css"> .temnyi {text-align: center; position: relative;} .svetlyi {width: 100%; position: absolute;} </style> <div class="temnyi"> <div class="svetlyi">Блочный</div> Вст<span class="svetlyi" style="top: 60px;">роен</span>ный </div>

Блочный

Встроенный

Если width не задано, но есть указание противоположных значений left и right, то блок растянется на всю ширину между этими двумя точками. Иначе right будет проигнорирован.

<style type="text/css"> .temnyi {position: relative;} .svetlyi1 {left: 10%; right: 10%; position: absolute; text-align: center;} .svetlyi2 {left: 10%; right: 10%; top: 60px; width: 250px; position: absolute; text-align: center;} </style> <div class="temnyi"> <div class="svetlyi1">Блочный</div> Вст<span class="svetlyi2">роен</span>ный </div>

Блочный

Встроенный

Пример как написать текст на изображении.

Указанные ниже образцы продемонстрируют возможности применения CSS наложения.

Лес и поле белые,
Белые луга.
У осин заснеженных
Ветки как рога.
Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.
В небе звезды яркие
Водят хоровод.
Старый год прощается -
Входит Новый год.

Е. Трутнева.

<div style="position: relative;"> <img border="0" height="311" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SvOib3RrGYI/AAAAAAAAMR4/54xSeZkhPi8/s1600/ice_storm.jpg" width="465" alt="Ветка во льду"/> <div style="font-family: Courier; font-size: 80%; left: 50px; position: absolute; top: 30px; width: 150px; text-indent: 0px;">стих</div> <div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">автор</div> </div>

Образец как наложить один текст на другой.

Пример
Образец
<style type="text/css"> #superponer { position: relative; text-align: center; } #superponer h5 { color: #fcda54; font-family: Georgia; font-size: 140px; letter-spacing: -6px; margin: 0; opacity: .9; padding: 0; -moz-transform: skew(20deg); -o-transform:skew(20deg); -webkit-transform: skew(20deg); } #superponer h6 { z-index: 100; color: #4682b4; font-family: Verdana; font-size: 60px; letter-spacing: 20px; margin: 0; padding: 0; position: absolute; top: 26px; left: 120px; } #superponer h6 > span { display: inline-block; color: #ff6666; font-family: Times New Roman; font-size: 100px; font-style: italic; text-shadow: 3px 3px 1px #000000; } #superponer > h6:hover span { -moz-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); zoom: 2; } </style> <div id="superponer"><h5>Пример</h5><h6>Обр<span>а</span>зец</h6></div>

Пример как разместить текст поверх изображения на HTML

CSS наложениеКак написать текст на изображенииЭтот вариант приобретает всё большую популярность и возможен благодаря наложению одного слоя на другой с помощью свойств CSS <style> .imgteaser { position: relative; display: table; margin: 0 auto; border: 10px solid #456; line-height: 0; color: rgb(223,223,223); cursor: pointer; } .imgteaser:after { content: "подробнее \bb"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; background: rgba(17,34,51,.6); line-height: 1.6em; } .imgteaser:hover:after {content: none;} .imgteaser figcaption {display: none;} .imgteaser:hover figcaption { display: block; position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 5px 10px; background: rgba(68,85,102,.7); font-size: 80%; line-height: 1.3em; } .imgteaser:hover figcaption strong { display: block; line-height: 2em; font-size: 110%; } </style> <figure class="imgteaser"> <img height="600" width="539" src="http://4.bp.blogspot.com/-JT5diAXNGw4/TaQPTlnr2oI/AAAAAAAABto/jqJRCIzwQOo/s600/kon.jpg" alt="конь"/> <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption> </figure>

По материалам .


Похожие статьи:

Источник: http://shpargalkablog.ru/2011/04/css-nalozhenie.html





Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Как сделать выплывающий текст

Читать далее: