Сегодня 5 апреля, суббота

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

получить код

Главная /

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

/

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

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

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

Делаем красивый чек бокс или радио кнопки

2014-01-15 15:24:46 (читать в оригинале)

Сегодня показываю пример изменения кнопок чек бокса и радио кнопки.
1.Первый вариант это чекбокс ,вот сам HTML код нашей формы с чек боксом

Код:

 <div class="switch">
		<input type="checkbox" checked="" id="switch-1" class="switch-check">
		<label for="switch-1" class="switch-label">
			Опция
			<span class="switch-slider switch-slider-on"></span>
			<span class="switch-slider switch-slider-off"></span>
		</label>
	</div>

2.Вот стили для него

Код:

 /* Switch */
		.switch,
		.switch-label,
		.switch-slider {
			width:154px;
			height:54px;
			}
		.switch {
			position:relative;
			display:inline-block;
			margin:0 50px 50px 0;
			}
			.switch-check {
				position:absolute;
				opacity:0;
				}
			.switch-label,
			.switch-slider {
				position:absolute;
				top:0;
				}
			.switch-label {
				left:0;
				text-indent:-9999px;
				}
			.switch-slider {
				border-radius:27px;
		        box-shadow:
		        	0 0 0 2px rgba(0, 0, 0, 0.1) inset,
		        	0 0 4px rgba(0, 0, 0, 0.5) inset,
		        	0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
		        	0 27px 0 rgba(0, 0, 0, 0.07) inset;
				-webkit-transition:width 0.2s linear;
				-moz-transition:width 0.2s linear;
				-o-transition:width 0.2s linear;
				transition:width 0.2s linear;
				}
			.switch-slider-on {
				left:0;
				width:54px;
				background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
				}
			.switch-slider-off {
				right:0;
				background:#FFF url(../images/off.svg) 86px 14px no-repeat;
				}
				.switch-slider-off:after {
					position:absolute;
					top:1px;
					left:1px;
					width:52px;
					height:52px;
					border-radius:50%;
					background:#E5E5E5;
					background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
					background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
					background:-o-linear-gradient(#D0D0D0, #FDFDFD);
					background:linear-gradient(#D0D0D0, #FDFDFD);
			        box-shadow:
			        	0 0 2px 2px #FFF inset,
			        	0 0 4px 1px rgba(0, 0, 0, 0.6);
					content:'';
					}
			.switch-label:active .switch-slider-off:after,
			.switch-check:focus + .switch-label .switch-slider-off:after {
				background:#D5D5D5;
				background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
				background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
				background:-o-linear-gradient(#C8C8C8, #E4E4E4);
				background:linear-gradient(#C8C8C8, #E4E4E4);
				}
			.switch-check:checked + .switch-label .switch-slider-on {
				width:154px;
				}
			.switch-check:checked + .switch-label .switch-slider-off {
				width:54px;
				}

Ну с этим все вот исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам knopka.zip (1.79 Kb)[/is-logged]

Вариант два с радио кнопкой
1. Сам HTML нашей кнопки
Код:
<fieldset class="switch">
<input type="radio" checked="" name="switch-1" id="switch-radio-off-1" class="switch-radio switch-radio-off">
<label for="switch-radio-off-1" class="switch-label switch-label-off">
Выкл.
<span class="switch-slider"></span>
</label>
<input type="radio" name="switch-1" id="switch-radio-on-1" class="switch-radio switch-radio-on">
<label for="switch-radio-on-1" class="switch-label switch-label-on">
Вкл.
<span class="switch-slider"></span>
</label>
</fieldset>
2.И стили
Код:
/* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
padding:0;
border:none;
}
.switch-radio {
position:absolute;
visibility:hidden;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
z-index:2;
width:154px;
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.switch-slider:after {
position:absolute;
top:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label-on .switch-slider {
left:0;
background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
}
.switch-label-on .switch-slider:after {
right:1px;
}
.switch-label-off .switch-slider {
right:0;
background:#FFF url(../images/off.svg) 86px 14px no-repeat;
}
.switch-label-off .switch-slider:after {
left:1px;
}
.switch-label:active .switch-slider:after {
background:#D5D5D5;
background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
background:-o-linear-gradient(#C8C8C8, #E4E4E4);
background:linear-gradient(#C8C8C8, #E4E4E4);
}
.switch-radio:checked + .switch-label .switch-slider {
z-index:1;
width:54px;
}
.switch-radio:checked + .switch-label .switch-slider:after {
visibility:hidden;
}
Вот исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам knopka_2.zip (1.89 Kb)[/is-logged]

Все выглядит красиво и работает,пользуемся.

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

Чашка чая на CSS3
2014-01-14 20:11:45 (читать в оригинале)

Как обычно Вы готовите себе чай? Просто: ставите чайник, чашку, закидываете пакетик или заливаете заварку. Просто и без изысков. Сегодня я расскажу вам, как готовят чай суровые верстальщики.

Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде Firefox, Opera, Safari или Chrome. Чем свежее, тем лучше — хорошо бы даже ночную сборку или какую-нибудь альфу.

1.Готовим основу нашего чая
Для начала подготовим основу для нашего чаепития. На мой взгляд, прогрессивный HTML5-шаблон с простым доктайпом
Код:
<!DOCTYPE HTML>
подойдёт лучше всего примерно так:
Код:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Чай со спецэффектами</title>
<meta charset="UTF-8">
</head>
<body>
…
</body>
</html>
Обратите внимание на атрибут lang элемента
Код:
<html>
— мы собираемся заваривать английский чай с американским акцентом, и его значение как раз соответствует нашему замыслу: en-US. Дальше нам это ещё пригодится.

2.Теперь давайте найдем подходящую чашку. Точнее, даже не найдем, а тут же соберём из знакомых частей. Из чего мы можем составить обычную чашку чая? Как минимум, из самой чашки cup и блюдца saucer. Чашка состоит из сосуда vessel с ручкой handle, в который последовательно налиты чай tea, брошены два кусочка сахара sugar, по вкусу, а замыкается это всё донышком bottom. Так у нас и получилась сама структура нашей чашки чая :
Код:
<div class="cup">
<div class="vessel">
<div class="tea">
<div class="sugar"></div>
<div class="sugar"></div>
<div class="bottom"></div>
</div>
</div>
<div class="handle"></div>
</div>
<div class="saucer"></div>
Основа для нашего чаепития готова, начинаем его рисовать.

3.Раскрашиваем набросок
Теперь отбросим все браузерные условности простым ластиком. Чай у нас незамысловатый, поэтому здесь подойдёт и * { … }. Для более сложных проектов всё же рекомендуется использовать reset.css
Код:
* {
padding:0;
margin:0;
}
Наступает очередь воплотить все составные части нашего чая: позиционируем их по центру, правильно расставляем z-index, задаём размеры и цвет фона для каждого элемента. Вот как выглядит чашка:
Код:

.cup {
position:absolute;
top:50%;
left:50%;
z-index:2;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
}
…и получаем

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

4.Спиливаем лишнее
И всё-таки, чашка должна быть круглой. Хотя бы для того, чтобы во время размешивания там не застревала чайная ложка . Давайте всё скруглим.
Скругляем блюдце: его ширина и высота равны 500-м пикселям, значит для того, чтобы получить окружность, радиус скругления должен составлять половину ширины, т.е. 250 пикселей:
Код:
.saucer {
position:absolute;
top:50%;
left:50%;
z-index:1;
margin:-250px 0 0 -250px;
width:500px;
height:500px;
-webkit-border-radius:250px;
-moz-border-radius:250px;
border-radius:250px;
background:#FFF;
}
В данном случае компактное правило border-radius:250px задаёт радиус скругления всех четырёх углов, точно так же, как margin:0 обнуляет поля со всех четырёх сторон элемента.

Обратите внимание на префиксы -webkit и -moz — они нужны браузерам на основе Webkit (Safari, Chrome) и Gecko (Firefox) для того, чтобы применить скругление. Подобным же образом мы скругляем сосуд, чай и донышко. Ручку и подтаявшие кусочки сахара мы подтачиваем до скруглённых брусков.
И получаем

И хорошо бы: всё скруглилось, встало на свои места. Так ведь и просилась бы чашка в руки, если бы не пугала своей плоской двухмерностью. Самое время добавить немного объёма.

5.Надуваем чашку
Будем честны, мы здесь не пытаемся заигрывать с Canvas, поэтому объём у нас будет псевдо-трёхмерным. А много ли надо нам, жертвам квадратного и плоского веба? Берём в руки свойство box-shadow и вперёд:
Код:
.vessel {
-webkit-box-shadow:20px 20px 100px rgba(0,0,0,.8);
-moz-box-shadow:20px 20px 100px rgba(0,0,0,.8);
box-shadow:20px 20px 100px rgba(0,0,0,.8);
}
Свойство box-shadow конструируется просто: горизонтальное смещение тени, вертикальное, размер и цвет, который мы задаём в виде rgba(), чтобы последним значением указать полупрозрачность заливки. В случае с элементом tea, также используется ключевое слово inset, чтобы повернуть тень внутрь элемента.

И вот .

Ну, что — чай уже почти как настоящий. За исключением некоторых проблем: тени в браузерах на движке Webkit рассчитываются весьма загадочно (см. заметку Firefox против Photoshop), поэтому, в нашем случае, выглядят более жёстко. Также текущая версия Webkit в браузере Safari 4.0.4 пока не умеет применять ключевое слово inset, однако Chrome уже справляется.
Осталось только добавить в это чаепитие немного жизни.

5.Художественный беспорядок
Самая очевидная проблема нашей чашки — это отвалившаяся ручка и вставшие пирамидой кусочки сахара. Давайте разбросаем всё это по своим местам и попробуем размешать сахар. Поможет нам в этом свойство transform и методы rotate() и translate(), занимающиеся, соответственно, поворотом и перемещением элементов.

Обратите внимание, что для краткости в этой части примеры кода будут приводится без дублирования свойств с префиксами -webkit, -moz и -o. Полный код вы можете найти в примерах.

Для начала, вернём ручку ровно в центр чашки, изменив значение отрицательного поля, а потом применим transform: повернём на –145 градусов и сместим на 170 пикселей.

Код:
.handle {
margin:-20px 0 0 -45px;
transform:rotate(-145deg) translate(170px,0);
}
Принимаемся за кубики: их у нас ровно два. Не знаю, как для вас, но для меня это оптимальное количество сахара. И нам нужно обратиться к каждому из кубиков, чтобы применить нужное смещение. Самым удачным способом будет посчитать их по порядку появления в чае, при помощи селектора :nth-child():
Код:
.sugar:nth-child(1) {
transform:rotate(70deg) translate(-20px,20px);
}
.sugar:nth-child(2) {
transform:rotate(30deg) translate(35px,0);
}
Теперь всё на месте, и вроде бы можно пить чай, но сахар упорно не желает размешиваться. Значит, самое время встряхнуть его при помощи сочетания свойств transform и transition. Для начала мы задаём каждому кубику новое смещение, которое произойдёт при наведении на чашку: поворот на 1200 градусов и новые координаты.
Код:
.cup:hover
.sugar:nth-child(1) {
transform:rotate(1200deg) translate(-20px,20px);
}
А затем описываем сам процесс перемещения:
.sugar {
transition:transform 10s ease-out;
}
Синтаксис свойства transition простой: сначала идёт то свойство, которое мы собираемся изменять, потом время и тип ускорения, в нашем случае ease-out, что значит с замедлением. При наведении курсора на чашку .cup:hover сахар будет размешиваться по часовой стрелке, при отведении — в обратную сторону.

И вот

Практически всё готово. Самые нетерпеливые могут браться за чай, остальные же приглашаются дальше — добавить разнообразия.

6.Немного разнообразия
Сколько людей, столько и вкусов. Поэтому давайте добавим нашему чаепитию возможность выбрать в какой традиции пить чай: в английской, русской или японской. Предлагаю сделать это наиболее адекватно, используя упомянутый выше атрибут lang элемента
Код:
<html>
. Для этого добавим возможность выбора:

Код:
<ul class="switcher">
<li lang="en-US" title="Английски"></li>
<li lang="ru-RU" title="Русский"></li>
<li lang="ja-JP" title="Японский"></li>
</ul>
Каждый из пунктов нашего меню будет переключать атрибут lang на нужный язык при помощи нехитрого скрипта, навешивающего обработчики:

Код:
function init() {
var html = document.documentElement;
var items = document.querySelectorAll('ul.switcher li');
for(var i=0; i<items.length; i++){
items[i].onclick = function() {
html.lang = this.lang;
}
}
}
window.onload = init;
В этом скрипте используется удобнейший метод querySelectorAll, который позволяет выбрать нужные элементы при помощи CSS-селекторов наподобие jQuery.
Осталось только добавить специфические стили для каждого из языков (тематическую скатерть и цвет чая) и поменять состояние текущего пункта меню. Вся магия происходит благодаря псевдо-классу :lang(), который появляется у каждого элемента после того, как мы обновили атрибут lang элемента
Код:
<html>
:
Код:
BODY:lang(en-US) {
background:#519AB8 url(i/en.png);
}
.switcher:lang(en-US) LI[lang=en-US],
.switcher:lang(ru-RU) LI[lang=ru-RU],
.switcher:lang(ja-JP) LI[lang=ja-JP] {
border-color:#FFF;
cursor:default;
}
И, наконец,

Чай готов, сахар по вкусу — можно пить :)

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

Динамическое меню с скольжением цвета
2014-01-14 15:16:59 (читать в оригинале)

Динамическое меню с скольжением цвета , подходит для личного развлекательного блога или сайта.

1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам menu.zip (22.32 Kb)[/is-logged], и заливаем в папку с шаблоном.
2.Подключаем стили и скрипты в хеад main.tpl
Код:
<link href="{tpl_url}/css/webwidget_menu_glide.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="{tpl_url}/js/webwidget_menu_glide.js"></script>
У кого не подключен jquery, подключите.
3.Само меню ,вставляем туда где оно должно быть у вас
Код:
<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="http://ngcmshak.ru/">Home</a></li>
<li><a href="http://ngcmshak.ru/">News</a></li>
<li class="current"><a href="http://ngcmshak.ru/">About</a></li>
<li><a href="http://ngcmshak.ru/">Contact</a></li>
<li><a href="http://ngcmshak.ru/">More...</a></li>
</ul>
<div style="clear: both"></div>
</div>
Активный пункт меню присваивается класс
Код:
class="current"
4.Ну и последнее инициализация нашего меню
Код:
<script language="javascript" type="text/javascript">
$(function({$("#webwidget_menu_glide").webwidget_menu_glide({
menu_width:"100",
menu_height:"30",
menu_text_size:"15",
menu_text_color:"#CCC",
menu_sprite_color:"#666",
menu_background_color:"#000",
menu_margin:"5",
sprite_speed:"normal"
});
});
</script>
Вот и все пользуемся ,вот еще и таблица с параметрами

menu_width:
Ширина меню

menu_height:
Высота Меню

menu_text_size:
Меню размер текста

menu_text_color:
Цвет текста меню

menu_sprite_color:
Анимация спрайта цвет

menu_background_color:
Меню Цвет фона

menu_margin:
Рентабельность Меню

sprite_speed:
Скорость анимации (вариант: медленно, нормально, быстро, без ожидания)

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

АНИМИРОВАННЫЕ КНИГИ С CSS 3D-ПРЕОБРАЗОВАНИЕМ
2014-01-11 03:26:02 (читать в оригинале)

Нашел красивую реализацию кнопки загрузка .Творческий способ показать интерактивные книги с помощью CSS 3D-преобразования.
Ну я не буду описывать как все это работает,это вы можете прочитать на сайте источника,Я просто объясню как установить.
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам animatedbooks.zip (120.61 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем стили и скрипт
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_ur l}}/css/book.css" />
<script src="{{ tpl_ur l}}/js/modernizr.custom.js"></script>
3.Ну и сам HTML код
Код:
<ul class="align">
<li>
<figure class='book'>



<ul class='hardcover_front'>
<li>
<div class="coverDesign yellow">/- этот код отвечает заобложку-/
<span class="ribbon">NEW</span>
<h1>CSS</h1>
<p>TRANSFORM</p>
</div>
</li>
<li></li>
</ul>



<ul class='page'>
<li></li>
<li>
<a class="btn" href="#">Download</a>/-здесь ссылка на загрузку которая внутри книги-/
</li>
<li></li>
<li></li>
<li></li>
</ul>



<ul class='hardcover_back'>
<li></li>
<li></li>
</ul>
<ul class='book_spine'>
<li></li>
<li></li>
</ul>
<figcaption>/- Ну а здесь само описание новости -/
<h1>CSS Ninja</h1>
<span>By Marco Barría for Codrops</span>
<p>Tomatillo water chestnut mustard cabbage yarrow sierra leone bologi. Watercress green bean groundnut earthnut pea dandelion radicchio.</p>
</figcaption>
</figure>
</li>
Вроде все ,кому что не понятно пишем комментарии,в исходнике два варианта книга и тетрадь

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

Исправляем ошибки с помощью пользователей
2014-01-05 03:27:48 (читать в оригинале)

Вот вчера подсмотрел новость у знакомого,и зацепила почему я еще не поставил у себя,я человек не очень грамотный,по русскому имел трояк,и решил поставить,заодно и выложить с подробным описанием.
1.Ну для начала скачаем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам mistakes.zip (6.62 Kb)[/is-logged],распакуем и зальем в папку с шаблоном.
2.Далее подключим стиль и скрипт :
Код:
<script type="text/javascript" src="{tpl_url}/mistakes/mistakes.js"></script>
<link href="{tpl_url}/mistakes/mistakes.css" rel="stylesheet" type="text/css" />
3.Открываем файл mistakes.js и в сроке 10 пропишите полный путь до файла mistakes.php вот пример
Код:
var loc = window.location;
var mis;
nN = navigator.appName;

function createMessage() {
// Измените следующую строку. Здесь нужно указать путь к файлу mistakes.php
var misphploc = 'http://ngcmshak.ru/templates/vektor/mistakes/mistakes.php'
var container = document.createElement('div')
var scroll = dde.scrollTop || db.scrollTop;
var mtop = scroll + 100 + 'px';
var mleft = Math.floor(dde.clientWidth/2) - 175 + 'px';
container.innerHTML = '<div id="mistake">\
<div id="m_window" style="top:' + mtop + '; left:' + mleft + '";>\
<iframe frameborder="0" name="mis" id="m_frame" src="' + misphploc + '"></iframe></div> \
</div></div>'

return container.firstChild
}
4.Далее открываем файл mistakes.php и в нем изменяем :
$title - заголовок сообщения,
$to, - email, на который будут отправлятся сообщения,
$mymail - email, от кого пришло сообщение.
("yousite.ru")- ваш сайт.

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

Цитата:
На сайте работает система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Также открыть окошко отправки сообщения можно, кликнув по ссылке:
Отправить сообщение об ошибке
Вот код ссылки
Код:
<a href="javascript:void(0)" onclick="PressLink()">Отправить сообщение об ошибке</a>
Ну и картинку можно скопировать

вот и все пользуемся

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

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

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

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

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

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

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

Взлеты Топ 5


+141	163	Информационный колодец
+139	146	Annelle
+131	156	Zoxx.ru - Блог Металлиста
+128	151	МухО_о
+101	114	erner_kissinger

Падения Топ 5


-1	108	«Linux» - это просто!: Создаем архив...
-3	9	Вещий сон!
-5	45	Блог / Новости ― Книжный интернет-магазин Лантика
-28	135	К Мечте - быстро!
-31	136	Бесплатно скачать фильмы, музыку, программы, книги, журналы

Загрузка...

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