Типовые модули верстки

Часто хочется в дизайне фронтэнда какого-нить скрипта применить что-то красивое, согласитесь. Поэтому я как-то озаботился поиском интересных html/css элементов, которые можно таскать за собой и применять в разных случаях.

Вот что у меня пока получилось собрать.

1. Блоки с закругленными краями.

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

CSS:

.box { margin-bottom: 20px; padding: 6px; background-color: #F0F0F0;}
.corners { position: relative; overflow: hidden; }
.corners em.tl, .corners em.tr, .corners em.bl, .corners em.br { position: absolute; font-size: 1px; }
.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br { width: 4px; height: 4px; background-image: url(corners/corners-2.png); }
.corners-2 em.tl { left: -2px; top: -2px; } .corners-2 em.tr { right: -2px; top: -2px; } .corners-2 em.bl { left: -2px; bottom: -2px; } .corners-2 em.br { right: -2px; bottom: -2px; }
.corners-3 em.tl, .corners-3 em.tr, .corners-3 em.bl, .corners-3 em.br { width: 6px; height: 6px; background: url(corners/corners-3.png); }
.corners-3 em.tl { left: -3px; top: -3px; } .corners-3 em.tr { right: -3px; top: -3px; } .corners-3 em.bl { left: -3px; bottom: -3px; } .corners-3 em.br { right: -3px; bottom: -3px; }
.corners-4 em.tl, .corners-4 em.tr, .corners-4 em.bl, .corners-4 em.br { width: 8px; height: 8px; background: url(corners/corners-4.png); }
.corners-4 em.tl { left: -4px; top: -4px; } .corners-4 em.tr { right: -4px; top: -4px; } .corners-4 em.bl { left: -4px; bottom: -4px; } .corners-4 em.br { right: -4px; bottom: -4px; }
.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { width: 10px; height: 10px; background: url(corners/corners-5.png); }
.corners-5 em.tl { left: -5px; top: -5px; } .corners-5 em.tr { right: -5px; top: -5px; } .corners-5 em.bl { left: -5px; bottom: -5px; } .corners-5 em.br { right: -5px; bottom: -5px; }
.corners-6 em.tl, .corners-6 em.tr, .corners-6 em.bl, .corners-6 em.br { width: 12px; height: 12px; background: url(corners/corners-6.png); }
.corners-6 em.tl { left: -6px; top: -6px; } .corners-6 em.tr { right: -6px; top: -6px; } .corners-6 em.bl { left: -6px; bottom: -6px; } .corners-6 em.br { right: -6px; bottom: -6px; }
.corners-7 em.tl, .corners-7 em.tr, .corners-7 em.bl, .corners-7 em.br { width: 14px; height: 14px; background: url(corners/corners-7.png); }
.corners-7 em.tl { left: -7px; top: -7px; } .corners-7 em.tr { right: -7px; top: -7px; } .corners-7 em.bl { left: -7px; bottom: -7px; } .corners-7 em.br { right: -7px; bottom: -7px; }
.corners-8 em.tl, .corners-8 em.tr, .corners-8 em.bl, .corners-8 em.br { width: 16px; height: 16px; background: url(corners/corners-8.png); }
.corners-8 em.tl { left: -8px; top: -8px; } .corners-8 em.tr { right: -8px; top: -8px; } .corners-8 em.bl { left: -8px; bottom: -8px; } .corners-8 em.br { right: -8px; bottom: -8px; }
.corners-9 em.tl, .corners-9 em.tr, .corners-9 em.bl, .corners-9 em.br { width: 18px; height: 18px; background: url(corners/corners-9.png); }
.corners-9 em.tl { left: -9px; top: -9px; } .corners-9 em.tr { right: -9px; top: -9px; } .corners-9 em.bl { left: -9px; bottom: -9px; } .corners-9 em.br { right: -9px; bottom: -9px; }
.corners-10 em.tl, .corners-10 em.tr, .corners-10 em.bl, .corners-10 em.br { width: 20px; height: 20px; background: url(corners/corners-10.png); }
.corners-10 em.tl { left: -10px; top: -10px; } .corners-10 em.tr { right: -10px; top: -10px; } .corners-10 em.bl { left: -10px; bottom: -10px; } .corners-10 em.br { right: -10px; bottom: -10px; }

Картинки:
скачать
Папку corners положить в ту же папку, где лежит css.

Использование:

Это блок с закругленными краями радиуса 10 пикселей

Цвет блока задается параметром background-color элемента .box

Пример:

Это блок с закругленными краями радиуса 10 пикселей

Плюс этого метозда в том, что радиус закругленных уголков можно менять, просто меняя класс дива. Диапазон – от corners-2 до corners-10.

2. Закругленные кнопки (типа-макос-стайл)

Кнопки, сделанные по такой технологии можно видеть, например, в админке вордпресса.

CSS:

button{
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:11px;
-moz-border-radius-topleft:11px;
-moz-border-radius-topright:11px;
-moz-box-sizing:content-box;
border-style:solid;
border-width:1px;
cursor:pointer;
font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
font-size:11px !important;
line-height:16px;
padding:2px 8px;
text-decoration:none;
background: #f2f2f2 url(button/button-white-grad.png) repeat-x scroll left top;
height: 18px;
}
button:hover { border-color:#666666; color:#000000; }
button:focus { outline-style: none; }

Картинки: скачать
Папку положить туда же где лежит css.
В принципе, можно и без них, но с градиентом кнопка смотрится получше.

Использование:


Можно button в css поменять на input[type=submit] и так же будут выглядеть все кнопки сабмита форм.

Пример:

3. Эффект вдавленного текста

Можно видеть в той же админке wp – в заголовках блоков. Работает только в современных браузерах (Chrome 2, Firefox 3.1+, Safari 4).
Рисуется белая тень в один пиксель, что вкупе с ожиданием мозга, что свет всегда светит сверху рождает иллюзию бликующей кромки вдавленных в фон букв.

CSS:

.white_shadow { text-shadow:0 1px 0 #FFFFFF; }

Если сменить белый цвет (#FFFFFF) на черный (#000000), то будет противоположный эффект – выпирающих букв.

Пример:

Mac OS properties

Смотрите также:

Comments are closed.