Ранее в этой серии статей о CSS3, мы говорили не только о

как создавать масштабируемые и убедительные buttons но о как эффективно использовать новые CSS3 properties ускорить разработку и быстро создать богатую элементов страницы.В этой заключительной статье серии, we’ будете действительно попасть в него и использовать CSS3 визуальных эффектов нажать envelope.

Не все в этой статье, практические, или даже ошибка-бесплатно, но it’ SA весело грунт на what’ S в трубопровод для веб-дизайна.Чтобы получить максимальную отдачу от этих примеров, you’ придется использовать Safari 4 и Chrome.(Firefox 3.5 может работать с большинством, но не все: WebKit является дальше, чем Gecko в свою предварительную поддержку CSS.) We’ покажу вам, как создавать впечатляющие галереи изображений, создавать анимированные музыкальные плееры и наложения изображений как профессионал.Все готово?Let’ S rock.

Создать изображение Polaroid Gallery

Мы всегда стараемся оставаться очень активным с наши Flickr feed, наш главный зачинщик Брайан делает большую работу по завоеванию изо дня в день и специальные мероприятия и даже некоторые из наших старых работ.Мы хотели отличный способ показать эти фотографии, поэтому мы обратились к CSS3 для создания убедительных, весело галерея изображений.Стиле Polaroid довольно распространено, но мы хотели не только, чтобы сделать его мертвой просто создать галерею в разметке, но и добавлять стили, которые потребовались бы Javascript всего год или два ago.

Polaroid Галерея Markup

Во-первых, мы создали очень простую разметку для галереи, то, что будет легко генерировать автоматически с помощью Flickr API.Разметка для всей галереи выглядит следующим образом:

<ul class="polaroids">
	<li>																				  
	   <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">	  
	   	<img src="image-01.jpg" width="250" height="200" alt="Roeland!" />
	   </a>																			  
	</li>																				  
	<li>																				  
	   <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Discussion">	  
	   	<img src="image-02.jpg" width="250" height="200" alt="Discussion" />	
	   </a>																		 
	</li>																				  
</ul>																			  

We’ буду использовать title элемент в minute.

Стиль базы и Labels

Наш следующий шаг заключается в создании простого взгляда Polaroid.Мы разместили наше изображение внутри якоря с белым фоном и масштабировать изображение контейнера.Это дало нам пространство для изображения этикетки, которые мы созданы с использованием малоизвестных CSS трюков. :after и content: attr

ul.polaroids a:after {
	content: attr(title);
}

Что we’ делаем здесь говорит браузеру, что после того, как он делает данный якорь содержание, добавить еще одну часть содержимого.Затем мы порождаем, что часть содержимого с content: attr(title) элемент, который тянет конкретного атрибута из элемента, в данном случае название атрибута.Использование alt имело бы больше смысла, но ни Safari, ни Firefox реализовал его на content element.

Выше фрагменте говорит браузеру, чтобы взять title атрибут и сделать его сразу после содержания.Обратите внимание, чтоtitle атрибут будет вынесено в течение якорь, который является точно, что мы хотим.Мы хотели бы использовали alt атрибут, но Safari и Firefox не поддерживает использование контента с it.

Наш стиль элемента привязки заботится о форматировании title атрибута, а также и we’ нас теперь размещены изображения title атрибута ниже, так что мы don’ т придется повторить, что содержание в разметке.

Рассеяние Pictures

Горстка Polaroids никогда не будет в идеальной сетки; they’ D быть разбросаны по столу.Мы под угрозу испортить сетку немного для каждого изображения: немного вращения здесь, некоторое смещение там.Тем не менее, мы не хотим, чтобы управлять, что рассеяние на каждого образа основе, поэтому мы использовали еще один новый псевдо-класса:. nth-child

/* By default, we tilt all images by -2 degrees */
ul.polaroids a {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
}
 
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
	-webkit-transform: none;
	-moz-transform: none;
	position: relative;
	top: -5px;
}																	  

Это лишь некоторые из заявлений мы использовали, мы на самом деле добавить их на все, вплоть до 11n, но вы получите идею.Как вы можете видеть, nth-child поддерживает несколько различных аргументов, в том числе even odd и Xn (где X может быть любым целым числом).even и odd заявления говорят сами за себя.Х Х принимает каждый элемент и применяется особый стиль, в данном примере, каждый 3-й.Отсюда и нечетные, четные и еще несколько заявлений Xn означает, что даже если стиль won’ т быть действительно случайным, оно появится случайный достаточно для среднего пользователя.Вы можете видеть весь набор стилей на нашем демо page.

We’ повторное использование новых CSS3 свойств и здесь: CSS transform (показан как -webkit- и -moz-transform).В отеле преобразование может занять несколько аргументов для различных видов преобразований, в этом примере, we’ будем использовать вращать и масштабировать.Вы можете увидеть полный (предварительно) в список Safari визуальные эффекты Guide.

Некоторые Final Animation

Наш последний штрих был дать фокус изображения при наведении курсора мыши, в этом случае, чтобы увеличить и выпрямить.Мы осуществляем это с помощью -webkit-transition, который активируется :hover псевдо-класса.Проверьте это:

