Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Набор рамок для любых ваших изображений на css
Замечательное решение на css! Теперь на любые ваши картинки можно наложить различные красивые рамки
Установка:
После /head на нужных страницах вставляйте:
Code
<style type="text/css">
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(/images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}
.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(/images/pin.png) no-repeat;
}
.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(/images/tape.png) no-repeat;
}
.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(/images/paper-clip.png) no-repeat;
}
.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(/images/tape2.png) no-repeat;
}
.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(/images/gold-frame.png) no-repeat;
}
.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(images/cut-corner.png) no-repeat;
}
.sample7 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(/images/round-corner.png) no-repeat;
}
.sample7 img {
border: none;
padding: 0;
}
.sample8 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 5px;
left: 6px;
background: url(/images/round-corner.png) no-repeat;
}
.sample8 img {
border: none;
padding: 5px 6px 6px;
background: url(/images/round-bg.gif) no-repeat;
}
.sample9 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 6px;
left: 7px;
background: url(/images/stamp-pattern.png) no-repeat;
}
.sample9 img {
border: none;
padding: 6px 7px 7px;
background: url(/images/stamp-bg.gif) no-repeat;
}
.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(/images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}
.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(/images/floral-corner.png) no-repeat;
}
.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(/images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(/images/watercolor-bg.png) no-repeat;
}
.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(/images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}
.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(/images/glossy-gradient.png);
}
</style>
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(/images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}
.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(/images/pin.png) no-repeat;
}
.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(/images/tape.png) no-repeat;
}
.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(/images/paper-clip.png) no-repeat;
}
.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(/images/tape2.png) no-repeat;
}
.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(/images/gold-frame.png) no-repeat;
}
.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(images/cut-corner.png) no-repeat;
}
.sample7 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(/images/round-corner.png) no-repeat;
}
.sample7 img {
border: none;
padding: 0;
}
.sample8 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 5px;
left: 6px;
background: url(/images/round-corner.png) no-repeat;
}
.sample8 img {
border: none;
padding: 5px 6px 6px;
background: url(/images/round-bg.gif) no-repeat;
}
.sample9 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 6px;
left: 7px;
background: url(/images/stamp-pattern.png) no-repeat;
}
.sample9 img {
border: none;
padding: 6px 7px 7px;
background: url(/images/stamp-bg.gif) no-repeat;
}
.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(/images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}
.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(/images/floral-corner.png) no-repeat;
}
.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(/images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(/images/watercolor-bg.png) no-repeat;
}
.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(/images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}
.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(/images/glossy-gradient.png);
}
</style>
Для того, чтобы наложить на нужную картинку рамку, достаточно присвоить ей нужный класс:
1) эффект наложения иконки в левом верхнем углу:
Code
<div class="photo">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
2) эффект прикрепления на кнопке:
Code
<div class="photo sample1">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
3) эффект прикрепления на скотче:
Code
<div class="photo sample2">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
4) эффект прикрепления на скрепке:
Code
<div class="photo sample3">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
5) эффект прикрепления на бумажном скотче:
Code
<div class="photo sample4">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
6) эффект деревянной рамки:
Code
<div class="photo sample5">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
7) эффект срезанных углов:
Code
<div class="photo sample6">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
8) эффект простого закругления:
Code
<div class="photo sample7">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
9) эффект закругления в белой рамке:
Code
<div class="photo sample8">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
10) эффект волнистой рамки:
Code
<div class="photo sample9">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
11) эффект рамки из мазков кисти:
Code
<div class="photo sample10">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
12) эффект простой белой рамки с лозой:
Code
<div class="photo sample11">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
13) эффект рамки, потёртой изнутри:
Code
<div class="photo sample12">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
14) эффект абстрактной рамки:
Code
<div class="photo sample13">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
15) эффект блика на стекле:
Code
<div class="photo sample14">
<img src="Ссылка" alt="Описание" />
</div>
<img src="Ссылка" alt="Описание" />
</div>
Если вы работаете в программе Фотошоп - для вас не составит труда нарисовать свою коллекцию рамок
Осталось лишь залить все картинки из прикреплённого архива в папку images
Осталось лишь залить все картинки из прикреплённого архива в папку images
Вы сейчас просматриваете Набор рамок для любых ваших изображений на css. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Набор рамок для любых ваших изображений на css нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Набор рамок для любых ваших изображений на css и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
