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

окно поиска

Вариантов оформления самого окна поиска, достаточно много. Сегодня хочу предложить ещё один - окно поиска в полноэкранном варианте. При нажатии вся форма поиска откроется на всю страницу. Сам по себе код стандартный, но мы добавим в стили элемент прозрачности, используя свойство opacity:0.8;. Это придаст ему более элегантный и современный стиль. Плюс ещё сделаем кнопку "ЗАКРЫТЬ", опять же, для удобства . 

Основные особенности

В блоге устанавливается достаточно просто - в гаджет HTML/JavaScript

Без подключения сторонних библиотек и JavaScript 

Настраиваемые стили CSS

Быстрая загрузка

Работает со всеми браузерами

 

В работе его можно проверить на тестовом блоге в сайдбаре. Введите, допустим, слово БЛОК.

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

Код

<style>

#search-box {

position: relative;

width: 100%;

margin: 0;

}

#search-form {

height: 40px;

border: 1px solid #999;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: #fff;

overflow: hidden;

}

#search-text {

font-size: 14px;

color: #ddd;

border-width: 0;

background: transparent;

}

#search-box input[type="text"] {

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

#search-button {

position: absolute;

top: 0;

right: 0;

height: 42px;

width: 80px;

font-size: 14px;

color: #fff;

text-align: center;

line-height: 42px;

border-width: 0;

background-color: #2EB0EC;

-webkit-border-radius: 0px 5px 5px 0px;

-moz-border-radius: 0px 5px 5px 0px;

border-radius: 0px 5px 5px 0px;

cursor: pointer;

}

</style>

<style>

#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}

#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}

#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}

</style>

<style>

.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}

</style>

<div id="search-box">

<form action="/search" id="search-form" method="get" target="_top">

<input onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />

</form>

</div>

<div id="popup_searchBox" style="display:none;">

<div id="popup_searchBox_Data">

<!-- Search Box -->

<div class="search-form-wrapper" style="display: block;">

<div class="search-form-overlay"></div>

<form action="/search" class="search-form" method="get">

<label class="search-form-label">Введите ключевое слово  и нажмите Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Закрыть</button></label>

<input class="search-text" name="q" type="text" value="" />

<button class="hide search-submit" style="display:none;" type="submit"><trans>Поиск</trans></button>

</form>

</div>

<!-- Search Box -->

</div>

</div>


Со стилями вы можете поэкспериментировать, исходя из вашего вкуса. В примере окно на черном фоне. Меняйте как вам нужно background:#000000;.цвет шрифта color:#FFFFFF; и размер font-size:60px;

 Название гаджета по вашему желанию, как и текстовые поля в стильном окне поиска. 

Фиксированное окно поиска

Меню с окном поиска

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

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

Введите Ваш email


Доброго времени суток, друзья. Продолжаю тему оформления текста. Эффектов  превеликое множество и предлагаю ещё для эксперимента несколько вариантов оформления текста или заголовка (позаголовка) в блоге. 



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

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