ul.polaroids a:hover {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-webkit-transition: -webkit-transform .15s linear;
	position: relative;
	z-index: 5;
}													  

What’ S происходит, вот что we’ повторного переопределения существующей -webkit-transform просто масштабировать изображение (это исключает вращение).-webkit-transition рассказывает Webkit-браузеров для анимации трансформировать так, чтобы переход от одного к другому является гладкой.-webkit-transition на самом деле чрезвычайно универсальны, потому что он может так же легко поддерживать color position (top right и т.д.) и большинство других property.

That’ ы, как мы создали нашу Polaroid галереи.Когда вы знаете, эти новые трюки, положить их вместе на самом деле довольно легко, и разметка мертв simple.

Смотреть Live Demo »

We’ ве создали живую странице демо-версию для этой галереи в нашей площадка, место для нас ZURBians для создания небольших проектов стороне и образцы холодные игрушки.We’ буду ссылки на Экспозиция примеры в этой article.

Раздвижные виниловые альбомы с CSS Gradients

Этот пример начинал как простой эксперимент с CSS градиенты и выросла в довольно детальное исследование не только градиенты, но и новые свойства фона и анимации.We’ покажу вам, как создавать передовые градиенты без изображений и использование слоистого фон для какой-нибудь классный effects.

Дать Markup

Что we’ ве создал вот простой неупорядоченный список альбомов с выдвижной управления альбома.Вы можете использовать что-то вроде этого представить свой band’ альбомах или для демонстрации серии подкастов или любой другой звук (или потенциально видео) средства массовой информации.Каждый элемент в списке альбомов, причем некоторые довольно простые разметки:

<div class="album">
	<a href=""><img src="/playground/sliding-vinyl/muse-the-resistance.jpg" width="500" height="375" alt="Muse: The Resistance" /></a>
	<span class="vinyl">
		<div></div>
	</span>
	<ul class="actions">
		<li class="play-pause"><a href=""></a></li>
		<li class="info"><a href=""></a></li>
	</ul>
	<div>
		<h5>Muse</h5>
		<small>The Resistance</small>
	</div>
	<span class="gloss"></span>
</div>

Это может выглядеть несколько посторонних элементов там, но we’ будете использовать их все, чтобы сделать наш выдвижной записи и контроллер buttons.

Создание Record

реальный трюк здесь был альбом.Мы поставили перед собой, чтобы создать альбом без использования каких-либо изображений на всех (мы в конечном итоге обманывает немного, но we’ получу на это).Когда он выскальзывает, альбом выглядит как на рисунке слева: стандартный черный винил с легким блеском к нему и пару контроля buttons.

You’ заметите, что внутренний край альбоме немного неровными, и that’ потому, что альбом isn’ T изображений, а двухслойного градиенты порожденных браузера и установить в качестве фона одного и того же объекта.Это требует не только немного возиться с новыми объектами градиент в CSS3, но и другим CSS3 трюк: несколько фонов.Проверьте CSS для записи:

ul.tunes li div.album span.vinyl div {
	display: block; 
	border: solid 1px black; 
	width: 112px; 
	height: 112px; 
	-webkit-border-radius: 59px; 
	-moz-border-radius: 59px; 
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5); 
	-webkit-transition: all .25s linear; 
	background:
		-webkit-gradient(
			linear, left top, left bottom, 
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent), 
			to(transparent)),
		-webkit-gradient(
			radial, 56 56, 10, 56 56, 112, 
			from(transparent),
			color-stop(0.01, transparent),
			color-stop(0.021, rgba(0,0,0,1)),
			color-stop(0.09, rgba(0,0,0,1)),
			color-stop(0.1, rgba(28,28,28,1)),
			to(rgba(28,28,28,1)));
	border-top: 1px solid rgba(255,255,255,.25);
}

We’ ве опущены некоторые позиционирования и других скучных частей CSS (проверить демо для полного разметки).Мы хотим сосредоточиться здесь на куски, которые имеют решающее значение для создания альбома визуально. border-radius и -webkit-gradient

Простая часть создавал круглый объект: установив границы радиуса ровно половину высоты и ширины объекта, браузер маски объект идеальный круг.Берегись, хотя: в отличие от Photoshop, если граница радиуса выше, чем половина object’ высота или ширина с, браузер может просто игнорировать заявления.Тем не менее, округлениеОбъект это самая легкая часть, самая сложная часть контролирует gradients.

Два градиенты при работе на объекте: один создает сам альбом (в комплекте с отверстием в середине), а другой бросает свет через нее.We’ начнем с блеском:

ul.tunes li div.album span.vinyl div {
	...
	background:
		-webkit-gradient(
			linear, left top, left bottom, 
			from(transparent),
			color-stop(0.1, transparent),
			color-stop(0.5, rgba(255,255,255,0.25)),
			color-stop(0.9, transparent), 
			to(transparent)),
			...
}

Блеск градиент линейный градиент от левого верхнего в нижний левый.Начнем с прозрачными так, что градиент выцветает, то мы переходим к белым градиентом на отметку в 50% (на полпути через альбом), с 25% непрозрачности.We’ повторное использование RGBa цвета, потому что они позволяют контролировать как цв� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров