Бриллиантовая модульная сетка

С постоянно продолжающейся адаптацией CSS3 в браузерах, мы получаем возможность решать все больше и больше задач только средствами CSS. Так, можно создавать любые геометрические формы с помощью набора CSS правил. А теперь продвинемся дальше и построим необычную модульную сетку.

И, конечно же, наша сетка будет адаптивной.

Сначала мы сосредоточимся на построении единичного квадрата, повернутого так, как нужно. Затем сделаем одну строку. И в завершении построим всю структуру для различных точек разрыва.

Несколько соглашений, которые используются в данном уроке:

  • Мы используем Modernizr для проверки поддержки браузером трансформаций CSS3.
  • Мы используем Sass и Compass для построения кода CSS.
  • Все миксины Compass CSS3 включаются с помощью директивы: @import "compass/css3".

 

Единичный квадрат

Очень просто повернуть один квадрат на 45 градусов, а затем повернуть его содержание в другую сторону на те же 45 градусов:

<a href="#" class="diamond">
	<div class="content">
		Блок с информацией
    </div>
</a>
$diamondSize: 190px;
     
.diamond {
	background: #f4f4f4;
	@include box-shadow(0 0 0 1px #ccc);
	color: #000;
	display: block;
	height: $diamondSize;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: $diamondSize;
 
	.csstransforms & {
		overflow: hidden;
		@include rotate(-45deg);
	}
}
 
.content {
	display: table-cell;
	height: $diamondSize;
	padding: 0 10px;
	@include rotate(45deg);
	text-align: center;
	vertical-align: middle;
	width: $diamondSize;
}

 

Одна строка

Теперь сделаем одну строку с нашими квадратами.

<ul class="diamonds">
		<li>
			<a href="#" class="diamond">
				<div class="content">
					Блок с информацией
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="diamond">
				<div class="content">
					Блок с информацией
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="diamond">
				<div class="content">
					Блок с информацией
				</div>
			</a>
		</li>
</ul>
.diamonds {
	font-size: 0;
	margin: 40px auto;
 
	.csstransforms & {
		padding: 39px 0;
	}
 
	> li {
		display: inline-block;
		font-size: 18px;
		margin-right: 80px;
 
		.no-csstransforms & {
			margin: 0 20px 20px 0;
		}
	}
}

 

Несколько строк

Теперь пришло время решать интересную задачу. Основная идея заключается в использовании полей для сдвига наших бриллиантов пока они не выстроятся в сетку. Здесь используется немного математики. Воспользуемся селектором nth-child для установки полей для соответствующих элементов. Вот пример кода для структуры, построенной на рисунке:

.csstransforms .diamonds > li {
	//Добавялем левое поле к четвертому бриллианту
	//и затем к каждому 5-му 
	&:nth-child(5n+4) {
		margin-left: 135px;
	}
	//Удаляем правое поле у 3-го бриллианта 
	//и затем у каждого пятого
	&:nth-child(5n+3) {
		margin-right: 0;
	}
 
	//Добавялем отрицательное поле сверху к каждому бриллианту после 3-го
	&:nth-child(n+3) {
		margin-top: -55px;
	}
}

Здесь приводится лишь небольшая часть кода. Полностью его можно посмотреть в исходниках. Миксины сделаны для работы с различными точками разрыва. Вот пример:

@mixin respond-to($query) {
	@media only screen and #{$query} {
		@content
	}
}
 
@mixin diamond-grid-breakpoint($query, $maxWidth, $n, $maxRow) {
	@include respond-to(#{$query}) {
		.csstransforms & {
			max-width: $maxWidth;
 
			> li {
				&:nth-child(#{$n}n+#{$maxRow + 1}) {
					margin-left: 135px;
				}
 
				&:nth-child(#{$n}n+#{$maxRow}) {
					margin-right: 0;
				}	
 
				&:nth-child(n+#{$maxRow}) {
					margin-top: -55px;
				}
			}
		}	
	}
}
 
$diamondQuery1: '(min-width: 1348px)';
$diamondQuery2: '(max-width: 1347px) and (min-width: 1078px)';
 
.diamonds {
	@include diamond-grid-breakpoint($query: $diamondQuery1, $maxWidth: 1270px, $n: 9, $maxRow: 5);
	@include diamond-grid-breakpoint($query: $diamondQuery2, $maxWidth: 1000px, $n: 7, $maxRow: 4);
}

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

 

Небольшое замечание

Есть небольшая проблема с браузерами webkit и нечетным значением ширины экрана. Некоторые тени не выводятся, когда ширина окна имеет нечетное значение. Очень странно. Решение проблемы заключается в добавлении следующих строк кода:

.diamond {
    @include backface-visibility(hidden);
    @include perspective(1000);
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/x7V5B-I6lBU/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Бриллиантовая модульная сетка | | 2013-01-25 01:11:01 | | Статьи Web-мастеру | | С постоянно продолжающейся адаптацией CSS3 в браузерах, мы получаем возможность решать все больше и больше задач только средствами CSS. Так, можно создавать любые геометрические формы с помощью | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: