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

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


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


Можно варьировать в верхней панели редактора разные варианты шрифта  -тип, размер, жирный, курсив, цвет, выделяя каждую буковку. И, если затем перейти в режим 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


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

Изменяя именно эти стили, вы сможете создать свой вариант рамки. 

Слайдер в рамке


А пока просто скопируйте предложенный код и установите его в этом редакторе для просмотра

Код

<ul class="slider_picture">
    <li>
        <input type="radio" id="slide1" name="slide" checked="">
        <label for="slide1"></label>
        <img src="https://1.bp.blogspot.com/-c5WhHzMtp7I/XvxT7Vb4C5I/AAAAAAAAN30/FgsR3FDkBxc1LKwb4sPm8upqUU2cUd9BgCLcBGAsYHQ/s320/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="https://1.bp.blogspot.com/-CKVoPPWefWg/XvykUkaB70I/AAAAAAAAN4s/WmbJwXJaU00c3-LJLhTqV0lM-kh8lUIAgCLcBGAsYHQ/s320/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="https://1.bp.blogspot.com/-ClqZp0F0EhI/Xvxaj_bGmWI/AAAAAAAAN4A/9SJLgOAwge8FSLxEmL7xUqii6_K6zovfgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="https://1.bp.blogspot.com/-r_qLer5dx_Y/XvymH0FKf5I/AAAAAAAAN44/kR7CObqOI-UBVHgI5nk3wYkzP-ntkW8dgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
    </li>
</ul> <style>
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em}
.slider_picture:before{background-color:#800000;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1}
.slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1}
.slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute}
.slider_picture input{display:none}
.slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10}
.slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em}
.slider_picture:hover label{opacity:1;visibility:visible}
.slider_picture input:checked + label{background-color:#fff}
.slider_picture:hover li:nth-child(1) label{left:.5em}
.slider_picture:hover li:nth-child(2) label{left:2em}
.slider_picture:hover li:nth-child(3) label{left:3.5em}
.slider_picture:hover li:nth-child(4) label{left:5em}
.slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden}
.slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}</style>

Замените строки , выделенные цветом, на адреса ваших картинок. Поэкспериментируйте со значениями background (цветом фона), значениями box-shadow, , которое задаёт тень блокам. Для тона и насыщенности  в коде используется цвета в формате hsla. 

Вроде, кака и все настройки. Код достаточно лёгкий. Можно смело установить в самом сообщении, перейдя в формат HTML при написании сообщения или в гаджет HTML/JavaScript в любом месте макета блога.

Можно сделать ещё слайдер видео в блоге.

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