Архив за месяц: Май 2014

Карусель с раскрывающимся контентом

В примере все сделано картинками, при желании легко заменяется на слова со стилями. Прокрутка по сдвигу колеса мыши, в раскрытом состоянии так же прокручивается.

Html код

<div id="ca-container" class="ca-container">
								<div class="ca-wrapper" style="overflow: hidden;">
									<div class="ca-item ca-item-1" id="bx_2037796212_5">
											
												<div class="ca-item_head"><a href="#" title="Паркур"><img src="images/img_1.png" alt="Паркур"title="Паркур" ></a></div>
											
											<div class="ca-item-main">
												
													<a href="#" class="ca-more"> </a>
											</div>
											<div class="ca-content-wrapper">
												<div class="ca-content">
													<a href="#" class="ca-close">close</a>
													<div class="ca-content-text">
																					
														<p>
															В нашем центре будут созданы все необходимые условия для занятий паркуром.</p><p>
Мы создаем место, где ты сможешь эффективно и, что не менее важно, безопасно отрабатывать разнообразные прыжки и акробатические элементы.</p><p> Также вас ждут <strong>мастер-классы от лучших трейсеров России</strong>! 
														</p>														
														
													</div>
												</div>
											</div>
									</div>
									<div class="ca-item ca-item-2" id="bx_2037796212_7">
											<div class="ca-item_head"><a href="#" title="Батут-центр"><img src="http://kr.tmb.name/images/img_2.png" alt="Батут-центр"title="Батут-центр" ></a></div>
											
											<div class="ca-item-main">
												
													<a href="#" class="ca-more"> </a>
											</div>
											<div class="ca-content-wrapper">
												<div class="ca-content">
												
													<a href="#" class="ca-close">close</a>
													<div class="ca-content-text">
																					
														<p>	
															<strong>Батут</strong> - уникальное устройство для получения положительных эмоций! </p><p>С помощью батута вы сможете повысить мышечный тонус и устойчивость к различным заболеваниям, кроме того аэробная нагрузка при тренировках на батуте помогает бороться с лишним весом и эффективно его снижать.
														</p>
																							
														
													</div>
												</div>
											</div>
									</div>
									<div class="ca-item ca-item-3" id="bx_2037796212_6">
											<div class="ca-item_head"><a href="#" title="Слэклайн"><img src="http://kr.tmb.name/images/img_3.png" alt="Слэклайн" title="Слэклайн" ></a></div>
											
											<div class="ca-item-main">
												
													<a href="#" class="ca-more"> </a>
											</div>
											<div class="ca-content-wrapper">
												<div class="ca-content">
													
													<a href="#" class="ca-close">close</a>
													<div class="ca-content-text">
														<p>
														<strong>Слэклайн</strong> - активный вид времяпрепровождения и эффективная тренировка вестибулярного аппарата</p><p>. Удержать баланс на узкой нейлоновой полоске - дело непростое, но очень веселое, причем не только для самого канатоходца, но и для окружающих.</p><p> Приходите к нам и оцените сами!
														</p>
																				
													</div>
												</div>
											</div>
									</div>
									<div class="ca-item ca-item-4" id="bx_2037796212_6">
										<div class="ca-item_head"><a href="#" title="ВМХ"><img src="http://kr.tmb.name/images/img_4.png" alt="ВМХ" title="ВМХ" ></a></div>
											
											<div class="ca-item-main">
										
													<a href="#" class="ca-more"> </a>
											</div>
											<div class="ca-content-wrapper">
												<div class="ca-content">
													
													<a href="#" class="ca-close">close</a>
													<div class="ca-content-text">
														<p>
														Для тех, кто не расстается со своим двухколесным другом, у нас также найдется место!</p><p> Для любителей <strong>BMX</strong> у нас будут созданы все условия для тренировок и отработки разнообразных трюков.</p><p> И падать (с кем не бывает) будет совсем не больно!
														</p>	
													</div>
												</div>
											</div>
									</div>
									<div class="ca-item ca-item-5" id="bx_2037796212_6">
													<div class="ca-item_head"><a href="#" title="Брейк-данс"><img src="http://kr.tmb.name/images/img_5.png" alt="Брейк-данс" title="Брейк-данс" ></a></div>
											
											<div class="ca-item-main">
										
													<a href="#" class="ca-more"> </a>
											</div>
											<div class="ca-content-wrapper">
												<div class="ca-content">
													
													<a href="#" class="ca-close">close</a>
													<div class="ca-content-text">
														<p>
														<strong>Крылья</strong> - настоящий рай для тех, кто увлекается BreakDance'ом.</p><p> Для вас будет организован отдельный зал со специальным покрытием и огромными зеркалами.</p><p> Ну а для отработки силовых движений - добро пожаловать в акробатическую зону с мягкими матами и поролоновыми ямами. И конечно будут проводиться мастер-классы от профессионалов.</p><p> Приходите, скучно не будет!

														</p>
														
													</div>
												</div>
											</div>
									</div>
								
								
								</div>
							</div>

