Расширение Eye Dropper
О расширении 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
Страница 404 является неотъемлемой частью любого веб-сайта. Несмотря на то, что она обозначает ошибку или отсутствие страницы, она имеет важное значение для пользователей и владельцев сайта.
Код:
Далее ⇒
Прежде всего, страница 404 помогает улучшить пользовательский опыт. Когда пользователь попадает на несуществующую страницу, он может испытать разочарование и путаницу. Однако благодаря странице 404, пользователю предоставляется информация, что произошла ошибка, и предлагается вернуться на главную страницу или воспользоваться поиском. Это позволяет сохранить позитивное впечатление о сайте.
Кроме того, страница 404 полезна для SEO. Правильно настроенная страница 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>
Так же выделила в коде красным цветом текст, который можно поменять и место, куда вставить ссылку на главную страницу вашего блога.
Готовые анимированные градиентные тексты
Яркий градиентный анимированный текст на сайте привлекает внимание посетителей и делает контент более привлекательным и интересным. Он помогает подчеркнуть важные моменты и информацию, делает сайт более запоминающимся и оригинальным. Такой текст создает атмосферу динамизма и современности, привлекая пользователей к более внимательному и длительному взаимодействию с контентом. В итоге яркий градиентный анимированный текст на сайте является мощным инструментом для привлечения внимания, улучшения визуального восприятия и повышения пользовательского опыта.
Градиент мягко переливается разными цветами одного оттенка — зелёный, фиолетовый, синий и т.д. 
Далее ⇒
На блоге уже есть статьи о красивом тексте, в том числе анимированном:
В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги 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>
Стили оформления цитат для Блогспот
Оформление цитат красиво и эстетично на сайтах имеет ряд важных причин. Во-первых, красиво оформленные цитаты привлекают внимание посетителей и делают контент более привлекательным и запоминающимся. Это помогает удержать посетителей на сайте дольше и повысить его популярность.
Далее ⇒
Кроме того, красиво оформленные цитаты делают контент более удобным для восприятия и понимания. Они помогают выделить ключевые мысли и идеи, делая текст структурированным и легким для чтения.
Также, оформление цитат улучшает визуальное восприятие контента и создает положительное впечатление о сайте. Эстетически приятные элементы помогают укрепить имидж сайта и привлечь новых посетителей.
В целом, красиво оформленные цитаты на сайтах играют важную роль в создании качественного и интересного контента, который будет привлекать и удерживать внимание аудитории.
На сайте есть много стилей оформления цитат:
Но сегодня предлагаю посмотреть ещё несколько. Все коды устанавливаем так:
Заходим в шаблон: Тема — Изменить 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;}
Последние сообщения для Блоггер
На сайте виджеты последних сообщений играют важную роль для удобства пользователей. Они позволяют посетителям быстро ознакомиться с самой актуальной информацией, не заходя на каждую страницу отдельно. Виджеты последних сообщений делают сайт более интерактивным, увеличивая его привлекательность и повышая уровень вовлеченности пользователей. Благодаря этим виджетам пользователи могут легко следить за обновлениями, новостями, акциями и другой интересной информацией, что делает опыт использования сайта более комфортным и информативным.
Код:
Код:
Далее ⇒
Другие виджеты можно найти на сайте:
Предлагаю вашему вниманию три интересных гаджета "Последних сообщений" для Блоггер. Коды виджета "гуляют" в сети, и видела их на нескольких блогах, поэтому написать авторство не могу.
Устанавливаются гаджеты просто, что очень удобно для новичков. Заходим в Дизайн, нажимаем Добавить гаджет (в боковой панели), выбираем 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&alt=json-in-script&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>
