Примеры рамок с треугольником

Вариант 1

Хочу все знать..Все знать невозможно..



Вариант 2

Хочу все знать..Все знать невозможно..



Вариант 3

Хочу все знать..Все знать невозможно..




Вариант 4

Хочу все знать..Все знать невозможно..



Вариант 5

Хочу все знать..Все знать невозможно..



Вариант 6

Хочу все знать..Все знать невозможно..



Вариант 7

Хочу все знать..Все знать невозможно..




Вариант 8

Хочу все знать..Все знать невозможно..



Вариант 9

Хочу все знать..Все знать невозможно..




Вариант 10

Хочу все знать..Все знать невозможно..




Вариант 11

Хочу все знать..Все знать невозможно..



Вариант 12

Хочу все знать..Все знать невозможно..




Вариант 13

Хочу все знать..Все знать невозможно..


Вариант 14

Хочу все знать..Все знать невозможно..


Коды для рамок в Блоге для Блогов. Кнопка справа.
Открыть комментарии →

Примеры рамок для выделения текста

Code1
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code2
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code3
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code4 (подведите курсор мыши к рамке)
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code5
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code6
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.

Code7  (подведите курсор мыши к рамке)
Я убежден, что единственной вещью, которая помогла мне продолжить дело было то, что я любил свое дело. Вам надо найти то, что Вы любите. И это также верно для работы, как и для отношений.  Стив Джобс.


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

Слайд шоу с подписью изображений



<style>
#slideshow {
margin: 5px auto;
position: relative;
width: 200px;
height: 330px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
position: absolute;
top: 10px;
left: 5px;
right: 5px;
bottom: 10px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);
});
</script>

<br />
<div id="slideshow">
<div>
<a href="http://www.bdblogov.ru/"><img src="http://3.bp.blogspot.com/-p08igjoFKtA/U3VmAMGFB8I/AAAAAAAAEUM/f3f6I3RBUjw/s1600/061_2.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://www.bdblogov.ru/">Блог для Блогов</a></center>
</div>
<div>
<a href="http://goazhetybloga.blogspot.com/"><img src="http://4.bp.blogspot.com/-yweNlmNPZ_E/U3VmgYn_cJI/AAAAAAAAEUU/XmpKqIhuZG8/s1600/010.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://goazhetybloga.blogspot.com/">Тестовый блог 1</a></center>
</div>
<div>
<a href="http://demo-q.blogspot.com/"><img src="http://3.bp.blogspot.com/-T7fQF5NMI50/U3Vmw9IQ2fI/AAAAAAAAEUc/XPr1cEGwc7U/s1600/12K9R703.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://demo-q.blogspot.com/">Тестовый блог 2</a></center>
</div>
<div>
<a href="http://demoblog-z.blogspot.com/"><img src="http://4.bp.blogspot.com/-yweNlmNPZ_E/U3VmgYn_cJI/AAAAAAAAEUU/XmpKqIhuZG8/s1600/010.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://demoblog-z.blogspot.com/">Тестовый блог 3</a></center>
</div>
<div>
<a href="http://horizon-s.blogspot.com/"><img src="http://4.bp.blogspot.com/-yweNlmNPZ_E/U3VmgYn_cJI/AAAAAAAAEUU/XmpKqIhuZG8/s1600/010.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://horizon-s.blogspot.com/">Информ блог</a></center>
</div>
</div>

Настройки: выделенное лиловым-размеры блока слайдера; синим-положение картинки слева и справа; голубым-размеры изображения; красным-название и url ссылки; сиреневым-ссылка и url адреса изображений; Код вставляете в дизайн-добавить гаджет-в нужное место макета блога.

Для того, чтобы добавить изображения, вставляйте строку:

 <div>
<a href="http://horizon-s.blogspot.com/"><img src="http://4.bp.blogspot.com/-yweNlmNPZ_E/U3VmgYn_cJI/AAAAAAAAEUU/XmpKqIhuZG8/s1600/010.JPG" height="300" width="190" /></a><br />
<center>
<a href="http://horizon-s.blogspot.com/">Информ блог</a></center>
</div>
Открыть комментарии →

Разные эффекты изображений

Поворот заданное количество раз



<div id="anvg">
<a href="http://4.bp.blogspot.com/-ql4Z3WjEqSU/U1-rGs19EQI/AAAAAAAAENk/HHNzsAYMhQA/s1600/12567-1280x1024.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="10" src="http://4.bp.blogspot.com/-ql4Z3WjEqSU/U1-rGs19EQI/AAAAAAAAENk/HHNzsAYMhQA/s1600/12567-1280x1024.jpg" height="250" width="280" /></a></div>
<style type="text/css">
body { } #anvg {  width: 280px; animation: rotate 7s; animation-iteration-count: 9; -webkit-animation: rotate 7s; /* Safari & Chrome */-webkit-animation-iteration-count: 9;}@keyframes rotate { 100% { transform: rotate(360deg); } }@-webkit-keyframes rotate { /*Safari & Chrome */ 100% { -webkit-transform: rotate(360deg); }</style>

Выделенное синим-адрес картинки; красным-ширина и высота; лиловым-количество поворотов;

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













Меняющиеся изображения


<img alt="" border="0" src="http://3.bp.blogspot.com/-RH2L_FZ0WJ4/VJ2s2ipGOGI/AAAAAAAAGzw/xXwre2_GJWs/s1600/widescreen_287.jpg;" height="250" onmouseout="this.src='' http://3.bp.blogspot.com/-RH2L_FZ0WJ4/VJ2s2ipGOGI/AAAAAAAAGzw/xXwre2_GJWs/s1600/widescreen_287.jpg" onmouseover="this.src='http://4.bp.blogspot.com/-zisXn2jOXa8/VJ2soy1sddI/AAAAAAAAGzg/Qrw4QckbdCc/s1600/widescreen_402.jpg'" width="250" />

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

Поворот на 15 градусов



Движение вправо или влево



Увеличение одного изображения




Поворот картинки на 360 градусов



Меняющийся фон картинки

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



Понравились эффекты с изображениями? Поделитесь со своими друзьями и знакомыми в социальных сетях.


Открыть комментарии →
А Жизнь уходит... не прощаясь... Уходит, словно в Никуда!.. В небесной дымке растворяясь, роняет капелькой слова.... И мне за нею — не угнаться... А так хотелось бы вернуть! ... И, может, в чём-то разобраться.. А что-то — просто зачеркнуть... Остановить бы скорый поезд.... Нажать стоп-кран и развернуть!.. Переписать бы снова повесть.... Возможно, новый выбрать Путь... НО — Жизнь уходит, не прощаясь... Второго шанса… не даёт! ... Лишь улыбнётся... Удаляясь... и счёт за Прошлое пришлёт.....