Интернет shabashka

Новая функция на Blogger

noreply@blogger.com (Наталья) — Fri, 15 Aug 2025 11:29:00 +0000

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

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

Ссылки Google Поиска

**Попробуйте новые функции (бета):** создавайте более увлекательные записи в блоге благодаря Google
Ссылки Google Поиска. Blogger автоматически определит ключевые слова и фразы в вашей публикации и вставит ссылки из Поиска. Так ваши читатели легко смогут посмотреть дополнительную информацию. Чтобы воспользоваться этой функцией, нажмите на значок карандаша в правом верхнем углу страницы в режиме верстки.

Этот инструмент, на мой взгляд, довольно интересный и нужный.

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

Расширение Eye Dropper

noreply@blogger.com (Наталья) — Sun, 06 Oct 2024 00:50:00 +0000

О расширении Eye Dropper я уже упоминала в статьях на сайте:

Оформление ярлыков

Коды цвета

Сегодня расскажу о приложении подробнее.

Eye Dropper - небольшая программка для браузера Google Chrome, но прекрасно работает в Яндекс браузере. Это инструмент, для определения цвета — пипетка. Программа привлекает дизайнеров и художников своим функционалом. Скачать её можно на https://chromewebstore.google.com/.

Плюсы и минусы

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

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

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

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

Те, кто ищут более глубокую функциональность, этот инструмент не подойдёт для работы.

В итоге, несмотря на свои недостатки, Eye Dropper остается хорошим выбором для тех, кто ценит простоту и эффективность в работе с цветами.

Обновление программы

Появилась возможность создавать градиент из заданных цветов.
Копирование в буфер обмена теперь происходит автоматически, так как в прошлом это вызывало множество недоразумений. Перетаскивание цветов в палитре позволяет изменять их порядок или удалять, перемещая в корзину.
Расширенная функция выбора цвета предлагает возможность работы не только с шестнадцатеричными значениями, но и с отдельными компонентами RGB, HSL и HSV.
Также доступна опция ручного ввода цвета.
Экспорт данных возможен в формате JSON.
Инструмент для быстрой очистки палитры предоставляет возможность заполнения цветами по умолчанию или случайными оттенками.
Быстрая очистка палитры с возможностью заполнения цветами по умолчанию или случайными цветами.

Это не все изменения в расширении. Более подробно читайте: https://eyedropper.org/

Интересное оформление страницы 404 Blogger

noreply@blogger.com (Наталья) — Sun, 09 Jun 2024 05:57:00 +0000

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

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

Кроме того, страница 404 полезна для SEO. Правильно настроенная страница 404 может помочь поисковым системам понять, что страница не существует, и помочь им проиндексировать более важные страницы сайта. Это позволяет улучшить позиции сайта в поисковой выдаче.

На Блоггере так же есть возможность установить 404 страницу. Читайте информацию:

Страница 404

Примеры страниц Ошибки 404

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

Предлагаю посмотреть на интересные страницы ошибки 404. Проверить работоспособность кода можно в редакторе.

Вариант 1

Автор Muhammad Rauf

<img src="https://i.ibb.co/W6tgcKQ/softcodeon.gif">
<h2 class="error-text">Упс, похоже такой страницы нет на сайте</h2>
<p class="text">Проверьте правильность написания адреса страницы или перейдите на...</p>
<div class="btn1">
<a class="error" href="Адрес вашего сайта">Главная</a>
</div>
<style>
*{padding:0;margin:0;background:#f0f0f0;}
img{display: block;
  margin-left: auto;
  margin-right: auto;}
  .btn1{text-align:center;}
 .text{text-align:center;font-size:20px;margin-bottom:40px;}
 .error-text{text-align:center;padding:20px;  font-family: Cursive;
} .error{font-family: 'Roboto', sans-serif;font-size:1.5rem;text-decoration:none;padding:15px;background:#003c54;color:#fff;border-radius:10px;}
</style>

Поменяйте текст и пропишите адрес вашей главной страницы. Отметила в коде красным цветом. Картинку лучше перенести на свой сайт:

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

Так же можно поменять цвет кнопки — выделила синим цветом.

Вариант 2

Автор Anh Nhim

Код:

<div id="container-error"> <div class="minion"> <div class="hands"> <div class="left"></div> <div class="right"></div> <div class="fingers-l"></div> <div class="fingers-r"></div> <div class="glove-l"></div> <div class="glove-r"></div> </div> <div class="glasses"> <div class="glassesline1"></div> <div class="glassesline2"></div> <div class="glass1"> <div class="eye1"></div> </div> <div class="glass2"> <div class="eye2"></div> </div> </div> <div class="mouth"> <ul class="teeth"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="belt-left"></div> <div class="belt-right"></div> <div class="pants"></div> <div class="legs"> <div class="left"></div> <div class="right"></div> <div class="shoe-l"></div> <div class="shoe-r"></div> </div> </div> <div id="buttonerror"> <a href="адрес сайта">Главная</a></div> </div> <style> { background: #f5f5f5; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; position: relative; } a, a:visited { color: #fff; outline: none; text-decoration: none; } a:hover, a:focus, a:visited:hover { color: #fff; text-decoration: none; } #container-error { text-align: center; z-index: 9999; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; background-color: #0dea99; color: #fff; } #buttonerror { clear: both; position: absolute; background-color: rgba(255, 255, 255, .05); color: #0dea99; position: absolute; left: 0; right: 0; bottom: 15%; margin: auto; max-width: 250px; padding: 20px; z-index: 99999; border-radius: 10px; border: 5px solid #fff; transition: all .5s; } #buttonerror a { color: #fff; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; } #buttonerror:hover { background-color: rgba(255, 255, 255, 1); } #buttonerror:hover a, #buttonerror a:hover { color: #0dea99; } .minion { position: absolute; background-color: #ffed41; height: 360px; width: 218px; border-radius: 218px 218px 130px 130px; position: absolute; left: 50%; top: 45%; margin: -180px 0 0 -109px; z-index: 99999; } .glassesline1 { background-color: #494949; border-radius: 4px; height: 12px; width: 238px; position: relative; top: 98px; margin: 0 -10px; } .glassesline2 { background-color: #2d2d2d; border-radius: 4px; height: 12px; width: 238px; position: relative; top: 98px; margin: 0 -10px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15); } .glass1, .glass2 { background-color: #e2e2e0; height: 102px; width: 102px; border-radius: 102px; position: absolute; top: 55px; box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15), 1px -1px 0px 0px rgba(255, 255, 255, 1); } .glass1 { left: 10px; right: auto; z-index: 2; } .glass2 { right: 10px; left: auto; z-index: 1; } .glass1:before, .glass2:before { background-color: #e5bf36; height: 78px; width: 78px; border-radius: 78px; display: block; position: relative; top: 12px; left: 12px; content: ""; } .glass1:after, .glass2:after { background-color: #FFF; height: 58px; width: 78px; border-radius: 78px; position: absolute; top: 22px; left: 12px; content: ""; animation: eyes 5s linear 1s infinite; } .eye1, .eye2 { background-color: #724c25; height: 28px; width: 28px; border-radius: 28px; position: absolute; top: 44px; z-index: 3; } .eye1 { left: 46px; } .eye2 { right: 46px; } .eye1:before, .eye2:before { background-color: #2c2d2f; height: 12px; width: 12px; border-radius: 12px; display: block; position: relative; top: 8px; left: 8px; content: ""; } .eye1:after, .eye2:after { background-color: #FFF; height: 8px; width: 8px; border-radius: 8px; position: absolute; top: 6px; left: 12px; content: ""; } .mouth { background-color: #603814; height: 36px; width: 106px; position: absolute; border-radius: 0 0 106px 106px; top: 182px; left: 55px; overflow: hidden; } .mouth:before { background-color: #FFED41; height: 80px; width: 205px; position: relative; display: block; border-radius: 0 0 150px 150px; top: -70px; left: -50px; content: ""; z-index: 2; box-shadow: 0px 3px 0px 0px rgba(50, 50, 50, 0.15); } ul.teeth { list-style: none; z-index: 1; position: absolute; top: -10px; left: -25px; } ul.teeth li { float: left; height: 15px; width: 20px; background: #FFF; display: inline-block; border-radius: 0 0 15px 15px; } ul.teeth li:first-child, ul.teeth li:last-child { height: 10px; } .pants { background-color: #2b5b89; height: 66px; position: relative; top: 270px; border-radius: 0 0 128px 128px; z-index: 2; } .pants:before { background-color: #2b5b89; height: 58px; width: 138px; display: block; position: relative; top: -58px; margin: 0 auto; content: ""; } .pants:after { background-color: #224467; height: 44px; width: 58px; display: block; position: relative; top: -76px; border-radius: 0 0 58px 58px; margin: 0 auto; content: ""; } .belt-left, .belt-right { background-color: #224467; height: 16px; width: 70px; position: absolute; top: 225px; z-index: 3; } .belt-left { left: -10px; transform: scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .belt-right { right: -10px; transform: scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .belt-left:after, .belt-right:after { background-color: #2d2d2b; height: 11px; width: 11px; border-radius: 11px; position: absolute; content: ""; } .belt-left:after { left: 56px; top: 3px; } .belt-right:after { right: 57px; top: 3px; } .legs .left, .legs .right { background: #224467; height: 22px; width: 44px; position: absolute; top: 358px; z-index: 1; } .legs .left { left: 60px; } .legs .right { right: 60px; } .legs .left:after { position: absolute; content: ""; height: 0; width: 0; border-bottom: 22px solid #0dea99; border-right: 10px solid transparent; left: 0; } .legs .right:after { position: absolute; content: ""; height: 0; width: 0; border-bottom: 22px solid #0dea99; border-left: 10px solid transparent; right: 0; } .shoe-l, .shoe-r { background-color: #424242; width: 52px; height: 18px; position: absolute; top: 380px; } .shoe-l { left: 50px; border-radius: 18px 0 0 0; } .shoe-r { right: 50px; border-radius: 0 18px 0 0; } .shoe-l:after, .shoe-r:after { background-color: #2d2d2d; width: 56px; height: 5px; position: absolute; content: ""; top: 18px; left: -2px; } .shoe-l:before { position: absolute; content: ""; height: 0; width: 0; border-top: 5px solid #224467; border-left: 34px solid transparent; left: 20px; } .shoe-r:before { position: absolute; content: ""; height: 0; width: 0; border-top: 5px solid #224467; border-right: 34px solid transparent; right: 20px; } .hands .left, .hands .right { background-color: #e5c034; height: 100px; width: 16px; position: absolute; top: 242px; } .hands .left { left: -16px; border-radius: 16px 0 0 0; } .hands .right { right: -16px; border-radius: 0 16px 0 0; } .hands .fingers-l, .hands .fingers-r { background-color: #424242; position: absolute; content: ""; height: 16px; width: 16px; top: 350px; z-index: 1; } .hands .fingers-l { left: -6px; border-radius: 0 16px 0 0; } .hands .fingers-r { right: -6px; border-radius: 16px 0 0 0; } .hands .fingers-l:after, .hands .fingers-r:after { background-color: #383838; height: 16px; width: 16px; content: ""; border-radius: 16px; position: absolute; top: 15px; z-index: 2; } .hands .fingers-l:after { left: 0px; } .hands .fingers-r:after { right: 0px; } .hands .fingers-l:before, .hands .fingers-r:before { background-color: #2c2c2c; height: 16px; width: 16px; content: ""; border-radius: 16px; position: absolute; top: 8px; z-index: 1; } .hands .fingers-l:before { left: 5px; } .hands .fingers-r:before { right: 5px; } .hands .glove-l, .hands .glove-r { background-color: #424242; position: absolute; height: 36px; width: 16px; border-radius: 0 0 16px 16px; top: 342px; z-index: 3; } .hands .glove-l { left: -15px; } .hands .glove-r { right: -15px; } .hands .glove-l:before, .hands .glove-r:before { position: absolute; content: ""; height: 0; width: 0; top: -15px; border-bottom: 30px solid #424242; border-left: 30px solid transparent; transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .hands .glove-l:before { left: -7px; } .hands .glove-r:before { right: -7px; } </style>

Вставляйте адрес с нужной страницей своего блога и её название — выделила в коде красным.

Вариант 3

Автор Kilchenmann

<div class='container'> <div class='post-module hover'> <div class='thumbnail'> <img src='http://media.lakto.org/error.jpg'> </div> <div class='post-content'> <div class='category'>Error 404</div> <h1 class='title'>Это не та страница, которую вы ищите.</h1> <h2 class='sub_title'>404 (Страница не найдена) Ошибка</h2> <p class='description'> </p> <div class='post-meta'> <span class='comments'> <a href='адрес блога'>← Перейти на главную страницу</a> </span> </div> </div> </div> </div> <style> { background: #f2f2f2; font-family: 'proxima-nova-soft', sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .post-module { position: relative; z-index: 1; display: block; background: #ffffff; min-width: 270px; width: 340px; height: 470px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; margin-left: auto; margin-right: auto; margin-top: 80px; } .post-module:hover, .hover { -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); } .post-module:hover .thumbnail img, .hover .thumbnail img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); opacity: 1; } .post-module .thumbnail { background: #000000; height: 400px; overflow: hidden; } .post-module .thumbnail img { display: block; width: 110%; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .post-module .post-content { position: absolute; bottom: 0; background: #e0e0e0; width: 100%; padding: 30px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; } .post-module .post-content .category { position: absolute; top: -36px; left: 0; background: #e74c3c; padding: 10px 15px; color: #ffffff; font-size: 14px; font-weight: 600; text-transform: uppercase; } .post-module .post-content .title { margin: 0; padding: 0 0 10px; color: #333333; font-size: 26px; font-weight: 700; } .post-module .post-content .sub_title { margin: 0; padding: 0 0 20px; color: #e74c3c; font-size: 20px; font-weight: 400; } .post-module .post-content .description { display: none; color: #666666; font-size: 14px; line-height: 1.8em; } .post-module .post-content .post-meta { margin: 30px 0 0; color: #999999; } .post-module .post-content .post-meta .timestamp { margin: 0 16px 0 0; } .post-module .post-content .post-meta a { color: #999999; text-decoration: none; } .hover .post-content .description { display: block !important; height: auto !important; opacity: 1 !important; } .container { max-width: 800px; min-width: 640px; margin: 0 auto; } .container:before, .container:after { content: ''; display: block; clear: both; } .container .column { width: 50%; padding: 0 25px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container .column .demo-title { margin: 0 0 15px; color: #666666; font-size: 18px; font-weight: bold; text-transform: uppercase; } .container .info { width: 300px; margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 24px; font-weight: 400; color: #333333; } .container .info span { color: #666666; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #e74c3c; } </style>

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

Вариант 4

Автор Aleena Pathan

<h1>Произошла ошибка </h1>
<p class="zoom-area"><b>Поломка! </b> К сожалению такой страницы здесь нет.</p>
<section class="error-container">
<span><span>4</span></span>
<span>0</span>
<span><span>4</span></span>
</section>
<div class="link-container">
<a target="_blank" href="адрес сайта" class="more-link">Перейдите на главную страницу</a>
</div>
<style>
.error-container {
text-align: center;
font-size: 180px;
font-family: 'Catamaran', sans-serif;
font-weight: 800;
margin: 20px 15px;
}
.error-container > span {
display: inline-block;
line-height: 0.7;
position: relative;
color: #FFB485;
}
.error-container > span > span {
display: inline-block;
position: relative;
}
.error-container > span:nth-of-type(1) {
perspective: 1000px;
perspective-origin: 500% 50%;
color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
transform-origin: 50% 100% 0px;
transform: rotateX(0);
animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
perspective: none;
perspective-origin: 50% 50%;
color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
transform-origin: 100% 100% 0px;
transform: rotate(0deg);
animation: rotatedrop 8s infinite;
}
@keyframes easyoutelastic {
0% {
transform: rotateX(0);
}
9% {
transform: rotateX(210deg);
}
13% {
transform: rotateX(150deg);
}
16% {
transform: rotateX(200deg);
}
18% {
transform: rotateX(170deg);
}
20% {
transform: rotateX(180deg);
}
60% {
transform: rotateX(180deg);
}
80% {
transform: rotateX(0);
}
100% {
transform: rotateX(0);
}
}
@keyframes rotatedrop {
0% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
15% {
transform: rotate(90deg);
}
70% {
transform: rotate(90deg);
}
80% {
transform: rotate(0);
}
100% {
transform: rotateX(0);
}
}
/* demo stuff */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
margin-bottom: 50px;
}
html, button, input, select, textarea {
font-family: 'Montserrat', Helvetica, sans-serif;
color: #bbb;
}
h1 {
text-align: center;
margin: 30px 15px;
}
.zoom-area {
max-width: 490px;
margin: 30px auto 30px;
font-size: 19px;
text-align: center;
}
.link-container {
text-align: center;
}
a.more-link {
text-transform: uppercase;
font-size: 13px;
background-color: #bbb;
padding: 10px 15px;
border-radius: 0;
color: #fff;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
line-height: 1.5;
text-decoration: none;
margin-top: 50px;
letter-spacing: 1px;
}
</style>

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

Готовые анимированные градиентные тексты

noreply@blogger.com (Наталья) — Sun, 02 Jun 2024 14:34:00 +0000

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

На блоге уже есть статьи о красивом тексте, в том числе анимированном:

Анимированный градиентный текст
Текстовые эффекты для Блоггер
Тени для текста сss на Блоггер
Неоновая надпись css
Красивый текст для оформления блога
Красивый текст для поздравлений
Красивый текст для статьи на Блоггер

В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги h1 class можно менять на свои, например h2, 3, 4 или strong. Можно менять шрифт, его размер, толщину. Все коды найдены на сайте https://codepen.io.

Вариант 1

Автор Rloria7

Градиент мягко переливается разными цветами одного оттенка — зелёный, фиолетовый, синий и т.д.

Код:

<h1 class="gradient">Градиентный текст</h1>
<style>
.gradient {
font-family: Poppins, sans-serif;
font-size: 8rem;
font-weight: bold;
text-align: center;
color: #ff0003;
background-image: -webkit-linear-gradient(84deg, #FF0003, #FF8F3C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-240deg);
}
}
</style>

Вариант 2

Автор Zeeshan Mukhtar

Градиент довольно динамично переходит по буквам из одного цвета в другой.

Код:

<div class="txt">
Градиентный текст
</div>
<style>
.txt {
display: grid;
place-items: center;
position: absolute;
top: 50%;
left: 50%;
text-transform: uppercase;
transform: translate(-50%, -50%);
background: linear-gradient(-45deg, #6355a4, red, #e89a3e, aqua);
background-size: 300%;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 900;
font-size: 5vw;
letter-spacing: px;
word-spacing: 10px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* -webkit-text-fill-color: transparent;/ */
animation: zee 1s linear infinite;
}
@keyframes zee {
0% {
background-position: 0px 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0px 50%;
}
}
</style>

Вариант 3

Автор Patrick Freedom Mayer

Градиент очень медленно и незаметно меняет свои цвета.

Код:

<div class="gradient-text">Градиентный текст</div>
<style>
@keyframes gradient {
0% { background-position: 0% 0; }
50% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}

.gradient-text {
animation: gradient 20s linear infinite;
background: linear-gradient(70deg, rgba(255,38,163,1) 0%, rgba(0,73,176,1) 16%, rgba(238,130,178,1) 33%, rgba(0,194,229,1) 50%, rgba(238,130,178,1) 66%, rgba(0,73,176,1) 83%, rgba(255,38,163,1) 100%);
background-size: 200% 100%;
background-clip: text;
color: transparent;
font-family: Arial;
font-size: 60px;
font-weight: 800;
letter-spacing: -4px;
line-height: 1.2;
padding: 10px;
}
</style>

Вариант 4

Автор Alex Araújo

Градиент плавно меняется снизу вверх.

Код:

<div>
<h1 class="text">Efeito Gradiente</h1>
</div>
<style>
div{
display:flex;
height: 30vh;
justify-content:center;
align-items:center;
}
.text{
font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
padding:30px;
font-size:80px;
font-weight:100;
letter-spacing:2px;
color:#f35626;
background-image: -webkit-linear-gradient(92deg, #6e26f3, #feab3a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation: hue 2s infinite linear;
}
@-webkit-keyframes hue{
from{
-webkit-filter:hue-rotate(0deg);
}
to{
-webkit-filter:hue-rotate(-360deg);
}
}
</style>

Вариант 5

Автор: Ritika Agrawal

Градиент плавно перетекает снизу вверх, сверху вниз.

Код:

<h1>Gradient Text</h1>
<style>
h1 {
text-transform: uppercase;
font-size: 72px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: linear-gradient(
180deg,
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
background-size: 200% 200%;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: change 5s ease-in-out infinite;
}
@keyframes change {
0% {
background-position: 0 0;
}
50% {
background-position: 0 100%;
}
100% {
background-position: 0 0;
}
}
@media(max-width:576px){
h1{
font-size:32px;
}
}</style>

Вариант 6

Автор JR

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

Код:

<h1 class='trippytext'>Градиентный текст<br>Пример</h1>
<style>
.trippytext {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: 900;
letter-spacing: .02em;
font-size: 7em;
line-height:1em;
text-shadow: 10px 10px 8px rgba(0, 0, 0, 0.15);
background: linear-gradient(45deg, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8);
background-size:250% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textAnim 5s ease-out infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes textAnim {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
</style>

Вариант 7

Автор Coding Tanu

Текст подходит для тёмного фона. На белом фоне эффект смотрится не так ярко. Градиент с мерцанием бежит по буквам.

Код:

<div class="container">
<div class="wrapper">
<span class="text"> Анимированный градиент</span>
<span class="gradient"></span>
<span class="dodge"></span>
</div></div>
<style>
.container{
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
display: inline-flex;
filter: brightness(200%);
overflow: hidden;
}
.text{
color: #ffffff;
font-size: 70px;
font-weight: bold;
font-family:'Dancing Script',cursive;
text-transform: capitalize;
background: #000000;
background-size: 100%;
padding: 30px;
}
.text::before{
content: "Анимированный градиент";
position: absolute;
mix-blend-mode: difference;
filter: blur(1px);
}
.gradient{
background: linear-gradient(90deg,
rgb(235, 34, 70) 20.25%
,rgb(218, 7, 49) 20.25%,
rgb(70, 1, 104) 80.25%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
}
.dodge{
background: radial-gradient(circle,
white, black 45%) center / 15% 15%;
position: absolute;
top: -100%;
left: -100%;
right: 0%;
bottom: 0%;
mix-blend-mode: color-dodge;
animation: light 3s linear infinite;
}
@keyframes light{
to{
transform: translate(50%,50%);
}}
</style>

Стили оформления цитат для Блогспот

noreply@blogger.com (Наталья) — Sun, 26 May 2024 00:36:00 +0000

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

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

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

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

На сайте есть много стилей оформления цитат:

Анимированный градиент
Оформление цитаты в Blogger
Стили для цитат Блоггер
3 интересных оформления цитаты для Blogger
Оформляем цитаты в Блоггер
Оформление цитаты на подложке из картинки для Блоггер
Красивое оформление Блоггер
Оформление цитаты с ховер эффектом на Blogger
Слайдер для цитат

Но сегодня предлагаю посмотреть ещё несколько. Все коды устанавливаем так:

Заходим в шаблон: Тема — Изменить HTML. Находим тег ]]></b:skin> и выше него вставляем выбранный код.

3 стиля цитаты

Стили найдены на https://codepen.io, у автора Mark Boots.

1 вариант

2вариант

3 вариант

blockquote {
  --accent-color: rgb(32 32 54);
  --bg-color: rgb(30 145 254);
  --dot-color: rgb(255 255 255 / .35);
  --text-color: rgb(243 243 243);
}
blockquote{
  --padding: 1rem;
  padding: var(--padding);
  color: var(--text-color, black);
  font-weight: 600;
  background-color: var(--bg-color, white);
  display: grid;
  gap: 1rem;
  background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
  background-size: 0.5rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
  
}
blockquote::before{
  --qHeight: 4rem;
  content: "";
  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--padding) * -1);
  height: var(--qHeight);
  width: calc(var(--qHeight) * 1.1);
  background-image:
    radial-gradient(
      circle at bottom right,
      transparent calc(var(--qHeight) / 4 - 1px),
      var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), 
      transparent calc(var(--qHeight) / 2 + 1px)
    ),
    linear-gradient(var(--accent-color, black), var(--accent-color, black));
  background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
  background-position: top left, bottom left;
  background-repeat: space no-repeat
}

Чтобы поменять стиль, отрезок, выделенный в коде синим, меняем на:

2 вариант

blockquote{
--accent-color: rgb(243 243 243);
--bg-color: rgb(33 29 30);
--dot-color: rgb(255 255 255 / .125);
--text-color: rgb(243 243 243);
}

3 вариант

blockquote{
--accent-color: rgb(30 145 254);
--bg-color: rgb(32 32 54);
--dot-color: rgb(255 255 255 / .125);
--text-color: rgb(243 243 243);
}

Оформление цитаты тенями

blockquote {
margin: 3.7em auto;
padding: 2em;
background: linear-gradient (white, white) padding-box, border-box 0 / cover;
border: 2em solid transparent;
box-shadow: 5px 3px 30px black;
font-size: 1.4em;
font-family: 'Lora', serif;
font-style: italic;
line-height: 1.5;
width: 40%;
}

Стиль цитаты с цветным текстом (2 варианта)

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

1 вариант

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

2 вариант

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}

Стиль цитаты с тенями и широкой полосой

Цвет полосы меняем на свой вкус — выделила красным. Так же можно поменять ширину полосы — выделила синим.

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

Стиль цитаты с двумя линиями и кавычками

Так же можно поменять цвет линий — выделила красным цветом.

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: "\201C";line-height: 1;top: 10px;left: 10px;}

Последние сообщения для Блоггер

noreply@blogger.com (Наталья) — Sun, 19 May 2024 12:33:00 +0000

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

Другие виджеты можно найти на сайте:
Виджет "Последние сообщения" для Blogger
Гаджеты Последние сообщения Blogspot

Предлагаю вашему вниманию три интересных гаджета "Последних сообщений" для Блоггер. Коды виджета "гуляют" в сети, и видела их на нескольких блогах, поэтому написать авторство не могу.

Устанавливаются гаджеты просто, что очень удобно для новичков. Заходим в Дизайн, нажимаем Добавить гаджет (в боковой панели), выбираем HTML/JavaScript. В открывшемся окне вставляем код.

Виджет 1

Последние сообщения в виде сетки из 9 ячеек, расположенных 3*3. Название статьи появляется при наведении курсора. Если картинки в статье не окажется, то вместо неё будет показана белая с восклицательным знаком в треугольнике. Её можно заменить на любую свою. Отметила в коде синим цветом. Если три ряда гаджета не умещаются в боковой панели, значит её нужно немного расширить. Делается это в Тема/Настроить/Регулировка ширины.

Код:

<style>   
  .recent-grid {padding:0;clear:both;}   
  .recent-grid:after {content:"";clear:both;display:table;}   
  .recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}   
  .recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}   
  .recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}   
  .recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}   
  .recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}   
  .recent-grid a:hover img {border-color:#bbb;}   
  </style>   
  <script type='text/javascript'>   
  //<![CDATA[   
  // Recent Post Gallery   
  function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}   
  //]]>   
  </script>   
  <script>   
  var recentpost_thumbs = 72;   
  var recentpost_title = true;   
  </script>   
  <script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Виджет 2

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

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

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

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