100

101

102

103

104

105

106

107

108

109

110

</div>

<a href="#" class="ca-close">close</a>

<p>

В нашем центре будут созданы все необходимые условия для занятий паркуром.</p><p>

Мы создаем место, где ты сможешь эффективно и, что не менее важно, безопасно отрабатывать разнообразные прыжки и акробатические элементы.</p><p> Также вас ждут <strong>мастер-классы от лучших трейсеров России</strong>!

</p>

</div>

</div>

<a href="#" class="ca-close">close</a>

<p>

<strong>Батут</strong> - уникальное устройство для получения положительных эмоций! </p><p>С помощью батута вы сможете повысить мышечный тонус и устойчивость к различным заболеваниям, кроме того аэробная нагрузка при тренировках на батуте помогает бороться с лишним весом и эффективно его снижать.

</p>

</div>

</div>

<a href="#" class="ca-close">close</a>

<p>

<strong>Слэклайн</strong> - активный вид времяпрепровождения и эффективная тренировка вестибулярного аппарата</p><p>. Удержать баланс на узкой нейлоновой полоске - дело непростое, но очень веселое, причем не только для самого канатоходца, но и для окружающих.</p><p> Приходите к нам и оцените сами!

</p>

</div>

</div>

<a href="#" class="ca-close">close</a>

<p>

Для тех, кто не расстается со своим двухколесным другом, у нас также найдется место!</p><p> Для любителей <strong>BMX</strong> у нас будут созданы все условия для тренировок и отработки разнообразных трюков.</p><p> И падать (с кем не бывает) будет совсем не больно!

</p>

</div>

</div>

<a href="#" class="ca-close">close</a>

<p>

<strong>Крылья</strong> - настоящий рай для тех, кто увлекается BreakDance'ом.</p><p> Для вас будет организован отдельный зал со специальным покрытием и огромными зеркалами.</p><p> Ну а для отработки силовых движений - добро пожаловать в акробатическую зону с мягкими матами и поролоновыми ямами. И конечно будут проводиться мастер-классы от профессионалов.</p><p> Приходите, скучно не будет!

</p>

</div>

Css код

style

Js код

jquery.contentcarousel

jquery.easing.1.3

Js вызов

<script type="text/javascript">
	$('#ca-container').contentcarousel();
</script>

$('#ca-container').contentcarousel();

</script>

Многоуровневое раскрывающееся меню

Добавить комментарий

Разворачивается по клику на пункт меню, сворачивается по клику на тот же пункт или на другой пункт (соответственно разворачивая его)

Файл js

jquery.menu

