Привет друзья. Хочу показать вам как создать на странице видимые и невидимые блоки. Есть масса способов, используя CSS, сделать любой элемент страницы скрытым (невидимым). Можно использовать свойство opacity, задав ему значение 0. display: блок полностью исчезнет с веб-страницы, без следа.
Visibility, тоже поможет скрыть наш элемент, но влияет на макет страницы.
Чтобы показать невидимый элемент, можно использовать псевдокласс :hover. и другие. Информации много и не буду подробно останавливаться на каждом моменте.

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

Для наглядности, скопируйте код и установите его в этом редакторе для просмотра. Наведите мышь на появившейся блок. Если не совсем будет понятно ниже выкладываю картинки.

<div class="on-hover">
Видимый блок
</div>
<div class="hidden-block">
А это то что появится. Может быть текст или картинка. Как её сюда вставить рассмотрим ниже
</div>
<style>.on-hover{
width:300px;
background:#004D40;
color:#fff;
font-size:28px;
border:3px solid #4DB6AC;
padding:20px;
margin:auto;
margin-bottom:20px;
text-align:center;
}
.hidden-block{
width:300px;
background:#4DB6AC;
color:#fff;
font-size:25px;
border:3px solid #004D40;
padding:20px;
margin:auto;
text-align:center;
opacity:0; /*Элемент прозрачный (невидимый)*/
transition: 1s; /*Скорость перехода */
}
.on-hover:hover+ .hidden-block{
opacity:1;
transition: 1s;
}</style><br />
<br />
<br />

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

А вот при наведении курсора появляется тот скрытый блок и расстояние между появившемся блоком и текстом обычное.

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

<div class="hidden-block">
А это то что появится. Может быть текст или картинка. Как её сюда вставить рассмотрим ниже
</div>

вместо текста прописать путь к изображению - адрес.

<div class="hidden-block">
<img src="здесь адрес изображения">
</div>

Картинка должна быть такого же размера как ширина и высота блока. В коде это 300px; на 300px;

Вот такая игра в прятки на CSS. Видимый и невидимый блок, который спрятался.

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

введите пожалуйста свой адрес электронной почты :

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

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

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

Сам эффект создаётся с помощью радиального градиента (radial-gradient) и  jQuery для движения объекта. Я сделала ещё к этому надпись на картинке в виде ссылки. За ненадобностью можно убрать. Смотрите сам эффект на тестовом блоге

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

Весь код целиком будет выглядеть так

<div class="spotlight-wrap">
<a href="адрес страницы при клике на ссылку">ваш текст</a>
    <br />
<div class="spotlight">
</div>
</div>
<style>.spotlight-wrap {
    background: url(адрес картинки) no-repeat center center;
    background-size: cover;
    height: 500px;
    cursor: none;
    position: relative;
}
.spotlight-wrap a {
    position: absolute;
    z-index: 1;
    bottom: 30px;
    right: 40px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 26px;
    line-height: 34px;
    color: #AAA;
    transition: color 0.5s;
    text-shadow: 0 0 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5); 
}
.spotlight-wrap a:hover {
    color: #FFF;
}
.spotlight-wrap .spotlight {
    position: absolute;
    height: 500px;
    width: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}</style>
