Приветствую всех. Хочу вас познакомить с сервисом создания логотипов flamingtext. В своё время у меня был опубликован пост как сделать кнопку - логотип для блога.

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

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

создание логотипа

На первой странице В самом низу выбираете нужный язык. Здесь же видно какие стили логотипов представлены. Стоит отметить, что большинство примеров платные. Есть за чисто символическую плату 1 $ и дороже, где предусмотрены дополнительные опции для оформления стилей. Но нам вполне может подойти бесплатная версия.

Выбираем понравившийся логотип и нажимаем на кнопку Редактировать

создать логотип


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

создать логотип

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

Закончили своё творение нажимаем готово и попадаем на такую страницу.


Тут есть кнопка редактирования. В предложенных вариантах - получить код HTML, опубликовать на Фейсбук, сохранить на сервисе - везде нужна регистрация. Я же просто выбрала Загрузить и сохранила своё творение на компьютере в виде изображения GIF. И обычным образом вставила в пост. Вот пример

создать логотип


Нам ещё пишут такую информацию

СВОБОДНО использовать, как вам нравится
или купить логотип, чтобы удалить водяной знак
Но как - то вот без покупки обошлось. Стоит попробовать и сделать если не логотип, какую - то надпись или свою красивую подпись. Приветствие в блог или важную информацию. Просто вставить скачанное изображение в пост или гаджет HTML. Вот поигралась несколько минут и написала простой текст, который вы увидите в конце поста.

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

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






Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

Вы наверняка это видели на некоторых сайта, попробуйте и у себя создать иллюзию подъёма текста с тенью.

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


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

Код

