Какой рейтинг вас больше интересует?
|
Главная /
Каталог блоговCтраница блогера Хаки и Скрипты Next Generation CMS/Записи в блоге |
Хаки и Скрипты Next Generation CMS
Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888 |
|
Текст 3D на CSS3
2013-10-05 14:44:19 (читать в оригинале)Сегодня мы сделаем текст 3D,смотрится классно,можно использовать в качестве лого или названия сайта.Основная идея очень проста. Вы можете получить хороший эффект 3D объеденив нескольких слоев text-shadow .
И так приступим
1. Заключаем текст который хотим изменить в блок с id="text":
Код:
<div id="text">2.В CSS добавляем :
<h1>Это наш текст</h1>
<h2>И это красиво!</h2>
</div>
Код:
#text {2.И последнее ,перед /body добавляем скрипт :
position:absolute;
width:600px;
height:120px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-60px;
text-align:center;
text-transform:uppercase;
-webkit-tranform:translateZ(0);
-webkit-transition-duration:0.05s;
-moz-tranform:translateZ(0);
color:#f3f3f3;
text-shadow:0 0 1px rgba(0,0,0,.2);
}
Код:
<script type="text/javascript">На этом все ,кому что не понятно,пишем комментарии
var text = document.getElementById('text'),
body = document.body,
steps = 7;
function threedee (e) {
var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
shadow = '',
color = 190,
radius = 3,
i;
for (i=0; i<steps; i++) {
tx = Math.round(x / steps * i);
ty = Math.round(y / steps * i);
if (tx || ty) {
color -= 3 * i;
shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
}
}
shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
text.style.textShadow = shadow;
text.style.webkitTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
text.style.MozTransform = 'translateZ(0) rotateX(' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threedee, false);
</script>
Красочные часы с помощью CSS и JQuery
2013-10-05 03:53:21 (читать в оригинале)Сегодня воспользуемся JQuery плагином tzineClock.
Для начала
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам demochasy.zip (50.54 Kb)[/is-logged],распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем стиль и скрипты необходимые для работы часов:
Код:
3.Добавляем блок в котором будут отображаться часы:
<link rel="stylesheet" type="text/css" href="css/jquery.tzineClock.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.tzineClock.js"></script>
<script type="text/javascript" src="{tpl_url}/js/script.js"></script>
Код:
<div id="fancyClock"></div>
Вот и все пользуемся
Адаптивная галерея на jquery плагине LEAST.JS
2013-10-03 15:13:28 (читать в оригинале)Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.
Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам gallery_least.zip (2.68 Mb)[/is-logged] ,заливаем в папку вашего шаблона.
Этот код размещаем между body :
Код:
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<!-- один элемент галереи -->
<li>
<a href="images/p1.jpg"></a>
<img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>Заголовок фото</h2>
</li>
<li>
<p>Краткое описание изображения</p>
</li>
</ul>
</div>
<div class="projectInfo">
Полное описание изображения
</div>
</li>
<!-- /один элемент галереи -->
</ul>
</section>
Для работы галереи в хеад подключаем следующие скрипты и стили:
Код:
<link href="{tpl_url}/css/least.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="{tpl_url}/js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="{tpl_url}/js/jquery.lazyload.js"></script>
Вызов плагина :
Код:
$(document).ready(function(){Опции:
$('#gallery').least();
});
'random': true/false (по умолчанию true - включено)
'lazyload': true/false (по умолчанию true - включено)
Здесь можно подключить любой плагин,последние новости,популярные,и т .д.
Хак вывод Ajax окна в любом месте сайта.
2013-10-03 14:37:51 (читать в оригинале)Хак дает возможность вывести любое Ajax окно в любом месте сайта.
Возможность: задать размер окна; название окна; любое количество окон (у каждого должен быть свой ID); любое содержание окна (все хтмл теги)
Так начнем с установки:
Скрипт вставляем в любом месте вашего сайта, рекомендую создать дополнительную страницу шаблона куда складать свои скрипты:
Код:
<script type="text/javascript">
function Modalcom() {
$(function(){
$('#Modalcom').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 700,
height: 500,
});
});
$('#Modalcom').show(3000);
$('.ui-dialog').show(3000);
}
</script>
width: 700 - ширина окна
height: 500 - высота окна
Modalcom - в нашем случаи ID окна
Где хотим видеть кнопку для активирования Ajax окна:
Код:
<center><div class="showLinki">
<div class="quote">
<input type="submit" class="fbutton" onclick="Modalcom(); return false;" value="Комментировать" style="width:200px;">
</div></div></center>
style="width:200px - ширина кнопки
вызов окна:
Код:
<a href="#" onclick="FuncName(); return false;" value="Нажми на меню" class="bbcodes"></a>
Содержимое окна:
Код:
<div id="Modalcom" title="Оставить комментарий" style="display:none; ">
ЗДЕСЬ содержимое окна
</div>
Всплывающее окно при загрузке сайта с помощью CSS3 и JS
2013-10-01 19:15:36 (читать в оригинале)Всем нам попадались сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием, будь то объявление, реклама, подписная форма или форма обратной связи.
Все давно придумано и прекрасно работает.
Разметка HTML
Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент div id="parent_popup" отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера div id="popup" будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:
Код:
<div id="parent_popup">Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой JS и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот JS лучше всего в конце тела страницы html перед закрывающим тегом /body. Ну а сам скрипт состоит всего лишь из нескольких строк:
<div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>
Код:
<script type="text/javascript">В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>
Для закрытия окна мы просто используем ссылку с небольшим javascript в атрибуте и определенным классом class="close" для возможности оформления внешнего вида кнопки закрытия через стили CSS.
Код:
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>Таким образом мы подошли к самому интересному моменту (на мой взгляд) создания всплывающего окна, к формированию внешнего вида с помощью стилей и некоторых свойств CSS3.
Стили CSS
Для начала создадим стилевой идентификатор #parent_popup с помощью которого мы свяжем наше окно с javascript и сформируем внешний вид основного контейнера div id="parent_popup".
Код:
#parent_popup {Для основы нашего окна выставляем фиксированное положение (position: fixed;), то есть, если вы будете прокручивать страницу при открытом окне, оно так же будет смещаться вниз. Зададим цвет фона черного цвета и добавим ему небольшую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон будет располагаться поверх всех остальных элементов.
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
В завершении с помощью свойства display: none; скроем его до момента активации javascript.
Теперь давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь все так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока.
Код:
#popup {С помощью свойств CSS3 можно практически как угодно сформировать внешний вид всплывающего окна, например использовать функцию линейного градиента для фона, или же различные виды трансформации. При этом правда не следует забывать, что не все браузеры одинаково хорошо справляются с обработкой новых свойств CSS3.
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Закрываем окно
На завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаем класс close и начинаем оформлять кнопку закрытия:
Код:
.close {Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении определяемся с изменением цвета фона при наведении курсора мыши на кнопку.
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
Все! Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «хрень» и уж тем более блокировать возможность закрытия окна.
Уважайте своих пользователей и они к вам потянутся.
Категория «Поэты»
Взлеты Топ 5
+27 |
41 |
biletiks |
|
|
|
|
|
|
|
|
|
|
|
|
Падения Топ 5
-5 |
36 |
Счастливые мамашки |
-9 |
2 |
gvud |
-16 |
13 |
mydorian |
|
|
|
|
|
|
Популярные за сутки
Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.
взяты из открытых общедоступных источников и являются собственностью их авторов.