Главная » Новости » 2016 » Октябрь » 31 » Оформляем блоки с контентом красиво и стильно

Практикум

Оформляем блоки с контентом красиво и стильно


Сегодня речь пойдёт об оформлении текстовых блоков: как сделать это красиво, стильно, эффектно? Я немного потрудился над этим вопросом и сейчас с удовольствием делюсь уже готовыми вариантами! Смотрите, выбирайте, редактируйте под свои нужды!

Вариант 1



Демо

HTML

Код

<div class="ps-block">
<div class="ps-head">Цитаты и афоризмы великих людей</div>
<div class="ps-body">
<p>
Всякому кажется, что он мог бы наделать много добра на месте и в должности другого, и только не может сделать его в своей должности. Это причина всех зол.
</p>
</div>
<div class="ps-footer">
Николай Васильевич Гоголь (1809 — 1852) — русский прозаик, драматург, поэт, критик, публицист, признанный одним из классиков русской литературы.
</div>
</div>


CSS

Код

/* Стили демо-страницы */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size: 13px;
color: #6a6c6f;
margin: 0;
padding: 0;
height: 100%;
}

#demo {
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
padding:20px;
margin:-150px 0 0 -250px;
}

/* Стили оформления блока */

.ps-block > .ps-head {  
font-weight: 600;
padding: 10px 4px;
border: 1px solid transparent;
}

.ps-block > .ps-footer {
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
padding: 10px 15px;
}

.ps-block .ps-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 10px 20px;
position: relative;
}

.ps-block {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}


Вариант 2



Демо

HTML

Код

<div class="ps-block">
<div class="ps-head ps-block-1">Цитаты и афоризмы великих людей</div>
<div class="ps-body">
<p>
Всякому кажется, что он мог бы наделать много добра на месте и в должности другого, и только не может сделать его в своей должности. Это причина всех зол.
</p>
</div>
<div class="ps-footer">
Николай Васильевич Гоголь (1809 — 1852) — русский прозаик, драматург, поэт, критик, публицист, признанный одним из классиков русской литературы.
</div>
</div>


CSS

Код

/* Стили демо-страницы */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size: 13px;
color: #6a6c6f;
margin: 0;
padding: 0;
height: 100%;
}

#demo {
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
padding:20px;
margin:-150px 0 0 -250px;
}

/* Стили оформления блока */

.ps-block > .ps-head {  
font-weight: 600;
padding: 10px 4px;
border: 1px solid transparent;
}

.ps-block .ps-block-1.ps-head {
  border-bottom: none;
}

.ps-block .ps-block-1 {
  background: #fff;
  border-color: #e4e5e7;
  border: 1px solid #e4e5e7;
  padding: 10px 10px;
  border-radius: 2px;
}

.ps-block > .ps-footer {
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
padding: 10px 15px;
}

.ps-block .ps-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 10px 20px;
position: relative;
}

.ps-block {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}


Вариант 3



Демо

HTML

Код

<div class="ps-block ps-block-green">
<div class="ps-head">Цитаты и афоризмы великих людей</div>
<div class="ps-body">
<p>
Всякому кажется, что он мог бы наделать много добра на месте и в должности другого, и только не может сделать его в своей должности. Это причина всех зол.
</p>
</div>
<div class="ps-footer">
Николай Васильевич Гоголь (1809 — 1852) — русский прозаик, драматург, поэт, критик, публицист, признанный одним из классиков русской литературы.
</div>
</div>


CSS

Код

/* Стили демо-страницы */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size: 13px;
color: #6a6c6f;
margin: 0;
padding: 0;
height: 100%;
}

#demo {
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
padding:20px;
margin:-150px 0 0 -250px;
}

/* Стили оформления блока */

.ps-block > .ps-head {  
font-weight: 600;
padding: 10px 4px;
border: 1px solid transparent;
}

.ps-block > .ps-footer {
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
padding: 10px 15px;
}

.ps-block .ps-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 10px 20px;
position: relative;
}

.ps-block {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}

.ps-block.ps-block-green .ps-body {
  border-top: 2px solid #62cb31;
}


Вариант 4



Демо

HTML

Код

