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

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

Так же будем использовать стили для анимации и свойства transition, opacity и scale.

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

Каждому блоку мы присвоим id и class. Причем, id можете ставить какой хотите, а class - это и будет нужный эффект. В общем, как обычно. Создаём блок div и для каждого отдельного свои свойства. У меня для примера в блоке div картинка . Но вы можете вставить любой текст, код.

<div id="anim_block" class="slideRight">здесь можно вставить всё что угодно - текст код картинку </div>

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

1. Анимация в правую сторону

<div id="anim_block" class="slideRight"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>

<style>
#anim_block{position:absolute;width:250рх;top:95px;lleft:0;}
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;

animation-duration: 2s;
-webkit-animation-duration: 2s;

animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;
}

@keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}

@-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
</style>

2. Анимация в левую сторону сторону. Изменяем класс в первом коде на "slideLeft"

<div id="anim_block" class="slideLeft"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>

<style>
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;

animation-duration: 2s;
-webkit-animation-duration: 2s;

animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;
}

@keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}

@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
</style>

3. Блок див выпадает сверху. Так же меняем класс ID на slideDown

<div id="anim_block" class="slideDown"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;

animation-duration: 1s;
-webkit-animation-duration: 1s;

animation-timing-function: ease;
-webkit-animation-timing-function: ease;

visibility: visible !important;
}

@keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}

@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
</style>

4. Движение блока вверх slideUp

<div id="anim_block" class="slideUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;

animation-duration: 1s;
-webkit-animation-duration: 1s;

animation-timing-function: ease;
-webkit-animation-timing-function: ease;

visibility: visible !important;
}

@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}

@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
</style>

Ну и ещё немного можно поиграться с кодами.

5. Анимация блока с появлением и с лёгким эффектом раскачивания

<div id="anim_block" class="bigEntrance"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.bigEntrance{
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;

animation-duration: 2s;
-webkit-animation-duration: 2s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;

visibility: visible !important;
}

@keyframes bigEntrance {
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}

@-webkit-keyframes bigEntrance {
0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}
</style>

6. Блок тоже качается, но немного с другим эффектом

<div id="anim_block" class="hatch"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.hatch{
animation-name: hatch;
-webkit-animation-name: hatch;

animation-duration: 2s;
-webkit-animation-duration: 2s;

animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;

transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;

visibility: visible !important;
}

@keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}

@-webkit-keyframes hatch {
0% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
20% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
35% {
-webkit-transform: rotate(2deg) scaleY(1);
}
50% {
-webkit-transform: rotate(-2deg);
}
65% {
-webkit-transform: rotate(1deg);
}
80% {
-webkit-transform: rotate(-1deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
</style>

7. Тут прыжок вверх и падение

<div id="anim_block" class="bounce"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.bounce{
animation-name: bounce;
-webkit-animation-name: bounce;

animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;

animation-timing-function: ease;
-webkit-animation-timing-function: ease;

transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}

@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60%{
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
</style>

8. Блок качается непрерывно

<div id="anim_block" class="tossing"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.tossing{
animation-name: tossing;
-webkit-animation-name: tossing;

animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}

@-webkit-keyframes tossing {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}
</style>

9. Ещё один эффект появления блока

<div id="anim_block" class="pullUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;

animation-duration: 3s;
-webkit-animation-duration: 3s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;

transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.02);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.01);
}
100% {
transform: scaleY(1);
}
}

@-webkit-keyframes pullUp {
0% {
-webkit-transform: scaleY(0.1);
}
40% {
-webkit-transform: scaleY(1.02);
}
60% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.98);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
</style>

10. Движение блока вверх с расширением до полного размера.

<div id="anim_block" class="slideExpandUp"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" /> </div>
<style>
.slideExpandUp{
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;

animation-duration: 3s;
-webkit-animation-duration: 3s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;

visibility: visible !important;
}

@keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}