Html код

	<div id="left_menu_second">
		<ul class="nav nav-pills" id="left_menu_second_ul">
			<li class="title">
				<a href="#"><i class="fa fa-list-ul"></i> Услуги компании</a> 
				
			</li>
			<li>
				<a href="#" title="Создание сайтов">Создание сайтов</a>
				<ul class="dropdown-menu">
					<li>
						<a href="#">Виды сайтов</a>
						<ul class="dropdown-menu">
							<li><a href="#">Сайт-визитка</a></li>
							<li><a href="#">Интернет-витрина</a></li>
							<li><a href="#">Интернет-магазин</a></li>
							<li><a href="#">Портал</a></li>
							<li><a href="#">Корпоративный сайт</a></li>
							<li><a href="#">Адаптивная верстка</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Пакетные предложения</a>
						<ul class="dropdown-menu">
							<li><a href="#">Эффективный сайт</a></li>
							<li><a href="#">Интернет-магазин &laquo;под ключ&raquo;</a></li>
							<li><a href="#">Интернет-витрина &laquo;под ключ&raquo;</a></li>
							<li><a href="#">Перенос сайта на нашу CMS</a></li>
						</ul>
					</li>
					<li>
						<a href="#" title="Готовые решения" >Готовые решения</a>
						<ul class="dropdown-menu">
							<li><a href="#">Для небольшого интернет0магазина</a></li>
							<li><a href="#">Для сайта автомобильной тематики</a></li>
							<li><a href="#">Для сайта туристической тематики</a></li>
						</ul>
					</li>
				</ul>
			</li>	
			<li>
				<a href="#" title="Сопутствующие услуги">Сопутствующие услуги</a>
				<ul class="dropdown-menu">
					<li><a href="#">Техническая поддержка</a></li>
					<li><a href="#">Внедрение юзабилити</a></li>
					<li><a href="#">Дизайн</a></li>
					<li><a href="#">А/В тестирование</a></li>
					<li><a href="#">Клиентская оптимизация сайта</a></li>
					<li><a href="#">Доработка сайта</a></li>
				</ul>
			</li>
			<li>
				<a href="#" title="Мобильные приложения" class="open collapsible ">Мобильные приложения</a>
				<ul class="dropdown-menu">
					<li><a href="#">iOS</a></li>
					<li><a href="#">Android</a></li>
					<li><a href="#">Windows Phone</a></li>
					<li><a href="#">Кросс-платформенные приложения</a></li>
					<li><a href="#">Пакет iOS - Android</a></li>
				</ul>
			</li>
			<li>
				<a href="#" title="Корпоративная разработка">Корпоративная разработка</a>
			</li>
			<li>
				<a href="#" title="High-Load проекты">High-Load проекты</a>
			</li>
			
		</ul>
	</div>

<a href="#"><i class="fa fa-list-ul"></i> Услуги компании</a>

</li>

<li>

<a href="#" title="Создание сайтов">Создание сайтов</a>

<li>

<a href="#">Виды сайтов</a>

<li><a href="#">Сайт-визитка</a></li>

<li><a href="#">Интернет-витрина</a></li>

<li><a href="#">Интернет-магазин</a></li>

<li><a href="#">Портал</a></li>

<li><a href="#">Корпоративный сайт</a></li>

<li><a href="#">Адаптивная верстка</a></li>

</ul>

</li>

<li>

<a href="#">Пакетные предложения</a>

<li><a href="#">Эффективный сайт</a></li>

<li><a href="#">Интернет-магазин «под ключ»</a></li>

<li><a href="#">Интернет-витрина «под ключ»</a></li>

<li><a href="#">Перенос сайта на нашу CMS</a></li>

</ul>

</li>

<li>

<a href="#" title="Готовые решения" >Готовые решения</a>

<li><a href="#">Для небольшого интернет0магазина</a></li>

<li><a href="#">Для сайта автомобильной тематики</a></li>

<li><a href="#">Для сайта туристической тематики</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#" title="Сопутствующие услуги">Сопутствующие услуги</a>

<li><a href="#">Техническая поддержка</a></li>

<li><a href="#">Внедрение юзабилити</a></li>

<li><a href="#">Дизайн</a></li>

<li><a href="#">А/В тестирование</a></li>

<li><a href="#">Клиентская оптимизация сайта</a></li>

<li><a href="#">Доработка сайта</a></li>

</ul>

</li>

<li>

<a href="#" title="Мобильные приложения" class="open collapsible ">Мобильные приложения</a>

<li><a href="#">Android</a></li>

<li><a href="#">Windows Phone</a></li>

<li><a href="#">Кросс-платформенные приложения</a></li>

<li><a href="#">Пакет iOS - Android</a></li>

</ul>

</li>

<li>

<a href="#" title="Корпоративная разработка">Корпоративная разработка</a>

</li>

<li>

<a href="#" title="High-Load проекты">High-Load проекты</a>

</li>

</ul>

</div>

Sass код

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";
 
/*******************colors*******************/

$orange_color	: #ff9900;

$blue_color		: #2b78e4; /*#4AB1F5*/

$black_color	: #000000;

$gray_light		: #dddddd;