Вариант 1. При наведении курсора текст меняет основной цвет. 

 <style>.blur {
   color: #FA8072;
   font-family: 'Audiowide';
   font-size:5em;
   text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.blur:hover {
   color: rgba(0,0,0,0.6);
   text-shadow:1px 2px 5px rgba(0,0,0,0.5);
}</style>

<p class="blur" style="text-align: center;"> просто красивый текст</p>


Вариант 2. Лёгкое движение теста с длинной тенью. Эффектно смотрится.

<style>

h4{

  font-family: 'Audiowide';

  font-size:3em;

  position:absolute;

  top:0;

  bottom:0;

  left:0;

  right:0;

  margin:auto;

  height:140px;

  width:90%;

  -webkit-animation: floating-text 2s ease alternate infinite;

     -moz-animation: floating-text 2s ease alternate infinite;

      -ms-animation: floating-text 2s ease alternate infinite;

       -o-animation: floating-text 2s ease alternate infinite;

          animation: floating-text 2s ease alternate infinite;

}

@-webkit-keyframes floating-text {

  0% {

    -webkit-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-moz-keyframes floating-text {

  0% {

    -moz-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-ms-keyframes floating-text {

  0% {

    -ms-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@-o-keyframes floating-text {

  0% {

    -o-transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}

@keyframes floating-text {

  0% {

    transform: translateY(.1em);

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .3em .2em rgba(0,0,0,.3);



  }

  100% {

    text-shadow:0 0 .5em rgba(255,255,255,.4),

      0 0 .2em rgba(0,0,0,.3),

      0 .5em .5em rgba(0,0,0,.3);

  }

}</style>

<br />
<h4>
<span style="color: red;">
С Новым годом</span></h4>
</div>


Вариант 3. Очень оригинальное расположение теней. 3D текст.


<h1 data-shadow='Класс!'>Класс!</h1>
<style>
h1 {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 12em;
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
  }
  h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: .06em; left: .06em;
    z-index: -1;
    text-shadow: none;
    background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shad-anim 15s linear infinite;
    }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }
 </style>



Вариант 4. Весёлые разноцветные прыгающие буковки - почему бы и нет.

Мы уже делали что -то на подобии. Об этом в статье анимация текста для блога.

<h1><span>П</span><span>Р</span><span>И</span><span>В</span><span>Е</span><span> </span><span>Т</span><span>И</span><span>К</span><span>!</span></h1>

<style>

h1 {
 font-size:5em;
 font:bold 7.5vw/1.6 'Signika', sans-serif;
 user-select:none;
}

h1 span { display:inline-block; animation:float .2s ease-in-out infinite; }
 @keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}
body:hover span { animation:bounce .6s; }
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
} span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

h1 span:nth-child(2){ animation-delay:.05s; }
h1 span:nth-child(3){ animation-delay:.1s; }
h1 span:nth-child(4){ animation-delay:.15s; }
h1 span:nth-child(5){ animation-delay:.2s; }
h1 span:nth-child(6){ animation-delay:.25s; }
h1 span:nth-child(7){ animation-delay:.3s; }
h1 span:nth-child(8){ animation-delay:.35s; }
h1 span:nth-child(9){ animation-delay:.4s; }

 </style>


Вариант 5. Текст в цветах


<style>.backdrop {
    background:url("http://g2.delphi.lv/images/pix/659x380/-3Uaun62f8w/helenijas-rudens-pukes-ziedi-49218257.jpg") center;
    background-size:contain;
    margin:auto;
    width:55vw;
}

.text {
    color: white;
    border: 4px solid;
    background: rgb(59, 2, 6);
    mix-blend-mode:  multiply;
    font: bolder 12vw 'Alfa Slab One';
    text-align: center;
    margin: 0;
}</style>

<br />
<div class="backdrop">
<div class="text">
Привет</div>
</div>

В последнем варианте в строке, отмеченной розовым цветом, вставляем адрес (url) изображения.

Советую посмотреть ещё статьи про текстовые эффекты


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

Введите Ваш email


Всем, доброго времени суток. Сегодня задача заключается в том, как выделить весь DIV, Span текст при щелчке мыши по кнопке с помощью JavaScript для копирования. Многие блогеры используют подобную опцию, чтобы дать своим посетителям не прокручивать содержание всего блока для копирования, а одним щелчком мыши скопировать сразу всю область. 

копирование кода одним кликом


Что в итоге имеем

Выделяется все содержимое DIV/Span/Textarea с помощью кнопки.

Чистый JavaScript-Код.

Простота в использовании

Вы можете добавить неограниченное количество DIV даже на одну страницу / пост.

Вы можете добавить CSS стили на ID.

Он отменит выделение всего содержимого DIV/Span/Textarea так же с помощью кнопки.


Нам понадобиться вот такой готовый код, который вы сразу, тут же на странице,  сможете легко проверить (кликните по кнопке скопировать и вставьте у себя в черновике или блокноте), чтобы посмотреть, как это работает

<script type="text/javascript"> function fnSelectundefinedobjId) { fnDeSelectundefined); if undefineddocument.selection) { var range = document.body.createTextRangeundefined); range.moveToElementTextundefineddocument.getElementByIdundefinedobjId)); range.selectundefined); } else if undefinedwindow.getSelection) { var range = document.createRangeundefined); range.selectNodeundefineddocument.getElementByIdundefinedobjId)); window.getSelectionundefined).addRangeundefinedrange); } } function fnDeSelectundefined) { if undefineddocument.selection) document.selection.emptyundefined); else if undefinedwindow.getSelection) window.getSelectionundefined).removeAllRangesundefined); } </script> <div id="execodediv0"> А здесь будет зашифрованный код или просто текст </div> <center> <input onclick="javascript:fnSelectundefined'execodediv0');" title="скопировать код" type="submit" value="скопировать код" /> <input onclick="javascript:fnDeSelectundefined);" title="отменить копирование" type="submit" value="отменить копирование" /> </center>


Как это добавить на страницу

В сообщении переходим в формат HTML и в строке, отмеченной синим цветом, вставляем свой текст.

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


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


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

Введите Ваш email


Привет, друзья. Симпатичный, современный hover эффект поперечного сечения при наведении курсора. Это может быть картинка, баннер или просто кнопка читать далее. Покажу на примере 3 варианта, а уж какой выбрать решайте сами. Будем использовать опять тег <figure>, который уже применяли при создании карточки профиля автора. 
Чтобы посмотреть как это работает, скопируйте код целиком и установите в этом редакторе. 


поперечное сечение при наведении курсора на картинку


 <figure class="snip1573">

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample89.jpg" alt="sample89" />

  <figcaption>

    <h3>перейти</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<figure class="snip1573 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample94.jpg" alt="sample94" />

  <figcaption>

    <h3>читать дальше</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<figure class="snip1573"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample92.jpg" alt="sample92" />

  <figcaption>

    <h3>к источнику</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<style>