@-webkit-keyframes slideExpandUp {
0% {
-webkit-transform: translateY(100%) scaleX(0.5);
}
30%{
-webkit-transform: translateY(-8%) scaleX(0.5);
}
40%{
-webkit-transform: translateY(2%) scaleX(0.5);
}
50%{
-webkit-transform: translateY(0%) scaleX(1.1);
}
60%{
-webkit-transform: translateY(0%) scaleX(0.9);
}
70% {
-webkit-transform: translateY(0%) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleX(0.95);
}
90% {
-webkit-transform: translateY(0%) scaleX(1.02);
}
100%{
-webkit-transform: translateY(0%) scaleX(1);
}
}
</style>

Как вы обратили внимание, каждого варианта мы меняем класс на соответственный. Я везде отметила розовым цветом.

При установке нужного варианта в сообщение или гаджет HTML/JavaScript нужно изменить индивидуально свойства расположения блока. У всех будет по разному. Я отметила в первом коде строку

#anim_block{position:absolute;width:250рх;top:95px;lleft:0;}

Советую прочитать эту статью. Или найти информацию в интернете, её достаточно много.
Скорость анимации в каждом коде тоже настраиваемая такие параметры 2s; 4s; и так далее.

Вот такие варианты анимации появления элементов в блоге.

В последующих постах покажу ещё несколько решений. Всем добра и до встречи.

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

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

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

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

<div class="img-section">
<img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="400" />

<div class="img-data">
<span style="background-color: white; color: #303030; font-family: "verdana" , sans-serif; font-size: 16px; letter-spacing: 0.3px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid et tempore quae quas pariatur ratione voluptas inventore. Doloremque soluta quisquam natus perspiciatis.</span><br />
<br /></div>
</div>
<style>
.img-section {
width: 100%;
background: linear-gradient(135deg, #00897B 0%, #00897B 40%, #FFF 40%, #FFF 100%);
display: flex;
align-items: center;
margin: 20px 0;
} .img-section img {
border: 12px solid rgba(204, 255, 144, 0.8);
box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7);
margin: 40px;
box-sizing: border-box;
flex: 0 0 45%;
width: 45%;
} .img-section .img-data {
font-family: Verdana, sans-serif;
font-size: 16px;
padding: 20px;
}
@media only screen and (max-width: 700px) {
.img-section {
flex-flow: row wrap;
}
.img-section .img-data {
background: #FFF;
border-bottom: 5px solid #AED581;
}
.img-section img {
margin: 40px auto;
flex: 0 0 80%;
width: 80%;
}
}
</style>

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

Синим цветом выделен сам отображаемый текст.

Обратите внимание, что в примере высота картинки height="200". Соответственно высота области с текстом будет такая же.

Можно поэкспериментировать со значением linear-gradient. Почитаете здесь.

Можно подобрать свои решения, относительно цвета и размеров тени box-shadow: 5px 7px 16px rgba(0, 0, 0, 0.7); и border: 12px solid rgba(204, 255, 144, 0.8) рамки.

Размер текста можно заменить на другой font-size: 16px;

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

В редакторе сообщения код вставляется в формате HTML. Если пропустили, прочитайте как просто вставлять коды в сообщениях.

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

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

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

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

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

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

Код

Отрегулируйте на каком расстоянии при прокрутке она будет появляться. В моём случае это значение 350

В двух местах замените цвет на желаемый. В примере #4e9c60

Готовый код устанавливайте в гаджет HTML/JavaScript , где нибудь в самом низу макета блога.

10 вариантов кнопки вверх для Блоггер
Оригинальная кнопка вверх/ вниз

Всем добра и до встречи. Не болейте, берегите себя и близких.

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

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

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

Не стала этих котиков отдельно выкладывать и собрала небольшую кошачью компанию.

Предлагаю 3 варианта.

1. Просто вот такой розовый котик

Это код

