шпаргалки блогерши

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

К примеру, вот так.

Всем привет меняющийся текст из цветных букв и слов!

Можно варьировать в верхней панели редактора разные варианты шрифта -тип, размер, жирный, курсив, цвет, выделяя каждую буковку. И, если затем перейти в режим HTML, обратите внимание, что мы имеем строчный элемент ( англ. span — охватывать), который предназначен для выделения отдельных строк, символов или других строчных элементов и изменения их оформления с помощью стилей.

Как -то так для каждой буквы

е

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

Всем привет

меняющийся  текст  из  цветных  букв  и  слов!

Одним словом - элемент используется для изменения стилей участка текста.

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

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

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

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

Обращу ваше внимание на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure, допустим, на figure 1.

Такой эффект можно применить ко всем изображениям. Нужно установить код CSS в шаблоне блога, но без тегов <style> и </style>. Делаем так. Вкладка Тема - изменить HTML- найти строку ]]></b:skin> и над ней устанавливаем этот код CSS.

Потом, при написании поста, в том месте, где нужна картинка с эффектом увеличения и описания, ставим, перейдя в режим HTML, этот участок (разметку)

<div class="test">
<figure id="figure-hover">
<img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
<figcaption>
Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>
</figcaption>
</figure>
</div>

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

При редком использовании эффекта весь код, который предложен выше копируем и вставляем, опять же в редакторе в формате HTML.

Очень эффектно смотрятся картинки с при применении этого кода.

Всем добра, увидимся.

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

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

Давайте смотреть.

Текст с обводкой

Вот такой текст с обводкой

Код

<div class="no-ie">Вот такой текст с обводкой</div>

<style>

.no-ie {

font-size: 2em;

-webkit-text-stroke: 1px darkgrey;

-webkit-text-fill-color: transparent;

margin-bottom: 1em;

}

</style>

Можно сделать обводку используя полупрозрачность

Код

<style>

h1{font-size: 34px;

color: black;

-webkit-text-stroke: 1px rgba(0,0,0,0.5);

-webkit-text-fill-color: rgba(0,0,0,0.1);

}

</style>

<h1>или вот такой</h1>

/div>

Растянутый текст. Вот так примерно

Вот такой растянутый текст

Код

letter-spacing: 2px;

display: inline-block;

font-size: 38px;

transform: scaleY(0.5);

transform-origin: 0 0;

margin-bottom: -50%;

}

span {

font-size: 18px;

vertical-align: top;

}</style>

Вот такой растянутый текст

Разноцветный текст

С помощью большого количества тэгов font и его атрибутов: color и size можно сделать симпатичные разноцветные буковки

меняющийся текст из цветных букв и слов!

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

меняющийся текст из цветных букв и слов!

/div>

Для каждой буквы, как вы видите, используем вот такие стили. Тут только всё зависит от фантазии.

Все статьи про варианты оформление текста можно посмотреть здесь.

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

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

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

(Пост обновлённый, дополненный и подкорректированный.)

В статье про красивое оформление участка текста я приводила несколько вариантов. Оттуда и взяла первый код в качестве примера сегодня. Полностью код такой. Я отметила наклонным шрифтом код CSS. Это стили и, именно они, отвечают за внешний вид. А внизу небольшая строка кода HTML.