Количество постов можно менять — отметила в коде жирным шрифтом.

Код:

<style type="text/css">   
  img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}   
  ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}   
  ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}   
  ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}   
  ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}   
  ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}   
  ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}   
  ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}   
  .recent-posts-wrap a { text-decoration:none; }   
  .recent-posts-wrap a:hover { color: #222;}   
  .post-date {color:#e0c0c6; font-size: 11px; }   
  .recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}   
  .recent-post-title {padding: 6px 0px;}   
  .recent-posts-details a{ color: #222;}   
  .recent-posts-details {padding: 5px 0px 5px; }   
  </style>   
  <script type="text/javascript">   
  function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhOseCw1K97LoIepa_HY52MoEAjtJnT7uMo6YBbaKNqfXT5F7vRUpQmNOQTlnapHje6wbF09lfG9sWNvvZgPBphaU5UuOszBNHCBpGOUzwGFcFICl9KTrBQB0u1U_wbRp7FHo0ZJbhSkP/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Читать дальше</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}   
  </script>   
  <script type="text/javascript">   
  var posts_number = 5;   
  var showpostswiththumbs = true;   
  var insidereadmorelink = true;   
  var showcomments = false;   
  var posts_date = true;   
  var post_summary = true;   
  var summary_chars = 70;   
  </script>   
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Виджет 3

В этом гаджете прописана дата поста и количество комментариев. Есть ссылка Далее — отметила оранжевым, меняйте на свой текст. Поменять в коде можно количество постов — отметила красным. Картинку, если в сообщении не будет своего изображения, отметила в коде синим. Изменяем цвет гаджета — отметила в коде зелёным (несколько раз) .

При желании можно поменять шрифт, цвет шрифта и его размер - ищите в коде тег font-size.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKd3H0-ETWEfXQ8wmxwSgflChAi-_cDp0aRDwCWTmnXGnaTxWLJ1hA39ptgd8dHfoWXjdAHN01qGRhWVW1itzYuj3Wk8k2RSaGTzvS253oV-X1vgUMwKOENqNmx7L1-DtxtTebCKQ_Nkv/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==posts_date&&document.write('<span class="post-date">'+v+" "+A[parseInt(w,10)]+" "+f+" </span> | "),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comment"==l&&(l="1 Comment"),"0 Comment"==l&&(l="No Comment"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Далее</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#HTML1 .widget-content{margin: auto; width: 95%;}
img.recent-post-thumb{width:50px;height:50px;float:right;margin:-4px -20px 0 0;border:4px solid #00A0B0;border-radius:100%}.recent-posts-container{float:left;width:100%;min-height:55px;margin:5px 0 5px 0;padding:0;font-size:12px}ul.recent-posts-container{counter-reset:countposts;list-style-type:none;background:#fff}ul.recent-posts-container li:before{content:counter(countposts,decimal);counter-increment:countposts;z-index:2;position:absolute;font-size:16px;color:#FFFFFF;background:#00A0B0;padding:7px 13px;border-radius:100%;margin-top:32px;margin-left:-21px}ul.recent-posts-container li{padding:5px 0;min-height:50px;list-style-type:none;margin:-2px 5px 5px 5px;border-bottom:2px solid #00A0B0}ul.recent-posts-container{border:2px solid #00A0B0}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.post-date{color:#8F9596;font-size:11px}.recent-post-title a{font-size:14px;color:#616662}.recent-post-title{padding:0 17px}.recent-posts-details a{color:#888}.recent-posts-details{margin-left:12px;padding:5px}a.readmorelink{color:#FFFFFF;background:#00A0B0;padding:2px;border-radius:3px}
</style>
<div class='clear'></div>

Волнообразный эффект для изображения

noreply@blogger.com (Наталья) — Sun, 12 May 2024 02:15:00 +0000

Код оформления изображения найден на сайте atuin.ru. Фотография, состоящая из вертикальных полос, при наведении указателя мыши, приближает полосы, создавая волну.

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

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

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

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

Творческое оформление картинок помогает сделать сайт более интересным и профессиональным.

Код

<div class="photowave">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<style>
.photowave {
    --index: calc(1vw + 1vh);
    --transition: cubic-bezier(.1, .7, 0, 1);
    
    margin: 20px 0;
    display: flex;
    justify-content: center;    
    gap: 0.4%;
    perspective: calc(var(--index) * 50);
    width: 100%;
    position: relative;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)) drop-shadow(0 12px 16px rgba(0,0,0,0.05));    
}
.photowave div {
    width: 7.5%;
    height: 400px;
    background-image: url('ваше фото');
    background-repeat: no-repeat;
    background-size: 1300% auto;
    filter: contrast(1) brightness(1) saturate(1);
    transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
    will-change: transform, filter, rotateY, width;
}
@media (max-width: 991px) {
    .photowave div {
        height: 250px;
    }    
}
@media (max-width:575px) {
    .photowave div {
        height: 150px;
    }    
}
.photowave div:nth-child(1) {
    background-position: 0 center;
}
.photowave div:nth-child(2) {
    background-position: 8.33333% center;
}
.photowave div:nth-child(3) {
    background-position: 16.66666% center;
}
.photowave div:nth-child(4) {
    background-position: 24.99999% center;
}
.photowave div:nth-child(5) {
    background-position: 33.33332% center;
}
.photowave div:nth-child(6) {
    background-position: 41.66665% center;
}
.photowave div:nth-child(7) {
    background-position: 49.99998% center;
}
.photowave div:nth-child(8) {
    background-position: 58.33331% center;
}
.photowave div:nth-child(9) {
    background-position: 66.66664% center;
}
.photowave div:nth-child(10) {
    background-position: 74.99997% center;
}
.photowave div:nth-child(11) {
    background-position: 83.3333% center;
}
.photowave div:nth-child(12) {
    background-position: 91.6666% center;
}
.photowave div:nth-child(13) {
    background-position: 100% center;
}
.photowave div:before, 
.photowave div:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 30px;
    right: calc(var(--index) * -1);
}
.photowave div:after {
    left: calc(var(--index) * -1);
}
.photowave div:hover {
    filter: contrast(1.3) brightness(1.3) saturate(1.3);
    transform: translateZ(calc(var(--index) * 10));
}
.photowave div:hover + * {
    filter: contrast(1.25) brightness(1.25) saturate(1.25);
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
    z-index: -1;
}
.photowave div:hover + * + * {
    filter: contrast(1.2) brightness(1.2) saturate(1.2);
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
    z-index: -2;
}
.photowave div:hover + * + * + * {
    filter: contrast(1.15) brightness(1.1) saturate(1.1);
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
    z-index: -3;
}
.photowave div:hover + * + * + * + * {
    filter: contrast(1.1) brightness(1.05) saturate(1.05);
    transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
    z-index: -4;
}
.photowave div:has( + :hover) {
    filter: contrast(1.25) brightness(1.25) saturate(1.25);
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}
.photowave div:has( + * + :hover) {
    filter: contrast(1.2) brightness(1.2) saturate(1.2);
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}
.photowave div:has( + * + * + :hover) {
    filter: contrast(1.15) brightness(1.1) saturate(1.1);
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}
.photowave div:has( + * + * + * + :hover) {
    filter: contrast(1.1) brightness(1.05) saturate(1.05);
    transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}  
