Не, това не е нито първия, нито последния, нито най-хубавия, надявам се не е и най-грозния дизайн, опитващ се да пресъздаде визията на небрежно разхвърляни върху масата снимки от фотоапарат Полароид. Целта на тази статия е да покажа как можете да използвате CSS3, за да постигнете впечатляващи визуални ефекти, като заедно с това не нарушавате функционалността за потребителите, използващи по-стари браузъри.

Идеята естествено ми дойде докато гледах подобна галерия, демонстрираща възможностите на CSS3. Поработих доста по моя вариант, за да го направя да изглежда добре дори и на по-стари браузъри или на малкия екран на мобилно устройство. Освен това трябваше да измисля някаква хитрина, за да изглеждат снимките разхвърляни, защото списъкът се генерира динамично и няма как да ги разхвърлям целенасочено.

За да постигна желаната от мен визия използвах няколко свойства, коите вече имат доста добра поддръжка в текущите или бъдещите версии на основните браузъри. Арсеналът включва селектори :nth-child(), box-shadow, трансформации, медийни заявки, RGBa цветове. За съжаление се наложи да напиша доста еднотипни редове с декларации, различаващи се само по префиксите за различните браузъри, но това е неизбежно ако искаме да се насладим на най-новите възможности на CSS.

Първата стъпка както винаги е добре структурирания код. Блокът с картинките, които исках да украся изглежда така:

<ul class="polaroids">
    <li>
	<a href="" title="">
		<img src="" alt="" />
		<p></p>
	</a>
    </li>
    <li>
	<a href="" title="">
		<img src="" alt="" />
		<p></p>
	</a>
    </li>

...

</ul>

Доста проста структура, използвал съм HTML5, за да мога да заградя с един a елемент самата картинка и параграфа с описанието. Основните стилове за оформянето на галерията също не са нищо особено:

ul.polaroids {
	clear:both;
	width:90%;
	margin:60px auto;
}

ul.polaroids li {
	display: inline;
	vertical-align:top;
	width: 200px;
}

ul.polaroids li a {
	display: inline-block;
	padding: 10px 10px 20px 10px;
	width: 180px;
	margin:15px;
	border: 1px solid #BFBFBF;
	background-color: white;
	vertical-align:top;
	text-decoration: none;
	color: #333;
	font-family:Georgia,"Lucida bright","Times new roman",serif;
	z-index: 0;
}

.polaroids li a:hover,
.polaroids li a:focus,
.polaroids li a:active {
	outline: 5px solid #ddd;
}

Единственото, което може да ви се стори странно е изборът на стойности на свойствата display на li и a елементите. Те са избрани така, че снимките да се подреждат естествено в редове и колони и да могат да се застъпват, когато започнем да ги „разхвърляме“ по екрана. Друго, на което държа да обърна внимание е последната декларация. Дефинирал съм стилове за псевдокласовете :hover, :active и :focus, за да сигнализирам на потребителите, ползващи само клавиатура, кой е активния елемент.

Сега вече идва трудното. Искаме да завъртим снимките на различни ъгли, да намалим в различна степен размерите и да им пуснем лека светлосянка. Когато потребителят премине с мишката над някоя снимка (или я фокусира с клавиатурата), искаме тя да се завърти хоризонтално, да е с нормалният си размер за да изглежда добре, и светлосянката да се измести и изсветли, така че да създадем ефект все едно сме я дигнали над масата.

Нека на сцената излязат CSS3 трансформациите сега!

-webkit-transform: rotate(10deg) scale(.7);
-moz-transform: rotate(10deg) scale(.7);
-o-transform: rotate(10deg) scale(.7);
transform: rotate(10deg) scale(.7);

Както виждате, една и съща декларация е повторена четири пъти. По веднъж за WebKit, Mozilla и Opera с префикс и една декларация без префикс за браузърите, които ще поддържат това свойство според спецификацията (IE9 например). Тук съм приложил две трансформации наведнъж – завъртане на 10 градуса по часовниковата стрелка (rotate(10deg)) и намаляване на елемента до 70% от първоначалните размери (scale(.7)). Другите възможности за трансформиране са преместване (translate), наклоняване или изкривяване (skew) или подаване на матрица на трансформацията. Но най-добре прегледайте спецификацията на модула за 2D трансформации.

Това добре, обаче как да създадем впечатление за разхвърляност? Идеята, която ми хрумна е да задам пет различни трансформации като използвам :nth-child() псевдокласове. Ако броят снимки на ред не съвпада с броя варианти на трансформациите, това ще създаде впечатление за неподреденост. Чрез псевдокласа :nth-child можем да избираме елементи, чийто индекс в списъка с дъщерни елементи отговаря на формулата an+b, където n е индекса на елемента, започвайки от 0. В моя случай селекторите са :nth-child(5n), :nth-child(5n+1) до :nth-child(5n+4). Освен различни ъгли на завъртане и различен мащаб им зададох и различен z-index, за да подсиля усещането за разхвърляност.

Първоначално имах идея да направя два набора от правила – един набор от примерно 5 различни ъгъла на завъртане и друг набор от 7 различни мащаба. Този подход естествено не сработи, но ще оставя на вас да помислите защо.

Какво остана? Да опишем свойствата на :hover, :active и :focus псевдокласовете като зададем по-голям z-index, нулеви стойности на транформациите и по-широка светлосянка.

А, светлосенките! Естествено, на помощ идват box-shadow и RGBa. Свойството box-shadow описва светлосенките, като се задават последователно отместването по X, отместването по Y, ширината на зоната на разсейване на сянката и цвета и. За да са полупрозрачни сенките използвах RGBa, всички браузъри поддържащи едното, поддържат и другото, така че не е проблем да ги смесим.

И накрая финалните щрихи. Добавих плавни преходи между различните състояния чрес свойството transition със всичките му необходими префикси, накарах снимките да се застъпват, като подадох отрицателни отстояния (margin) и се погрижих всичките тези глезотии да не развалят вида на галерията в по-стари браузъри или на малките екрани на телефони или други преносими устройства. За тази цел използвах медийна заявка. Отново разчитам на факта, че всички браузъри, разбиращи CSS3 трансформации, ротации, транслации, пермутации… опа, май се увлякох… та те също така разбират и медийни заявки. Като направя медийната заявка да е насочена към екрани по-широки от 700 пиксела успешно обхващам всичко по-голямо от iPad, що е съвременен браузър. Останалите могат да си припомнят онази реплика от История на света – сцената в която се обсъждаше бюджета на империята и отношението на сенаторите към по-неплатежоспособните им съграждани.

Завършената галерия служи да споделям снимки с приятели, а можете да разгледате и пълният CSS, ако желаете.

Като завършек ще кажа, че можете успешно да използвате всякакви CSS3 екстри, за да направите сайта си атрактивен, без да нарушавате потребителското изживяване за потребителите на по-стари браузъри. Медийните заявки са идеален инструмент за прогресивно подобряване.

Етикети: box-shadow, CSS, CSS transforms, CSS3, media queries, RGBa