.snip1573 {

  background-color: #000;

  display: inline-block;

  font-family: 'Open Sans', sans-serif;

  font-size: 16px;

  margin: 10px;

  max-width: 315px;

  min-width: 230px;

  overflow: hidden;

  position: relative;

  text-align: center;

  width: 100%;

}


.snip1573 * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}


.snip1573:before,

.snip1573:after {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

  background-color: #000000;

  border-left: 3px solid #fff;

  border-right: 3px solid #fff;

  content: '';

  opacity: 0.9;

  z-index: 1;

}


.snip1573:before {

  -webkit-transform: skew(45deg) translateX(-155%);

  transform: skew(45deg) translateX(-155%);

}


.snip1573:after {

  -webkit-transform: skew(45deg) translateX(155%);

  transform: skew(45deg) translateX(155%);

}


.snip1573 img {

  backface-visibility: hidden;

  max-width: 100%;

  vertical-align: top;

}


.snip1573 figcaption {

  top: 50%;

  left: 50%;

  position: absolute;

  z-index: 2;

  -webkit-transform: translate(-50%, -50%) scale(0.5);

  transform: translate(-50%, -50%) scale(0.5);

  opacity: 0;

  -webkit-box-shadow: 0 0 10px #000000;

  box-shadow: 0 0 10px #000000;

}


.snip1573 h3 {

  background-color: #000000;

  border: 2px solid #fff;

  color: #fff;

  font-size: 1em;

  font-weight: 600;

  letter-spacing: 1px;

  margin: 0;

  padding: 5px 10px;

  text-transform: uppercase;

}


.snip1573 a {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 3;

}


.snip1573:hover > img,

.snip1573.hover > img {

  opacity: 0.5;

}


.snip1573:hover:before,

.snip1573.hover:before {

  -webkit-transform: skew(45deg) translateX(-55%);

  transform: skew(45deg) translateX(-55%);

}


.snip1573:hover:after,

.snip1573.hover:after {

  -webkit-transform: skew(45deg) translateX(55%);

  transform: skew(45deg) translateX(55%);

}


.snip1573:hover figcaption,

.snip1573.hover figcaption {

  -webkit-transform: translate(-50%, -50%) scale(1);

  transform: translate(-50%, -50%) scale(1);

  opacity: 1;

}</style>



В коде измените адреса картинок на свои. Решётки, которые отмечены синим цветом это URL адреса страниц, куда будет осуществлён переход. Текстовые поля заменяйте соответственно. Голубым цветом, я отметила один из участков  в коде, которые можно убрать. В моём случае это последний вариант. 

Сам код эффекта поперечного сечения можно применить в любом месте блога. У становить в гаджет HTML/JavaScript или в самом сообщении. 

Всем добра, незабываемых новогодних каникул. Увидимся.

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

Введите Ваш email


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

Первые 2 будут просто менять текст, не возвращая прежний. Все пробуем в этом редакторе для наглядности. Копируйте код и вставляем в поле для просмотра. 


как поменять текст на странице по клику


1. Вариант. Использовать подготовленный текст, кнопку, с помощью которой будет осуществляться замена, и скрипт JS.


<p class="par">Здесь ваш тестовый текст</p>

<button onclick="fu()" type="text">Нажми на меня и посмотри .</button>

<script>

function fu(){

    var par = document.querySelector('.par');

    par.innerHTML = 'Получилось!!!! УРА, УРА, УРА';

}

</script>




2. Вариант. Смена текущего текст без кнопки.


<h1 onclick="changeText(this)">Попробуй кликнуть на меня!</h1>

<script>

function changeText(id) {

    id.innerHTML = "Получилось ! УРА, УРА, УРА";

}

</script>




3. Вариант. Как заменить содержимое блока на другое при клике, а при повторном, обратно.


<script type='text/JavaScript'>

     function verocultar(cual) {

          var c=cual.nextSibling;

          if(c.innerHTML=='второй текст второй текст') {

               c.innerHTML='первый текст первый текст';

          } else {

               c.innerHTML='второй текст второй текст';

          }

          return false;

     }

</script><a onclick="return verocultar(this);"

     href="javascript:void(0);">поменяем</a><div>

....... текст текст текст.......

</div>


Есть ещё вариант без кнопки. Работает туда и обратно, один раз
  

<script>function changeText(){ document.getElementById('boldStuff').innerHTML = (document.getElementById('boldStuff').innerHTML == 'Нажать') ? 'Вот вам и второй текст' : 'А это снова первый';</script>
<span id='boldStuff' onclick="changeText();">Жмём</span>


В каждом из вариантов, соответственно, меняйте текстовые поля на свои. Любой из кодов устанавливайте в сообщении в формате HTML.

Хочется надеяться, что именно это имел в виду читатель. Может и Вам пригодится.

✱✱✱✱✱✱

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

С наступающим Новым 2021 годом!!!


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

Введите Ваш email