Главная » Файлы » Прочие скрипты » CSS
Замечательный набор рамок для любых ваших изображений на css
23.06.14, 11:38:25

Скачать файл



Замечательное решение на css! Теперь на любые ваши картинки можно наложить различные красивые рамки

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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>


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

1) Демо 1 - эффект наложения иконки в левом верхнем углу:
Код
<div class="photo">
  <img src="Ссылка" alt="Описание" />  
  </div>


2) Демо 2 - эффект прикрепления на кнопке:
Код
<div class="photo sample1">
  <img src="Ссылка" alt="Описание" />  
  </div>


3) Демо 3 - эффект прикрепления на скотче:
Код
<div class="photo sample2">
  <img src="Ссылка" alt="Описание" />  
  </div>


4) Демо 4 - эффект прикрепления на скрепке:
Код
<div class="photo sample3">
  <img src="Ссылка" alt="Описание" />  
  </div>


5) Демо 5 - эффект прикрепления на бумажном скотче:
Код
<div class="photo sample4">
  <img src="Ссылка" alt="Описание" />  
  </div>


6) Демо 6 - эффект деревянной рамки:
Код
<div class="photo sample5">
  <img src="Ссылка" alt="Описание" />  
  </div>


7) Демо 7 - эффект срезанных углов:
Код
<div class="photo sample6">
  <img src="Ссылка" alt="Описание" />  
  </div>


8) Демо 8 - эффект простого закругления:
Код
<div class="photo sample7">
  <img src="Ссылка" alt="Описание" />  
  </div>


9) Демо 9 - эффект закругления в белой рамке:
Код
<div class="photo sample8">
  <img src="Ссылка" alt="Описание" />  
  </div>


10) Демо 10 - эффект волнистой рамки:
Код
<div class="photo sample9">
  <img src="Ссылка" alt="Описание" />  
  </div>


11) Демо 11 - эффект рамки из мазков кисти:
Код
<div class="photo sample10">
  <img src="Ссылка" alt="Описание" />  
  </div>


12) Демо 12 - эффект простой белой рамки с лозой:
Код
<div class="photo sample11">
  <img src="Ссылка" alt="Описание" />  
  </div>


13) Демо 13 - эффект рамки, потёртой изнутри:
Код
<div class="photo sample12">
  <img src="Ссылка" alt="Описание" />  
  </div>


14) Демо 14 - эффект абстрактной рамки:
Код
<div class="photo sample13">
  <img src="Ссылка" alt="Описание" />  
  </div>


15) Демо 15 - эффект блика на стекле:
Код
<div class="photo sample14">
  <img src="Ссылка" alt="Описание" />  
  </div>


Если вы работаете в программе Фотошоп - для вас не составит труда нарисовать свою коллекцию рамок

Осталось лишь залить все картинки из прикреплённого архива в папку images

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: CSS, изображений, ваших, замечательный, рамок, на, любых, набор, для
Просмотров: 420 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: