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

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

блоки выпадающщие



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

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

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

Давайте уже тестировать.

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

<div class="wrapper">
  <div class="half">
    
    <div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">Первая вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">Вторая вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">Третья вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
  </div>
<style>
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #008b8b;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #025669;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}</style>


Можно рассмотреть такой вариант для создания меню аккордеон на сайте.

По необходимости добавляйте или убирайте дополнительные блоки 

<div class="tab">
      <input id="tab-two" type="checkbox" name="tabs" />
      <label for="tab-two">Вторая вкладка</label>
      <div class="tab-content"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>

Меняйте цветовые решения на свои-свойства background:
Соответственно, ваша информация в табах (вкладках) и заголовки

Для применения на странице блога, готовый код вставляем в редакторе в формате HTML или в гаджет HTML/JAVASCRIPT в любом месте макета блога. 

Вот такой простой и в то же время достаточно функциональный метод подачи информации
 Всем, доброго времени суток. Хочу показать, как просто поставить знак ударения в слове при написании сообщения. Часто вижу, что просто выделяют ударную буквы крупным шрифтом или дают поправку в скобках. В русском языке часто встречаются слова - омографы. Допустим парОм — пАром, Сорок — сорОк и другие. Если в обычной речи мы ставим произношением ударение на нужный слог, то в письменной форме, конечно же, необходимо поставить знак ударения.

ударение в слове


Как же поставить ударение в коде- HTML?

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

Все символы начинаются с использованием амперсанда (&) и это так:

&здесь имя; 
&#DD; здесь код символа
&lt;так пишется вот такой символ <, а так &gt; наоборот >

Ну это, для расширения кругозора. Всё же, вернёмся к знаку ударения в тексте.

 Когда пишем сообщение и есть необходимость поставить ударение, переходим  из обычного формата в формат HTML,  пишем так

В режиме HTML пишем   всегда плачу&#x301;    Получается ↣ всегда плачу́
В режиме  HTML пишем  всегда  пла &#x301;чу  Получается ↣ всегда пла́чу

Отмеченные цветом символы и будут отображать знак ударения.

То же самое с другим кодом 

Пишем в формате древний замо&#769;к Получаем ↣ древний замо́к 
Пишем в формате древний за&#769;мок Получаем ↣ древний за́мок

Ещё с помощью символов можно сделать, например знак копирайта и другие. К слову, сам знак прописываем так же © 2013 — 2021

Попробуйте в черновике, чтобы освоить такое не хитрое дело. 

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

Рассмотрим 2 варианта таких всплывающих окон.   


Модальное окно

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

Вариант 1. Окно будет появляться на каждой странице и после того, как страница будет перезагружена

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

Демонстрация 

Я вам дам весь скрипт целиком. Для работы всплывающего окна нам понадобится библиотека jQuery, разметка HTML, сами стили  CSS и не большой JAVASCRIPT.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="exitblock">
<div class="fon"></div> 
<div class="modaltext">   
<h1>Aaaa...Не уходите!!!</h1>
<p><span style="color: #FF6347;  font-size: large;">Есть еще много статей на сайте, которые Вам могут понравиться!!! Останьтесь!!!</span></p>
<div align="center">
<img width="30%" border="0" src="https://cs8.livemaster.ru/storage/86/71/bdb58b31073019ce02401b21775j.gif" />
</div>
</div>
<div class="closeblock">+</div>
</div>

<style>
.exitblock {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitblock .fon {
    background: #F6FCFF;
    opacity:.8;
    position:fixed;
    width:100%;
    height:100%;
}
.exitblock .modaltext {
    box-sizing: border-box;  
    padding:20px 40px;
    border: 2px solid #AEAEAE;
    background: #F6FCFF;
    position:fixed;
    top:80px;
    left:50%;
    margin-left:-30%;
    width:60%;
    box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}        
.closeblock {
    cursor:pointer;
    position: fixed;
    line-height:60px;
    font-size:82px;
    transform: rotate(45deg);
    text-align:center;
    top:20px;
    right:30px;
    color: #FF6347;    
}
.closeblock:hover {
    color: #000080;    
}</style>

<script>
$(document).mouseleave(function(e){
    if (e.clientY < 10) {
        $(".exitblock").fadeIn("fast");
    }    
});
$(document).click(function(e) {
    if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
        $(".exitblock").remove();
    }
});
</script>



Весь код целиком устанавливаем в гаджет HTML/JavaScript в любом месте шаблона блога. 

Вариант 2. Окно будет всплывать только 1 раз в сутки и если пользователь провёл на блоге меньше 20 секунд. Для реализации используются cookie. 

Устанавливаем куку через 20 секунд. Можно 10, 15 или больше, как пожелаете. Если посетитель провёл больше времени, окно не показывается.  Для этого поменяем только последний код JavaScript. Остальные коды библиотека jQuery, разметка HTML, сами стили  CSS оставляем как в первом варианте. 

<script>
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
function writeCookie() {
/
    var date = new Date;
    date.setDate(date.getDate() + 1);    
    document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();        
}    
var alertwin = getCookie("alertwin");
if (alertwin != "no") {
    window.setTimeout(function() { /
        if ($(".exitblock").is(':hidden')) { 
            $(".exitblock").remove();     
        }
        writeCookie(); 
// Устанавливаем куку через 20 секунд
    }, 20000);        
    $(document).mouseleave(function(e){
        if (e.clientY < 0) {
            $(".exitblock").fadeIn("fast");      
            writeCookie(); 
        }    
    });
    $(document).click(function(e) {
        if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
            $(".exitblock").remove();
        }
    });  
}
</script>

В коде HTML пишите свой текст, картинки, стили текста.  

<h1>Aaaa...Не уходите!!!</h1>
<p><span style="color: #FF6347;  font-size: large;">Есть еще много статей на сайте, которые Вам могут понравиться!!! Останьтесь!!!</span></p>
<div align="center">
<img width="30%" border="0" src="https://cs8.livemaster.ru/storage/86/71/bdb58b31073019ce02401b21775j.gif" />
</div>
</div>
<div class="closeblock">+</div>
</div>

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

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

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