Сегодня 27 ноября, среда

Какой рейтинг вас больше интересует?

получить код

Главная /

Каталог блогов

/

Cтраница блогера Хаки и Скрипты Next Generation CMS

Записи в блоге

	Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Очень красивая анимация кнопки на CSS3

2013-11-21 00:46:54 (читать в оригинале)

Очень красивая анимация кнопки на CSS3,подойдет для красочных и стильных дизайнов.
1.Скачиваем исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам 1319601850.zip (44.9 Kb)[/is-logged] .
2.Сам код кнопки простой это ссылка
Код:
<a class="button" href="#">Я кнопка</a>
3.Ну а теперь стиль
Код:
.button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/background.png) no-repeat center -100px;
}
Это простенький вариант,в исходнике есть еще пара примеров

Тэги: css, иконки,, кнопки
Постоянная ссылка

Скрипт выбора фонового изображения пользователями
2013-11-19 01:57:59 (читать в оригинале)

Вот небольшой скрипт, позволяющий пользователям самостоятельно выбирать фон сайта из предложенных Вами вариантов. В скрипте будет использован только библиотека jQuery и плагин jQuery Cookie — он поможет нам сохранить выбранный пользователем вариант. Таким образом даже после перезагрузки страницы или закрытия браузера, фон будет тот же, что выбрал пользователь.
И так, начнем…
1. Подключаем скрипты,первым делом подключаем саму библиотеку jQuery, если она у Вас еще не подключена, и плагин jQuery cookie.
Код:
<script type="text/javascript" src="{tpl_url}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.cookie.js"></script>
2. HTML разметка.
Код:
<div id="panel-bg">
<div>Выберите фон страницы:</div>
<div class="button-bg bg-1" id="bg-1"></div>
<div class="button-bg bg-2" id="bg-2"></div>
<div class="button-bg bg-3" id="bg-3"></div>
<div class="button-bg bg-4" id="bg-4"></div>
<div class="button-bg bg-5" id="bg-5"></div>
<div class="button-bg bg-6" id="bg-6"></div>
<div class="button-bg bg-7" id="bg-7"></div>
</div>
В блоке с id panel-bg находятся несколько блоков, которые будут в качестве кнопок. У каждого из них будет своя фоновая картинка, назначать мы их будем для классов. Также у этих блоков есть и id, которые должны совпадать с их классом (далее Вы поймете зачем).
3. CSS стили.
Код:
.button-bg {
width: 40px;
height: 40px;
border: 1px solid #ddd;
float: left;
margin: 7px 3px;
cursor: pointer;
}
.active,
.button-bg:hover {
box-shadow: 0 0 3px rgba(0,0,0,0.5);
border: 1px solid #fff;
}
.bg-1 {background: #fff url("images/agsquare.png");}
.bg-2 {background: #fff url("images/diagonales_decalees.png");}
.bg-3 {background: #fff url("images/geometry.png");}
.bg-4 {background: #fff url("images/gray_jean.png");}
.bg-5 {background: #fff url("images/ps_neutral.png");}
.bg-6 {background: #fff url("images/skelatal_weave.png");}
.bg-7 {background: #fff url("images/sneaker_mesh_fabric.png");}
Для каждого класса задали свою фоновую картинку и выровняли блоки в линию. Так же добавили стили при наведении и для активного блока.
4. Cкрипт.
Код:
$(document).ready(function() {

if($.cookie('body-bg')) { // если кука уже есть

var bgBody = $.cookie('body-bg'); // получаем значение куки

$('body').addClass(bgBody); // добавляем класс body
$('#'+bgBody).addClass('active'); // выбираем активную кнопку и даем ей класс active

}

$('.button-bg').click(function() { // действия при клике на кнопку (блок div)

var bgBody = $('body').attr('class'), // получаем текущий класс и присваеваем его переменной bgBody
bgId = $(this).attr("id"); // получаем значение id, кнопки по которой был клик

$('body').removeClass(bgBody).addClass(bgId); // удаляем текущий класс у body и добавляем тот который был выбран

$('.button-bg').removeClass('active'); // удаляем у всех кнопок класс active
$(this).addClass('active'); // текущей кнопки даем класс active

$.cookie('body-bg', bgId, {expires: 365}); // добавляем куку на год

});

});
Как видите, скрипт достаточно маленький и простой. При клике по одному из блоков, значение его id записывается в куку, а тегу body дается класс (такой же как id блока по которому был клик), а самому блоку добавляется класс active. Так же в начале есть проверка на существование куки, и если она уже есть, то так же добавляются нужные классы и body и блоку в панели.
Все пользуемся.

Тэги: lightbox, overlay, диалоги,
Постоянная ссылка

Jquery плагин галереи PrettyPhoto
2013-11-19 01:09:34 (читать в оригинале)

PrettyPhoto — это простая галерея с огромными возможностями. Она поддерживает не только изображения, но и видео (в том числе с youtube и vimeo), flash, frame и AJAX. Эту галерею можно легко настроить под себя, внеся изменения в скрипт. В комплекте идут 6 тем оформления, которые позволяют легче подстроится под дизайн сайта.

1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам prettyphoto.zip (1.41 Mb)[/is-logged],распаковываем и заливаем в папку вашего шаблона.
2. Подключаем скрипты, первым делом jQuery, если он у Вас еще не подключен, а затем и скрипт PrettyPhoto.
Код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="{tpl_url}/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
3. Подключим стили галереи
Код:
<link rel="stylesheet" href="{tpl_url}/css/prettyPhoto.css" type="text/css" media="screen" />
4.HTML разметка для галереи изображений
Код:
<ul class="gallery clearfix">
<li><a href="{tpl_url}/images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]

" title="Описание снизу"><img src="{tpl_url}/images/thumbnails/t_1.jpg" width="60" height="60" alt="Название вверху" /></a></li>
<li><a href="{tpl_url}/images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]

"><img src="{tpl_url}/images/thumbnails/t_2.jpg" width="60" height="60" alt="Название вверху" /></a></li>
...
</ul>
В теге rel ссылки мы указали в квадратных скобках, что это галерея 1 (для вывода одного изображения нужно оставить только prettyPhoto), в атрибуте title прописывается описание (выводится под изображением) и в атрибуте alt у изображения прописывается название (выводится над изображением).
Прописываем скрипт (желательно перед
Код:
</body>
но можно и в head)
Код:
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Передаем параметры
Код:
<script type="text/javascript">
$(document).ready(function(){
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
animation_speed:'normal',//скорость анимации
theme:'light_square',//тема оформления
slideshow:3000,//время показа слайда
autoplay_slideshow: true//автоматический старт слайдшоу
});
});
</script>
Описание всех параметров можно посмотреть в самом скрипте.
5. Разметка для вставки видео с youtube
Код:
<a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a>
Для вставки видео достаточно всего лишь прописать ссылку на страницу с видео.
6. Разметка для вывода содержимого какого-либо блока
Код:
<a href="#block" rel="prettyPhoto" title="Контент">Контент из блока с id=block</a>
Данная галерея обладает еще множеством возможностей и различными настраиваемыми параметрами. Обо всем остальном Вы можете узнать из файлов демонстрации, а я же хотел бы обратить внимание на одну вещь…
В этой галереи меня не устроил вывод названия и описания, точнее то, откуда они берутся (title и alt). В атрибуты нельзя прописать теги, точнее можно, но не удобно. И для этого я кое-что изменял в скрипте на 154 и 155 строке. Первоначально они выглядели так:
Код:
pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('img').attr('alt')) ? $(n).find('img').attr('alt') : ""; }) : $.makeArray($(this).find('img').attr('alt'));
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));
После изменения так:
Код:
pp_titles = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.description').html()) ? $(n).find('div.description').html() : ""; }) : $.makeArray($(this).find('div.description').html());
pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('div.title').html()) ? $(n).find('div.title').html() : ""; }) : $.makeArray($(this).find('div.title').html());
И после этого вовнутрь ссылки добавил два блока div:
Код:
<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Изображение 1" />
<div class="title" style="display: none;">Название</div>
<div class="description" style="display: none;">Описание</div>
</a>
Таким образом в описание легко можно добавлять и ссылки и параграфы и все остальное.
7. Кнопка поделиться от яндекс
Так как галерея изменяет url адрес и открывает контент в зависимости от адреса, то в ней есть возможность добавления кнопок от социальных сетей, что бы ставить лайки и делиться ссылкой. Изначально там есть кнопка twitter и facebook. И для того, что бы внедрить в нее кнопку от яндекса необходимо в самом скрипте заменить содержимое social_tools (строка 93), на то, что получите от яндекса.
8.вот и все подробнее в документации

