Хаки и Скрипты Next Generation CMS : CSS, Изображения : Интересный CSS пример оформления для изображений

irbees2008 Опубликовано - 2 - августа CSS

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Вот подсмотрел небольшую CSS плюшку для изображений ,может кому пригодится.

Как вы поняли сегодня добавим эффект заведенных уголков картинки в фон.
Итак приступим
1.Кому нужен исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Заключим наше изображение в пару блоков

Код:

<div class="corners-top">
		<div class="corners-bottom">
			<!--  Здесь ваше изображение -->
		</div>
	</div>

3.В файл стилей добавим стили наших блоков

Код:

.corners-top {
		position: relative;
	        width: 500px;
                min-height: 200px;
	        margin: 100px auto;
                padding: 20px;
	        background-color: #fff; /* Fallback */			
	        background: 
				-webkit-linear-gradient(45deg,  transparent 10px, #fff 10px),
				-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
				-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
				-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
	        background: 
				-moz-linear-gradient(45deg,  transparent 10px, #fff 10px),
				-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
				-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
				-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
	        background: 
				-o-linear-gradient(45deg,  transparent 10px, #fff 10px),
				-o-linear-gradient(135deg, transparent 10px, #fff 10px),
				-o-linear-gradient(225deg, transparent 10px, #fff 10px),
				-o-linear-gradient(315deg, transparent 10px, #fff 10px);	        
		    background-position: bottom left, bottom right, top right, top left;
		    background-size: 50% 50%;
		    background-repeat: no-repeat;
			-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
			-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
			box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
		}
		[class*='corners-']::before,
		[class*='corners-']::after {
			content: '';
			position: absolute;
			height: 20px; width: 80px;
			-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
			-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
			box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
			box-shadow: none\9; /* Не выводить в IE9 */			
		}
		.corners-top::before,
		.corners-top::after {
			top: -10px;
		}
		.corners-bottom::before,
		.corners-bottom::after {
			bottom: -10px;
		}		
		.corners-top::before,
		.corners-bottom::before {
			left: -42px;
		}
		.corners-top::after,
		.corners-bottom::after {
			right: -42px;
		}
		.corners-top::before {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		.corners-top::after {
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);			
		}
		.corners-bottom::before {
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			-ms-transform: rotate(-135deg);
			-o-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
		.corners-bottom::after {
			-webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			-ms-transform: rotate(135deg);
			-o-transform: rotate(135deg);
			transform: rotate(135deg);
		}

4. В принципе все,могут возникнуть и конфликт стилей,будет криво,это надо смотреть в каждом случае отдельно,какие стили конфликтуют.

Можешь почитать и вот эту статейку "Обалденные XOVERLAY CSS3 эффекты"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.