<div id="container">
<div id="tail">
</div>
<div id="tail-mask">
</div>
<div id="tail-end">
</div>
<div id="body">
<div class="ear" id="ear-left">
<div class="ear-inner" id="ear-inner-left">
</div>
</div>
<div class="ear" id="ear-right">
<div class="ear-inner" id="ear-inner-right">
</div>
</div>
<div id="mask">
</div>
<div id="patch">
<div class="fur">
</div>
<div class="fur">
</div>
<div class="fur">
</div>
</div>
<div id="eyes">
<div class="eye" id="eye-left">
<div class="shine" id="shine-left">
</div>
</div>
<div class="eye" id="eye-right">
<div class="shine" id="shine-right">
</div>
</div>
</div>
<div id="whisk-left">
<div class="whisker" id="whisk-one">
</div>
<div class="whisker">
</div>
<div class="whisker" id="whisk-three">
</div>
</div>
<div id="nose">
</div>
<div id="whisk-right">
<div class="whisker" id="whisk-four">
</div>
<div class="whisker">
</div>
<div class="whisker" id="whisk-six">
</div>
</div>
<div id="smile">
<div id="smile-left-align">
<div id="smile-left">
</div>
<div id="mask-left">
</div>
</div>
<div id="smile-right-align">
<div id="smile-right">
</div>
<div id="mask-right">
</div>
</div>
</div>
<div id="tongue">
</div>
<div id="tummy">
</div>
</div>
</div>
<style>
#container {
margin: 90px auto;
height: 175px;
width: 170px;
}
#tail {
position: absolute;
margin-left: 40px;
margin-top: 40px;
height: 60px;
width: 80px;
border: 15px solid #D3B897;
border-radius: 50px;
display: inline-block;
z-index: 0;
}
#tail-mask {

position: absolute;

margin-top: 40px;

margin-left: 100px;

height: 30px;

width: 75px;

background-color: #fff;

z-index: 0;
}
#tail-end {

position: absolute;

margin-top: 63px;

margin-left: 130px;

height: 17px;

width: 17px;

border-radius: 50%;

background-color: #D3B897;

z-index: 1;

}
#body {

position: relative;

height: 130px;

width: 110px;

background-color: #E9CBA7;

border-radius: 22px;

display: inline-block;

overflow: hide;

z-index: 1;

}
.ear {

position: relative;

margin-top: -20px;

height: 45px;

width: 50px;

background-color: #E9CBA7;

display: inline-block;

z-index: 2;
}
#ear-left {

clip-path: polygon(0 0, 0% 100%, 100% 60%);
}
#ear-right {

margin-left: 6px;

clip-path: polygon(100% 0, 0% 60%, 100% 100%);

}
.ear-inner {

position: relative;

height: 30px;

width: 50px;

background-color: #D3B897;

z-index: 3;

}
#ear-inner-left {

margin-top: 8px;

margin-left: 5px;

clip-path: polygon(0 0, 100% 90%, 0 100%);

}

#ear-inner-right {

margin-top: 8px;

margin-left: -4px;

clip-path: polygon(100% 0%, 100% 100%, 0 90%);

}
#mask {

position: relative;

background-color: #E9CBA7;

margin-top: -29px;

height: 50px;

width: 110px;

border-radius: 50%;

z-index: 4;

}
#patch {

position: relative;

margin-top: -50px;

z-index: 5;

}
.fur {

width: 5px;

background-color: #C0A98B;

display: inline-block;

}
.fur:first-of-type {

margin-left: 40%;

height: 15px;

float: left;

}
.fur:nth-of-type(2) {

margin-left: 4px;

height: 5px;

float: left;

}

.fur:nth-of-type(3) {

margin-left: 4px;

height: 10px;

float: left;

}
#eyes {

position: relative;

margin-top: 30%;

z-index: 5;

}

.eye {

height: 18px;

width: 18px;

border-radius: 50%;

background-color: #554D44;

display: inline-block;

}
#eye-left {

margin-left: 27%;

}
#eye-right {

margin-left: 10%;

}

.shine {

height: 7px;

width: 7px;

border-radius: 50%;

background-color: #fff;

margin-top: 2px;

margin-left: 1px;

}

#whisk-left {

display: inline-block;

}