<script>
$(window).mousemove(function(e){
    let w = $('.spotlight').innerWidth(),
    h = $('.spotlight').innerHeight(),
    t = e.pageY - $('.spotlight').offset().top,
    l = e.pageX - $('.spotlight').offset().left;
$('.spotlight').css('background-image', 'radial-gradient(circle at '+ (l / w * 100) +'% '+ (t / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)');
});     </script>

Всё что нужно отмечено розовым цветом - ваша картинка и текст.

Вот такой, немного фантастический эффект фонарика, можно создать для изображения.

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

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

введите пожалуйста свой адрес электронной почты :

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

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

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

Рабочий вариант на тестовом блоге в сайдбаре в самом низу

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

Что на ней присутствует

1.  Ваша фотография профиля.
2. Красивый дизайн самой карты, который легко настраивается
3. Ваш ник, имя или фамилия
4 Можно указать род занятий, хобби
5.Добавим 2 кнопки на нужные страницы. Это могут быть ссылки на вашу полную страницу об авторе, на главную страницу, карту, мастер классы, на паблики в социальных сетях. Всё что угодно.
6. Карточка прекрасно впишется в боковой панели блога.

Скопируйте , приведённый ниже код и будем ваять именно вашу карту профиля дальше.

<figure class="snip1">
  <img src="https://w-dog.ru/wallpapers/10/19/380923269777589.jpg" alt="фото" />
  <figcaption><img src="https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc

" alt="profile" class="profile" />
    <h2>Вика Барад<span>Блоггер</span></h2>
    <p>Привет, я автор блога шпаргалки блогерши, буду рада знакомству. Присоединяйтесь  </p><a href="http://www.shpargalochki.ru/" class="follow">мой блог</a><a href="https://vk.com/public150615645" class="info">Группа в ВК</a>
  </figcaption>
</figure>

<style>
.snip1 {
  font-family: 'Roboto', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #141414;
}
.snip1 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1 img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.snip1 figcaption {
  width: 100%;
  background-color: #141414;
  padding: 25px;
  position: relative;
}
.snip1 figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a {
  padding: 5px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.7em;
  text-transform: uppercase;
  margin: 10px 0;
  display: inline-block;
  opacity: 0.65;
  width: 47%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}
.snip1 figcaption a:hover {
  opacity: 1;
}
.snip1 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow {
  margin-right: 6%;
  border-color: #2980b9;
  color: #2980b9;
}
.snip1 h2 {
  margin: 0 0 5px;
  font-weight: 300;
}
.snip1 h2 span {
  display: block;
  font-size: 0.5em;
  color: #2980b9;
}
.snip1 p {
  margin: 0 0 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before {
  bottom: 0;
  box-shadow: 0 0 0px white;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}</style>
<script>
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
</script>

https://w-dog.ru/wallpapers/10/19/380923269777589.jpg- это адрес картинки - фона в верхней части

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - адрес вашей миниатюры. Его можно скопировать в вашем профиле Гугл или установить другой аватор.

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

Соответственно, то что выделено зелёным это адреса страниц на которые будет переход при нажатии на кнопку.

Основной фон карточки профиля я тоже отметила цветом в нескольких местах #141414;

Настройки самые элементарные и не думаю, что могут возникнуть вопросы. Если будут - пишите в комментариях. Разберёмся.

Готовый код виджета устанавливаем в разделе ДИЗАЙН - гаджет HTML/JavaScript  в боковой панели блога. Кстати, думаю, что она не плохо будет смотреться и вверху, когда у пользователя есть возможность сразу познакомиться с автором. Фон и картинку можно легко менять в зависимости от вашего настроения или времени года. Она всегда будет новой. Ну это на ваше усмотрение.

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

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

введите пожалуйста свой адрес электронной почты :

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

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

Всё достаточно просто. И для реализации нам такой этот код

<div class="tabl hpargalka">
<p> первое пояснение</p>
</div>
 
<div class="tabl blok">
<p>второе пояснение</p>
</div>
 
<div class="tabl natura">
<p>Следующее пояснение</p>
</div>

<style>
.tabl {
  background-color: #fdf6f6;
  width: 399px;
  padding: 1em 1em 1em 1.5em;
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 1px;
  position: relative;
  line-height: 1.3;
  margin: 49px;
}

.tab + .tabl {
margin-top: 2em;
}

.tabl:before {
color: white;
width: 1.5em;
height: 1.5em;
position: absolute;
top: 1em;
left: -3px;
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-weight: bold;
line-height: 1.5;
text-align: center;
}

.tabl p {
margin: 0 0 1em;
}

.tabl p:last-child {
margin-bottom: 0;
}

.hpargalka {
  border-left-color: #8e1111;
}

.hpargalka:before {
  background-color: #a01212;
  content: "1";
}

.blok {
  border-left-color: #dc851c;
}

.blok:before {
  background-color: #e88409;
  content: "2";
}

.natura {
  border-left-color: #5b6f37;
}

.natura:before {
  background-color: #445624;
  content: "3";
}
</style>

При желании можно поиграться со всеми  background, чтобы изменить цвета на желаемые.

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

Оформление списков в блоге
Оформление участков текста и списков

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

введите пожалуйста свой адрес электронной почты :

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

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

Посмотрите сразу 2 примера, чтобы увидеть как это происходит на тестовом блоге. Скопируйте содержимое (код или текст нажав на соответствующую кнопку. Затем откройте блокнот, или черновик в блоге (любой редактор) и просто кликом мыши нажмите "ВСТАВИТЬ" или воспользоваться клавишами Ctrl + V на клавиатуре.

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

Ну и сейчас, как это реализовать на странице, если заинтересовались.

Нам нужен вот такой малюсенький код HTML

<div id=""text1"">Здесь будет  любой текст, код - то что нужно скопировать</div>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>

И вот такой JS

<script>
function copytext(el) {
  var $tmp = $("<input>");
  $("body").append($tmp);
  $tmp.val($(el).text()).select();
  document.execCommand("copy");
  $tmp.remove();
}</script>

Собственно и всё. Но кнопка в таком скучном варианте (это картинка) , будет выглядеть так

И чтобы она смотрелась симпатичнее на странице можно задать ей стили CSS, как в примере, который вы видели выше. По желанию подгоните под собственный дизайн. 

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

<div id=""text1"">Здесь будет  любой текст, код - то что нужно скопировать</div>
<button onclick="copytext('#text1')" id="#knopka">скопировать</button>

<script>
function copytext(el) {
  var $tmp = $("<input>");
  $("body").append($tmp);
  $tmp.val($(el).text()).select();
  document.execCommand("copy");
  $tmp.remove();
}</script>

<style>
#knopka {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
cursor:pointer;
  border: 2px solid transparent;
  border-radius: 20px
}

#knopka {
  color: #fffbfb;
  padding: 8px 15px;
  background-color: #00695C;
  border-color: #B2DFDB;
}

#knopka{
  background-color: #00BFA5;
  border-color: #c1bdbd;
  color: #fff;
}

#knopka:hover {
  color: #fff;
  background-color: #00BFA5;
  border-color: #2e6da4
}
</style>

Вот такой, достаточно распространенный вариант, использования копирование контента кликом.

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

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

введите пожалуйста свой адрес электронной почты :

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