Некоторые из советов кому-то из вас покажутся примитивными. Однако практика показывает, что многие люди об этих деталях даже не догадываются. А ещё складывается впечатление, что самые сложные знаки препинания для нас — это длинное тире и кавычки-ёлочки.

На самом деле клавиатура смартфона содержит всё, что нужно для счастья для работы. Посмотрим на два скриншота 

Мы видим, что, кроме стандартных букв, выделенных чёрным, есть ещё маленькие серенькие символы. Так вот, чтобы набрать на клавиатуре один из этих сереньких значков, нужно всего лишь долго нажимать на соответствующую кнопку. Например, знак номера мы получим, если зажмём букву «Х» (тут на скрине он скрыт, не поместился). Знак процента — это буква «А». За скобочки у нас отвечают «л» и «д».

Даже если этих знаков нет (они включаются в настройках клавиатуры «Показывать дополнительные символы»), то всё равно подразумеваются.

Либо переключаемся на блок с цифрами и значками (скриншот № 2) и получаем нужные знаки на блюдечке.

1. Как набрать на клавиатуре букву «Ё»

Да очень просто. Долго жмём на букву «Е». Причём независимо от клавиатуры: Swiftkey, Яндекс-клавиатуры и др. Этой букве достаётся всегда: на компьютерной клавиатуре её загнали куда подальше, чтобы до неё трудно было дотянуться, на телефонах спрятали тоже. Её даже не видно среди маленьких сереньких значков.

2. Как набрать на клавиатуре твёрдый знак «Ъ»

Долго жмём на мягкий знак. От клавиатуры не зависит. Бывает что найти «Ъ» — это для кого-то проблема. Однако он есть, живой и невредимый. Жмём и держим «Ь».  Вот, смотрите:

3. Длинное тире

Жмём долго на клавишу дефиса. В зависимости от клавиатуры у вас покажутся три чёрточки, только их порядок может быть разным. Чаще всего это длинное тире, среднее тире (для числовых диапазонов и номеров телефонов) нижнее подчёркивание).

4. Кавычки-ёлочки

Открываем цифровой блок, долго жмём на символ компьютерных кавычек, перед нами откроются сразу два вида кавычек: «ёлочки» и „лапки“.

5.Точка с запятой

Этот знак и на компьютере не все знают, как найти, а уж на телефоне и подавно. И действительно, запрятан он серьёзно. Либо зажимаем (долго жмём) букву «Т», либо жмём на 123 (обычно слева внизу), где у нас все цифровые символы и прочие знаки, и жмём на клавишу двоеточия.

 6. Как найти символ №

К сожалению на большинстве раскладок в андроид нашего доброго знака № нет!(( Под нашим знаком № имеют ввиду символ «#» если производитель внес на своей раскладке № то очень повезло нажимаем на символ «#» и должен появится заветный "№"

по материалам 

Стоит всего раз поиграть с клавишами и всё потом пойдёт, как по маслу.

Подробнее...

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

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

Для наглядной демонстрации и просмотра эффекта кнопок, перейдите на страницу редактора кодов и установите код любой кнопки в его поле. В статье только фото кнопок.

Раскрывающаяся кнопка

<a href="###" class="transform-button"><span>Демонстрация 1</span></a>
<style>
.transform-button {
   position: relative;
   display: inline-block;
   text-decoration: none;
   padding: 10px 30px;
   margin-right: 20px;
   border: 1px solid #68E5F7;
   background: transparent;
   color: #fff;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   perspective: 500px;
   background: white;
   transition: .3s;
}
.transform-button:last-of-type {
   margin-right: 0;
}
.transform-button span {
   position: relative;
   z-index: 2;
}
.transform-button:before {
   content: "";
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #556B2F;
   transform-origin: left;
   transition: .5s;
}
.transform-button:hover {
   color: #556B2F;
   border-color: #556B2F;
}
.transform-button:hover:before {
   transform: rotateY(92deg);
}
</style>

 Кнопка с анимацией и эффектом перечёркивания 

<div class="button-wrapper">
<a href="###" class="arrow-btn">Демонстрация<span></span></a>
</div>
<style>
.button-wrapper {
   max-width: 400px;
   margin: 50px auto;
   text-align: center;
   overflow: hidden;
}
.arrow-btn {
   position: relative;
   display: inline-block;
   padding: 15px 30px;
   text-decoration: none;
   color: #2fc989;
   border: 4px solid #2fc989;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: .4em;
   transition: .2s;
   transition-delay: .1s;
}
.arrow-btn:hover {
   color: white;
   padding: 15px 35px;
}
.arrow-btn span {
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   z-index: -1;
   overflow: hidden;
   transition: .35s cubic-bezier(.215, .61, .215, 1);
}
.arrow-btn span:before {
   content: "";
   position: absolute;
   top: -5%;
   left: -210%;
   width: 200%;
   height: 108%;
   background: #2fc989;
   transform: skew(-15deg, 0);
   transition: .5s;
}
.arrow-btn:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 50%;
   left: -1000%;
   height: 2px;
   margin-top: -1px;
   width: 400%;
   background: #2fc989;
   transition: .5s;
}
.arrow-btn:hover:after {
   width: 140%;
   left: -20%;
}
.arrow-btn:hover span:before {
   left: -25%;
}
</style>

Кнопка с анимированной рамкой

<a href="###" class="action-btn">Демонстрация</a>
<style>
.action-btn {
   position: relative;
   display: inline-block;
   padding: 8px 20px;
   margin: 20px;
   text-decoration: none;
   font-family: 'Comfortaa', cursive;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: bold;
   color: #112D52;
   background: #FF5438;
   border: 2px solid #112D52;
   transition: .4s linear;
}
.action-btn:after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   height: 130%;
   width: 91%;
   border: 2px solid #112D52;
   transform: translate(-50%, -50%);
   z-index: -1;
}
.action-btn:hover {
   background: #112D52;
   color: #FF5438;
}
</style>

 Простая анимированная кнопка