.whisker {

height: 3px;

width: 25px;

background-color: #D3B897;

margin-bottom: 6px;

}

#whisk-one {

transform: rotate(15deg);

}

#whisk-three {

transform: rotate(-15deg);

}

#nose {

position: absolute;

margin-left: 15%;

height: 17px;

width: 18px;

background-color: #554D44;

clip-path: ellipse(40% 22% at 50% 50%);

display: inline-block;

z-index: 6;

}

#whisk-right {

display: inline-block;

margin-left: 56px;

}

#whisk-four {

transform: rotate(-15deg);

}

#whisk-six {

transform: rotate(15deg);

}

#smile {

position: relative;

margin-left: 29%;

margin-top: -22%;

z-index: 5;

}

#smile-left-align {

display: inline-block;

position: absolute;

}

#smile-left {

height: 10px;

width: 20px;

border-radius: 0 0 10px 10px;

background-color: #E9CBA7;

border: 2px solid #554D44;

}

#mask-left {

margin-top: -58%;

height: 4px;

width: 20px;

background-color: #E9CBA7;

}

#smile-right-align {

display: inline-block;

margin-left: 22px;

position: absolute;

}

#smile-right {

height: 10px;

width: 20px;

border-radius: 0 0 10px 10px;

background-color: #E9CBA7;

border: 2px solid #554D44;

}

#mask-right {

margin-top: -58%;

height: 4px;

width: 24px;

background-color: #E9CBA7;

}

#tongue {

position: relative;

margin-top: 7px;

margin-left: auto;

margin-right: auto;

height: 17px;

width: 15px;

border-radius: 25px;

background-color: #FC90A5;

z-index: 4;

}

#tummy {

margin-top: 13%;

margin-left: auto;

margin-right: auto;

height: 30px;

width: 60px;

border-radius: 50px 50px 0 0;

background-color: #F4E7D1;

}

#credit {

position: absolute;

font-family: sans-serif;

font-size: 12px;

color: #B9B9B9;

margin-top: 70px;

left: 20px;

}
a,

a:visited {

text-decoration: none;

color: #FC90A5;

}

a:focus,

a:hover {

color: #DC7E91;

}</style>

2. Милый чёрный котик будет вращать зелёными глазками.

Здесь картинка. Для наглядного примера скопируйте код и установите в этом редакторе.

<div class='wrapper'>
<div class='cat'>
<div class='head'>
<div class='eyes'>
<div class='eyeleft'>
<div class='eyeinner'>
<div class='iris'></div>
</div>
</div>
<div class='eyeright'>
<div class='eyeinner'>
<div class='iris'></div></div>
</div>
</div>
<div class='nose'></div>
<div class='mouth'>
<div class='mleft'> </div>
<div class='mright'></div>
</div>
</div>
<div class='body'>

</div>
<div class='tail'>
<div class='circle'>
<div class='innercircle'></div>
</div>

</div>

</div>
</div>
<style>
.wrapper{
width:50%;
margin:0 auto;
text-align:center;
}
.cat{
opacity: 0.8;
padding:40px;
}
.head{
padding-top:4px;
position:relative;
margin:0 auto;
background-color:black;
width:60px;
height:40px;
border-radius:20% 20% 100% 100%;
}
.head:before{
position:absolute;
content:'';
border:10px solid black;
top:-15px;
left:0px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color:black;
border-left-color: black;
}
.head:after{
position:absolute;
content:'';
border:10px solid black;
top:-15px;
right:0px;
border-top-color: transparent;
border-right-color: black;
border-bottom-color:black;
border-left-color: transparent;
}
.eyes{
overflow:hidden;
padding-top:7px;
}

.eyeleft{

border-radius: 30% 100% ;
float:left;
position:absolute;
left:10px;
width:15px;
height:12px;
background-color: #57c65c;
display:block;

}

.eyeright{

border-radius: 100% 30% ;
float:right;
background-color:#57c65c;
display:block;
width:15px;
height:12px;
position:absolute;
right:10px;
}