</style>

Картинка будет на всю страницу. Чтобы изменить размер, в коде поменяйте ширину и высоту - выделила красным и синим цветом.

Жирным в коде выделила место, куда нужно вставить своё изображение.

Красивый текст

noreply@blogger.com (Наталья) — Sun, 05 May 2024 13:42:00 +0000

Нашла интересное оформление текста на сайте https://codepen.io. У автора Oscar-Jite. Данным текстом можно оформить название сайта, заголовки или поздравить читателей с каким-либо праздником.

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

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

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

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

Про красивый текст можно прочитать на сайте:
Красивый текст для статьи на Блоггер
Красивый текст для поздравлений
Красивый текст для оформления блога
Текстовые эффекты для Блоггер
Неоновая надпись css

Выглядит текст так:

Текст получается анимационный. Буквы как бы расплываются в воде. Посмотреть вживую эффект можно в редакторе. Скопируйте код и вставьте в первое окошко. Нажмите на кнопку "Показать результат".

Не менее интересно будет выглядеть надпись на чёрном фоне:

Код

  <div class="text">
    <h2>HELLO!</h2>
  </div>
  <svg>
    <filter id="spot">
      <feTurbulence id="turbulence" type="turbulence" numOctaves="1" result="NOISE" seed="3"></feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="25" />
      <animate xlink:href="#turbulence" attributeName="baseFrequency" dur="10s"
        values="0.1 0.1;0.12 0.12" repeatCount="indefinite"></animate>
    </filter>
  </svg>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.text {
  position: relative;
  width: 100%;
  text-align: center;
  filter: url(#spot);
}
.text h2 {
  position: relative;
  color: #495518;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  font-size: 10rem;
  text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff;
}
svg{
  width: 0;
  height: 0;
}
</style>

Поменять в коде можно:

Текст — выделила красным.

Цвет текста — синим.

Размер текста — зелёным цветом.

Шрифт — голубым.

Толщина букв — оранжевый оттенок.

Оформление кнопок

noreply@blogger.com (Наталья) — Sun, 28 Apr 2024 03:03:00 +0000

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

Сегодня предлагаю посмотреть на интересное оформление кнопок. Нашла идею на сайте https://codepen.io. У автора Chris Smith. Кнопки на CSS, с ховер-эффектом. При наведении курсора, кнопки подпрыгивают.

Кнопка 1

<div class="grid">
	<div class="button-container">
		<button class="stretch-up">Название</button>
	</div></div>
<style>
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 2rem;
}

.button-container {
	width: 170px;
	height: 60px;
	margin-inline: auto;
}
button {
	width: 100%;
	height: 100%;
	background: linear-gradient(#b4ce24, #788532, #546022);
	border: 1px solid #495518;
	border-radius: 10px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	font-size: 16pt;
	text-align: center;
	color: #fff;
  
}
button:hover {
	cursor: pointer;
}
.button-container:hover .stretch-up {
	animation: stretchUp 0.6s forwards;
}
@keyframes stretchUp {
	70% {
		transform: translateY(-20px) scale(1, 1.6);
	}
	73% {
		transform: translateY(-40px) scale(1, 1);
	}
	76% {
		transform: translateY(-5px) scale(1, 1);
	}
	85% {
		transform: translateY(-10px) scale(1, 1);
	}
	90% {
		transform: translateY(0) scale(1, 1);
	}
}</style>

Кнопка 2

<div class="grid">
	<div class="button-container">
		<button class="stretch-out">Название</button>
	</div></div>
<style>
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 2rem;
}
.button-container {
	width: 170px;
	height: 60px;
	margin-inline: auto;
}
button {
	width: 100%;
	height: 100%;
	background: linear-gradient(#b4ce24, #788532, #546022);
	border: 1px solid #495518;
	border-radius: 10px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	font-size: 16pt;
	text-align: center;
	color: #fff;}
button:hover {
	cursor: pointer;
}
.button-container:hover .stretch-out {
	animation: stretchOut 0.6s forwards;
}
@keyframes stretchOut {
	45% {
		transform: scale(1.5, 0.7);
		border-radius: 15px;
	}
	50% {
		transform: scale(0.5, 1.3);
	}
	55% {
		transform: scale(1.3, 0.8);
	}
	60% {
		transform: scale(1, 1.2);
	}
	65% {
		transform: scale(1.1, 0.9);
	}
	70% {
		transform: scale(1, 1);
	}
	75% {
		transform: scale(1.1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}
</style>

Читайте на блоге:
Кнопки для сайта
Две красивых кнопки для Blogger
8 красивых кнопок
Три кнопки для Блоггер

Кнопка 3

 <div class="grid">
	<div class="button-container">
		<button class="squish-in">Название </button>
	</div></div>
<style>
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 2rem;
}
.button-container {
	width: 170px;
	height: 60px;
	margin-inline: auto;
}
button {
	width: 100%;
	height: 100%;
	background: linear-gradient(#b4ce24, #788532, #546022);
	border: 1px solid #495518;
	border-radius: 10px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	font-size: 16pt;
	text-align: center;
	color: #fff;}
button:hover {
	cursor: pointer;
}
.button-container:hover .squish-in {
	animation: squish-in 0.5s forwards;
}
@keyframes squish-in {
	60% {
		transform: scale(0.5, 1.6);
		border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%;
	}
	70% {
		transform: scale(1.5, 0.7);
		border-radius: 15px;
	}
	80% {
		transform: scale(0.9, 1.3);
		border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%;
	}
	85% {
		transform: scale(1.2, 0.9);
		border-radius: 15px;
	}
	90% {
		transform: scale(1, 1.1);
		border-radius: 15px;
	}
}
</style>

Кнопка 4

<div class="grid">
	<div class="button-container">
		<button class="squish-down">Название</button>
	</div>
</div>
<style>
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 2rem;
}
.button-container {
	width: 170px;
	height: 60px;
	margin-inline: auto;
}
button {
	width: 100%;
	height: 100%;
	background: linear-gradient(#b4ce24, #788532, #546022);
	border: 1px solid #495518;
	border-radius: 10px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	font-size: 16pt;
	text-align: center;
	color: #fff;}
button:hover {
	cursor: pointer;
}.button-container:hover .squish-down {
	animation: squish-down 0.5s forwards;
}
@keyframes squish-down {
	70% {
		transform: scale(1, 0.3) translateY(70px);
	}
	75% {
		transform: scale(1, 1.5) translateY(-15px);
	}
	80%,
	90% {
		transform: scale(1, 1.2) translateY(-10px);
	}
	85% {
		transform: scale(1, 0.9) translateY(0);
	}
}
</style>

Что можно поменять в коде:

Текст на кнопке — выделила в коде жирным, меняйте на свой.

Градиент кнопок — выделила красным.

Окантовку — выделила синим.

Скругление углов — меняйте значение на большее или меньшее. В коде отметила зелёным цветом.

Размер шрифта — оранжевым.

Цвет шрифта — голубым

Интересный эффект для оформления картинок

noreply@blogger.com (Наталья) — Sun, 21 Apr 2024 14:33:00 +0000

Код оформления найден на https://codepen.io. Автор Chris Smith.

Слайдер на CSS, без скриптов. Оформить можно 3 картинки. Добавляется код в статью или на страницу Блогспота, в редактор, в режиме HTML.

Выглядит слайдер так: в спокойном состоянии видны две картинки, а при наведении курсора они открываются по типу штор и исчезают. Видна только большая центральная картинка, которая слегка увеличивается(приближается). Эффект подходит для оформления разнообразных фото загадок, когда за шторками прячут отгадку. Например: "сколько лет этому человеку" или "где прячется предмет". А так же для показа картинок "до и после". Например: "как выглядит девушка до стрижки и после".

Код

<center><div id="grid">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div> 
<style>* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: 0.75s ease;
} 
#grid {
	width: calc(100% - 20vmin);
	aspect-ratio: 16 / 7;
	background: linen;
	display: grid;
	grid-template-columns: 1fr 0fr 1fr;
	place-items: center;
	outline: 2px solid #804a00;
	border-radius: 5vmin;
	box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
	overflow: hidden;
}
.left,
.right,
.middle {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform-origin: center;
}
.left {
	background-image: url("ваше фото");
	border-right: 1px solid #804a00;
}
.middle {
	font-size: 0rem;
	background-image: url("ваше фото");
}
.right {
	background-image: url("ваше фото");
	border-left: 1px solid #804a00;
}

#grid:hover {
	grid-template-columns: 0fr 1fr 0fr;
}
</style> </center>

Изменения

Красным в коде выделила цвет рамки — меняете на свой цвет.

Синим выделила место, куда добавляется адрес картинок. Вставляет урл своих изображений.

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

Трудности с установкой картинок на Блоггере

noreply@blogger.com (Наталья) — Sun, 14 Apr 2024 03:45:00 +0000

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

Так же не срабатывает установка через окно добавления картинки с рабочего стола.

Так же выскакивает ошибка.

Решение

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

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

Если вариант не срабатывает, то сохраните написанное, нажав на облачко в редакторе, и обновите страницу.

P. S.

Если у вас есть другое решение проблемы или вы знаете почему это происходит — напишите в комментариях или в контакты.

Адаптивное меню для Блогспот

noreply@blogger.com (Наталья) — Tue, 09 Apr 2024 03:26:00 +0000

Потребовалось для сайта адаптивное горизонтальное меню, которое будет меняться в зависимости от размера экрана. Очень долго искала в интернете подходящий гаджет. И вроде бы предложено много видов, но не каждый встаёт на Блогспот. А если и устанавливается, то не работает. После недельных поисков на российских и иностранных сайтах нашла подходящее, которое и устанавливается легко, и работает хорошо. Если вам так же нужно адаптивное меню, предлагаю сегодня рассмотреть два, которые без проблем встали в шаблон "Корпорация чудеса".

Первое меню

Меню довольно легко встало на Блогспоте, но к сожалению, не подходит для блогов у которых шапка (хедер) с картинкой. Гаджет будет располагаться сверху и частично перекрывать изображение.

Меню раскрывающееся (выпадающее), со встроенным поиском. В тёмных тонах, но цвет можно поменять под дизайн своего сайта.

Нашла меню на сайте https://danteizm.blogspot.com

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

Заходим в Тема — Изменить HTML. Открывается шаблон, находим тег </body>, и выше него вставляем код:

<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->  
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
<a class='btn' href='#search_box' id='search'>&#9740;</a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
  <li><a href='#' title='Link'>Home</a></li>
  <li><a href='#' title='Link'>Category</a>
  <ul>
   <li><a href='#' title='Link '>Подзаголовок</a></li>
   <li><a href='#' title='Link'>Подзаголовок</a></li>
  </ul>
  </li>
  <li><a href='#' title='Link'>Portfolio</a>
   <ul>
    <li><a href='#' title='Link'>Подзаголовок</a></li>
    <li><a href='#' title='Link'>Подзаголовок</a></li>
    <li><a href='#' title='Link'>Подзаголовок</a></li>
   </ul>
  </li>
  <li><a href='#' title='Link'>Work</a>
  <ul>
   <li><a href='#' title='Link'>Подзаголовок</a></li>
   <li><a href='#' title='Link'>Подзаголовок</a></li>
   <li><a href='#' title='Link'>Подзаголовок</a></li>
   <li><a href='#' title=' Link'> Подзаголовок</a></li>
  </ul>
  </li>
  <li><a href='#' title='Link'>Playground</a>
   <ul>
    <li><a href='#' title='Link'>Подзаголовок  </a></li>
    <li><a href='#' title='Link'>Подзаголовок</a></li>
    <li><a href='#' title='Link'>Подзаголовок</a></li>
   </ul>
  </li>
  <li><a href='#' title='Link'>Sitemap</a></li>
 </ul>
 </nav>
<form action='/search/' class='search_box' id='search_box'>
  <input name='search_criteria' placeholder='Search' type='text' value=''/>
  <input class='search_icon' type='submit' value='Search'/>
</form>
</div>
<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
    position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})
</script>

Чтобы меню заработало, добавляем в шаблон код выше тега </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Отмечу сразу: если такой же код или похожий уже есть в шаблоне — устанавливать второй раз не нужно! Сохраняем шаблон.

В коде можно поменять стили — шрифт, размер, цвета. Меняем внешний вид от <style> до </style>, в коде выделила красным.

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

<li><a href='#' title='Link'>Category</a> <ul> <li><a href='#' title='Link '>Подзаголовок</a></li> <li><a href='#' title='Link'>Подзаголовок</a></li> </ul> </li>

Если удаляем или добавляем только подпункт, то убираем или вставляем:

<li><a href='#' title='Link'>Подзаголовок</a></li>

Если нужно добавить или удалить только пункт, без подпунктов - то:

<li><a href='#' title='Link'>Sitemap</a></li>

Второе меню

Простое плавающее меню с анимацией. Увидела на сайте https://techno-blogger.ru.

Адаптивное-плавающее-меню-для-blogger-Технологии-blogger.htmlМеню при прокрутке страницы будет оставаться видимым вверху. В мобильной версии меню выглядит как обычная полоса с кнопкой гамбургер, при нажатии на которую меню открывается. В настольной версии блоки пунктов при наведении курсора переворачиваются.

Заходим в Тема - Изменить HTML и находим строку: <header> или </header>. Если установить код над <header>, то меню появится над заголовком, а чтобы отобразить меню под заголовком блога, то устанавливаем сразу после </header>.

<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu{
width:100%;
z-index: 9999;
}
#cssmenu:after,
#cssmenu &gt; ul:after {
  content: &quot;.&quot;;
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu &gt; ul {
  background: #D5803A;
}
#cssmenu &gt; ul &gt; li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center &gt; ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center &gt; ul &gt; li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right &gt; ul &gt; li {
  float: right;
}
#cssmenu &gt; ul &gt; li &gt; a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #D5803A;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu &gt; ul &gt; li.active &gt; a {
  color: #FEE5D0;
}
#cssmenu &gt; ul &gt; li:hover &gt; a,
#cssmenu &gt; ul &gt; li &gt; a:hover {
  color: #FEE5D0;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu &gt; ul &gt; li &gt; a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #FEE5D0;
  background: #955928;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu &gt; ul &gt; li:hover &gt; a::before,