#left_menu_second{
		ul{
			margin			: 0;
			width			: 260px;
		
			li{
				width			: 240px;
				background		: $gray_light;
				padding			: 10px 20px;
				margin			: 0;
				position		: relative;
				
				.caret{
					display		:none;
				}
			
				a:link, a:active, a:hover, a:visited{
					padding			: 0px;
					margin			: 0;
					color			: $blue_color;
					display			: inline;
					border-bottom	: none;
					background 		: transparent; 
					text-decoration : underline;
					
					@include border-radius(0);

					i{
						padding-right 	: 5px;
					}
				}

				a:hover{
					color 			: $black_color;
					text-decoration : none;
				}
				
				
				.dropdown-menu{
					position		: relative;
					margin			: 0;
					background		: transparent;
					border			: none;
					width 			: inherit;
					z-index: 100;

					@include border-radius(0);
					@include box-shadow(none);
					
					li{
						margin		: 0 20px 10px 10px;
						width 		: initial;
						padding 	: 0 20px;
						font-size 	: 13px; 

						a:link, a:active, a:hover, a:visited{
							width 		: 100%;
							display 	: block;
							white-space: normal;
							position 	: relative; 

							&:before{
								content 	: "-";
								color 		: $black_color;
								position 	: absolute;
								left 		: -15px;
								top 		: 0;  
							}
						}

						.dropdown-menu{

							li{
								margin-left: 0;
								padding-right: 0;
							}	
						}

					}

					

					.open:before{
						border 		: none;
					}
				}
			}
			
			.open:before{
				position 		: absolute;
				content 		: " ";
				border-left 	: solid 4px $orange_color;
				left 			: -10px;
				top 			: -5px;
				height 			: 25px;   	
				
			}

			
			li.title{
				background		: $orange_color;
				font-weight 	: normal; 
				
				a:link, a:active, a:hover, a:visited{
					color		: #ffffff;
					background	: transparent;
					border		: none;
					text-transform: uppercase; 
					text-decoration: none;
				}
				
				.caret{
					position		: absolute;
					display			: block;
					height			: 0;
					width			: 0;
					top 			: 0;
					right			: -30px;
					border			: solid 18px transparent;
					border-left		: solid 12px $orange_color;
				}
			}	
		}
	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

/*******************colors*******************/

$orange_color : #ff9900;

$blue_color : #2b78e4; /*#4AB1F5*/

$black_color : #000000;

$gray_light : #dddddd;

#left_menu_second{