Тэги: lightbox,, overlay, диалоги,
Постоянная ссылка

Адаптивная верстка
2013-11-17 14:09:13 (читать в оригинале)

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

Будем писать наш код на HTML5, поэтому можно использовать новые элементы, такие как header, footer и т. д.
Лучше подключить плагин html5 shiv для корректного отображения сайта в IE и файл reset.css, чтобы сбросить ненужные стили.
1.Скачать исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам demo_template.zip (5.38 Kb)[/is-logged].
2.Сначала создадем блок «wrapper», секцию для хэдера с названием сайта, слоганом и навигацией. Блок с основным содержимым включает в себя раздел со статьями, раздел с последними новостями, раздел с дополнительной информацией и футер. Мы не создаём ничего особенного, просто делаем структуру страницы и добавляем названия классов и идентификаторов css, чтобы затем подключить стили.
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Onextrapixel - Responsive Web Design Template</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="media-queries.css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic' rel='stylesheet' type='text/css'>


</head>

<body id="home">
<div id="wrapper">

<header>
<h1><a href="index.html">Site Title</a></h1>
<h2>Tagline <span>&</span> Some clever comment about the company</h2>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<div class="clearfix"></div>
</nav>
</header>

<section id="main-content">
<div id="featured">
<h3>Featured Article :</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading →</a></p>
</div> 
<hr/>
<div id="latest">
<section class="left-col">
<h3>Latest Articles :</h3><br/>
<h4><a href="#">Blog 1</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 2</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 3</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
</section> 