#cssmenu &gt; ul &gt; li &gt; a:hover::before {
  background: #D5803A;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen &gt; ul,
#cssmenu.small-screen.align-center &gt; ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen &gt; ul &gt; li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen &gt; ul &gt; li:hover &gt; a,
#cssmenu.small-screen &gt; ul &gt; li &gt; a:hover {
  color: #FEE5D0;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen &gt; ul &gt; li &gt; a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #D5803A;
}
#cssmenu.small-screen #menu-button:after {
  content: &quot;&quot;;
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #FEE5D0;
  border-bottom: 2px solid #FEE5D0;
}
#cssmenu.small-screen #menu-button:before {
  content: &quot;&quot;;
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #FEE5D0;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/><script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#cssmenu"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
  $.fn.menumaker = function(options) {     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);
      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }
        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }
          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
      });
  };
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
  $("#cssmenu a").each(function() {
      var linkTitle = $(this).text();
      $(this).attr('data-title', linkTitle);
  });
});
});
})(jQuery);
//]]>
    </script>
    <div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Главная</a></li>
   <li><a href='#'>Disclaimer</a></li>
   <li><a href='#'>Privacy</a></li>
   <li><a href='#'>Etichette</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contatti</a></li>
</ul>
</div>

Сохраняем шаблон.

Менять в шаблоне можно только внешний вид. Эта часть кода находится между тегами <style> и </style>. Меняйте три цвета # FEE5D0, # D5803A и # 955928. Так же можно менять белый цвет шрифта на свой (#ffffff). Я перепробовала несколько вариантов, но наиболее хорошо смотрится меню одного цвета, только разных оттенков: светлый, обычный цвет и тёмный.

Можно поменять шрифт - выделила в коде синим. Либо совсем удалить эту строку.