.eyeinner{
animation: eyes 2s ease-in-out infinite;
width:6px;
height:10px;
background-color:black;
border-radius:100%;
margin: 0 auto;

}
.iris{
background-color:#fff;
width:1.5px;
height:6px;
border-radius:100%;
}
.nose{
width:5px;
height:3px;
background-color:pink;
border-radius:50%;
margin:0 auto;
position:relative;
top:15px;
}
@keyframes eyes{
50%{
width:7px;
}

100% {
width:10px;
}
}
@keyframes iris{
100%{
width:3px;
}
}
.mouth{
width:14px;
position:relative;
top:16px;
margin:0 auto;
}
.mleft, .mright{

width:5px;
height:5px;
border:1px solid;

border-radius:50%;

}
.mleft{
border-top-color:transparent;
border-left-color:transparent;
border-right-color:gray;
border-bottom-color:gray;
float:left;
}
.mright{
float:left;
border-top-color:transparent;
border-right-color:transparent;
border-left-color:gray;
border-bottom-color:gray;
}
.body{
position:relative;
border-radius:50% 50% 0% 50%;
background-color:black;
width:40px;
height:100px;
margin:0 auto;
}
.tail{
z-index:-100;
top:10px;
display:inline-block;
position:absolute;
width:100px;
height:100px;

}
.circle{
position:relative;
width:100px;
height:120px;
border:3px solid black;
border-radius:50%;
border-bottom-color:transparent;
left:-1px;

}
.innercircle{
position:absolute;
width:60px;
height:60px;
border:3px solid black;
border-right-color:transparent;
border-radius:50%;
bottom:5px;
right:4px;
}
.innercircle:after{
position:absolute;
content: ' ';
width:7px;
height:10px;
background-color:black;
left:50px;
top:6px;
border-radius:50%;
}</style>

3. Кот программист.

Так же установите код в редакторе для просмотра того, что он умеет делать.

Если появилось желание поселить такого питомца в блоге, копируйте код понравившегося варианта и устанавливайте на странице в формате HTML или в гаджет HTML/JavaScript.

Вот такой котопост получился сегодня. Все они родом с codepen.
И ещё один котик в этой статье.

МЯУ...

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

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

Вот такой оригинальный скроллинг страницы.

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

<div id="scroll-percentage">
<div class="percentage"></div>
</div>
<div id="percentage-value"></div>
<script type="text/javascript">const updateScrollPercentage = function() {
const heightOfWindow = window.innerHeight,
contentScrolled = window.pageYOffset,
bodyHeight = document.body.offsetHeight,
percentage = document.querySelector(".percentage"),
percentageVal = document.querySelector("#percentage-value")
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.width = "100%"
}
else {
const total = bodyHeight - heightOfWindow,
got = contentScrolled,
percent = parseInt((got/total) * 100)
percentageVal.textContent = percentage.style.width = percent + "%"
}
}
window.addEventListener('scroll', updateScrollPercentage)</script>

<style>#scroll-percentage {
position: fixed;
bottom: 0;
left: 0x;
width: 100vw;
color: #000;
margin: 0;
padding: 0;
z-index: 1000;
}
#scroll-percentage .percentage {
display: inline-block;
background-color: #004D40; /* цвет нижней полосы */
border-bottom: 5px solid #F4FF81;  /*цвет рамки полосы */
height: 4px;  /* ширина полосы */
width: 0;
box-sizing: content-box;
}
#percentage-value {
box-sizing: content-box;
position: fixed;
bottom: 20px;
left: 20px;
height: 80px;  /*размер круга можно уменьшить/увеличить */
width: 80px; /*размер круга можно уменьшить/увеличить */
color: #FFFFFF; /*цвет цифр */
background-color: #004D40; /*фон круга */
text-align: center;
line-height: 80px; /*регулировать при изменении размера круга */
border-radius: 50%;
border: 5px solid #F4FF81; /*цет рамки круга */
font-size: 24px; /*размер шрифта цифр */
font-weight: bold;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); /*размер и цвет тени круга */
} </style>

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

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

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

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

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

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