<aside class="sidebar">
<h4><a href="#">Archives</a></h4>
<ul>
<li><a href="#">July 2010</a></li>
<li><a href="#">August 2010</a></li>
<li><a href="#">September 2010</a></li>
</ul>
<br/>
<h4><a href="#">Categories</a></h4>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Roundups</a></li>
</ul>
<br/>
<h4><a href="#">Social</a></h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Google+</a></li>
</ul>
</aside>
</div> 
<div class="clearfix"></div>
<hr/>
<div id="about">
<h3>About</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>

Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</section>
<hr/>
<footer>
<p>© 2011 - Responsive Website Template</p>
</footer>

</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Наша разметка должна выглядеть так:

3.Добавим CSS
Как вы заметили, в разделе head подключили шрифт Droid serif из Google Web Fonts API. Теперь установим общие стили и стили для типографики
Код:
body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; }
Давайте добавим стили для #wrapper, установим ему резиновую ширину 90% и максимальную ширину (значение max-width).
Добавим остальные стили, чтобы сделать нашу страницу более привлекательной для посетителей. В основной секции у нас две колонки, помните, что любая ширина должна задаваться в процентах, чтобы быть резиновой. Свойство CSS transitions, которое здесь прописано, не будет работать, пока мы не подключим media queries.
Код:
h1 { font-size: 90px;
font-family: 'Droid Serif', serif;
line-height: 75px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h1 a:hover { text-decoration: none; color: #27B3CF; }

h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h3 { font-family: 'Droid Serif', serif; font-size: 30px; }
h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { text-decoration: none; }

nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
-webkit-transition-property: width;
-moz-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}

#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }

p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }
footer { padding: 5px; }
Теперь наша страница должна выглядеть таким образом:

4.Подключим к HTML-документу ещё один CSS-файл с названием media-queries.css. В него поместим свойства для различных размеров экранов устройств, это будут свойства для заголовков h1 , h2 и для колонок.
Код:
@media screen and (max-width: 478px) {
h1 { font-size: 70px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
}

@media screen and (max-width: 740px) {
.left-col { width: 100%; }
.sidebar { width: 100%; }
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Версия для iPhone

Так наш сайт должен выглядеть на iPhone.

Благодаря свойству CSS transitions, которое добавили в файл CSS, название сайта, слоган и другие текстовые элементы будут изменять свой размер плавно, без резких «скачков».
Это не единственный способ создания адаптивного дизайна, а всего лишь вариант автора статьи.

Тэги: css,, html5,
Постоянная ссылка

Создание Android Dock с использованием JQuery и CSS3
2013-11-10 13:58:48 (читать в оригинале)

Вот обнаружил классное меню в стиле андроид
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам androiddock.zip (169.07 Kb)[/is-logged] ,распаковываем и заливаем в папку с вашим шаблоном.
2.В файле main.tpl между head подключаем стили и скрипты:
Код:

<link rel="stylesheet" href="{tpl_url}/css/demo.css">
<script>!window.jQuery && document.write(unescape('%3Cscript src="{tpl_url}/js/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="{tpl_url}/js/demo.js"></script>
<script src="{tpl_url}/js/modernizr.custom.34807.js"></script>
<script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script>
3.Теперь сам блок с меню:
Код:
<div id="dock-wrapper">
<div class="dock">
<div class="dock-front">
<img src="{tpl_url}/images/arrow-up.png" alt="Arrow Up" id="arrow-up">
</div>
<div class="dock-top">
<img src="{tpl_url}/images/arrow-down.png" alt="Arrow Down" id="arrow-down">
</div>
</div>
<div class="item">
<span><img src="{tpl_url}/images/launcher-pro.png" width="60"></span>
<span><img src="{tpl_url}/images/2do.png" width="60"></span>

</div>
</div>
Вот и все ,наслаждаемся менюшкой,незабываем у кого уже подключен jquery повторно подключать не надо,и при заливке в шаблон осторожно,чтобы не было замены файлов,если есть одинаковые файлы лучше переименуйте и исправьте в коде имена,будут проблемы пишите

Тэги: css,, меню, навигация,
Постоянная ссылка

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Блограйдеров
14500

Блогов
219926
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

Рыбалка
по среднему баллу (5.00) в категории «Спорт»

Категория «Кино»

Взлеты Топ 5


+363	414	Информационный колодец
+341	345	Yurenzo
+339	343	CAPTAIN
+331	341	Alta1r
+322	361	Vindigo

Падения Топ 5


-2	48	Illusory_doll
-3	237
-3	252	Soft Hedgehog's Journal
-5	264	Смотреть онлайн индийские фильмы.
-5	27	warner four

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.