).

Красивая пчёлка

Очень симпатичная пчёлка

Тоже ничего.

Теперь посмотрим, как нужно выводить картинку при большом количестве текста.
Есть два параметра:

Align="left" – изображение "обтекает текст" слева.
align="right" – изображение "обтекает текст" справа.

Для наглядности напишите такой код:

По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.

Луна

Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.

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

Астрономическое явление, которое заключается в том, что Луна закрывает (затмевает) полностью или частично Солнце от наблюдателя на Земле. Солнечное затмение возможно только в новолуние, когда сторона Луны, обращенная к Земле, не освещена, и сама Луна не видна. Затмения возможны только если новолуние происходит вблизи одного из двух лунных узлов (точки пересечения видимых орбит Луны и Солнца), не далее чем примерно в 12 градусах от одного из них.

ТЕКСТ КУРСИВ
ВАШ ТЕКСТ

ЖИРНЫЙ КУРСИВ

ПОДЧЕРКНУТЫЙ КУРСИВ

СРЕДНИЙ ТЕКСТ
Your text

ОЧЕНЬ КРУПНЫЙ ТЕКСТ

ВАШ ТЕКСТ

КРУПНЫЙ ТЕКСТ

ВАШ ТЕКСТ

СРЕДНИЙ ТЕКСТ

ВАШ ТЕКСТ

Мелкий текст

ВАШ ТЕКСТ

ОЧЕНЬ МЕЛКИЙ ТЕКСТ

ВАШ ТЕКСТ

Супермелкий шрифт. Например: Я хочу тебе тихонько сказать Или: Я хочу тебе тихонько сказать

ТЕКСТ
Минимальное значение font-size:1pt (самый мелкий)

Меняем вид шрифта:
КРАСИВЫЙ ПРОПИСНОЙ ШРИФТ
ВАШ ТЕКСТ

МЕНЯЕМ ЦВЕТ ШРИФТА
ВАШ ТЕКСТ

ВНИМАНИЕ. Таблица кодов цветов

Для желающих поэкспериментировать с текстом есть очень интересный сайт typetester.org

МЕНЯЕМ ШРИФТА И ЦВЕТ ТЕКСТА
ВАШ ТЕКСТ

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ Цвета текста и линии можно менять.
ВАШ ТЕКСТ

Синий текст подчеркнут красной линией
ВАШ ТЕКСТ

Синий текст в красной рамке Цвета текста и рамки можно менять.

ВАШ ТЕКСТ

Цветной текст с цветным фоном Цвета текста и фона можно менять.

ВАШ ТЕКСТ

Все цвета меняйте по своему вкусу

Цветной текст с цветным фоном в цветной рамке

ВАШ ТЕКСТ

Текст, подчеркнутый пунктиром

ВАШ ТЕКСТ

Текст, подчеркнутый точками

Текст, подчеркнутый пунктиром

Текст, подчеркнутый двойной чертой

Текст, подчеркнутый двойной чертой

Текст, окаймленный разноцветным пунктиром Все цвета можно менять.

Текст

Текст в двойной рамке

Текст в двойной рамке

Цветной текст в двойной цветной рамке Цвета меняйте по своему вкусу

Цветной текст в двойной цветной рамке

Ваш текст в объемной 3D-рамке

Ваш текст в объемной 3D-рамке

На заметку:
Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.

Ваш текст в объемной 3D-рамке

Ваш текст в объемной 3D-рамке

Лучшие сервисы для подбора цвета:

Аббревиатура: HTML
HTML

Так называемый «спойлерный» текст, проявляющийся при его выделении (закрашивании) мышкой. Например:
Загадка видна всем, а отгадку увидим только при выделении - «Зимой белый, летом серый ответ ЗАЙЧИК «

спойлерный текст

Выделение первой буквы в предложении, или так называемая «буквица»:
Ж или были дед да баба…
Ж или были дед да баба…

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

Ваш основной текст текст

Основной текст

Текст «наоборот»:
Перевернуть текст задом-наперед
Перевернуть текст задом-наперед

Увеличиваем расстояние между словами

Значения можно менять

Расстояние между буквами

Значение 10px можно менять

Приподнять фразу на 5 пикселей над текстом (значение можно менять)

Приподнять ^фразу

Опустить фразу (значение можно менять)

Опустить _фразу

Выделение цитаты в тексте.
Пример:
Выделяем следующую фразу:

Внимание, это пояснение очень важное

Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ (наведите курсор на текст):
Выделение цитаты С ЭФФЕКТОМ ПОДСВЕТКИ

ТЕКСТ С ЭФФЕКТОМ ПОДСВЕТКИ

Разбить текст на две колонки:

Код:

© J.Shaffer 1928

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

Я
Пешу
Лесинкой!!!

ваш текст

Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New . Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

C
Днем
Рождения!

ваш текст

Текст, обтекаемый другим текстом:

Сегодня мы поговорим о шрифтах, тексте, его основных формулах, и различном написании.

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

Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr , которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

Для создания тени текста используется синтаксис свойства text-shadow , который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.

Text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Результат использования данного свойства будет выглядеть следующим образом:

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени - уровень прозрачности.

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

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

Body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Text-shadow: shadow1, shadow2, shadow3;

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.

Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.

Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Свечение

Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Множественные источники света

Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Заключение

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