Автор

02 04.2013
Создание красивой таблицы цен на CSS3

Создание красивой таблицы цен на CSS3


 

Стилизация сайта, несомненно, самый важный элемент веб-дизайна. Разработчики стараются сделать более уникальным и привлекательным сайт для своих пользователей, ведь не секрет, что чем лучше дизайн сайт - тем более привлекает положительные отзывы пользователей. В данном уроке мы рассмотрим процесс создание красивой таблицы с ценами на услуги или товары при этом будем использовать исключительно CSS3, никаких изображений для таблицы, и минимум разметки HTML. Такие таблицы помогают пользователю быстро и легко найти то, что ему нужно.

 

ДЕМО
ИСХОДНИКИ

 

Для начала мы рассмотрим разметку HTML, она достаточно проста и не должна вызвать трудностей:

<div id="pricing-table">
    <div>
        <h3>Супер<span>$59</span></h3>
        <a href="">Подписаться</a>
        <ul>
            <li>Объем диска: <b>10GB</b></li>
            <li>Месячный трафик: <b>100GB</b></li>
            <li>Количество email: <b>20</b></li>
			<li>Субдомены: <b>неограничено</b></li>
        </ul>
    </div >
    . . .
</div>

 

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

Так как данная структура не использует таблицу, имеются ряд преимуществ:

  • Минимум кода HTML.
  • Полностью отсутствуют изображения, что существенно облегчает поддержку.
  • Отличная совместимость со старыми браузерами.

 

#pricing-table {
	margin: 100px auto 50px auto;
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);
	background: #fff;
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
	float: left;
	position: relative;
}

#pricing-table #most-popular {
	z-index: 2;
	top: -13px;
	border-width: 3px;
	padding: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}

#pricing-table .plan:nth-child(1) {
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}

#pricing-table .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
}

/* --------------- */

#pricing-table h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 20px;
	margin: -20px -20px 50px -20px;
	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
	background-color: #ddd;
	background-image: -moz-linear-gradient(#eee,#ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
	background-image: -webkit-linear-gradient(#eee, #ddd);
	background-image: -o-linear-gradient(#eee, #ddd);
	background-image: -ms-linear-gradient(#eee, #ddd);
	background-image: linear-gradient(#eee, #ddd);
	margin-top: -30px;
	padding-top: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

#pricing-table .plan:nth-child(1) h3 {
	-moz-border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;
}

#pricing-table .plan:nth-child(4) h3 {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}

#pricing-table h3 span {
	display: block;
	font: bold 25px/100px Georgia, Serif;
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: 100px;
	width: 100px;
	margin: 10px auto -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
	position: relative;
	padding: 8px 20px;
	margin: 20px 0 0 0;
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	background-color: #72ce3f;
	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));
	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
	background-image: -o-linear-gradient(#72ce3f, #62bc30);
	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
	background-image: linear-gradient(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
	background-color: #62bc30;
	background-image: -moz-linear-gradient(#62bc30, #72ce3f);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));
	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
	background-image: -o-linear-gradient(#62bc30, #72ce3f);
	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
	background-image: linear-gradient(#62bc30, #72ce3f);
}

#pricing-table .signup:active, #pricing-table .signup:focus {
	background: #62bc30;
	top: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear	{
  zoom:1
}

 

 

Как можно заметить данные стили сделаны максимально проще. На этом таблица готова к работе.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

19 06.2015
Создание красивой таблицы цен на CSS3

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


16 01.2019
Создание красивой таблицы цен на CSS3

Минимальная и отзывчивая форма информационного бюллетеня с добавлением некоторых тонких анимаций CSS3, чтобы обогатить пользовательский опыт.


25 04.2013
Создание красивой таблицы цен на CSS3

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


31 03.2013
Создание красивой таблицы цен на CSS3

Навигация для сайта всегда является неотъемлемым фрагментом в большой головоломке при создании чего то новенького, в интернете можно найти множество сайтов, и они, по своей мере, уникальные в своем построении. Но все дальше пользователей становиться тяжело чем то удивить. В данном уроке мы рассмотрим процесс создания замечательной и весьма необычной вертикальной навигации для ресурса с помощью техники css. Идея заключается в том, что когда курсор мыши наводят на пункты меню, с него плавно выскальзывает изображение с красивым эффектом.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close