ul{

margin : 0;

width : 260px;

li{

width : 240px;

background : $gray_light;

padding : 10px 20px;

margin : 0;

position : relative;

.caret{

display :none;

}

a:link, a:active, a:hover, a:visited{

padding : 0px;

margin : 0;

color : $blue_color;

display : inline;

border-bottom : none;

background : transparent;

text-decoration : underline;

@include border-radius(0);

padding-right : 5px;

}

a:hover{

color : $black_color;

text-decoration : none;

}

.dropdown-menu{

position : relative;

margin : 0;

background : transparent;

border : none;

width : inherit;

z-index: 100;

@include border-radius(0);

@include box-shadow(none);

li{

margin : 0 20px 10px 10px;

width : initial;

padding : 0 20px;

font-size : 13px;

a:link, a:active, a:hover, a:visited{

width : 100%;

display : block;

white-space: normal;

position : relative;

&:before{

content : "-";

color : $black_color;

position : absolute;

left : -15px;

top : 0;

}

.dropdown-menu{

li{

margin-left: 0;

padding-right: 0;

}

.open:before{

border : none;

}

.open:before{

position : absolute;

content : " ";

border-left : solid 4px $orange_color;

left : -10px;

top : -5px;

height : 25px;

}

li.title{

background : $orange_color;

font-weight : normal;

a:link, a:active, a:hover, a:visited{

color : #ffffff;

background : transparent;

border : none;

text-transform: uppercase;

text-decoration: none;

}

.caret{

position : absolute;

display : block;

height : 0;

width : 0;

top : 0;

right : -30px;

border : solid 18px transparent;

border-left : solid 12px $orange_color;

}

Js вызов

	<script type="text/javascript">

		$(document).ready(function() {
		 $('ul#left_menu_second_ul ul').each(function(i) { //Проверить все подменю
		  if ($.cookie('submenuMark-' + i)) {  //Если информация о подменю сохранена в куках
		   $(this).show().prev().removeClass('collapsed').addClass('open'); //Показать их 
		  }
		  else {
		   $(this).hide().prev().removeClass('open').addClass('collapsed'); //Иначе скрыть
		  }
		  $(this).prev().addClass('collapsible').click(function() { //Присоединить обработчик события
		  var this_i = $('ul#left_menu_second_ul ul').index($(this).next()); //Получить индекс щёлкнутого подменю
		  if ($(this).next().css('display') == 'none') {

		   //Когда открыто подменю, свернуть остальные подменю
		   $(this).parent('li').parent('ul').find('ul').each(function(j) {
		    if (j != this_i) {
		     $(this).slideUp(200, function () {
		      $(this).prev().removeClass('open').addClass('collapsed');
		      cookieDel($('ul#left_menu_second_ul ul').index($(this)));
		     });
		    }
		   });
		   //Конец блока сворачивания остальных подменю

		   $(this).next().slideDown(200, function () { //Показать подменю
		   $(this).prev().removeClass('collapsed').addClass('open');
		   cookieSet(this_i);
		   });
		  }
		  else {
		   $(this).next().slideUp(200, function () { //Спрятать подменю
		    $(this).prev().removeClass('open').addClass('collapsed');
		    cookieDel(this_i);
		    $(this).find('ul').each(function() {
		     $(this).hide(0, cookieDel($('ul#left_menu_second_ul ul').index($(this)))).prev().removeClass('open').addClass('collapsed');
		    });
		   });
		  }
		  return false; //Не следовать по ссылке; true - следовать 
		  });
		 });
		});

		function cookieSet(index) {
		 $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); //Поставить куку "подменю раскрыто"
		}

		function cookieDel(index) {
		 $.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); //Удалить куку "подменю раскрыто"
		}
	</script>

$(document).ready(function() {

$('ul#left_menu_second_ul ul').each(function(i) { //Проверить все подменю

if ($.cookie('submenuMark-' + i)) { //Если информация о подменю сохранена в куках

$(this).show().prev().removeClass('collapsed').addClass('open'); //Показать их

}

else {

$(this).hide().prev().removeClass('open').addClass('collapsed'); //Иначе скрыть

}

$(this).prev().addClass('collapsible').click(function() { //Присоединить обработчик события

var this_i = $('ul#left_menu_second_ul ul').index($(this).next()); //Получить индекс щёлкнутого подменю

if ($(this).next().css('display') == 'none') {

//Когда открыто подменю, свернуть остальные подменю

$(this).parent('li').parent('ul').find('ul').each(function(j) {

if (j != this_i) {

$(this).slideUp(200, function () {

$(this).prev().removeClass('open').addClass('collapsed');

cookieDel($('ul#left_menu_second_ul ul').index($(this)));

});

}

});

//Конец блока сворачивания остальных подменю

$(this).next().slideDown(200, function () { //Показать подменю

$(this).prev().removeClass('collapsed').addClass('open');

cookieSet(this_i);

});

}

else {

$(this).next().slideUp(200, function () { //Спрятать подменю

$(this).prev().removeClass('open').addClass('collapsed');

cookieDel(this_i);

$(this).find('ul').each(function() {

$(this).hide(0, cookieDel($('ul#left_menu_second_ul ul').index($(this)))).prev().removeClass('open').addClass('collapsed');

});

}

return false; //Не следовать по ссылке; true - следовать

});

function cookieSet(index) {

$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); //Поставить куку "подменю раскрыто"

}

function cookieDel(index) {

$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); //Удалить куку "подменю раскрыто"

}

</script>

Карусель на 3 картинки

Добавить комментарий

min.js для карусели

jquery.featureCarousel.min

css для карусели

3d-carusel

Html – код

  	 <div id="carousel_3d" class="pull-left">
	        <div class="carousel-feature" style="">
	          <a href="#"><img class="carousel-image" alt="Изображениен 1" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/1.jpg" style=""></a>
	          <div class="carousel-caption-text" style="">
	            <p>
	              Эта зона обычно используется для создания заголовка к изображению
	            </p>
	          </div>
	        </div>
	        
	        <div class="carousel-feature" style="">
	          <a href="#"><img class="carousel-image" alt="Изображениен 2" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/2.jpg" style=""></a>
	          <div class="carousel-caption-text" style="">
	            <p>
	              Фон будет расширяться в зависимости от подписи
	            </p>
	          </div>
	        </div>

	        <div class="carousel-feature" style="">
	          <a href="#"><img class="carousel-image" alt="Изображениен 3" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/3.jpg" style=""></a>
	          <div class="carousel-caption-text" style="">
	            <p>
	              В подпись можно разместить изображение
	            </p>
	          </div>
	        </div>

	        <div class="carousel-feature" style="">
	          

	          <a href="#"><img class="carousel-image" alt="Изображениен 4" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/4.jpg" style=""></a>
	        </div>

	        <div class="carousel-feature" style="">
	          <a href="#"><img class="carousel-image" alt="Изображениен 5" src="http://guazzo.ru/forblog/web/jquery/3d-karusel-izobrazheniy/img/5.jpg" style=""></a>
	          <div class="carousel-caption-text" style="">
	            <p>
	              Цвет фона можно изменить с помощью CSS. Прозрачность можно изменить в настройках
	            </p>
	          </div>
	        </div>
	      
	     	<ul class="tracker-individual-container" style="display: block; opacity:1;">
	      		<li>
	      			<div class="tracker-individual-blip" id="tracker-1" style="cursor: pointer;">1</div>
	      		</li>
	      		<li>
	      			<div class="tracker-individual-blip" id="tracker-2" style="cursor: pointer;">2</div>
	      		</li>
	      		<li>
	      			<div class="tracker-individual-blip" id="tracker-3" style="cursor: pointer;">3</div>
	      		</li>
	      		<li>
	      			<div class="tracker-individual-blip" id="tracker-4" style="cursor: pointer;">4</div>
	      		</li>
	      		<li>
	      			<div class="tracker-individual-blip" id="tracker-5" style="cursor: pointer;">5</div>
	      		</li>
	      	</ul>
	    </div>

<p>

Эта зона обычно используется для создания заголовка к изображению

</p>

</div>

<p>

Фон будет расширяться в зависимости от подписи

</p>

</div>

<p>

В подпись можно разместить изображение

</p>

</div>

</div>

<p>

Цвет фона можно изменить с помощью CSS. Прозрачность можно изменить в настройках

</p>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

js для запуска

<script type="text/javascript">
  $(document).ready(function() {
    var carousel = $("#carousel_3d").featureCarousel({
      pauseOnHover: true,
	  carouselSpeed: 800,
	  trackerSummation: false,
	  sidePadding: 0
    });
  });
</script>

$(document).ready(function() {

var carousel = $("#carousel_3d").featureCarousel({

pauseOnHover: true,

carouselSpeed: 800,

trackerSummation: false,

sidePadding: 0

});

</script>

PPA nginx для Ubuntu с ngx_pagespeed

Ссылка на PPA: https://launchpad.net/~sandyd/+archive/nginx-current-pagespeed

Быстрое добавление:

sudo mkdir /var/ngx_pagespeed_cache
sudo chmod 777 /var/ngx_pagespeed_cache
sudo add-apt-repository ppa:sandyd/nginx-current-pagespeed

sudo mkdir /var/ngx_pagespeed_cache

sudo chmod 777 /var/ngx_pagespeed_cache

sudo add-apt-repository ppa:sandyd/nginx-current-pagespeed

В /etc/nginx/nginx.conf добавляем в секцию http:

 gzip on;
 gzip_disable "msie6";

 pagespeed FileCachePath /var/ngx_pagespeed_cache;

 gzip_vary on;
 gzip_proxied any;
 gzip_comp_level 9;
 gzip_buffers 16 8k;
 gzip_http_version 1.1;
 gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

gzip on;

gzip_disable "msie6";

pagespeed FileCachePath /var/ngx_pagespeed_cache;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 9;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

В настройках хоста добавляем:

  pagespeed on;
  pagespeed EnableFilters prioritize_critical_css;
  pagespeed EnableFilters defer_javascript;
  pagespeed EnableFilters sprite_images;
  pagespeed EnableFilters extend_cache;
#  pagespeed EnableFilters convert_png_to_jpeg;
#  pagespeed EnableFilters convert_jpeg_to_webp;
  pagespeed EnableFilters collapse_whitespace;
  pagespeed EnableFilters remove_comments;
  location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
  location ~ "^/ngx_pagespeed_static/" { }
  location ~ "^/ngx_pagespeed_beacon$" { }
  location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
  location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
  location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
  location /pagespeed_console { allow 127.0.0.1; deny all; }

pagespeed on;

pagespeed EnableFilters prioritize_critical_css;

pagespeed EnableFilters defer_javascript;

pagespeed EnableFilters sprite_images;

pagespeed EnableFilters extend_cache;

# pagespeed EnableFilters convert_png_to_jpeg;

# pagespeed EnableFilters convert_jpeg_to_webp;

pagespeed EnableFilters collapse_whitespace;

pagespeed EnableFilters remove_comments;

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }

location ~ "^/ngx_pagespeed_static/" { }

location ~ "^/ngx_pagespeed_beacon$" { }

location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }

location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

location /pagespeed_console { allow 127.0.0.1; deny all; }

Примечание: convert_png_to_jpeg и convert_jpeg_to_webp закомментированы, поскольку могут вызывать серьезные искажения в картинках.

Альтернативный репозиторий: apt.kura.io

Красивые input и отображение блока через css

Добавить комментарий

Красивые input и отображение блока через css

HTML-код

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet" >
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
	
	<input type="radio" name="tab_1" checked="checked"  id="checkbox_2">
	<label class="inp_radio" for="checkbox_2"><span></span>Активный radio</label>

	<input type="radio" name="tab_1"   id="checkbox_4">
	<label class="inp_radio" for="checkbox_4"><span></span>Неактивный radio</label>

	<input type="checkbox" name="tab_2" checked="checked"  id="checkbox_7">
	<label class="inp_radio" for="checkbox_7"><span><i class="fa fa-check"></i></span>Активный checkbox</label>
	
	<input type="checkbox" name="tab_2"   id="checkbox_8">
	<label class="inp_radio" for="checkbox_8"><span><i class="fa fa-check"></i></span>Неактивный checkbox</label>

	<input type="checkbox" name="tab_2" checked="checked"  id="checkbox_9">
	<label class="inp_radio" for="checkbox_9"><span><i class="fa fa-check"></i></span>По нажатию открывается блок с textarea
	</label>
	<div id="checkbox_9_textar">
		<textarea  class="contact-input" id="checkbox_9_text" placeholder="Напишите свой ответ" ></textarea>
	</div>

	<input type="checkbox" name="tab_2"   id="checkbox_10">
	<label class="inp_radio" for="checkbox_10"><span><i class="fa fa-check"></i></span>По нажатию открывается блок с textarea
	</label>
	<div id="checkbox_10_textar">
		<textarea  class="contact-input" id="checkbox_10_text" placeholder="Напишите свой ответ" ></textarea>
	</div>
			
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<label class="inp_radio" for="checkbox_2"><span></span>Активный radio</label>

<label class="inp_radio" for="checkbox_4"><span></span>Неактивный radio</label>

<label class="inp_radio" for="checkbox_7"><span><i class="fa fa-check"></i></span>Активный checkbox</label>

<label class="inp_radio" for="checkbox_8"><span><i class="fa fa-check"></i></span>Неактивный checkbox</label>

<label class="inp_radio" for="checkbox_9"><span><i class="fa fa-check"></i></span>По нажатию открывается блок с textarea

</label>

</div>

<label class="inp_radio" for="checkbox_10"><span><i class="fa fa-check"></i></span>По нажатию открывается блок с textarea

</label>

</div>

</body>

</html>

Sass-код

// customize bootstrap variables here:
@import "bootstrap";
@import "compass";
 
/*******************colors*******************/

$radio_bg		: #ffffff;

$input_color	: #dedede;

$input_color_active	: #b5d452;

$li_bg_active	: #e3f4ae;

$li_bg			: #f8f8f8;


body{
	width: 420px;
}
input[type="radio"], input[type="checkbox"] {
	margin		: 0;
	padding		: 0;
	display		: none;
}
input[type="radio"] + label{
	width			: 100%;
	margin			: 9px 0;
	background		: $li_bg;
	padding			: 15px;
	font-size		: 18px;
	font-weight: normal;
	cursor			: pointer;
	span {
		background		: $radio_bg;
		border			: solid 2px $input_color;
		margin			: 0 15px 0 0;
		padding			: 0;
		height			: 22px;
		width			: 22px;
		@include border-radius(50%);
		display			: block;
		float			: left;
	}
}
input[type="radio"]:checked + label:after{
	clear			: both;
}
input[type="radio"]:checked + label{
	background		: $li_bg_active;
	span {
		border			: solid 2px $input_color_active;
	}
	span:after{
		height			: 10px;
		width			: 10px;
		border			: none;
		background		: $input_color_active;
		display			: block;
		content			: ' ';
		margin			: 4px;
		@include border-radius(50%);
	}
}
input[type="checkbox"] + label{
	width			: 100%;
	margin			: 9px 0;
	background		: $li_bg;
	padding			: 15px;
	font-size		: 18px;
	font-weight		: normal;
	cursor			: pointer;
	@include border-radius(1px);
	span {
		background		: $radio_bg;
		border			: solid 2px $input_color;
		margin			: 0 15px 0 0;
		padding			: 0;
		height			: 22px;
		width			: 22px;
		display			: block;
		float			: left;
		i{
			display			: none;
			font-size		: 10px;
			line-height		: 10px;
			margin			: 4px;
		}
	}
}
input[type="checkbox"]:checked + label:after{
	clear			: both;
}
input[type="checkbox"]:checked + label{
	background		: $li_bg_active;
	span {
		border			: solid 2px $input_color_active;
		background		: $input_color_active;
		
		i{
			height			: 10px;
			width			: 10px;
			border			: none;
			color			: $radio_bg;
			display			: block;
		}
	}				
}
#checkbox_9_textar, #checkbox_10_textar{
	display			: none;
	padding			: 15px;
	background		: $li_bg_active;
	margin			: -25px 0 0 0;
	
	textarea{
		width		: 100%;
		height		: 70px;
		padding		: 10px;
		border		: solid 1px $input_color_active;
		outline-color: transparent;
	}
}
#checkbox_9:checked ~ #checkbox_9_textar, #checkbox_10:checked ~ #checkbox_10_textar{
	display			: block;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

// customize bootstrap variables here:

@import "bootstrap";

@import "compass";

/*******************colors*******************/

$radio_bg : #ffffff;

$input_color : #dedede;

$input_color_active : #b5d452;

$li_bg_active : #e3f4ae;

$li_bg : #f8f8f8;

body{

width: 420px;

}

input[type="radio"], input[type="checkbox"] {

margin : 0;

padding : 0;

display : none;

}

input[type="radio"] + label{

width : 100%;

margin : 9px 0;

background : $li_bg;

padding : 15px;

font-size : 18px;

font-weight: normal;

cursor : pointer;

span {

background : $radio_bg;

border : solid 2px $input_color;

margin : 0 15px 0 0;

padding : 0;

height : 22px;

width : 22px;

@include border-radius(50%);

display : block;

float : left;

}

input[type="radio"]:checked + label:after{

clear : both;

}

input[type="radio"]:checked + label{

background : $li_bg_active;

span {

border : solid 2px $input_color_active;

}

span:after{

height : 10px;

width : 10px;

border : none;

background : $input_color_active;

display : block;

content : ' ';

margin : 4px;

@include border-radius(50%);

}

input[type="checkbox"] + label{

width : 100%;

margin : 9px 0;

background : $li_bg;

padding : 15px;

font-size : 18px;

font-weight : normal;

cursor : pointer;

@include border-radius(1px);

span {

background : $radio_bg;

border : solid 2px $input_color;

margin : 0 15px 0 0;

padding : 0;

height : 22px;

width : 22px;

display : block;

float : left;

display : none;

font-size : 10px;

line-height : 10px;

margin : 4px;

}

input[type="checkbox"]:checked + label:after{

clear : both;

}

input[type="checkbox"]:checked + label{

background : $li_bg_active;

span {

border : solid 2px $input_color_active;

background : $input_color_active;

height : 10px;

width : 10px;

border : none;

color : $radio_bg;

display : block;

}

#checkbox_9_textar, #checkbox_10_textar{

display : none;

padding : 15px;

background : $li_bg_active;

margin : -25px 0 0 0;

textarea{

width : 100%;

height : 70px;

padding : 10px;

border : solid 1px $input_color_active;

outline-color: transparent;

}

#checkbox_9:checked ~ #checkbox_9_textar, #checkbox_10:checked ~ #checkbox_10_textar{

display : block;

}

Использование transform для клевых анимаций

Добавить комментарий

Урок посвящен реализации прикольных штук через transform без использования js
CSS трансформации и анимация

DevPulse

полезное из мира IT и программирования

Архив за месяц: Май 2014

Карусель с раскрывающимся контентом

Многоуровневое раскрывающееся меню

Карусель на 3 картинки

PPA nginx для Ubuntu с ngx_pagespeed

Красивые input и отображение блока через css

Использование transform для клевых анимаций