<div class="ps-block ps-block-2">
<div class="ps-head ps-block-1">Цитаты и афоризмы великих людей</div>
<div class="ps-body">
<p>
Всякому кажется, что он мог бы наделать много добра на месте и в должности другого, и только не может сделать его в своей должности. Это причина всех зол.
</p>
</div>
<div class="ps-footer">
Николай Васильевич Гоголь (1809 — 1852) — русский прозаик, драматург, поэт, критик, публицист, признанный одним из классиков русской литературы.
</div>
</div>


CSS

Код

/* Стили демо-страницы */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size: 13px;
color: #6a6c6f;
margin: 0;
padding: 0;
height: 100%;
}

#demo {
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
padding:20px;
margin:-150px 0 0 -250px;
}

/* Стили оформления блока */

.ps-block > .ps-head {  
font-weight: 600;
padding: 10px 4px;
border: 1px solid transparent;
}

.ps-block .ps-block-1.ps-head {
  border-bottom: none;
}

.ps-block .ps-block-1 {
  background: #fff;
  border-color: #e4e5e7;
  border: 1px solid #e4e5e7;
  padding: 10px 10px;
  border-radius: 2px;
}

.ps-block > .ps-footer {
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
padding: 10px 15px;
}

.ps-block .ps-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 10px 20px;
position: relative;
}

.ps-block {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}

.ps-block.ps-block-2 .ps-body {
  border-top: 2px solid #3498db;
}


Вариант 5



Демо

HTML

Код

<div class="ps-box">
<div class="ps-box-top ps-box-zero">
<div class="ps-box-right">
<a class="ps-button ps-button-default ps-size">Следующая</a>
<a class="ps-button ps-button-default ps-size">Предыдущая</a>
</div>
Цитаты великих людей
</div>
<div class="ps-body">
<p>
А разве могут отказать в чем-либо тому, у кого в руках мешок с золотом? Я достаточно богат, чтобы покупать совесть человеческую, управлять всесильными министрами через их фаворитов, начиная с канцелярских служителей и кончая любовницами. Это ли не власть?  
</p>
</div>
<div class="ps-footer">
Оноре де Бальзак (фр. Honoré de Balzac; 1799 — 1850) — французский писатель, один из основоположников реализма в европейской литературе. Творчество Бальзака пользовалось большой популярностью в Европе и ещё при жизни принесло ему репутацию одного из величайших прозаиков XIX века.
</div>
</div>



CSS

Код

/* Стили демо-страницы */
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff;
font-size: 13px;
color: #6a6c6f;
margin: 0;
padding: 0;
height: 100%;
}
#demo {
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
padding:20px;
margin:-150px 0 0 -250px;
}

/* Стили оформления блока */
.ps-box > .ps-box-top {
  color: inherit;
  font-weight: 600;
  padding: 10px 4px;
  transition: all .3s;
  border: 1px solid transparent;
}
.ps-box .ps-box-zero.ps-box-top {
  border-bottom: none;
}
.ps-box > .ps-footer {
  color: inherit;
  border: 1px solid #e4e5e7;
  border-top: none;
  font-size: 90%;
  background: #f7f9fa;
  padding: 10px 15px;
}
.ps-box .ps-box-zero {
  background: #fff;
  border-color: #e4e5e7;
  border: 1px solid #e4e5e7;
  padding: 10px 10px;
  border-radius: 2px;
}
.ps-box .ps-body {
  background: #fff;
  border: 1px solid #e4e5e7;
  border-radius: 2px;
  padding: 20px;
  position: relative;
}
.ps-box {
  background-color: none;
  border: none;
  box-shadow: none;
  margin-bottom: 25px;
}
.ps-box-right {
  float: right;
}
.ps-button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.ps-button:focus,
.ps-button:active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ps-button:hover,
.ps-button:focus {
  color: #333;
  text-decoration: none;
}
.ps-button:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.ps-button-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.ps-button-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.ps-button-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.ps-button-default:active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.ps-button-default:active:hover,
.ps-button-default.active:hover,
.ps-button-default:active:focus,
.ps-button-default.active:focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.ps-button-default:active {
  background-image: none;
}
.ps-button {
  border-radius: 3px;
}
.ps-size {
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.5;
  padding: 1px 7px;
}
Обсуждение материала:
Комментариев: 1
2 ps-studio
В 23:23, 31.10.2016 оставил(а) комментарий:
как вариант , почему бы и нет
avatar

Хостинг от uCoz