Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.
 
Пост обновлён и дополнен. 

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

Используя свойство shape-outside можем задать различные значения.
Базовыми вещами являются «основные фигуры». Они имеют следующие функции:

circle()  - круг; ellipse() - эллипс или  овал; polygon() – многоугольник.

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

1. В первом примере ниже будем  использовать shape-outside чтобы изогнуть текст вокруг  изображения. Вот так это будет выглядеть на страничке. Картинка при этом любая.

круглое изображение

Код такой 

<style>
.circle {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%); /*Для картинки*/
}
</style>

<img src="адрес картинки" class="circle">
<p>
текст текст текст 
</p>

2. Обтекание овального изображения

овал

Для создания  эллипса или овала, используем функцию ellipse():
Обычно значения для радиуса задаются по осям X и  Y.

Весь код

<style>
.ellipse {
float: left;
shape-outside: ellipse(35% 50%);
clip-path: ellipse(35% 50%); /* Для картинки */
}
</style>


<img src="адрес картинки" class="ellipse">
<p>
текст текст текст
</p>

3. Любая фигура. Сделаем просто многоугольник.

многоугольник.

Все точки фигуры тоже задаются по осям.

Код такой

<style>
.polygon {
float: left;
shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%); /* для картинки */
}
</style>
<img src="адрес картинки" class="polygon">
<p>
текст текст текст
</p>

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

shape-outside: polygon(0% 80%, 100% 50%, 50% 0%);
clip-path: polygon(0% 80%, 100% 50%, 50% 0%);


Обратите внимание, что они должны быть одинаковые для текста и изображения. Всё это делаем прямо в редакторе сообщений, перейдя в режиме HTML.

Есть масса вариантов создания таких эффектов. Было бы желание. Попробуйте сами.

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

Введите Ваш email


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

оформление текста


К примеру, вот так.
 
Всем привет  меняющийся  текст  из  цветных  букв  и  слов!


Можно варьировать в верхней панели редактора разные варианты шрифта  -тип, размер, жирный, курсив, цвет, выделяя каждую буковку. И, если затем перейти в режим HTML, обратите внимание, что мы имеем строчный элемент <span> ( англ. span — охватывать), который предназначен для выделения отдельных строк, символов или других строчных элементов и  изменения их оформления с помощью стилей. 


Как -то так для каждой буквы 

<span style="color: #f1c232; font-size: large;">е</span>

Таким образом, с применением разных стилей к тексту или отдельным буквам получаем такой эффект. Вы можете попробовать у себя в редакторе сообщений. Если кому не хочется или лень, вот код для моего примера.  Заменяйте на свои буквы и всё.

<b><span style="color: #cc0000;">В</span></b><span style="color: #0b5394; font-size: medium;"><i>с</i></span><span style="color: #f1c232; font-size: large;">е</span><span style="color: #38761d; font-family: courier; font-size: x-large;">м&nbsp;</span><span style="color: #741b47; font-size: medium;">п</span><span style="color: #ffa400; font-family: georgia; font-size: large;"><b>р</b></span>и<i><span style="color: #38761d; font-family: verdana; font-size: large;">в</span></i><span style="color: #f1c232; font-family: helvetica; font-size: medium;"><i style="background-color: white;">е</i></span><span style="color: #e06666; font-size: large;">т</span>

<font color="#22AA44" size="5">&nbsp;</font><font color="#661111" size="4">м</font><font color="#885588" size="5">е</font><font color="#11EEDD" size="6">н</font><font color="#33FF77" size="5">я</font><font color="#9955BB" size="6">ю</font><font color="#44CC99" size="5">щ</font><font color="#DD3377" size="5">и</font><font color="#AA8833" size="5">й</font><font color="#77AA44" size="5">с</font><font color="#EE5555" size="4">я</font><font color="#007766" size="3"> </font><font color="#771199" size="5">&nbsp;</font><font color="#DDEEDD" size="6">т</font><font color="#99CCFF" size="6">е</font><font color="#551177" size="4">к</font><font color="#336600" size="6">с</font><font color="#2299BB" size="4">т</font><font color="#448844" size="3"> </font><font color="#443366" size="5">&nbsp;</font><font color="#BB99EE" size="6">и</font><font color="#228888" size="6">з</font><font color="#CCFFBB" size="4"> </font><font color="#222244" size="6">&nbsp;</font><font color="#881166" size="5">ц</font><font color="#117744" size="5">в</font><font color="#886644" size="4">е</font><font color="#DD5588" size="3">т</font><font color="#55CC99" size="5">н</font><font color="#BB1166" size="4">ы</font><font color="#AAEE33" size="6">х</font><font color="#00DDAA" size="3"> </font><font color="#FF7788" size="4">&nbsp;</font><font color="#441166" size="4">б</font><font color="#440099" size="5">у</font><font color="#77AA88" size="4">к</font><font color="#DDAADD" size="5">в</font><font color="#44AA11" size="4"> </font><font color="#11EEAA" size="3">&nbsp;</font><font color="#77BB77" size="4">и</font><font color="#CC99CC" size="4"> </font><font color="#EE88BB" size="6">&nbsp;</font><font color="#884455" size="5">с</font><font color="#77BBEE" size="6">л</font><font color="#FF6677" size="5">о</font><font color="#55BB22" size="6">в</font><font color="#EE0099" size="4">!</font><font color="#2277EE" size="3">
</font>