<a href="###" button class="button-1">Демонстрация</button>

<style>
.button-1 {
    color: #fff;
    background: transparent;
    border: 2px solid #232323;
    position: relative;
    font-size: 14px;
    letter-spacing: .3em;
    font-family: 'Montserrat', sans-serif;
    padding: 17px 34px 17px 39px;
    transition: .2s ease-in-out;
    cursor: pointer;
}
.button-1:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    background: #FF5438;
    z-index: -1;
    transition: .25s ease;
    transform: translate(0, 0);
}
.button-1:hover:before {
    transform: translate(4px, 4px);
}
</style>

Кнопка с анимацией и радужной рамкой 

<a href="###" class="glow-button">Демонстрация</a>
<style>
.glow-button {
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 40px 40px #e3a9be inset, 0 0 0 0 #32D4E2;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  color: white;
  transition: .15s ease-in-out;
}
.glow-button:hover {
  box-shadow: 0 0 10px 0 #32D4E2 inset, 0 0 10px 4px#32D4E2;
  color: #F137A6;
</style>

Вместо решёток в кодах устанавливаем адрес страницы, куда будет осуществлён переход при клике. Соответственно вашае название. И во всех вариантах можно "играть" c цветом общего фона, цветом при наведении, цветом текста.  Пишите в комментариях, кому потребуется корректировка в изменениях. Готовый код, как всегда, устанавливаем в теле сообщения в режиме HTML или в гаджете в макете. 

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

Всем хороших денёчков и до встречи.  

Подробнее...

Доброго времени суток, друзья. Очередное горизонтальное меню с эффектом анимации. С виду совершенно простое, а при наведении на пункты менюшки получаем выделение цветом в виде полукруга. 

Немного напоминает вариант меню с zoom - эффектом, которое прижилось на некоторых блогах читателей.

Вы можете посмотреть меню в работе. Скопируйте код и установите в этом редакторе.

<style type="text/css">
.exespotlightmenu{
width: 100%;
overflow:hidden;
}
.exespotlightmenu ul{
margin: 10;
padding: 0;
font: bold 14px Verdana; /* стили текста */
list-style-type: none;
text-align: center; /* можно "left", "center", или  "right" */
}
.exespotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* отступы справа */
}
.exespotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* горизонтальный диаметр  */
height:50px; /* вертикальный диаметр */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 анимация */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* цвет при наведении */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* смещение текста в низ, чтобы он располагался по центру*/
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="##########"><exespan>Главная</exespan></a></li>
<li><a href="##########"><exespan>Об авторе</exespan></a></li>
<li><a href="##########"><exespan>Форма связи</exespan></a></li>
<li><a href="##########"><exespan>Инструменты</exespan></a></li>
<li><a href="##########"><exespan>Контакты</exespan></a></li>
</ul>
</div>