<style>
.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
.bv-text-effect:hover {
background: #DCDCDC; /* Фон при наведении */
border: 1px solid #A9A9A9; /* Цвет рамки при наведении */
color:#FA8072; /* Цвет шрифта при наведении */
text-decoration: none;
text-shadow: none; /* Тени текста (отключены) */
/* Тени блока при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>

<div class="bv-text-effect">
Здесь ваш текст
</div>


Можно применить это и к отдельному слову, предложению. А можно таким образом оформить и ссылки в блоге, чтобы были более привлекательными. Давайте смотреть пример со ссылками.

Спасибо что читаете шпаргалки блогерши

Код

<style> a.bv-text-effect {
display: inline-block;
padding: 3px; /* Внутренний отступ до наведения */
border: 1px solid transparent; /* Рамка до наведения */
outline: 0;
/* Округление рамки */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a.bv-text-effect:hover {
background:  #8FBC8F; /* Фон при наведении */
border: 1px solid #DCDCDC; /* Цвет рамки при наведении */
color:#2F4F4F; /* Цвет текста при наведении */
text-decoration: none;
text-shadow: none; /* Тени текста (отключены) */
/* цвет тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
box-shadow: 1em 1em 1em -0.5em rgba(142, 213, 87, 0.6);
}
</style>

Спасибо что читаете <a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>


В Блоггере код устанавливается в тело сообщения в режиме HTML. Сам эффект появится только после публикации поста. Потренируйтесь на тестовом блоге или в этом редакторе. Хотя сложного в этом ничего нет. Коды уже готовые к применению. Только замените на свой текст нужные строчки.

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

Если захотите часто  использовать эффект подъёма текста, разумнее будет установить код CSS непосредственно в шаблоне (теме) блога, перед строкой ]]></b:skin>, но только без тегов  <style> тут весь код </style>.  И останется только, когда есть необходимость, добавить в сообщение, при оформлении участка текста или выделении ссылки, код HTML

<div class="bv-text-effect">
Здесь ваш текст
</div>

или

<a class="bv-text-effect" href="http://www.shpargalochki.ru/">шпаргалки блогерши</a>

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

текстовые эффекты


В этом случае эффект применяется не к определённому классу, а ко всем тегам <a> которые есть на странице.

Код

<style>
a {
display: inline-block;
/* Внутренний отступ до наведения */
padding: 3px;
/* Рамка до наведения */
border: 1px solid transparent;
outline: 0;
/* Округление углов рамки */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
/* Свойства перехода */
-webkit-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
-moz-transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
transition: box-shadow 0.7s ease,
background 0.7s ease,
border 0.7s ease;
}
a {
/* Фон при наведении */
background: #BEBEBE;
/* Рамка при наведении */
border: 1px solid #666;
/* Цвет текста при наведении */
color:#444;
text-decoration: none;
/* Тени текста (отключены) */
text-shadow: none;
/* Тени при наведении */
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}
</style>
<a href="адрес куда ведёт ссылка">Текст ссылки</a>


Пробуйте, экспериментируйте и всё получится. Спасибо всем за визит и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

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

Использовать будем свойство CSS transitions, которое задаст этот самый сдвиг. В статье выпадающее описание у картинки мы его уже опробовали.

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

<ul class="izo effect">

  <h2>
Самый большой лайнер</h2><br />
Самый большой в мире круизный корабль под названием «Очарование морей» (Allure of the Seas) присоединился к Королевскому Карибскому флоту. «Очарование морей» словно небольшой город — на нем 16 палуб и 2700 комнат<br />
 
  <img alt="" class="top" src="http://www.fresher.ru/manager_content/images/samyj-bolshoj-kruiznyj-lajner/big/1.jpg" />
  </ul>
<style>
.izo{
  position:relative;
  width:280px;
  height:220px;
  overflow:hidden;
  float:left;
  margin-right:20px;
  background-color:rgba(26,76,110,0.5)
}

.izo p,.izo h2 {
  color:#fff;
  padding:10px;
  left:-20px;
  top:20px;
  position:relative
}

.izo p {
  font-family:'Lato';
  font-size:12px;
  line-height:18px;
  margin:0
}

.izo h2 {
  font-family:'Lato';
  font-size:20px;
  line-height:24px;
  margin:0;
}

.effect img {
  position:absolute;
 width:338px;
  height:222px;
  margin:-3px 0;
  right:0;
  top:0;
  cursor:pointer;
  -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
  -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
  -o-transition:top .4s ease-in-out,right .4s ease-in-out;
  transition:top .4s ease-in-out,right .4s ease-in-out
}

.effect img.top:hover {
  top:-200px;
  right:-300px;
  padding-bottom:200px;
  padding-left:300px
}</style>


Зелёный цвет - заголовок к картинке.
Синий - описание.
Розовый - (URL) адрес изображения.

Вот и всё, что нужно заменить вам в этом коде. Устанавливается он в теле поста в режиме HTML в нужном месте. Или в гаджет HTML/JavaScript.

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

Всем добра, благодарю вас за внимание и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

 Для удобства пользователей и для лучшей навигации меню является одним из основных элементов любого сайта.

У меня уже достаточно много постов с разными менюшками, которые вы можете посмотреть в разделе <<категории>> вкладке <<меню>>. Выбирайте любое.

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

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

Простое вертикальное меню со стрелочками

меню
Код

<ul class="block_menu">
<a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>
<a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>

</ul>
<style>
.block_menu {margin:0; padding:0; list-style:none;}
.block_menu a:link,
.block_menu a:active,
.block_menu a:visited {width:169px; height:18px; padding:2px 0 0 21px; display:block; margin:0 0 1px 0; color:#747475; text-decoration:none; overflow:hidden; background:url(https://gdeposylka.ru/img/shiptor.png) no-repeat 0 0;}
.block_menu a:hover {color:#ea7609; background-position:0 -20px;}
</style>


Синее вертикальное меню с красивым эффектом


меню


Код

<ul class="HBru">
<li><br /></li>
<li><br /></li>
<li><a href="http://www.shpargalochki.ru" title="Главная страница">Главная</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page.html" title="Карта ">Карта блога</a>  </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_84.html" title="Вопросы">Вопрос - ответ</a> </li>
<li><a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="Связь">Форма связи</a>
</li>

</ul>
<style>
ul.HBru{-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-padding-start: 0;padding: 0px;}
ul.HBru li {list-style: none;}
ul.HBru li a {text-decoration: none;background-color: #fff;display: block;font-size: 15px;margin-bottom: 3px;border-left: solid 5px #4766b9;padding: 12px 0 12px 15px;color: #ffffff;background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto;background-position: -0 0;background-image: linear-gradient(to right,rgb(1, 1, 8) 20%,rgb(69, 142, 195) 50%);transition: background-position .5s ease-out;-webkit-transition: background-position .5s ease-out;width: 250px;}
ul.HBru li a:hover {background-position: -99.99% 0;color: #fff;text-shadow: 0 1px 0 #171616;}
</style>


Светлое вертикальное меню с иконкой

меню

Код


<div class="block-cont">
<ul class="bnav">

<li><a class="mgreen" href="http://www.shpargalochki.ru/"><span><i class="ico ico_green"></i> Главная страница</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page.html"><span><i class="ico ico_green"></i>Карта блога</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_84.html"><span><i class="ico ico_green"></i>Вопросы - ответы</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_29.html"><span><i class="ico ico_green"></i>Об авторе</span></a></li>
<li><a class="mgreen" href="http://www.shpargalochki.ru/p/blog-page_34.html"><span><i class="ico ico_green"></i>Форма связи</span></a></li>

</ul>

<style>
.bnav {
  margin: 0;
  padding: 0;
  width: 238px;
  margin: auto;
  display: block;
  list-style: none;
}

.bnav li {
  margin: 0;
  border-bottom: 1px solid #e4e2e0;
}

.bnav li:last-child {
  border-bottom: 0;
}

.bnav li a {
  display: block;
  color: #747474;
  text-decoration: none;
}

.bnav li a span {
  height: 36px;
  line-height: 36px;
  display: block;
  color: #747474;
  padding: 0 0 0 36px;
  position: relative;
}

.bnav li a.mgreen:hover span {
  color: #ffffff;
  text-shadow: 0 1px 1px #3d9510;
  background: #6eb521;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}


.ico {
  display: inline-block;
  vertical-align: middle;
  background-position: 0 0;
  width: 16px;
  height: 16px;
}

.ico_green {
  background: url(http://www.knclub.ru/f/images/buttons/folder_user.png) no-repeat 0 0;
  position: absolute;
  left: 12px;
  top: 10px;
}

</style>


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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



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


информация:
А вот и сам фокус

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

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

<style>.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 3px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1;
}
.spoiler label {
  cursor: pointer;
  background: #4682B4;
  margin: 0;
  padding: 4px 18px 4px 22px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  font-family: arial, san-serif;
  line-height: 1;
  position: relative;
}
.spoiler input[type=checkbox] ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 4px 4px 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 7px;
  left: 8px;
}
.spoiler input[type=checkbox]:checked ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 7px 4px 4px 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 8px;
  left: 8px;
}
.spoiler input {
  position: absolute;
  left: -999em;
  opacity: 0;
}
.spoiler .content_box {
  width: 100%;
  border: 1px solid #ddd;
  background: #efefef;
  height: auto;
  padding: 6px 10px;
  margin: 8px 0 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.spoiler .content_box .content {
  display: none;
}
.spoiler .content p {
  padding: 0;
  margin: 0
}
.spoiler .content p img {
  margin: 4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler input[type=checkbox]:checked ~ .content_box .content {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}
@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}
@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}</style>

<br />
<div class="spoiler">
<span class="spoiler_title"> информация: </span>
  <input id="item-1" type="checkbox" />
  <label for="item-1">здесь</label><br />
<div class="content_box">
<div class="content">
А вот и сам фокус<br />
<br />
Здесь всё что  откроется при нажатии на кнопку</div>
</div>
</div>

Всё, что я отметила всяким разноцветием меняйте под ваш дизайн. Соответственно, и надписи, и то что скрыли от глаз.

Хороших всем выходных и с Наступившим 2018 годом.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



Пользовательский поиск
Foto Saya
My Photo