» » » Закругляем углы у картинок плюс бонусы

Закругляем углы у картинок плюс бонусы

Итак, наверное, многим будет в тему у себя на сайте довольно простым методом сделать закругление по углам у аватарок, фоток и прочих картинок. А кому-то может даже понадобиться сделать внешнюю и внутреннюю тень, придать картинке вид выпуклой или вогнутой, тогда этот урок для вас.

Закругляем углы у картинок плюс бонусы


Начнём:

Для реализации всего этого вам понадобится небольшой яваскрипт и добавление некоторых классов к картинкам.
Рассмотрим на примере использования для SE3
Вставьте в вашу страницу header_global.tpl между <head> и </head>


{* Corner *}
<script type="text/javascript" src="./include/js/corner.js"></script>
{* /Corner *}


Загрузите по FTP скрипт в папку include/js/
Далее надо приписать class для картинок.
Пример для аватарки в профиле:

  
{* SHOW USER PHOTO *}
  <table cellpadding='0' cellspacing='0' width='100%' style='margin-bottom: 10px;'>
  <tr>
  <td class='profile_photo'><img class='photo corner iradius16 ishade66 ishadow25' src='{$owner->user_photo("./images/nophoto.gif")}' border='0'>}</td>
  </tr>
  </table>


Получится вот так:

Закругляем углы у картинок плюс бонусы


Где:
corner - инициализация (обязательно)
iradius16 - скругление углов 16px - min=0 max=100 default=0
ishade66 - внутренняя тень (не обязательно) - min=0 max=100 default=0
ishadow25 - внешняя тень (не обязательно) - min=0 max=100 default=0

Дополнительно можно сделать инверсию внутренней тени, добавив класс "inverse", пример:


  {* SHOW USER PHOTO *}
  <table cellpadding='0' cellspacing='0' width='100%' style='margin-bottom: 10px;'>
  <tr>
  <td class='profile_photo'><img class='photo corner iradius24 ishadow33 inverse' src='{$owner->user_photo("./images/nophoto.gif")}' border='0'></td>
  </tr>
  </table>


Получится вот так:

Закругляем углы у картинок плюс бонусы


Обсуждение и сам скриптик

Другие публикации по теме:

Комментарии