Настройки стандартные и все закомментированы в коде. Сложности не возникнет. 

Вместо "##########" вставляйте адреса страниц, куда будет осуществлён переход при клике. 

Меняйте background: #a71b15;  цвет под дизайн вашего блога.

По необходимости добавляйте или убирайте пункты горизонтального меню - <li><a href="##########"><exespan>Главная</exespan></a></li>

В Блоггере код меню устанавливаем в гаджет HTML/JavaScript и перетягиваем его под шапку блога или над сообщениями. 

Вот и всё. До встречи.

Подробнее...

 Доброго времени суток, друзья. Свойство clip-path создаёт область отсечения: внутри которой контент видно, а вне её – нет. Одним словом определяем, какая часть элемента должна отображаться. Тема весьма интересная, с неограниченными возможностями. Кого она заинтересует - информации много. Я же хочу предложить сегодня, как можно задать стили заголовка  и статей в Блоггер или создать баннер блога, без фотошопа и других редакторов. 

Вот, самый простой вариант оформления баннера с использованием свойства clip-path 

Мы, как бы, разделим цвет и фон текста. Скопируйте код и вставьте его в поле этого редактора. для просмотра.

Код

<div class="h1" data-heading="шпаргалки блогерши ">
   шпаргалки блогерши  
</div>
<style>
.h1 {
    text-align: center;
    position: relative;
    margin: 0;
    box-sizing: border-box;
    padding: 20px 105px;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    color: #FFF;
    font-size: 46px;
    line-height: 56px;
    background:#009b76; /*общий фон*/
    border: 8px solid #c0dcc0; /*размер и цвет рамки*/
    z-index: 1;
    text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);    
    text-transform: uppercase;
    transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}
@media screen and (max-width: 780px) {
    .h1 {
        font-size: 26px;
        line-height: 36px;
    }
}
.h1:after {
    content: attr(data-heading);
    position: absolute;
    padding: 20px 10px;
    box-sizing: border-box;
    left: 0;
    z-index: 2;
    overflow: hidden;
    white-space: wrap;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: center;
    color: #BFE2FF; /*цвет текста*/
    text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);    
    background: #a4e0cf;/*цвет фона разделительной фигуры*/
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 100%);
}</style>

Можно до бесконечности играться со значениями свойства clip-path: а именно теми, что отмечены цветом. Таким образом изменить угол разделения. Вообще, если кому интересно, можно набрать в поиске, как создаются потрясающие эффекты с помощью clip-path. 

Я приведу несколько примеров.

Заменим все значения lip-path, допустим, на такие 50% 0%, 100% 50%, 50% 100%, 0% 50%

Результат

Или вот такие значения 0 46%, 100% 15%, 55% 74%, 0 100%

Имеем уже другое

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

Комментарии по цвету в самом коде.

Ширина всего блока -  780px

Со всеми  цветами rgba, которые задают значение тени текста text-shadow тоже играйтесь на своё усмотрение. Вместо фона можно вставить изображение, как вариант. Замените в коде любой background: на такую строку background: url('здесь адрес фоновой картинки');

Во всех случаях исходный заголовок дублируется и накладывается на оригинал. Потом этот дубль обрезаем под нужным углом с помощью свойства clip-path. Ну вот как - то так.

Если возникнут вопросы по настройкам, не стесняйтесь спрашивать в комментариях.

Спасибо за внимание и до встречи.

Подробнее...

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

Скопируйте код и установите его в этом редакторе для наглядности примера.

<style type="text/css"> body { min-height: 1000px; }
#blfix{
    display:none;
    position:relative;
    top:40;
    background-color:blu;
    width: 80%;
    padding: 70px;
}
</style>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<div id="blfix"><img src="https://wallpaperscave.ru/images/original/17/12-14/humor-child-3382.jpg" border="2" title="пояснительный текст " width=950 height=350> </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
jQuery(function(f){
    var element = f('#blfix');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
    });
});
</script>

В участке кода 

<div id="blfix"><img src="https://wallpaperscave.ru/images/original/17/12-14/humor-child-3382.jpg" border="2" title="пояснительный текст " width=950 height=350> </div>

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

Изменяя значение функции .scrollTop() > 200 ? 'In': 'Out')](500); можно подкорректировать расположение блока.

При применении на странице пишем сообщение в обычном режиме и, в том месте, где предполагается появление блока, переходим в режим HTML.

Информация в самом блоке, соответственно Ваша. 

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

Подробнее...