Меняйте названия пунктов - выделила жирным. И добавляйте URL страниц, вместо знака (#) - выделила красным.

Так же можно удалять, либо добавлять пункты меню:

<li><a href='#'>Privacy</a></li>

Выделенная оранжевым полоса в коде - это библиотека JQuery. Если у вас она есть, то удалите эту строку.

Генераторы

Предлагаю посмотреть несколько онлайн-конструкторов адаптивного меню:

https://www.generateit.net/menu-generator/

https://www.htmlcodegenerator-tools.com/2019/10/html-css-navigator-menu-bar-generator.html

https://www.generateit.net/menu-generator/

Другие адаптивные меню

Сайты с другими адаптивными меню, которые у меня на блог не встали, но возможно, на другой шаблон они подойдут:

https://aryona.ru/adaptivnoe-gorizontalnoe-menyu-dlya-blogger/

https://techno-blogger.ru/2020/03/4-adaptivnyh-menyu-blogger.html

https://www.mybloggertricks.com/2015/07/how-to-create-responsive-menu-in-blogger.html

https://blogwox.blogspot.com/2016/10/responsive-navigation-menu-blogger.html

https://www.mybloggerlab.com/2014/08/how-to-easily-add-mobile-responsive-menu-in-blogger.html

https://makeonblog.blogspot.com/2016/06/creating-responsive-drop-down-menu.html

https://www.dropdownmenugenerator.com/blog/responsive-menu-blogger.aspx

https://www.ogbongeblog.com/make-blogger-mobile-pagelist-drop-down-menu-display-like-webview.html

Ёлки для сайта на Новый год

noreply@blogger.com (Наталья) — Sat, 20 Jan 2024 13:39:00 +0000

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

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

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

Ёлка №1

Ёлку нашла здесь. Звёздочка и гирлянда на ёлке мигает разноцветными огоньками. В коде можно поменять цвета, сделать это легко, так как каждая деталь ёлки в коде прописана. Код на CSS. Работоспособность ёлочки проверяем в визуальном редакторе.

Код:

<div class="container"> <div class="tree"> <div class="ornament or1"> <div class="shine"></div> </div> <div class="ornament or2"> <div class="shine"></div> </div> <div class="ornament or3"> <div class="shine"></div> </div> <div class="ornament or4"> <div class="shine"></div> </div> <div class="ornament or5"> <div class="shine"> </div> </div> <div class="ornament or6"> <div class="shine"></div> </div> <div class="ornament or7"> <div class="shine"></div> </div> <div class="ornament or8"> <div class="shine"></div> </div> <div class="ornament or9"> <div class="shine"></div> </div> <div class="ornament or10"> <div class="shine"></div> </div> <div class="ornament or11"> <div class="shine"></div> </div> <div class="ornament or12"> <div class="shine"></div> </div> <div class="ornament or13"> </div> </div> <div class="star-light"></div> <div class="star"></div> <div class="star-highlight"></div> <div class="trunk"></div> <div class="floor"></div> </div> <style> .container { position: relative; /* background: #1c1c1c; */ width: 460px; height: 460px; margin: auto; /* border: 1px solid; */ /* border-radius: 100px; */ margin-top: 15vh; } .tree { position: absolute; background: #2e7055; width: 60%; height: 70%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 13%; left: 20.5%; z-index: 2; } .floor { position: absolute; width: 35%; height: 15%; border-radius: 50%; background: #69122a; bottom: -8%; left: 32%; } .star { position: absolute; width: 20%; height: 20%; background: #ffdc5e; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); left: 40.5%; top: 5%; z-index: 3; } .star-highlight { position: absolute; width: 20%; height: 20%; background: #ffedad; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%); left: 40.5%; top: 5%; z-index: 3; } .star-light { position: absolute; width: 20%; height: 20%; background: #ffefb5; filter: opacity(.7); border-radius: 50%; left: 40.5%; top: 5%; z-index: 2; animation: star 3s ease-in-out infinite; } .trunk { position: absolute; height: 15%; width: 10%; background: #2e2713; bottom: 0; left: 45%; z-index:1; } .ornament { position: absolute; border-radius: 50%; width: 4%; height: 7%; z-index: 4; background: yellow; animation: lights 1.6s ease-in-out infinite; } .or1 { top: 18%; left: 42%; animation-delay: .5s; } .or2 { top: 28%; left: 59%; animation-delay: .5s; } .or3 { top: 35%; left: 36%; animation-delay: .6s; } .or4 { top: 45%; left: 53%; animation-delay: .6s; } .or5 { top: 55%; left: 73%; animation-delay: .6s; } .or6 { top: 52%; left: 25%; animation-delay: .7s; } .or7 { top: 63%; left: 44%; animation-delay: .7s; } .or8 { top: 73%; left: 66%; animation-delay: .7s; } .or9 { top: 84%; left: 87%; animation-delay: .7s; } .or10 { top: 70%; left: 16%; animation-delay: .8s; } .or11 { top: 80%; left: 35%; animation-delay: .8s; } .or12 { top: 92%; left: 55%; animation-delay: .8s; } .or13 { top: 90%; left: 6%; animation-delay: .9s; } /* .shine { position: absolute; width: 60%; height: 60%; background: white; border-radius: 50%; filter: opacity(48%); top: 6%; right: 10%; } */ @keyframes lights { 100% { background: #ffe97d; } 75% { background: #ff386d; } 50% { background: #6b8bff; } 25 { background: #62e391; } 0% { background: #ffe97d; } } @keyframes star { 100% { transform: scale(.5); } 50% { transform: scale(1.1); } 0% { transform: scale(.5); } } </style>

Ёлка №2

Ёлочка простая, сделана на CSS, но выглядит необычно. Нашла её на сайте codepen.io

Код:

<div class="box">
    <div class="part-1">
      <div class="line-5"></div>
    </div>
    <div class="part-2">
      <div class="line-1"></div>
    </div>
    <div class="part-3">
      <div class="line-3"></div>
    </div>
    <div class="part-4">
      <div class="line-2"></div>
    </div>
    <div class="part-5">
      <div class="line-3"></div>
    </div>
    <div class="part-6">
      <div class="line-1"></div>
    </div>
    <div class="part-7">
      <div class="line-5"></div>
    </div>
    <div class="part-8">
      <div class="line-1"></div>
    </div>
    <div class="part-9">
      <div class="line-3"></div>
    </div>
    <div class="part-10">
      <div class="line-2"></div>
    </div>
    <div class="part-11">
      <div class="line-3"></div>
    </div>
    <div class="part-12">
      <div class="line-1"></div>
    </div>
    <div class="part-13">
      <div class="line-5"></div>
    </div>
    <div class="part-14">
      <div class="line-1"></div>
    </div>
    <div class="part-15">
      <div class="line-3"></div>
    </div>
    <div class="part-16">
      <div class="line-2"></div>
    </div>
    <div class="part-17">
      <div class="line-3"></div>
    </div>
    <div class="part-18">
      <div class="line-1"></div>
    </div>
    <div class="part-19">
    </div>
  </div>

<style>
.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
  overflow: hidden;
}
.part-1 {
  position: absolute;
  width: 40%;
  height: 5%;
  left: 30%;
  bottom: 5%;
  background: #0c2600;
  border-radius: 20px;
  z-index: 1;
}
.line-5 {
  position: absolute;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 20%;
  background: none;
  border-bottom: 10px dotted #c42bf3;
  animation: 7s changeMe2 infinite;
  z-index: 1;
}
.part-2 {
  position: absolute;
  width: 38%;
  height: 5%;
  left: 31%;
  bottom: 10%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.line-1 {
  position: absolute;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 20%;
  background: none;
  border-bottom: 10px dotted #ffa3c4;
  z-index: 1;
}
.part-3 {
  position: absolute;
  width: 36%;
  height: 5%;
  left: 32%;
  bottom: 15%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.line-3 {
  position: absolute;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 20%;
  background: none;
  border-bottom: 10px dotted #ffe407;
  animation: changeMe3 5s infinite;
  z-index: 1;
}
.part-4 {
  position: absolute;
  width: 34%;
  height: 5%;
  left: 33%;
  bottom: 20%;
  background: #184b00;
  border-radius: 20px;
  z-index: 1;
}
.line-2 {
  position: absolute;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 20%;
  background: none;
  border-bottom: 10px dotted #ff8529;
  animation: 10s changeMe infinite;
  z-index: 1;
}
.part-5 {
  position: absolute;
  width: 32%;
  height: 5%;
  left: 34%;
  bottom: 25%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.part-6 {
  position: absolute;
  width: 30%;
  height: 5%;
  left: 35%;
  bottom: 30%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.part-7 {
  position: absolute;
  width: 28%;
  height: 5%;
  left: 36%;
  bottom: 35%;
  background: #0c2600;
  border-radius: 20px;
  z-index: 1;
}
.part-8 {
  position: absolute;
  width: 26%;
  height: 5%;
  left: 37%;
  bottom: 40%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.part-9 {
  position: absolute;
  width: 24%;
  height: 5%;
  left: 38%;
  bottom: 45%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.part-10 {
  position: absolute;
  width: 22%;
  height: 5%;
  left: 39%;
  bottom: 50%;
  background: #184b00;
  border-radius: 20px;
  z-index: 1;
}
.part-11 {
  position: absolute;
  width: 20%;
  height: 5%;
  left: 40%;
  bottom: 55%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.part-12 {
  position: absolute;
  width: 18%;
  height: 5%;
  left: 41%;
  bottom: 60%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.part-13 {
  position: absolute;
  width: 16%;
  height: 5%;
  left: 42%;
  bottom: 65%;
  background: #0c2600;
  border-radius: 20px;
  z-index: 1;
}
.part-14 {
  position: absolute;
  width: 14%;
  height: 5%;
  left: 43%;
  bottom: 70%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.part-15 {
  position: absolute;
  width: 12%;
  height: 5%;
  left: 44%;
  bottom: 75%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.part-16 {
  position: absolute;
  width: 10%;
  height: 5%;
  left: 45%;
  bottom: 80%;
  background: #184b00;
  border-radius: 20px;
  z-index: 1;
}
.part-17 {
  position: absolute;
  width: 8%;
  height: 5%;
  left: 46%;
  bottom: 85%;
  background: #143f00;
  border-radius: 20px;
  z-index: 1;
}
.part-18 {
  position: absolute;
  width: 6%;
  height: 5%;
  left: 47%;
  bottom: 90%;
  background: #103200;
  border-radius: 20px;
  z-index: 1;
}
.part-19 {
  position: absolute;
  width: 4%;
  height: 5%;
  left: 48%;
  bottom: 95%;
  background: #0c2600;
  border-radius: 20px;
  z-index: 1;
}
@keyframes changeMe {
  0%,
  100% {
    border-bottom: 10px dotted #ff8529;
  }
  25%,
  75% {
    border-bottom: 10px dotted #ff9b4f;
  }
  50% {
    border-bottom: 10px dotted #ffb176;
  }
}
@keyframes changeMe2 {
  0%,
  100% {
    border-bottom: 10px dotted #c42bf3;
  }
  25%,
  75% {
    border-bottom: 10px dotted #b026da;
  }
  50% {
    border-bottom: 10px dotted #9c22c2;
  }
}
@keyframes changeMe3 {
  0%,
  100% {
    border-bottom: 10px dotted #ffe407;
  }
  25%,
  75% {
    border-bottom: 10px dotted #ffec51;
  }
  50% {
    border-bottom: 10px dotted #fff6b4;
  }
}

</style>

В коде можно поменять цвет огоньков.

Снежный шар

noreply@blogger.com (Наталья) — Sat, 13 Jan 2024 12:40:00 +0000

Впервые шар с "падающим снегом", также известный как "снежный глобус" или "снежный шар", был создан в середине XIX века. Эти шары часто использовались как рождественские украшения и стали символом зимнего праздника. Внутри таких шаров находится модель города или сцены Рождества, а за счет жидкости и специальных элементов создается иллюзия падающего снега.

На шарик можно смотреть бесконечно долго, как на огонь или воду. Сегодня предлагаю украсить свой сайт таким шариком. Шар сделан на CSS. Нашла его здесь.

Выглядит шар так:

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

У каждой детали шара можно поменять цвет. Сделать это можно в том же визуальном редакторе.

<div class="container">
  <div class="snow"></div>
  <div class="tree1"></div>
  <div class="tree2"></div>
  <div class="house">
    <div class="roof1">
      <div class="b1"></div>
      <div class="b2"></div>
    </div>
    <div class="wall1">
      <div class="w3">
        <div class="window1">
          <div class="glass1"></div>
        </div>
      </div>
    </div>
    <div class="wall2">
      <div class="light">
        <div class="w1">
          <div class="window">
            <div class="glass"></div>
          </div>
        </div>
        <div class="w2">
          <div class="window">
            <div class="glass"></div>
          </div>
        </div>
      </div>
      <div class="door">
        <div class="handle"></div>
      </div>
      <div class="snw1"></div>
      <div class="snw2"></div>
    </div>
    <div class="wall3">
      <div class="b3"></div>
      <div class="b4"></div>
      <div class="chimney">
        <div class="top">
          <div class="smoke">
            <div class="s1"></div>
            <div class="s2"></div>
            <div class="s3"></div>
          </div>
          <div class="shne1"></div>
          <div class="shne2"></div>
        </div>
      </div>
      <div class="sn">
        <div class="dr1"></div>
        <div class="dr2"></div>
        <div class="dr3"></div>
      </div>
      <div class="sn1">
        <div class="dr4"></div>
      </div>
      <div class="sh1"></div>
      <div class="sh2"></div>
      <div class="sh3"></div>
      <div class="sh4"></div>
      <div class="sh5"></div>
    </div>
  </div>
  <div class="snowfall"></div>
  <div class="cover"></div>
  <div class="bottom">
    <div class="bt1"></div>
    <div class="bt2"></div>
  </div>
  <div class="fence">
    <div class="fn1">
      <div class="screw"></div>
    </div>
    <div class="fn2">
      <div class="screw"></div>
    </div>
    <div class="fn3">
      <div class="screw"></div>
    </div>
    <div class="stck"></div>
  </div>
<style>
.container{
  height: 350px;
  width: 350px;
background-color: #cbc6d0;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top:0;
  bottom: 0;
  left:0;
  right: 0;
}
.snow{
  height: 40px;
  width: 235px;
  background-color: white;
  position: relative;
  left:60px;
  top:280px;
  border-radius: 8px;
}
.tree1{
  height: 0;
  width: 0;
  border-bottom: 120px solid #5b6b09;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
  left:70px;
  top:120px;
}
.tree2{
  height: 0;
  width: 0;
  border-bottom: 90px solid #718710;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  position: relative;
  left:90px;
  top:30px;
}
.house{
  position: relative;
  bottom:78px;
  left:146px;
}
.roof1{
  height: 60px;
  width: 12px;
  background-color: #7e110f;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  position: relative;
  left:112px;
  bottom:18.5px;
}
.wall1{
  height: 0;
  width: 0;
  border-bottom: 53px solid #c44e0e;
  border-left:30px solid transparent;
  border-right:31px solid transparent;
  position: relative;
  bottom: 75px;
  left:68px;
}
.wall2{
  height:70px;
  background-color: #c44e0e;
  width: 150px;
  position: relative; 
  bottom:75px;
  right: 21px;
}
.wall3{
  background-color: #b40f0c;
  height: 60px;
  width: 105px;
  transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  position: relative;
  bottom:201.5px;
  right: 16.5px;
}
.light{
  background-color: #ef7421;
  width: 90px;
  height: 50px;
  position: relative;
  top:20px;
}
.b1{
  background-color: #460701;
  height: 60px;
  width: 3px;
  position: relative;
  left:9px;
}
.b2{
  background-color: #460701;
  height:6px;
  width:10px;
  position: relative;
  bottom:6px;  
}
.b4{
  background-color: #460701;
  height:59px; 
  width: 3px;
  position: relative;
  left:103px;
  bottom:5px;
}
.b3{
  background-color: #7b0f0c;
  height: 5px;
  width: 106px;
  position: relative;
  top: 55px;
}
.w1,.w2{
  background-color: #700205;
  height: 30px;
  width:25px;
  position:relative; 
}
.w1{
  top:5px;
  left:20px;
}
.w2{
  bottom:25px;
  left:50px;
}
.window{
  background-color:#89c6c5;
  height: 23px;
  width: 19px; 
  border:2px solid white;
  position: relative;
  top:2px;
  left:3px;
}
.glass{
  height: 0;
  width: 0;
  border-top:23px solid rgba(255,255,255,0.5);
  border-right: 17px solid transparent;
}
.w3{
  background-color: #982c19;
  height:18px;
  width: 16px;
  position: relative;
  top:40px;
  right: 3px;
  z-index: 1; 
}
.window1{
  background-color:#89c6c5;
  height: 10px;
  width: 10px;
  border:1.3px solid white;
  position: relative;
  top:2.5px;
}
.glass1{
  height: 0;
  width: 0;
  border-top:10px solid rgba(255,255,255,0.3);
  border-right: 10px solid transparent;
}
.door{
  background-color: #7f1414;
  height: 40px;
  width: 20px;
  position: relative;
  bottom:20px;
  left:112px;
  border-right: 2px solid #ef2021;
}
.handle{
  height: 8px;
  width: 4px;
  background-color: #сссссс;
  position: relative;
  top:16px;
  left:3px;
}
.chimney{
  background-color: #c85012;
  height:22px;
  width: 20px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  position: relative;
  bottom:75px;
  left:55px;
}
.shne1{
  background-color: #ef7421;
  height: 14px;
  width: 14px;
  position: relative;
  bottom: 20px;
  left:5px;
}
.shne2{
  background-color: #ef7421;
  height:10px;
  width: 20px;
  position: relative;
  bottom: 47px; 
}
.top{
  background-color: #c85012;
  height:10px;
  width: 28px;
  position: relative;
  bottom:5px;
  right: 4px; 
}
.smoke{
  position: relative;
  bottom:32px;
  right: 15px;
  animation: smoke 5s infinite;
  -webkit-animation: smoke 5s infinite;
}
@keyframes smoke{
  50%{
    transform: translateX(-5px) translateY(-10px);
    opacity: 0.5;
  }
  100%{
    transform: translateX(10px) translateY(-20px);
    opacity: 0;
  }
}
@-webkit-keyframes smoke{
  50%{
    -webkit-transform: translateX(-5px) translateY(-10px);
    opacity: 0.5;
  }
  100%{
    -webkit-transform: translateX(10px) translateY(-20px);
    opacity: 0;
  }
}
.s1,.s2,.s3{
  background-color: #423f3f;
  height: 10px;
  opacity: 0.2;
  border-radius: 10px;
  position: relative;
  margin-bottom: 2px;
}
.s1{
  width:35px; 
}
.s2{
  width: 27px;
  left:8px;
}
.s3{
  height:7px;
  width: 15px;
  left:25px;
}
.snowfall{
  background: url(https://i.imgur.com/T0mBFg2.png);
  background-size: 350px 200px;
  background-repeat: repeat;
  height: 350px;
  width: 350px;
  position:relative;
  bottom: 493px;
  border-radius: 50%;
  animation:snowfall 5s linear forwards infinite; 
  -webkit-animation:snowfall 5s linear forwards infinite; 
}
@keyframes snowfall{
  0%{
    background-position: 0 0;
  }
  20%{
    background-position: 20px 20px;
  }
  40%{
    background-position: 40px 40px;
  }
  60%{
    background-position: 60px 60px;
  }
  80%{
    background-position: 80px 80px;
  }
  100%{
    background-position: 100px 100px;
  }
}
@-webkit-keyframes snowfall{
  0%{
    background-position: 0 0;
  }
  20%{
    background-position: 20px 20px;
  }
  40%{
    background-position: 40px 40px;
  }
  60%{
    background-position: 60px 60px;
  }
  80%{
    background-position: 80px 80px;
  }
  100%{
    background-position: 100px 100px;
  }
}
.cover{
  background-color: rgba(255,255,255,0.2);
  height: 350px;
  width: 350px;
  border-radius: 50%;
  position: relative;
  bottom:842px;
}
.bottom{
  background-color: #c1272e;
  height:70px; 
  width: 260px;
  position: relative;
  bottom:880px;
  left:47px;
}
.bt1,.bt2{
  background-color: #d33c3c;
  height: 20px;
  width:280px;
  position: relative;
  right: 10px;
  border-radius: 10px; 
}
.bt1{
  bottom: 12px;
}
.bt2{
  top:40px;
}
.sn{
  background-color: white;
  width: 40px;
  height: 5px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  border-radius: 5px;
  position: relative;
  bottom: 36px;
  left:5px;
}
.sn1{
  background-color: white;
  width: 30px;
  height: 5px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  border-radius: 5px;
  position: relative;
  bottom: 41px;
  left:55px;
}
.dr1,.dr2,.dr3,.dr4{
  background-color: white;
  border-radius: 5px;
  position: relative;
  height: 10px;
  width: 4px;
}
.dr1{
  top:4px;
  left:5px;
}
.dr2{
  bottom:8px;
  left:15px;
}
.dr3{
  height: 8px;
  width: 8px;
  border-radius: 50%;
  left:29px;
  bottom:19px;
}
.dr4{
  left:22px;
}
.snw1{
  background-color: white;
  height: 15px;
  width: 25px;
  position: relative;
  bottom:30px;
  left:7px;
  border-radius: 20px 20px 0 0;
}
.snw2{
  background-color: white;
  height: 12px;
  width: 12px;
  position: relative;
  bottom:40px;
  left:31px;
  border-radius: 50%
}
.sh1,.sh2,.sh3,.sh4,.sh5{
  background-color: #d33c3c;
  height: 6px;
  transform: skew(30deg);
  -webkit-transform: skew(30deg);
  width: 23px;
  border-radius: 15px;
  position: relative;
}
.sh1{
  bottom:56px;
  left:70px;
}
.sh2{
  bottom:68px;
  left:2px;
}
.sh3{
  bottom:95px;
  left:47px;
}
.sh4{
  bottom:108px;
  left:6px;
}
.sh5{
  bottom:95px;
  left:38px;
}
.fence{
  position: relative;
  bottom: 1008px;
  left:103px;
}
.fn1,.fn2,.fn3{
  background-color: #b40f0c;
  height: 25px;
  width: 7px;
  position: relative;
  border-radius: 25px 25px 0 0;
}
.fn2{
  bottom:25px;
  left:12px;
}
.fn3{
  bottom:50px;
  left:24px;
}
.screw{
  background-color: #cccccc;
  height: 3px;
  width: 3px;
  position: relative;
  border-radius: 50%;
  left:1.6px;
  top:11px;
  z-index: 2;
}
.stck{
  background-color: #7d151f;
  position: relative;
  width: 46px;
  height: 6px;
  right: 8px;
  bottom:65px;
}
</style>

Несколько деталей у каких можно заменить цвет, я отметила в коде. Остальные цвета поменять самостоятельно не составит труда, так как в коде есть название каждой детали.

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

Оранжевым - центральную полоску нижней подставки.

Зелёным - цвет первого дерева.

Синим - цвет второго дерева.

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

Ёлки для украшения блога

noreply@blogger.com (Наталья) — Sat, 06 Jan 2024 00:54:00 +0000

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

Точную дату появления традиции украшать ёлку на Новый год в России назвать сложно, так как она менялась на протяжении истории. Однако известно, что в допетровской Руси ёлки не украшали, так как этот обычай пришёл к нам из Европы благодаря Петру I. Он ввёл традицию празднования Нового года и повелел ставить на праздник ёлку. Сегодня предлагаю посмотреть несколько ёлочек, которые можно установить на сайт перед Новым годом или Рождеством.

Елка 1

У ёлочки мигает свет от звезды. Выглядит ёлка так:

<div class="container">
  <div class="tree">
    <div class="tree-triangle1"></div>
    <div class="tree-triangle2"></div>
    <div class="tree-triangle3"></div>
    <div class="ornament or1">
      <div class="shine"></div>
    </div>
    <div class="ornament or2">
      <div class="shine"></div>
    </div>
    <div class="ornament or3">
      <div class="shine"></div>
    </div>
    <div class="ornament or4">
      <div class="shine"></div>
    </div>
    <div class="ornament or5">
      <div class="shine"></div>
    </div>
    <div class="ornament or6">
      <div class="shine"></div>
    </div>
    <div class="trunk"></div>
    <div class="star-light"></div>
    <div class="star"></div>
    <div class="star-highlight"></div>
  </div>
</div>
<style>
.container {
  position: relative;
  width: 380px;
  height: 380px;
  margin: auto;
  margin-top: 20vh;
  background: #0b1a5e;
  border-radius: 120px;
  z-index: -2;
}
.tree {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 13%;
  top: 5%;
}
.tree-triangle3 {
  position: absolute;
  width: 66%;
  height: 36%;
  bottom: 20%;
  left: 3.5%;
  background: #034f33;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tree-triangle2 {
  position: absolute;
  width: 53%;
  height: 33%;
  bottom: 35%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: #046944;
  z-index: 2;
}
.tree-triangle1 {
  position: absolute;
  width: 42%;
  height: 25%;
  bottom: 50%;
  left: 15.5%;
  background: #038052;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 3;
}
.trunk {
  position: absolute;
  width: 10%;
  height: 16%;
  background: #66503e;
  z-index: -1;
  bottom: 5%;
  left: 32%;
}
.ornament {
  position: absolute;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  box-shadow: 0 0 3px #033b26;
  /*   background: #eb5252; */
  z-index: 4;
}
.shine {
  position: absolute;
  width: 55%;
  height: 55%;
  top: 10%;
  right: 11%;
  border-radius: 50%;
  background: white;
  filter: opacity(60%);
}
.or1 {
  left: 28%;
  top: 34%;
  background: #0742d9;
}
.or2 {
  left: 40%;
  top: 45%;
  background: #c91212;
}
.or3 {
  left: 20%;
  top: 49%;
  background: #dbb700;
}
.or4 {
  left: 34%;
  top: 62%;
  background: #0742d9;
}
.or5 {
  left: 50%;
  top: 69%;
  background: #dbb700;
}
.or6 {
  left: 15%;
  top: 68%;
  background: #c91212;
}
.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffe380;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}
.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #fff1bf;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    50% 70%,
    50% 60%,
    50% 46%,
    50% 36%
  );
  left: 26.5%;
  top: 11%;
  z-index: 4;
}
.star-light {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #fff1bf;
  filter: opacity(0.7);
  border-radius: 50%;
  left: 26.5%;
  top: 11%;
  z-index: 3;
  animation: star 3s ease-in-out infinite;
}
@keyframes star {
  100% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  0% {
    transform: scale(0.5);
  }
}
</style>

В коде можно поменять цвета оформления:

Фон - выделила в коде красным

Цвета треугольников ёлки 3 шт. - выделила зелёным

Цвета ёлочных игрушек (6 шт.) - выделила в коде оранжевым цветом

Цвет звезды (2 шт.) - салатовым

Цвет сияния звезды - синим цветом

Ёлка 2

У этой ёлочки мигает не только звезда, но и игрушки.

<div class="container">
  <div class="tree">
  </div>
  <div class="ornament large orange or1">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or2">
    <div class="shine"></div>
  </div>
  <div class="ornament small green or3">
    <div class="shine"></div>
  </div>
  <div class="ornament small pink or4">
    <div class="shine"></div>
  </div>
  <div class="ornament large purple or5">
    <div class="shine">
    </div>
  </div>
  <div class="ornament medium purple or6">
    <div class="shine"></div>
  </div>
  <div class="ornament medium blue or7">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or8">
    <div class="shine"></div>
  </div>
  <div class="ornament medium orange or9">
    <div class="shine"></div>
  </div>
  <div class="ornament medium green or10">
    <div class="shine"></div>
  </div>
  <div class="ornament large pink or11">
    <div class="shine"></div>
  </div>
  <div class="ornament blue large or12">
    <div class="shine"></div>
  </div>
  <div class="star-light"></div>
  <div class="star"></div>
  <div class="star-highlight"></div>
  <div class="trunk"></div>
  <div class="floor"></div>
</div>
<style>
.container {
  position: relative;
/*   background: #1c1c1c; */
  width: 460px;
  height: 460px;
  margin: auto;
/*   border: 1px solid; */
/*   border-radius: 100px; */
  margin-top: 15vh;
}
.tree {
  position: absolute;
  background: #2e7055;
  width: 65%;
  height: 70%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  bottom: 13%;
  left: 18%;
  z-index: 2;
}
.floor {
  position: absolute;
  width: 35%;
  height: 15%;
  border-radius: 50%;
  background: #69122a;
  bottom: -8%;
  left: 32%;
}
.star {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffdc5e;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}
.star-highlight {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffedad;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
  left: 40.5%;
  top: 5%;
  z-index: 3;
}
.star-light {
  position: absolute;
  width: 20%;
  height: 20%;
  background: #ffefb5;
  filter: opacity(.7);
  border-radius: 50%;
  left: 40.5%;
  top: 5%;
  z-index: 2;
  animation: star 3s ease-in-out infinite;
}
.trunk {
  position: absolute;
  height: 15%;
  width: 10%;
  background: #2e2713;
  bottom: 0;
  left: 45%;
  z-index:1;
}
.ornament {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}
.large {
  height: 10%;
  width: 10%;
  animation: lights 1.5s linear infinite;
}
.medium {
  height: 7%;
  width: 7%;
  animation: lights 1.4s linear infinite;
}
.small {
  width: 5%;
  height: 5%;
  animation: lights 1.2s linear infinite;
}
.orange {
   background: #FDC590;
}
.pink {
  background: #f799d2;
}
.green {
  background: #9af5c6;
}
.blue {
  background: #7dd4ff;
}
.purple {
  background: #afa6ff;
}
.or1 {
  left: 33%;
  top: 42%;
}
.or2 {
  top: 26%;
  left: 52%;
}
.or3 {
  top: 38%;
  left: 48%;
}
.or4 {
  top: 29%;
  left: 41.5%;
}
.or5 {
  top: 59%;
  left: 35%;
}
.or6 {
  top: 41%;
  left: 59%;
}
.or7 {
  top: 51%;
  right: 42%;
}
.or8 {
  top: 55%;
  right: 26%;
}
.or9 {
  top: 67%;
  left: 55%;
}
.or10 {
  top: 75%;
  left: 42%;
}
.or11 {
  top: 70%;
  left: 21%;
}
.or12 {
  top: 73%;
  right: 22.5%;
}
.shine {
  position: absolute;
  width: 60%;
  height: 60%;
  background: white;
  border-radius: 50%;
  filter: opacity(48%);
  top: 6%;
  right: 10%;
}
@keyframes lights {
  100% {
    filter: brightness(.7);
  }
  50% {
      filter: brightness(1.2);
  }
  0% {
      filter: brightness(.7);
  }
}
@keyframes star {
  100% {
    transform: scale(.5);
  }
  50% {
    transform: scale(1.1);
  }
  0% {
      transform: scale(.5);
  }
}
</style>

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

Проверить работу ёлочек можно в визуальном редакторе.

Ёлочки нашла на сайте Сodepen.

Как украсить сайт на Новый год?

noreply@blogger.com (Наталья) — Sat, 30 Dec 2023 04:29:00 +0000

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

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

Сайты с кодами украшений

Выживи сам

http://vichivisam.ru/?p=26425

На сайте можно найти гирлянды, ёлки, Санта Клаусы и другую новогоднюю атрибутику.

Эксперт Плюс

https://www.expertplus.ru/information/stati/95/

На сайте найдёте снег, снежинки, гирлянды и ёлки.

Graphicmama

https://graphicmama.com/blog/decorate-your-website-for-christmas/

Советы для украшения сайта

Uguide

https://uguide.ru/novogodnie-skripty-i-ukrashenija-dlja-ucoz

Скрипты для украшения сайтов и блогов.

Bashooka

https://bashooka.com/coding/25-cool-css-html5-christmas-animation-effects/

Разнообразные украшения на Рождество и Новый год.

Webanetlabs

https://webanetlabs.net/forum/30-247-1

Ёлки, звёзды, гирлянды и многое другое.

Sitespectr

https://sitespectr.ru/new-year/?ysclid=lpz033foqn441984791

Гирлянды и ёлки

Tproger

https://tproger.ru/digest/new-year-scripts?ysclid=lpz03755q6332307627

Гирлянды, снег и многое другое.

Forumd

https://forumd.ru/viewtopic.php?id=6402

Гирлянды, еловые ветки и т. п.

Форум форумов

https://help.forum2x2.ru/t21375-topic

Гирлянды, снег и прочие украшения.

Dsergienko

https://dsergienko.blogspot.com/2023/07/novogodnie-ukrashenija-dlja-sajta-bloga.html

Снег, гирлянды, Санта Клаус

Коды для украшения с блога Интернет Shabashka

Коды подходят для блогов на Блогспоте. Проверены на родном шаблоне "Корпорация чудеса".

Ёлочная игрушка CSS

noreply@blogger.com (Наталья) — Sun, 24 Dec 2023 04:44:00 +0000

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

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

Выглядит игрушка так:

Шарик вращается, точнее вращаются верхние лепестки у шара, но создаётся иллюзия, что вращается именно игрушка.

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

Код игрушки

<div style="text-align: center;"><span style="font-size: x-large;"><span style="color: #2b00fe;"><b><i>С Новым годом и Рождеством!</i></b></span></span>
  <div aria-label="Ornament" class="ornament">
	<div class="ornament__hoop"></div>
	<div class="ornament__cap">
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
		<div class="ornament__cap-petal-shadow"></div>
	</div>
	<div class="ornament__mouth"></div>
	<div class="ornament__bulb"></div>

<style>
.ornament 
 {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
:root {
	--bg: #c30031;
	--fg: #002b66;
	--animDur: 4s;
	font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}

.ornament, .ornament__bulb {
	width: 6.75em;
}
.ornament {
	position: relative;
	height: 8.5em;
}
.ornament, .ornament div {
	transform-style: preserve-3d;
}
.ornament div {
	position: absolute;
}
.ornament__hoop, .ornament__bulb {
	border-radius: 50%;
}
.ornament__hoop {
	animation: hoopRotate var(--animDur) linear infinite;
	box-shadow:
		0 0 0.05em 0.05em #fffa inset,
		0 0 0 0.1em #848484 inset;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1em;
	height: 1em;
}
.ornament__cap, .ornament__cap-petal, .ornament__cap-petal-shadow {
	height: 0.9em;
}
.ornament__cap, .ornament__mouth {
	top: 0.8em;
	left: 2.5em;
	width: 1.75em;
}
.ornament__cap {
	animation: petalsRotate var(--animDur) linear infinite;
}
.ornament__cap-petal, .ornament__cap-petal-shadow {
	--clipPath: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
	clip-path: var(--clipPath);
	-webkit-clip-path: var(--clipPath);
	left: 50%;
	width: 0.7em;
	transform-origin: 50% 0;
}
.ornament__cap-petal {
	animation: petalGlare var(--animDur) linear infinite;
	background-color: #ae8a71;
	background-image:
		linear-gradient(30deg,#d3c0b2 24%,#d3c0b200 25%),
		linear-gradient(-30deg,#d3c0b2 24%,#d3c0b200 25%),
		radial-gradient(0.1em 0.1em at 0.2em 0.2em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.2em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.2em 0.4em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.4em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.2em 0.6em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.6em,#d3c0b2 49%,#d3c0b200 50%),
		radial-gradient(0.1em 0.1em at 0.2em 0.25em,#0003 49%,#0000 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.25em,#0003 49%,#0000 50%),
		radial-gradient(0.1em 0.1em at 0.2em 0.45em,#0003 49%,#0000 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.45em,#0003 49%,#0000 50%),
		radial-gradient(0.1em 0.1em at 0.2em 0.65em,#0003 49%,#0000 50%),
		radial-gradient(0.1em 0.1em at 0.5em 0.65em,#0003 49%,#0000 50%);
	box-shadow:
		0.1em 0 0 #d3c0b2 inset,
		-0.1em 0 0 #d3c0b2 inset;
	transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(even) {
	animation-delay: calc(var(--animDur) / -8);
	background-color: #d3c0b2;
}
.ornament__cap-petal:nth-child(2) {
	transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(3) {
	transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(4) {
	transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(5) {
	transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(6) {
	transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(7) {
	transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(8) {
	transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal-shadow {
	background-color: #0007;
	transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(10) {
	transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(11) {
	transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(12) {
	transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(13) {
	transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(14) {
	transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(15) {
	transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:last-child {
	transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__mouth, .ornament__bulb {
	background-color: var(--fg);
}
.ornament__mouth {
	box-shadow:
		0 0.2em 0 #d3c0b2 inset,
		0.2em 0 0.2em #000a inset,
		-0.4em 0 0.2em #000a inset,
		0 -0.1em 0.1em var(--fg) inset,
		-0.9em 0 0.2em #000a inset,
		0 0.1em 0.1em #0007;
	height: 1.1em;
	will-change: transform;
}
.ornament__bulb {
	background-image:
		radial-gradient(100% 100% at 30% 30%,#fff7,#fff0 50%),
		radial-gradient(25% 60% at 95% 40%,#fff3 5%,#fff0 50%),
		radial-gradient(100% 100% at 90% 90%,#0004,#0000 50%),
		linear-gradient(90deg,#0000,#0005);
	box-shadow:
		0.4em 0.4em 0.5em #0007 inset,
		0 0 0.5em #0007 inset;
	top: 1.75em;
	left: 0;
	height: 6.75em;
	transform: translateZ(-1px);
}
{
	:root {
		--bg: #002b66;
		--fg: #c30031;
	}
}
/* Animations */
@keyframes hoopRotate {
	from, 50%, to {
		box-shadow:
			0 0 0.05em 0.05em #fffa inset,
			0 0 0 0.1em #848484 inset;
		width: 1em;
	}
	25%, 75% {
		box-shadow:
			0 0 0.05em 0.05em #fffa inset,
			0 0 0 0.1em #fffa inset;
		width: 0.1em;
	}
}
@keyframes petalGlare {
	from, 25%, 50%, 75%, to {
		background-color: #ae8a71;
	}
	12.5%, 37.5%, 62.5%, 87.5% {
		background-color: #d3c0b2;
	}
}
@keyframes petalsRotate {
	from {
		transform: rotateY(0);
	}
	to {
		transform: rotateY(1turn);
	}
}</style>
</div></div>

Изменить в коде можно текст и его цвет, а так же цвета игрушки.

Текст — выделила красным

Цвет текста — выделила в коде зелёным

Так как цвет игрушки градиентный, то и менять желательно на подобный. В любом генераторе градиента (например: https://cssgradient.io/) создайте нужные оттенки и замените. Выделила в коде участок синим цветом.

Тень игрушки в коде отметила оранжевым, менять можно на шестизначные коды, вот такого вида: #0000FF;

Верхний столбик у игрушки в коде выделила фиолетовым. Менять нужно 2 цвета.

Поменяв цвета, можно сделать более яркие игрушки. У меня получились такие:

Спящий Санта Клаус

noreply@blogger.com (Наталья) — Sun, 17 Dec 2023 01:00:00 +0000

Картинку сладко спящего и громко храпящего, судя по изображению, Санта Клауса нашла на Сodepen.io у пользователя ChhaviKhandelwal. Живая картинка сделана на CSS, без скриптов. Она довольно большая и будет хорошо смотреться только в статье или на страницах. Попробовала разместить её в подвале, но она занимает много места. Выглядит Санта так:

Код Санта Клауса

<div class="circular-bg"> <div class="moon"></div> <div class="snores"> <div class="snore snore1">Z</div> <div class="snore snore2">Z</div> <div class="snore snore3">Z</div> </div> <div class="santa"> <div class="disc"></div> <div class="hat"> <div class="hat-space"></div> </div> <div class="furr"></div> <div class="face"> <div class="eyebrows eyebrows--left"></div> <div class="eyebrows eyebrows--right"></div> <div class="nose"></div> <div class="beard"> <div class="beard--left"></div> <div class="beard--right"></div> </div> <div class="mouth"> </div> </div> <div class="hand--up"> <div class="arm--right"></div> <div class="hand--right"></div> </div> <div class="hand--left"></div> <div class="stomach"> <div class="belt-buckle"></div> </div> <div class="leg--up"></div> <div class="leg--down"></div> </div> <div class="christmas-tree"> <div class="tree-top4"></div> <div class="tree-top3"></div> <div class="tree-top2"></div> <div class="tree-top1"></div> <div class="tree-bottom"></div> </div> <div class="christmas-tree-small"> <div class="tree-top4"></div> <div class="tree-top3"></div> <div class="tree-top2"></div> <div class="tree-top1"></div> <div class="tree-bottom"></div> </div> <div class="christmas-tree-white"> <div class="tree-top4"></div> <div class="tree-top3"></div> <div class="tree-top2"></div> <div class="tree-top1"></div> <div class="tree-bottom"></div> </div> <div class="gift gift--orange"> <div class="gift-bow--left"></div> <div class="gift-bow--right"></div> <div class="gift-ribbon"></div> <div class="gift-top"></div> <div class="gift-bottom"></div> </div> <div class="gift"> <div class="gift-bow--left"></div> <div class="gift-bow--right"></div> <div class="gift-ribbon"></div> <div class="gift-top"></div> <div class="gift-bottom"></div> </div> </div> <style> { box-sizing: border-box; } .snores { position: absolute; left: 45%; top: 45%; font-family: cursive; } .snore { font-size: 28px; color: #eeeff1; position: absolute; top: 40px; } .snore1 { animation: snore-anim 3s linear 0s infinite; } .snore2 { animation: snore-anim 3s linear 1s infinite; } .snore3 { animation: snore-anim 3s linear 2s infinite; } @keyframes snore-anim { 0% { opacity: 1; transform: translate(0,0) scale(0.5); } 50% { opacity: 0.7; transform: translate(20px, -70px) scale(1.2); } 100% { opacity: 0; transform: translate(50px, -140px) scale(0.5); } } .disc { background-color: #c0c4c7; border-radius: 50%; width: 285px; height: 45px; position: absolute; left: -55px; bottom: -35px; z-index: -2; } .circular-bg { background-color: #EEEEEE; border-radius: 50%; width: 500px;height: 500px; box-shadow: 0 550px 0 -250px #093D55 inset; border: 1px solid; position: relative; z-index: 5; margin: 20px auto; } .moon { width: 80px; height: 80px; box-shadow: -40px 0px 0 0 #fff inset; border-radius: 50%; background-color: #093D55; position: absolute; right: 130px; top: 50px; } .santa { position: absolute; left: 35%; bottom: 25%; } .hat-space { width: 75px; height: 100px; box-shadow: 30px 0 0 0 #fff inset; border-radius: 50%; background-color: transparent; position: absolute; left: 45px; bottom: -18px; transform: rotate(35deg); } .hat { width: 100px; height: 65px; background-color: #DA4642; border-radius: 100% 20% 20% 20%; position: absolute; left: -60px; bottom: 20px; transform: rotate(-15deg); } .furr { width: 35px; height: 35px; border-radius: 50%; background-color: #fff; position: absolute; bottom: -10px; right: 40px; } .face { width: 60px; height: 90px; box-shadow: 30px 0px 0 0 #F5CFC1 inset; border-radius: 50%; background-color: transparent; position: absolute; left: 10px; bottom: 10px; transform: rotate(20deg); } .eyebrows { width: 10px; height: 23px; border-radius: 50%; background-color: transparent; position: absolute; transform: rotate(-15deg); animation: eye-scale ease-in-out 1.5s infinite; } @keyframes eye-scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .eyebrows--left { left: 10px; bottom: 10px; box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ; } .eyebrows--right { left: 10px; bottom: 50px; box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ; transform: rotate(10deg); } .nose { width: 1px; height: 1px; border-radius: 50%; background-color: transparent; position: absolute; box-shadow: 5px -8px 0 2.5px #F5CFC1,10px -12px 0 12px #edb39e; left: 23px; bottom: 27px; z-index:1; } .beard { width: 65px; height: 65px; border-radius: 50%; background-color: #fff; position: absolute; top: -4px; left: 29px; transform: rotate(25deg); box-shadow: 15px 40px 0 -5px #fff, 35px 40px 0 -3px #fff, 20px -15px 0 0px #fff; } .beard--left { width: 30px; height: 15px; border-radius: 0 0 50% 50%; background-color: #fff; position: absolute; right: 15px; bottom: -52px; transform: rotate(-30deg); } .beard--right { width: 30px; height: 15px; border-radius:50% 50% 0 0; background-color: #fff; position: absolute; right: 55px; bottom: 40px; transform: rotate(-10deg); } .mouth { width: 12px; height: 12px; border-radius:50%; background-color: #F2ABA1; position: absolute; right: -5px; bottom: 30px; animation: mouth-scale ease-in-out 1.5s infinite; } @keyframes mouth-scale { 0% { transform: scale(1); } 100% { transform: scale(1.4); } } @keyframes arm-anim { 0% { transform: rotate(-25deg); } 30% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 70% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 100% { width: 26px; height: 65px; border-radius: 20px 20px 0 0; background-color: transparent; transform: rotate(-25deg); box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; } } .hand--up { position: absolute; left: 95px; bottom: 85px; } .arm--right { width: 26px; height: 65px; border-radius: 20px 20px 0 0; background-color: transparent; position: absolute; transform: rotate(-25deg); box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; animation: arm-anim 6s linear 20ms infinite; transform-origin: 0 15px; } .hand--right { width: 18px; height: 25px; border-radius: 0 0 50px 20px; background-color: #4C4C4C; position: absolute; transform: rotate(-20deg); transform-origin: 0 0; animation: hand-anim 6s linear 20ms infinite; } @keyframes hand-anim { 0% { transform: scale(1) translate(30px,64px) rotate(-25deg); } 15% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 30% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 40% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 50% { transform: scaleX(1) translate(65px, 8px) rotate(-85deg); } 60% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 70% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 85% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 100% { transform: scale(1) translate(30px,64px) rotate(-25deg); } } .hand--right:before { content: ''; width: 10px; height: 15px; border-radius: 5px 0 50% 50%; background-color: #4C4C4C; position: absolute; left: -5px; bottom: 10px; transform: rotate(30deg); } .hand--left { width: 28px; height: 18px; border-radius: 25px 0 0px 70px; background-color: #4C4C4C; position: absolute; left: -10px; bottom: -5px; z-index: -1; } .stomach { width: 110px; height: 115px; border-radius: 50%; background-color: #DA4642; position: absolute; left: 80px; bottom: -25px; z-index: -1; box-shadow: -10px -4px 0 0 #DA4642 inset, -20px -4px 0 0 #000 inset, -10px -4px 0 0 #fff inset; } .belt-buckle { width: 10px; height: 15px; border-radius:4px; border: 4px solid #FD9223; background-color: transparent; position: absolute; left: 73px; bottom: 15px; transform: rotate(30deg); } .leg--up { width: 25px; height: 25px; border-radius:4px; background-color: #B9322E; position: absolute; left: 183px; bottom: 18px; z-index: -3; } .leg--up:after { content: ''; width: 22px; height: 30px; border-radius:4px 10px 50% 50%; background-color: #4C4C4C; position: absolute; left: 30px; bottom: -3px; box-shadow: -10px -0px 0 0 #fff; } .leg--down { width: 38px; height: 25px; border-radius:4px; background-color: #B9322E; position: absolute; left: 170px; bottom: -8px; z-index: -2; } .leg--down:after { content: ''; width: 22px; height: 30px; border-radius:4px 10px 50% 50%; background-color: #4C4C4C; position: absolute; left: 35px; bottom: -5px; box-shadow: -10px -0px 0 0 #fff; } .christmas-tree { width: 1px; height: 1px; position: absolute; right: 105px; top: 270px; z-index: 7; } .tree-top1 { width: 20px; height: 20px; border-radius:50% 0px 50% 500px; background-color: #B8DAD6; position: absolute; left: 35px; bottom: -5px; border: 1px solid #77858B; transform: rotate(-45deg); border-bottom-color: transparent; border-left-color: transparent; } .tree-top1:after { content: 'aaa'; color: transparent; text-decoration-color: #77858B; text-decoration-style: wavy; text-decoration-line: underline; position: absolute; left: 2px; bottom: 2px; transform: rotate(45deg); } .tree-top2 { width: 30px; height: 30px; border-radius:50% 0px 50% 500px; background-color: #B8DAD6; position: absolute; left: 30px; bottom: -25px; border: 1px solid #77858B; transform: rotate(-45deg); border-bottom-color: transparent; border-left-color: transparent; } .tree-top2:after { content: 'aaaaa'; color: transparent; text-decoration-color: #77858B; text-decoration-style: wavy; text-decoration-line: underline; border-radius:50% 0px 50% 100px; position: absolute; left: -2px; bottom: 9px; transform: rotate(45deg); } .tree-top3 { width: 40px; height: 40px; border-radius:50% 0px 50% 200px; background-color: #B8DAD6; position: absolute; left: 25px; bottom: -45px; border: 1px solid #77858B; transform: rotate(-45deg); border-bottom-color: transparent; border-left-color: transparent; } .tree-top3:after { content: 'aaaaaa'; color: transparent; text-decoration-color: #77858B; text-decoration-style: wavy; text-decoration-line: underline; position: absolute; left: -4px; bottom: 12px; transform: rotate(45deg); } .tree-top4 { width: 50px; height: 50px; border-radius:50% 0px 50% 500px; background-color: #B8DAD6; position: absolute; left: 22px; bottom: -67px; border: 1px solid #77858B; transform: rotate(-45deg); box-shadow: 10px -5px 5px 0 #A0C09F inset; border-bottom-color: transparent; border-left-color: transparent; } .tree-top4:after { content: 'aaaaaaaa'; color: transparent; text-decoration-color: #77858B; text-decoration-style: wavy; text-decoration-line: underline; position: absolute; left: -3px; bottom: 16px; transform: rotate(45deg); } .tree-bottom { width: 5px; height: 22px; border-radius:5px 5px 0 0; background-color: #744A38; position: absolute; left: 43px; bottom: -65px; } .christmas-tree-white { position: absolute; left: 20px; top: 290px; z-index: 7; transform: scale(0.8); } .christmas-tree-white .tree-top4, .christmas-tree-white .tree-top3, .christmas-tree-white .tree-top2, .christmas-tree-white .tree-top1{ background-color: #fff; } .christmas-tree-small { position: absolute; left: 68px; top: 300px; z-index: 7; transform: scale(0.5); } .christmas-tree-small .tree-bottom { width: 5px; height: 15px; bottom: -60px; } .gift{ position: absolute; right: 35px; top: 335px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; transform: rotate(-10deg); z-index: 8; } .gift-top { width: 25px; height: 5px; background-color: #C9EAF4; border: 1px solid #84c6e0; border-radius: 3px; } .gift-bottom { width: 23px; height: 20px; background-color: #C9EAF4; border-radius: 3px; } .gift-ribbon { width: 4px; height: 25px; background-color: #DF6561; position: absolute; border-radius: 2px; } .gift-bow--left { width: 8px; height: 8px; background-color: #DF6561; position: absolute; border-radius: 0 20px 0 20px; top: -7px; left: 9px; } .gift-bow--right { width: 8px; height: 8px; background-color: #DF6561; position: absolute; border-radius: 0 20px 0 20px; top: -7px; left: 13px; transform: scaleX(-1); } .gift--orange { background-color: orange; transform: rotate(10deg); right: 55px; } .gift--orange .gift-top, .gift--orange .gift-bottom { background-color: orange; } </style>

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

Скрипт гирлянды на Блоггер

noreply@blogger.com (Наталья) — Sat, 09 Dec 2023 23:18:00 +0000

Близится Новый год и по традиции мы все украшаем свои дома и квартиры: устанавливаем ёлки, развешиваем мишуру, клеем на окна снежинки. Так же и в интернете все владельцы сайтов и блогов спешат прикрепить гирлянды, запустить на страницы снежинки и снег, установить картинки ёлочек, Дедов Морозов и Снегурочек. Вот и сегодня я предлагаю вам посмотреть на ещё одно украшение — гирлянду. Увидела её на сайте https://atuin.ru/.

На блоге ИШ есть много статей про новогодние атрибуты, которые вам помогут украсить сайт. Читайте:

Гирлянда для Blogger на CSS

Декор для Нового года на Blogger - гирлянды

Новогодние гирлянды

Снежинки CSS на сайт

Скрипты для украшения блога на Блоггер

Код гирлянды

<div class="gir_1" id="gir"></div>
<style>#gir {
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('адрес картинки');
    height: 62px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}  
.gir_1 {
    background-position: 0 0
}  
.gir_2 {
    background-position: 0 -62px
}  
.gir_3 {
    background-position: 0 -124px
}</style>
<script>function gir() {
    let nums = document.getElementById('gir').className; 
    if(nums == 'gir_1') {document.getElementById('gir').className='gir_2';}  
    if(nums == 'gir_2') {document.getElementById('gir').className='gir_3';}  
    if(nums == 'gir_3') {document.getElementById('gir').className='gir_1';} 
}  
setInterval(gir, 500);    </script>

А выглядит гирлянда так:

В живую посмотреть на мигающие огоньки можно на тестовом блоге.

Гирлянду устанавливаем в шаблон блога: Тема — Изменить XTML, ставить код нужно выше тега </body>.

В коде не забудьте поставить адрес картинки, выделила красным. Вот и сама картинка:

Как на Блоггере взять адрес картинки знают все, но напомню:

1) Картинку скачайте и установите у себя на блоге в любом сообщении (статье).

Перейдите в редакторе сообщений в режим HTML, скопируйте адрес изображения (он довольно длинный), копируем от кавычек до кавычек, теперь картинку из сообщения можно удалить.

Rufus сломал флешку

noreply@blogger.com (Наталья) — Sun, 03 Dec 2023 10:07:00 +0000

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

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

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

Почему "сломалась" флешка?

Причины неработоспособности флешки в этом случае могут быть разные:

Самая частая — неправильное форматирование флешки. Настраивая Rufus, можно неправильно выбрать файловую систему форматирования. Выбрав NTFS, другие операционные системы, например macOS или Linux, не смогут прочитать флешку. Следует выбрать FAT32, так как она наиболее подходит для большинства систем, в том числе Windows.

Сломаться накопитель может из-за некорректного скачивание образа операционной системы или ошибки во время записи.

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

Проблема невидимости может быть в том, что Rufus изменил загрузочный сектор флешки. Загрузочный сектор — это специальная область на флешке, которая содержит информацию о загрузке операционной системы. Если Rufus производит изменения в загрузочном секторе, то компьютер перестать видеть флешку, так как не сможет правильно распознавать эту информацию.

Как восстановить флешку?

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

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

Я воспользовалась инструментом Управление дисками. Кликнула правой кнопкой по Пуску.

В контекстном меню съёмного устройства вызовите команду форматирования.

В сплывающих окнах нажать ОК.

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

После этого флешка появилась везде и Руфус смог создать загрузочную флешку.

Генерация текста с помощью нейросетей

noreply@blogger.com (Наталья) — Sun, 12 Nov 2023 08:30:00 +0000

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

Для использования сервисов необходимо выбрать тему текста, указать его объем или ввести ключевые слова и нажать на кнопку "Генерировать текст". Через несколько минут вы получите готовый текст, который можно использовать для своих целей.

Плюсы сгенерированного текста

– Скорость: нейросети могут генерировать огромное количество текста за короткий промежуток времени.

– Качество: нейросети способны создавать текст, который выглядит естественно и не отличается от текста, написанного человеком.

– Разнообразие: сервисы могут генерировать текст на любую тему и в любом стиле.

– Стоимость: использование нейросетей для генерации текста может быть значительно дешевле, чем услуги профессиональных авторов. А для несложных текстов можно найти сервисы с бесплатной генерацией текстов.

Минусы сгенерированного текста

– Ограниченность: нейросетям может не хватать креативности и способности генерировать уникальные идеи.

– Непредсказуемость: иногда нейросети могут генерировать неприемлемый или неэтичный контент.

– Сложность в управлении: нейросети требуют определенного уровня знаний и опыта для настройки и управления ими.

– Отсутствие эмпатии: в отличие от людей, нейросети не могут передать эмоции и чувства в тексте.

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

Например, Яндекс Алиса сразу предупреждает об этом:

Нейросети для создания текста

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

Алиса - сервис бесплатный. Яндекс научил Алису генерировать тексты и предлагать идеи. Нужно только сказать "Алиса, давай придумаем" и задавать любые вопросы и ставить задачи. Алиса умеет придумывать:

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

https://shedevrum.ai/https://ya.ru/alisa_davay_pridumaem

Порфирьевич - бесплатный. Умеет генерировать продолжение текста на любую тему в стиле известных писателей и поэтов.

https://porfirevich.ru/

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

https://www.jasper.ai/

Copy.ai - этот инструмент предназначен для создания текстового контента на основе заданных ключевых слов и тем. Есть бесплатная пробная версия.

https://www.copy.ai/

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

https://smodin.io/ru/chat

Copymonkey - нужна авторизация через Google или почту. Бесплатный тариф - 3 текста в неделю. Умеет создавать статьи и SEO-тексты, посты для соцсетей, описания товаров и т.п. https://www.copymonkey.app/

ReText AI - базовый ограниченный функционал бесплатный. Умеет делать рерайт, сокращать или увеличивать текст.

https://retext.ai/ru

ChatGPT Bot - бесплатно, требуется аккаунт в Телеграм.

https://t.me/chatsgpts_bot

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

https://developers.sber.ru/portal/products/gigachat

TurboText - сервис для создания контента. у TurboText 9 разных генераторов, которые могут:

рисовать изображение по описанию
отвечать на вопросы и решает разные задачи
перефразировать текст без потери смысла
переводить на 89 языков
писать отзывы к товарам на основе их описаний и изображения
описывает товар на основе его характеристик или фотографии
и т. д.

Имеется бесплатный тариф: все генераторы, до 2 генераций в день в порядке очереди.

https://turbotext.pro

Wordify - сервис пишет тексты по запросу для любых: посты для соцсетей, школьные рефераты, бизнес-планы, описания для товаров. Бесплатно для тестирования предоставляют 100 000 символов. Далее платно.

https://wordify.ru

Aurico - условно бесплатный сервис. Нейросеть подходит для генерации текстов в блоги, постов в соцсети, создания писем и описаний, рекламы и даже текстов песен. При бесплатном использовании доступна генерация до 10 тысяч символов.

https://lk.airuco.ru/

Генерация изображений с помощью нейросетей

noreply@blogger.com (Наталья) — Fri, 03 Nov 2023 17:32:00 +0000

Картинки в статье созданы нейросетью Kandinsky.

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

Созданные картинки так же можно использовать в блогах и на сайтах при написании статей.

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

Чтобы воспользоваться данными сервисами, нужно всего лишь зайти на его сайт и выбрать интересующий вас стиль и тематику изображения. Затем, следуя простым инструкциям, можно выбрать параметры генерации, такие как размер, разрешение и другие настройки. После этого остается только нажать на кнопку "Создать" и подождать несколько минут, пока нейросеть сгенерирует изображение.

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

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

Плюсы и минусы нейросетей

Плюсы:

– Быстрота создания: нейросети могут создавать изображения очень быстро по сравнению с традиционным процессом рисования или фотографии.

– Точность: нейросети способны создавать изображения с высокой степенью детализации и точности.

– Разнообразие: нейросети могут создавать изображения в различных стилях и жанрах.

Минусы:

– Ограниченность: нейросети ограничены в своих возможностях и не могут создавать изображения, которые выходят за рамки их обучения.

– Стоимость: нейросети требуют большого количества данных для обучения, что может быть дорогостоящим.

– Этические вопросы: использование нейросети для создания изображений может вызывать этические вопросы, связанные с авторскими правами и копирайтом.

Создание фото

Ниже список некоторых бесплатных и условно-бесплатных нейросетей для создания картинок. Работа некоторых платформ на территории РФ и Белоруссии возможна только через VPN-сервисы.

AI Picasso - создаёт картинки по текстовым запросам, ручным эскизам или фотографиям.

https://aipicasso.app/

Artbreeder - регистрация обязательна, сервис бесплатный. Можно задавать определённые эмоции персонажа.

https://www.artbreeder.com/

Craiyon - бесплатная сеть. Ввод текста: английский и русский. Генерирует изображения из текста.

https://www.craiyon.com/

Dall·E - нужна регистрация. На русском языке.

https://dalle.com.ru/#price

DeepArt - нейросеть может создавать абстрактные изображения из текстовых описаний.

https://deepart.ai/ru/

DeepDream Generator - этот инструмент использует нейросеть для создания абстрактных изображений из текстовых описаний или загруженных изображений.

https://deepdreamgenerator.com/

Dezgo - без регистрации. Преобразовывает текст в изображение и изображение в изображение.

https://dezgo.com/

DreamStudio - много настроек, можно загружать свои фото.

https://dreamstudio.com/start/

Fotor - популярный онлайн-редактор фотографий запустил генератор изображений на основе искусственного интеллекта. Прост в использовании.

https://www.fotor.com/

Hotpot - регистрация не обязательная. Бесплатно генерировать картинки можно только 5 раз в сутки, и изображения будут размером 256х256 пикселей.

https://hotpot.ai/art-generator

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

https://images.ai/

Kandinsky - сервис от "Сбербанка", бесплатный.

https://www.sberbank.com/promo/kandinsky/

Lexica - регистрация через Google или по email. Бесплатно доступна генерация 1000 изображений в месяц.

https://lexica.art/

Mage Space - не требует регистрации, но возможности сервиса ограниченные.

https://www.mage.space/

NightCafe Creator - нейросеть может создать изображение по текстовому описанию или загрузить свое изображение для его модификации.

https://creator.nightcafe.studio/

PlaygroundAI - бесплатно до 1000 картинок в день. Понимает английский и русский ввод текста. Может создавать фотореалистичные картинки и диджитал-арт.

https://playgroundai.com/

Pollinations - регистрация не требуется, сервис бесплатный. Создаёт картинки по текстовому запросу.

https://pollinations.ai/

Stable Diffusion - можно пользоваться бесплатно. Понимает английский и русский языки. Регистрация не требуется, сервис полностью бесплатный. Генерирует картинку только по тексту. https://stablediffusionweb.com

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

https://shedevrum.ai/

Создание видео

Lumen5 - есть бесплатный тариф, который позволяет создавать неограниченное количество видео качеством 720p, но с водяным знаком сервиса. Платные тарифы от $19.

https://lumen5.com/

Creative Reality Studio (D-ID) - регистрация обязательная. Пробный тариф позволяет сделать до 5 минут видео с водяным знаком.

https://studio.d-id.com/editor

Fliki - регистрация нужна, бесплатный тариф разрешает создать до 5 минут видео.

https://fliki.ai/

Vizard - регистрация обязательна. Сервис пока бесплатный.

https://vizard.ai/

Runway - есть бесплатный тариф на 3 проекта, нужна регистрация.

https://runwayml.com/

Munch - регистрация обязательна, сервис бесплатный.

https://www.getmunch.com/

Pix2Pix Video - регистрация не требуется, сервис полностью бесплатный.

https://huggingface.co/spaces/fffiloni/Pix2Pix-Video

Набор участников сканирования покупок ГФК

noreply@blogger.com (Наталья) — Wed, 18 Oct 2023 14:17:00 +0000

Доброго дня уважаемые читатели.

Сегодняшняя статья о платном сканировании ГФК.

Набор участников

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

Такое бывает крайне редко.

Помимо сканирования покупок сканером для всех новых участников проекта есть возможность участвовать в дополнительном исследовании покупок ВНЕ ДОМА и получать за это дополнительные баллы.

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

Прочитайте о данном виде дополнительного заработка:

ГФК сканер

Исследование покупок — ГФК Русь

А так же в Отзовике:

Сканирование покупок ГФК Русь (Россия, Москва)

Если остались вопросы перейдите по ссылке на сайт с вопросами и ответами о сканировании:

https://scanner.gfk.ru/faq_panelist

Если не нашли нужных ответов о работе, их можно задать по:

телефону горячей линии:

8 800 500 0502 (звонок бесплатный)

электронной почте:

scanner@gfk.ru

Если вопросов нет, то переходите на сайт и регистрируетесь:

https://scanner.gfk.ru/

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

Реферальная ссылка для панели Scanner

Реферальная ссылка для панели MyScan

Буду благодарна, если после регистрации на сайте, при заполнении установочной анкеты в строке "Откуда вы о нас узнали", вы впишите номер моего домохозяйства - 917628 и фамилию с именем — Иконописцева Наталья. Спасибо

Раскрывающийся цветок на css

noreply@blogger.com (Наталья) — Fri, 21 Jul 2023 11:55:00 +0000

Необыкновенно красивый пульсирующий цветок увидела на сайте https://atuin.ru. Украшение отлично установилось на блоге Блогспот и как гаджет, и в статье как анимированная картинка.

Эффект сделан на CSS.

Цветок можно использовать для поздравления с каким-либо торжеством, добавив к нему текст. Либо установить для украшения как гаджет или добавить в статью.

Выглядит изображение так:

Вживую посмотреть на цветок можно в визуальном редакторе, вставив код в первое окошко.

Код цветка

<div class="flower">
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
</div>
<style>
.flower {
    display: grid;
    font-size: 0.3em;
    height: 110em;
    place-items: center;
}
.x {
    grid-row: 1/-1;
    grid-column: 1/-1;
    border-radius: 12px;
    animation: ease 2s alternate infinite;
}
.x:nth-of-type(1) {
    box-shadow: 0 0 0.5em rgba(255,255,255,0.1);
    border-radius: 1.2em;
    width: 4em;
    height: 4em;
    background: hsl(270,60%,98%);
    animation-name: x-1;
    animation-delay: 80ms;
    transform: rotate(36deg);
    z-index: 99;
}
@keyframes x-1 {
    to {
        transform: rotate(36deg) scale(0.6);
    }
}
.x:nth-of-type(2) {
    box-shadow: 0 0 1em rgba(255,255,255,0.1);
    border-radius: 1.4em;
    width: 8em;
    height: 8em;
    background: hsl(278,52%,96%);
    animation-name: x-2;
    animation-delay: 160ms;
    transform: rotate(72deg);
    z-index: 98;
}
@keyframes x-2 {
    to {
        transform: rotate(72deg) scale(0.6);
    }
}
.x:nth-of-type(3) {
    box-shadow: 0 0 1.5em rgba(255,255,255,0.1);
    border-radius: 1.6em;
    width: 12em;
    height: 12em;
    background: hsl(275,55%,94%);
    animation-name: x-3;
    animation-delay: 240ms;
    transform: rotate(108deg);
    z-index: 97;
}
@keyframes x-3 {
    to {
        transform: rotate(108deg) scale(0.6);
    }
}
.x:nth-of-type(4) {
    box-shadow: 0 0 2em rgba(255,255,255,0.1);
    border-radius: 1.8em;
    width: 16em;
    height: 16em;
    background: hsl(277,56%,92%);
    animation-name: x-4;
    animation-delay: 320ms;
    transform: rotate(144deg);
    z-index: 96;
}
@keyframes x-4 {
    to {
        transform: rotate(144deg) scale(0.6);
    }
}
.x:nth-of-type(5) {
    box-shadow: 0 0 2.5em rgba(255,255,255,0.1);
    border-radius: 2em;
    width: 20em;
    height: 20em;
    background: hsl(277,57%,90%);
    animation-name: x-5;
    animation-delay: 400ms;
    transform: rotate(180deg);
    z-index: 95;
}
@keyframes x-5 {
    to {
        transform: rotate(180deg) scale(0.6);
    }
}
.x:nth-of-type(6) {
    box-shadow: 0 0 3em rgba(255,255,255,0.1);
    border-radius: 2.2em;
    width: 24em;
    height: 24em;
    background: hsl(278,56%,86%);
    animation-name: x-6;
    animation-delay: 480ms;
    transform: rotate(216deg);
    z-index: 94;
}
@keyframes x-6 {
    to {
        transform: rotate(216deg) scale(0.6);
    }
}
.x:nth-of-type(7) {
    box-shadow: 0 0 3.5em rgba(255,255,255,0.1);
    border-radius: 2.4em;
    width: 28em;
    height: 28em;
    background: hsl(277,56%,84%);
    animation-name: x-7;
    animation-delay: 560ms;
    transform: rotate(252deg);
    z-index: 93;
}
@keyframes x-7 {
    to {
        transform: rotate(252deg) scale(0.6);
    }
}
.x:nth-of-type(8) {
    box-shadow: 0 0 4em rgba(255,255,255,0.1);
    border-radius: 2.6em;
    width: 32em;
    height: 32em;
    background: hsl(276,57%,80%);
    animation-name: x-8;
    animation-delay: 640ms;
    transform: rotate(288deg);
    z-index: 92;
}
@keyframes x-8 {
    to {
        transform: rotate(288deg) scale(0.6);
    }
}
.x:nth-of-type(9) {
    box-shadow: 0 0 4.5em rgba(255,255,255,0.1);
    border-radius: 2.8em;
    width: 36em;
    height: 36em;
    background: hsl(277,56%,76%);
    animation-name: x-9;
    animation-delay: 720ms;
    transform: rotate(324deg);
    z-index: 91;
}
@keyframes x-9 {
    to {
        transform: rotate(324deg) scale(0.6);
    }
}
.x:nth-of-type(10) {
    box-shadow: 0 0 5em rgba(255,255,255,0.1);
    border-radius: 3em;
    width: 40em;
    height: 40em;
    background: hsl(277,57%,72%);
    animation-name: x-10;
    animation-delay: 800ms;
    transform: rotate(360deg);
    z-index: 90;
}
@keyframes x-10 {
    to {
        transform: rotate(360deg) scale(0.6);
    }
}
.x:nth-of-type(11) {
    box-shadow: 0 0 5.5em rgba(255,255,255,0.1);
    border-radius: 3.2em;
    width: 44em;
    height: 44em;
    background: hsl(277,56%,66%);
    animation-name: x-11;
    animation-delay: 880ms;
    transform: rotate(396deg);
    z-index: 89;
}
@keyframes x-11 {
    to {
        transform: rotate(396deg) scale(0.6);
    }
}
.x:nth-of-type(12) {
    box-shadow: 0 0 6em rgba(255,255,255,0.1);
    border-radius: 3.4em;
    width: 48em;
    height: 48em;
    background: hsl(277,57%,62%);
    animation-name: x-12;
    animation-delay: 960ms;
    transform: rotate(432deg);
    z-index: 88;
}
@keyframes x-12 {
    to {
        transform: rotate(432deg) scale(0.6);
    }
}
.x:nth-of-type(13) {
    box-shadow: 0 0 6.5em rgba(255,255,255,0.1);
    border-radius: 3.6em;
    width: 52em;
    height: 52em;
    background: hsl(277,56%,56%);
    animation-name: x-13;
    animation-delay: 1040ms;
    transform: rotate(468deg);
    z-index: 87;
}
@keyframes x-13 {
    to {
        transform: rotate(468deg) scale(0.6);
    }
}
.x:nth-of-type(14) {
    box-shadow: 0 0 7em rgba(255,255,255,0.1);
    border-radius: 3.8em;
    width: 56em;
    height: 56em;
    background: hsl(277,57%,50%);
    animation-name: x-14;
    animation-delay: 1120ms;
    transform: rotate(504deg);
    z-index: 86;
}
@keyframes x-14 {
    to {
        transform: rotate(504deg) scale(0.6);
    }
}
.x:nth-of-type(15) {
    box-shadow: 0 0 7.5em rgba(255,255,255,0.1);
    border-radius: 4em;
    width: 60em;
    height: 60em;
    background: hsl(277,56%,42%);
    animation-name: x-15;
    animation-delay: 1200ms;
    transform: rotate(540deg);
    z-index: 85;
}
@keyframes x-15 {
    to {
        transform: rotate(540deg) scale(0.6);
    }
}
.x:nth-of-type(16) {
    box-shadow: 0 0 8em rgba(255,255,255,0.1);
    border-radius: 4.2em;
    width: 64em;
    height: 64em;
    background: hsl(277,56%,36%);
    animation-name: x-16;
    animation-delay: 1280ms;
    transform: rotate(576deg);
    z-index: 84;
}
@keyframes x-16 {
    to {
        transform: rotate(576deg) scale(0.6);
    }
}
.x:nth-of-type(17) {
    box-shadow: 0 0 8.5em rgba(255,255,255,0.1);
    border-radius: 4.4em;
    width: 68em;
    height: 68em;
    background: hsl(277,56%,26%);
    animation-name: x-17;
    animation-delay: 1360ms;
    transform: rotate(612deg);
    z-index: 83;
}
@keyframes x-17 {
    to {
        transform: rotate(612deg) scale(0.6);
    }
}
.x:nth-of-type(18) {
    box-shadow: 0 0 9em rgba(255,255,255,0.1);
    border-radius: 4.6em;
    width: 72em;
    height: 72em;
    background: hsl(277,56%,20%);
    animation-name: x-18;
    animation-delay: 1440ms;
    transform: rotate(648deg);
    z-index: 82;
}
@keyframes x-18 {
    to {
        transform: rotate(648deg) scale(0.6);
    }
}
.x:nth-of-type(19) {
    box-shadow: 0 0 9.5em rgba(255,255,255,0.1);
    border-radius: 4.8em;
    width: 76em;
    height: 76em;
    background: hsl(277,56%,16%);
    animation-name: x-19;
    animation-delay: 1520ms;
    transform: rotate(684deg);
    z-index: 81;
}
@keyframes x-19 {
    to {
        transform: rotate(684deg) scale(0.6);
    }
}
.x:nth-of-type(20) {
    box-shadow: 0 0 10em rgba(255,255,255,0.1);
    border-radius: 5em;
    width: 80em;
    height: 80em;
    background: hsl(279,56%,10%);
    animation-name: x-20;
    animation-delay: 1600ms;
    transform: rotate(720deg);
    z-index: 80;
}
@keyframes x-20 {
    to {
        transform: rotate(720deg) scale(0.6);
    }
}
</style>

Поменять в коде можно размер цветка — выделила синим цветом.

Цвет можно изменить, заменив параметры background: hsl(208,100%,...%) — выделила в коде синим.

Менять цвета лучше по оттенкам в генераторе оттенков hsl:

https://atuin.ru/tools/shades/

Располагать тона можно от светлого к тёмному или наоборот.

Движущийся эффект для картинки

noreply@blogger.com (Наталья) — Fri, 14 Jul 2023 13:48:00 +0000

Интересный эффект для фото подглядела на сайте https://atuin.ru. Картинка движется в разных направлениях, то приближая, то удаляя разные участки изображения. Эффект создан на CSS. Посмотреть его вживую можно в визуальном редакторе. Выглядит эффект примерно так:

Код

<div class="bg-animation"> Ваш текст на картинке </div> <style> .bg-animation { animation: bg-animation 25s ease-in-out infinite; padding: 160px 20px; text-align: center; background-image: url(адрес вашей картинки); border: 8px solid #47271b; margin: 20px 0; color: #c5894d; font-size: 34px; font-family: 'Roboto', sans-serif; } @media (max-width: 620px) { .bg-animation { padding: 100px 20px; font-size: 26px; } } @keyframes bg-animation { 0% { background-size: 120%; background-position: 50% 50% } 20% { background-size: 150%; background-position: 0 50%; } 40% { background-size: 110%; background-position: 20% 80%; } 60% { background-size: 160%; background-position: 60% 10%; } 80% { background-size: 120%; background-position: 40% 70%; } 100% { background-size: 120%; background-position: 50% 50% } } </style>

Красным цветом в коде выделила оттенок рамки.

Синим — цвет текста.

Зелёным — ваш текст.

Оранжевым — адрес вашей картинки.

Розовым — ширина рамки.

Голубым — размер шрифта.

Салатовым — шрифт.