Одним словом - элемент <span> используется для изменения стилей участка текста.

Всем спасибо и до встречи.
 Доброго времени суток, друзья и читатели блога. Предлагаю вашему вниманию интересный эффект увеличения картинки с всплывающим описанием при наведении курсора. Так сказать, два в одном. Подобных вариантов увеличения и описания изображений достаточно много. В данном случае мы будем использовать HTML-теги figure. Мы уже применяли их при создании анимированной картинки или карточки. 




Здесь просто картинка, а результат в действии можно посмотреть здесь в редакторе. Просто скопируйте код и установите его в поле редактора. 

<style>
.test{
  text-align:center;
  
  margin-bottom: 1.3em;
}
#figure-hover{
  display:inline-block;
  font-size: 18px;
  color: #222;
  margin-bottom: 40px; 
  margin-top: 40px;
  transition: 0.8s;
}
#figure-hover img{
  border: 3px solid #666;
  box-shadow: 0px 0px 20px 0px #000;
  margin-bottom: 15px;
}
#figure-hover figcaption {
  opacity: 0;
  text-align:center;
  transition: opacity 0.8s;  
}
#figure-hover a {
  text-decoration-style: dotted;
  color: inherit;
}
#figure-hover:hover {
transform:scale(1.15);
}
#figure-hover:hover figcaption{
opacity : 1;
}
</style>
  <div class="test">
    <figure id="figure-hover">
       <img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
      <figcaption>
        Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>  
      </figcaption>
    </figure>
  </div>


Обращу ваше внимание на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure, допустим, на figure 1. 

Такой эффект можно применить ко всем изображениям. Нужно установить код  CSS в шаблоне блога, но без тегов <style> и </style>.  Делаем так. Вкладка Тема - изменить HTML- найти строку ]]></b:skin> и над ней устанавливаем этот код CSS.

Потом, при написании поста, в том месте, где нужна картинка с эффектом увеличения и описания, ставим, перейдя в режим HTML, этот участок (разметку)

<div class="test">
    <figure id="figure-hover">
       <img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
      <figcaption>
        Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>  
      </figcaption>
    </figure>
  </div>
 
Соответственно замените на свои адреса картинок и описание. 
При редком использовании эффекта весь код, который предложен выше копируем и вставляем, опять же в редакторе в формате HTML.

Очень эффектно смотрятся картинки с при применении этого кода. 

Всем добра, увидимся. 
Доброго времени суток, уважаемые читатели. Продолжаю играть с эффектами текста и предложу ещё несколько вариантов, которые выполнены на чистом CSS. Все вы можете увидеть прямо на странице этого сообщения. Коды достаточно простые, устанавливаются в редакторе в формате HTML. 

оформление текста



Давайте смотреть.

Текст с обводкой

 
Вот такой текст с обводкой
Код
<div class="no-ie">Вот такой текст с обводкой</div>
<style>
  .no-ie {
    font-size: 2em;
    -webkit-text-stroke: 1px darkgrey;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1em;
  }
</style>

 Можно  сделать обводку используя полупрозрачность 

Код

<style>
  h1{font-size: 34px;
    color: black;
    -webkit-text-stroke: 1px rgba(0,0,0,0.5);
    -webkit-text-fill-color: rgba(0,0,0,0.1);
  }
</style>

<h1>или вот такой</h1>
/div>

Растянутый текст.  Вот так примерно

 
Вот такой растянутый текст

Код

 
<style>.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 38px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 18px;
  vertical-align: top;
  }</style>
<span class="stretched-text">Вот такой растянутый текст </span> 

 Разноцветный текст 

С помощью большого количества тэгов font и его атрибутов: color и size можно сделать симпатичные разноцветные буковки

   меняющийся  текст  из  цветных  букв  и  слов!

Код примерно такой, устанавливается в режиме HTML  в редакторе сообщений. 


