Лента с использвоанием тольком CSS

Сделаем популярный элемент, использующийся в оформлении страниц веб проектов - ленту с текстом. Для решения задачи потребуется только один HTML элемент и CSS. Никаких изображений и JavaScript.

Для формирования элемента потребуется всего лишь один элемент. Мы воспользуемся заголовком и добавим возможность редактировать надпись на ленте непосредственно в браузере:

<h1 contenteditable>Один элемент и CSS - Печатаем здесь...</h1>

Также включим в код страницы плагин для автоматической расстановки префиксов браузеров.

<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript"></script>

Для формирования образа ленты будут применяться псевдо-элементы и трюк с "треугольниками". Также будем использовать тени и градиенты для усиления 3D эффекта.

/*Сброс*/
* {margin: 0; padding: 0;}

html, body {height: 100%;}

body {
	background: #B1E3E2;
	box-shadow: inset 0 0 100px 20px #80D0CF;
	text-align: center;
}

h1 {
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	color: #8699A0;
	text-shadow: 0 0 1px #758890;
	margin: 120px 0;
	font-family: arial, verdana;
	outline: none;
	padding: 14px 30px;
	position: relative;
	text-transform: uppercase;
	/* Небольшие тени для 3D эффекта */
	box-shadow: 
		0 0 30px 0 rgba(0, 0, 0, 0.1), 
		0 36px 0 -18px #B1E3E2;
}

/* Концы ленты*/
h1:before {
	content: '';
	position: absolute;
	top: 18px;
	left: -15%;
	z-index: -1;
	width: 130%;
	/* Используем логику треугольника - 2 боковые рамки и высота 0. Таким образом, получаются треугольники слева и справа */
	height: 0;
	border: 28px solid rgba(0, 0, 0, 0);
	border-left: 28px solid #B1E3E2;
	border-right: 28px solid #B1E3E2;
}

/* Псевдо-элемнет after будет негативом для ленты, чтобы заквершить построение эффекта*/
h1:after {
	content: '';
	width: 100%;
	height: 0;
	position: absolute;
	top: 100%; left: 0;
	z-index: -1;
	/* Высота верхней рамки такая же как и ширина левой и правой рамок для плавного эффекта. Высота верхней рамки также одинаковая сос смещением элемента :before сверху*/
	border-top: 18px solid #99acb2;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
}

h1, h1:before {
	/*Многоцветный фон - используем комбинацию 4 фонов для построения эффекта */
	background-image: 
		/* 2 серых рамки */
		linear-gradient(
			transparent 8%, 
			rgba(0, 0, 0, 0.1) 8%, 
			rgba(0, 0, 0, 0.1) 14%, 
			transparent 14%, 
			transparent 86%, 
			rgba(0, 0, 0, 0.1) 86%, 
			rgba(0, 0, 0, 0.1) 92%, 
			transparent 92%
		), 
		/* Белый глянцевый градиент */
		linear-gradient(
			rgba(255, 255, 255, 0.75), 
			rgba(255, 255, 255, 0) 
		), 
		/* Тонкие полоски */
		linear-gradient(
			45deg, 
			transparent 40%, 
			rgba(0, 0, 0, 0.1) 40%, 
			rgba(0, 0, 0, 0.1) 60%, 
			transparent 60%
		), 
		/* Белая основа */
		linear-gradient(white, white); 
	background-size: 
		cover, /* Рамки */
		cover, /* Белый глянец */
		4px 4px, /* Тонкие полоски */
		cover; /* Белая основа */
}

h1, h1:before, h1:after {
	box-sizing: border-box;
	/* Выводим рамки по концам ленты */
	background-origin: border-box;
}

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

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

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



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

Лента с использвоанием тольком CSS | | 2013-02-07 00:08:28 | | Статьи Web-мастеру | | Сделаем популярный элемент, использующийся в оформлении страниц веб проектов - ленту с текстом. Для решения задачи потребуется только один HTML элемент и CSS. Никаких изображений и JavaScript.Для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: