Каталог файлов

Скрипт кнопка вверх как кот

Sat, 17 May 2014 05:47:51 GMT

В этом готовом решении для системы uCoz и для любых сайтов вообще, я предлагаю вам новый скрипт кнопка вверх как кот для сайта. Главной особенностью данного скрипта кнопки вверх, является то, что она выглядит как кот, который толкает стрелку (страницу) вверх сайта. Данная кнопка вверх с плавным скроллингом (смотрите также такой скрипт кнопка вверх для сайта), что очень приятно пользователю. Установка, как всегда, очень проста . . .

Установка:

Идем в Панель Управления => Управление дизайном => Нижняя часть сайта и здесь в самый низ ставим такой код:

Код

После этого сохраняем все сделанные изменения нажав на кнопку «сохранить». Готово! Вот такой скрипт кнопочки вверх в виде котика. На этом все, спасибо вам за внимание!

Меню в Японском стиле

Sat, 17 May 2014 03:19:58 GMT

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

Установка:

Для начала идем в ваши таблицы стилей CSS и вставляем туда такой код:

Код

.content-inner {
background-color: #E2CFAC;
}
.menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px;font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
padding: 0;
margin: 0;
height: 100px;
width: 100px;
}
.menu-block:before {
content: '風';
left: 15%;
}
.menu-block:after {
content: '水';
right: 15%;
}
.fen-shuy {
position: relative;
z-index: 5;
background: url(http://webanfarwol.ru/IMG5/fen-shuy-gradient.png) repeat-x #ccc;
border: 1px solid #000;
border-radius: 100px;
margin: 0 auto;
height: 200px;
width: 200px;
}
.fen-shuy:hover {
width: 800px;
}
.fen-shuy:after,
.fen-shuy:before {
position: absolute;
top: 0;
content: '';
padding: 0;
margin: 0;
height: 200px;
width: 100px;
}
.fen-shuy:before {
left: 0;
background: #000;
border-radius: 100px 0 0 100px;
}
.fen-shuy:after {
right: 0;
background: #fff;
border-radius: 0 100px 100px 0;
}
.fs-menu:before,
.fs-menu:after {
content: '\25CF';
position: absolute;
z-index: 5;
font: normal normal 100px/75px Tahoma;
height: 100px;
width: 50px;
}
.fs-menu:before {
background: #fff;
border-radius: 50px 0 0 50px;
text-indent: 20px;
color: #000;
left: 50px;
top: 0;
}
.fs-menu:after {
background: #000;
border-radius: 0 50px 50px 0;
text-indent: -50px;
color: #fff;
right: 50px;
bottom: 0;
}
.fs-menu {
background: url(http://webanfarwol.ru/IMG5/fen-shuy-bg.png) 0% -2px no-repeat transparent;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0 !important;
margin: 0 100px !important;
list-style: none;
overflow: hidden;
height: 196px;
}
.fs-menu li {
position: relative;
border-radius: 100px;
text-align: center;
float: left;
height: 100%;
width: 120px;
}
.fs-menu li a {
display: block;
position: relative;
background: #000000;
border-radius: 120px;
border: 2px solid #ffffff;
color: #ffffff;
font: normal normal 13px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #ffffff;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px 1px 2px;
color: #000000;
border: 2px solid #000000;
z-index: 2;
height: 150px;
width: 150px;
}
.menu-title {
display: block;
position: absolute;
top: -18px;
right: 100%;
background: #FFF;
border: 1px solid #CCC;
text-align: center;
font: normal normal 16px sans-serif;
opacity: .4;
padding: 10px 0 0 0;
height: 80px;
width: 20px;
word-wrap: break-word;
}
.menu-title:before,
.menu-title:after {
content: '';
position: absolute;
right: 0;
border-radius: 1px;
border-width: 10px 10px;
border-style: solid;
}
.menu-title:after{
top: 90px;
border-color: #FFF transparent transparent transparent;
}
.menu-title:before {
top: 91px;
border-color: #CCC transparent transparent transparent;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.close-fs {
display: none;
position: absolute;
top: 10px;
right: 110px;
background: #FFF;
border: 1px solid #666;
border-radius: 2px;
font: normal normal 12px/14px Comic Sans MS;
text-align: center;
color: #666;
cursor:pointer;
height: 14px;
width: 13px;
}
.close-fs:hover {
color:#C00;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.fs-menu li a,
.menu-title {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Теперь туда, где __

Всплывающая картинка

Fri, 16 May 2014 20:22:24 GMT

Интересный скрипт работает на css. При наведении на ссылку (картинку) появляется картинка. Очень удобно делать к примеру в блок друзья при наведении на ссылку будет виден скриншот сайта но он не обновляется т.е. только та картинка которую поставите.
CSS стиль я немного переделал под себя.
в CSS прописываем :

Code

/*Всплывающий скриншот*/
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
padding: 5px;
left: -1000px;
border: 1px solid white;
visibility: hidden;
color: Yellow;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
/*---------------------*/

Ссылка должна быть такая :

Code

СсылкаЗдесь описание

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

Code

Ваш текст

Готово !

Падающие лепестки роз

Fri, 16 May 2014 16:06:08 GMT

Падающие лепестки роз для ucoz

Кнопки для прокрутки странички вверх и вниз

Sat, 10 May 2014 18:09:02 GMT

<script language="JavaScript" type="text/javascript">
var go_down = jQuery('body');
jQuery(function() {
 $("#Go_Top").hide().removeAttr("href");
 if ($(window).scrollTop() >= "250") $("#Go_Top").fadeIn("slow")
 var scrollDiv = $("#Go_Top");
 $(window).scroll(function() {
 if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
 else $(scrollDiv).fadeIn("slow")
 });
 $("#Go_Bottom").hide().removeAttr("href");
 if ($(window).scrollTop() <= go_down.height()-"999") $("#Go_Bottom").fadeIn("slow")
 var scrollDiv_2 = $("#Go_Bottom");
 $(window).scroll(function() {
 if ($(window).scrollTop() >= go_down.height()-"999") $(scrollDiv_2).fadeOut("slow")
 else $(scrollDiv_2).fadeIn("slow")
 });
 $("#Go_Top").click(function() {
 $("html, body").animate({scrollTop: 0}, "slow")
 })
 $("#Go_Bottom").click(function() {
 $("html, body").animate({scrollTop: go_down.height()}, "slow")
 })
});
</script>

Справочник по html

Thu, 08 May 2014 19:26:28 GMT

Бегущая строка

Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие браузеры не всегда корректно отображают работу различных его атрибутов.

для ЖЖ: «HTML-тэг marquee теперь вырезается из текста комментария при отображении (т.е. сам текст будет отображаться, но он не будет анимирован или скрыт).»
СУП. Релиз #75 от 4 Фев, 2011

your running text
<marquee>your running text</marquee>

your running text

your message here

your running text

your message here

your running text

your text here

your exciting message hereyour exciting message hereyour exciting message hereyour exciting message here

<marquee bgcolor="pink" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee><marquee bgcolor="silver" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee>

Останавливаем строку наведением курсора мыши

<marquee>
<hr />
<marquee height="150" direction="up"><center> </center></marquee> 
<textarea width="60%"" rows="1" cols="45"><marquee height="150" direction="up">
<hr />
<marquee behavior="alternate" direction="down" scrollamount="10"><marquee behavior="scroll" direction="left" scrollamount="10"></marquee></marquee> 
<textarea width="60%"" rows="3" cols="45"><marquee behavior="alternate" direction="down" scrollamount="10"><marquee behavior="scroll" direction="left" scrollamount="10"> 
<hr />
 <center><MARQUEE width="300" height="100" behavior="alternate" style="border:3px solid red"></center></MARQUEE> 
<textarea width="60%"" rows="2" cols="45"><marquee width=300 height=10 behavior="alternate" style="border:3px solid red ;">
<hr />
<center>бонус</center> 
Сайты, где много движущихся анимашек: 
<a href=" http://www.glitter-graphics.com">glitter-graphics.com</a> 
<a href=" http://www.bigoo.ws/Glitters/">bigoo.ws</a>
<hr />
<marquee direction="up" scrollamount="1" height="150" style="filter:wave(add=1, phase=10, freq=2, strength=300); colortag="red";>Flying text</marquee>
 <textarea width="60%"" rows="3" cols="45"><marquee direction="up" scrollamount="1" height="150" style="filter:wave(add=1, phase=10, freq=2, strength=300); colortag="red";>FLYING TEXT</marquee>

Как сделать бегущую строку на сайте

Thu, 08 May 2014 19:15:17 GMT

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

HTML - код примеров бегущей строки.

<marquee>простая строка - по умолчанию</marquee> <marquee width="500px" height="20px">заданные размеры блока строки</marquee> <marquee bgcolor="#00FF33" width="500px" height="20px">меняем фон блока</marquee> <marquee direction="right" bgcolor="#00FF33" width="500px" height="20px">движение слева направо</marquee> <marquee behavior="alternate" bgcolor="#00FF33" width="500px" height="20px" >постоянное движение</marquee> <marquee direction="up" bgcolor="#00FF33" width="150px" height="50px">снизу вверх</marquee> <marquee direction="down" bgcolor="#00FF33" width="150px" height="50px">сверху вниз</marquee> <marquee behavior="alternate" direction="right" scrollAmount="1" bgcolor="#00FF33" width="500px" height="20px"> меняем скорость на маленькую </marquee> <marquee direction="down" behavior="alternate" scrollAmount="1" bgcolor="#00FF33" width="300px" height="50px"> медленное движение текста снизу вверх и наоборот </marquee> <marquee behavior="alternate" direction="right" scrollAmount="1" bgcolor="#00FF33" width="500px" height="20px"> строка со ссылкой на <a href="http://kapon.com.ua/" title="сайт с примерами">сайт с примерами</a> </marquee> <marquee direction="right" scrollAmount="4" bgcolor="#00FF33" width="500px" height="100px"> </marquee>

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

Как сделать бегущую строку на сайте

Thu, 08 May 2014 19:13:09 GMT

Как сделать бегущую строку на сайте

Thu, 08 May 2014 19:12:43 GMT

Как сделать бегущую строку на сайте

Thu, 08 May 2014 19:10:43 GMT