<font color="#22AA44" size="5"> </font><font color="#661111" size="4">м</font><font color="#885588" size="5">е</font><font color="#11EEDD" size="6">н</font><font color="#33FF77" size="5">я</font><font color="#9955BB" size="6">ю</font><font color="#44CC99" size="5">щ</font><font color="#DD3377" size="5">и</font><font color="#AA8833" size="5">й</font><font color="#77AA44" size="5">с</font><font color="#EE5555" size="4">я</font><font color="#007766" size="3"> </font><font color="#771199" size="5"> </font><font color="#DDEEDD" size="6">т</font><font color="#99CCFF" size="6">е</font><font color="#551177" size="4">к</font><font color="#336600" size="6">с</font><font color="#2299BB" size="4">т</font><font color="#448844" size="3"> </font><font color="#443366" size="5"> </font><font color="#BB99EE" size="6">и</font><font color="#228888" size="6">з</font><font color="#CCFFBB" size="4"> </font><font color="#222244" size="6"> </font><font color="#881166" size="5">ц</font><font color="#117744" size="5">в</font><font color="#886644" size="4">е</font><font color="#DD5588" size="3">т</font><font color="#55CC99" size="5">н</font><font color="#BB1166" size="4">ы</font><font color="#AAEE33" size="6">х</font><font color="#00DDAA" size="3"> </font><font color="#FF7788" size="4"> </font><font color="#441166" size="4">б</font><font color="#440099" size="5">у</font><font color="#77AA88" size="4">к</font><font color="#DDAADD" size="5">в</font><font color="#44AA11" size="4"> </font><font color="#11EEAA" size="3"> </font><font color="#77BB77" size="4">и</font><font color="#CC99CC" size="4"> </font><font color="#EE88BB" size="6"> </font><font color="#884455" size="5">с</font><font color="#77BBEE" size="6">л</font><font color="#FF6677" size="5">о</font><font color="#55BB22" size="6">в</font><font color="#EE0099" size="4">!</font><font color="#2277EE" size="3">
</font>
/div>

Для каждой буквы, как вы видите, используем вот такие стили. <font color="#22AA44" size="5"> Тут только всё зависит от фантазии.

Все статьи про варианты оформление текста можно посмотреть здесь.

Всем удачи и до встречи




Доброго времени суток, друзья. Пост в первую очередь для новичков Блоггер и тех, кто пока не знает как вставить коды в тело поста для для оформления определённого участка, цитаты или других целей. Многие просто боятся что - то сделать не так. Поэтому решила подробно написать об этом и показать. Пробовать вы можете просто в черновике и в режиме просмотра уже будет виден результат.

(Пост обновлённый, дополненный и подкорректированный.)

оформление текста

В статье про красивое оформление участка текста я приводила несколько вариантов. Оттуда и взяла первый код в качестве примера сегодня. Полностью код такой. Я отметила наклонным шрифтом код CSS. Это стили и, именно они, отвечают за внешний вид.  А внизу небольшая строка кода  HTML.

<style>.set {
font-size:16px;

color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>

<div class="set ">здесь ваш текст</div>


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

Давайте уже разберёмся , как это легко оформить, а то слишком долгое вступление получилось. Рассмотрим 2 способа.

Вариант 1

Проще всего это сделать используя блокнот. Это одна из стандартных программ-компонентов ОС Windows. Она прилагается к любой версии этой операционной системы в обязательном порядке. Откройте «Пуск» и перейдите во «Все программы».  Выбираете папку «Стандартные» и кликните по «Блокнот». У кого 10 - ка или другие ОС немного по другому. 

Сейчас копируете предложенный код и устанавливаете его там. И там же, вместо строки  «здесь ваш текст» пишите тот текст, который нужно выделить. Теперь просто уже из блокнота копируете то, что получилось и в редакторе BLOGGER, переходите в формат  HTML. В нужном месте вашей статьи его вставьте.


Вариант 2.

Если вы написали уже сообщение и хотите в тексте оформить участок, в том месте, где это предполагается, так же переходите на формат HTML и вставляем первую часть кода CSS. В примере это участок, заключённый в теги <style>......</style>  о нём я писала в начале поста


Потом в конце выделяемого участка устанавливаем HTML код . В примере это класс "set "

<div class="set ">здесь ваш текст</div>



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


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

Даже если у вас сразу не получается и результат  в режиме просмотра не виден, не отчаивайтесь. Удалите содержания поста в черновике и попробуйте снова. Потихоньку  придёт понимание что да как.

Здесь ещё стоит обратить внимание на один момент. Если выделяется таким образом стихотворение или список, то нужно между строками обязательно в конце прописывать тег </dr> (он переносит текст на другую строку). 

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

И ещё небольшое дополнение. Если вы остановились на каком - то одном определённом варианте оформлении участка текста, и именно его предполагаете использовать всегда, то лучше установить код CSS непосредственно в шаблоне блога перед строкой ]]></b:skin>, но только уже без тегов <style>......</style> . Потом только при необходимости останется добавить в тело поста только строку кода HTML. У меня именно так в шпаргалках для выделения всех кодов сделано.

Если что - то не донесла ещё или не совсем понятно, пишите в комментариях.

Вот, как обещала некоторые ссылки

Как оригинально оформит участок в тексте
3 варианта оформления участка в тексте 
Цитата или участок в текст 

Ещё больше других вариантов оформления текста можно увидеть на странице «все статьи» в меню сверху в разделе «текст».

Удачи всем и до встречи. 

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

Введите Ваш email