Форум | WebDesign | Хинты по вёрстке

Главная > Форум > WebDesign > Хинты по вёрстке

Вниз

DreamX: Хинты по вёрстке

DreamX

09 июн 2012 12:16
Изменен 18 авг 2015 00:01
Редактировать
Ссылка на этот пост

Тут будут всякие примочки натыренные по интернету, которые понравились и которые могут пригодиться.

DreamX

09 июн 2012 12:17
Изменен 09 июн 2012 12:18
Редактировать
Ссылка на этот пост

Сурово-офигенное решение скругленных углов без картинок и явы, css2. Не очень seo-шно, но это частности.

CSS уголки
<style>
div.w60{margin: 0 auto;border:solid 1px}
div.box-c{height:20px;margin: 0 20px;position: relative;}
div.box-c em b{position:absolute;font:150px Arial;line-height:40px;font-weight:normal}
.ctl, .cbl, .ctr, .cbr {z-index:11;width:20px;height:20px;overflow:hidden;position:absolute;background:transparent}
.ctl {top:0; left:-20px}
.cbl {bottom:0; left:-20px}
.ctr {top:0; right:-20px}
.cbr {bottom:0; right:-20px}
.ctl b {left:-8px}
.ctr b {left:-25px}
.cbl b {left:-8px; top:-17px}
.cbr b {left:-25px; top:-17px}
div.box-inner{padding: 0 20px;}
</style>
<div class="box w60">
            <div class="box-c">
                <em class="ctl"><b>•</b></em>
                <em class="ctr"><b>•</b></em>
            </div>

            <div class="box-inner">
Super Text!<br />
Amazing text! KOKOKOKOKO!
            </div>

            <div class="box-c">
                <em class="cbl"><b>•</b></em>
                <em class="cbr"><b>•</b></em>
            </div>