<style>.set {
font-size:16px;

color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>

<div class="set ">здесь ваш текст</div>

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

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

Вариант 1

Проще всего это сделать используя блокнот. Это одна из стандартных программ-компонентов ОС Windows. Она прилагается к любой версии этой операционной системы в обязательном порядке. Откройте «Пуск» и перейдите во «Все программы». Выбираете папку «Стандартные» и кликните по «Блокнот». У кого 10 - ка или другие ОС немного по другому.

Сейчас копируете предложенный код и устанавливаете его там. И там же, вместо строки «здесь ваш текст» пишите тот текст, который нужно выделить. Теперь просто уже из блокнота копируете то, что получилось и в редакторе BLOGGER, переходите в формат HTML. В нужном месте вашей статьи его вставьте.

Вариант 2.

Если вы написали уже сообщение и хотите в тексте оформить участок, в том месте, где это предполагается, так же переходите на формат HTML и вставляем первую часть кода CSS. В примере это участок, заключённый в теги <style>......</style> о нём я писала в начале поста

Потом в конце выделяемого участка устанавливаем HTML код . В примере это класс "set "

<div class="set ">здесь ваш текст</div>

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

Вот что в итоге у нас должно получиться после всех не сложных манипуляций с применением этого кода. Красота.

Даже если у вас сразу не получается и результат в режиме просмотра не виден, не отчаивайтесь. Удалите содержания поста в черновике и попробуйте снова. Потихоньку придёт понимание что да как.

Здесь ещё стоит обратить внимание на один момент. Если выделяется таким образом стихотворение или список, то нужно между строками обязательно в конце прописывать тег </dr> (он переносит текст на другую строку).

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

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

Если что - то не донесла ещё или не совсем понятно, пишите в комментариях.

Вот, как обещала некоторые ссылки

Как оригинально оформит участок в тексте
3 варианта оформления участка в тексте
Цитата или участок в текст

Ещё больше других вариантов оформления текста можно увидеть на странице «все статьи» в меню сверху в разделе «текст».

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

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

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

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

Изменяя именно эти стили, вы сможете создать свой вариант рамки.

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

Код

<ul class="slider_picture">
<li>
<input type="radio" id="slide1" name="slide" checked="">
<label for="slide1"></label>
<img src="https://1.bp.blogspot.com/-c5WhHzMtp7I/XvxT7Vb4C5I/AAAAAAAAN30/FgsR3FDkBxc1LKwb4sPm8upqUU2cUd9BgCLcBGAsYHQ/s320/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="https://1.bp.blogspot.com/-CKVoPPWefWg/XvykUkaB70I/AAAAAAAAN4s/WmbJwXJaU00c3-LJLhTqV0lM-kh8lUIAgCLcBGAsYHQ/s320/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="https://1.bp.blogspot.com/-ClqZp0F0EhI/Xvxaj_bGmWI/AAAAAAAAN4A/9SJLgOAwge8FSLxEmL7xUqii6_K6zovfgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide4" name="slide">
<label for="slide4"></label>
<img src="https://1.bp.blogspot.com/-r_qLer5dx_Y/XvymH0FKf5I/AAAAAAAAN44/kR7CObqOI-UBVHgI5nk3wYkzP-ntkW8dgCLcBGAsYHQ/s1600/404.jpg" alt=" ">
</li>
</ul> <style>
.slider_picture{background-color:#fff;box-shadow:inset 0 0 2px hsla(0,0%,0%,.2),0 3px 1px hsla(0,0%,100%,.75),0 -1px 1px 2px hsla(0,0%,0%,.1);height:18.75em;left:50%;margin:-9.875em -13em;padding:.5em;position:absolute;top:50%;width:25em}
.slider_picture:before{background-color:#800000;bottom:-2.5em;box-shadow:inset 0 1px 1px 1px hsla(0,0%,100%,.2),inset 0 -2px 1px hsla(0,0%,0%,.4),0 5px 50px hsla(0,0%,0%,.25),0 20px 20px -15px hsla(0,0%,0%,.2),0 30px 20px -15px hsla(0,0%,0%,.15),0 40px 20px -15px hsla(0,0%,0%,.1);content:'';left:-2.5em;position:absolute;right:-2.5em;top:-2.5em;z-index:-1}
.slider_picture:after{background-color:#fff5e5;bottom:-1.5em;box-shadow:0 2px 1px hsla(0,0%,100%,.2),0 -1px 1px 1px hsla(0,0%,0%,.4),inset 0 2px 3px 1px hsla(0,0%,0%,.2),inset 0 4px 3px 1px hsla(0,0%,0%,.2),inset 0 6px 3px 1px hsla(0,0%,0%,.1);content:'';left:-1.5em;position:absolute;right:-1.5em;top:-1.5em;z-index:-1}
.slider_picture li{box-shadow:0 -1px 0 2px hsla(0,0%,0%,.03);list-style:none;position:absolute}
.slider_picture input{display:none}
.slider_picture label{background-color:#111;background-image:linear-gradient(transparent,hsla(0,0%,0%,.25));border:.2em solid transparent;bottom:.5em;border-radius:100%;cursor:pointer;display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;width:.5em;visibility:hidden;z-index:10}
.slider_picture label:after{border-radius:100%;bottom:-.2em;box-shadow:inset 0 0 0 .2em #111,inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em}
.slider_picture:hover label{opacity:1;visibility:visible}
.slider_picture input:checked + label{background-color:#fff}
.slider_picture:hover li:nth-child(1) label{left:.5em}
.slider_picture:hover li:nth-child(2) label{left:2em}
.slider_picture:hover li:nth-child(3) label{left:3.5em}
.slider_picture:hover li:nth-child(4) label{left:5em}
.slider_picture img{height:18.75em;opacity:0;transition:.25s;width:25em;vertical-align:top;visibility:hidden}
.slider_picture li input:checked ~ img{opacity:1;visibility:visible;z-index:10}</style>

Замените строки , выделенные цветом, на адреса ваших картинок. Поэкспериментируйте со значениями background (цветом фона), значениями box-shadow, , которое задаёт тень блокам. Для тона и насыщенности в коде используется цвета в формате hsla.

Вроде, кака и все настройки. Код достаточно лёгкий. Можно смело установить в самом сообщении, перейдя в формат HTML при написании сообщения или в гаджет HTML/JavaScript в любом месте макета блога.

Можно сделать ещё слайдер видео в блоге.

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

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

шпаргалки блогерши

Форма для связи