Все подробности об этом расписывать не буду. Просто предложу, для тех кому интересно, замечательный учебник http://htmlbook.ru/css.
1. Затухание (свойство transition-opacity )
Наведите на написанный текст.
пока-пока
CSS.
<style>.transition-opacity {
background:#B60E31;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 300px;
font-size: 25px;
border: 3px ridge pink ;
cursor: pointer;
transition: 2s linear;
}
.transition-opacity:hover {
opacity: .1;
}
</style>
HTML.
<div class="transition-opacity">ваш текст</div>

В этом случае такой код HTML.
<div class="transition-opacity ">
<img alt="в шляпе" src=" путь к картинке(адрес)" height="100" width="300" /></div>
2.Увеличение (свойство transition-scale).<img alt="в шляпе" src=" путь к картинке(адрес)" height="100" width="300" /></div>
привет-привет

CSS.
<style>.transition-scale {
position: relative;
z-index: 2;
background:#B60E31 ;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 25px;
border: 3px ridge black;
cursor: pointer;
transition: 3s linear;
}
.transition-scale:hover {
-webkit-transform: scale(2);
transform: scale(2);
}</style>
HTML для текста.
<div class="transition-scale">
привет-привет</div>
HTMLдля изображения.
<div class="transition-scale">
<img alt="в шляпе" src=" адрес изображения" height="100" width="300" /></div>
3.Вращение (свойство transition-rotate )<div class="transition-scale">
привет-привет</div>
HTMLдля изображения.
<div class="transition-scale">
<img alt="в шляпе" src=" адрес изображения" height="100" width="300" /></div>
кружите меня, кружите
CSS.
<style>.transition-rotate {
position: relative;
z-index: 2;
background: #FFF;
color: #808991;
border: 2px ridge red; //можно убрать из кода//
border-radius: 100%; //можно убрать//
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 20px;
cursor: pointer;
transition: 4s linear;
}
.transition-rotate:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}</style>
HTML для текста.
<div class="transition-rotate">
кружите меня, кружите</div>
HTMLдля изображения.
<div class="transition-rotate"><img alt=" рыбка" src=" https://lh3.googleusercontent.com/TkHYaSyJ_7zAKRJnb1UKSosTXBvbIWmIyiBEFVhvFAU=w252-h174-no" height="100" width="300" /></div>
4.Смещение вниз.<div class="transition-rotate">
кружите меня, кружите</div>
HTMLдля изображения.
<div class="transition-rotate"><img alt=" рыбка" src=" https://lh3.googleusercontent.com/TkHYaSyJ_7zAKRJnb1UKSosTXBvbIWmIyiBEFVhvFAU=w252-h174-no" height="100" width="300" /></div>
Ой, Ой,,, Куда это я
CSS.
<style>.transition-translate {
position: relative;
top: 0;
z-index: 2;
background:#EC8282 ;
color: #FFF;
margin: 0 auto;
padding: 10px;
text-align: center;
max-width: 500px;
font-size: 20px;
border: 2px ridge red ;
cursor: pointer;
transition: 2s linear;
}
.transition-translate:hover {
top: 50px;
}
</style>
HTML для текста.
<div class="transition-translate">
текст</div>
HTML для изображения.
<div class="transition-rotate"><img alt=" крот" src=" адрес картинки" height="100" width="300" /></div>
<div class="transition-translate">
текст</div>
HTML для изображения.
<div class="transition-rotate"><img alt=" крот" src=" адрес картинки" height="100" width="300" /></div>
Реализация эффектов в блоге.
При написании сообщения переходим в режим HTML и где-нибудь в конце сообщения устанавливаем нужный код CSS. В том месте, где предполагается установить эффект вставляем соответствующий HTML код. В стилях можно поменять, удалять или добавлять свои варианты.
background:#EC8282 ;//цвет фона//
color: #FFF;//цвет текста //
margin: 0 auto; //величина отступа//
padding: 10px; //отступы вокруг содержимого//
text-align: center;
max-width: 500px; //максимальная ширина блока//
font-size: 20px; //размер шрифта//
border: 2px ridge red ; //размер и цвет рамки//
cursor: pointer; //форма курсора при наведении//
transition: 2s linear; //скорость//
Некоторые эффекты подглядела здесь.
У меня сегодня всё. Если что не понятно спрашивайте в комментариях. Во всём разберёмся. Спасибо, что читаете мои шпаргалки. Удачи всем.
здесь можно оформить подписку на новые шпаргалки
а вот увеличение изображения при наведении курсора мне бы пригодилось, но боюсь, что это сильно будет тормозить загрузку страниц (
ОтветитьУдалитьСайхан. это же совершенно лёгкий код. Лучше отказаться от Лайтбокса в пользу этого.
УдалитьУ меня даже лайтбокса нет, я в каждой статье увеличиваю размер изображения настолько, насколько это возможно.
УдалитьСайхан у тебя скриншоты качественные, возможно и не надо ничего делать. Разве что в некоторых случаях.
Удалить