Красивая окантовка вокруг картинок

Добрый день уважаемое сообщество!

Уже третий день ищу хоть какую-нибудь подсказку по моему вопросу. Спрашивал Поиск, Гугл, доки и тишина...
А суть в следующем: На многих сайтах видел эффект, когда картинки, используемые в тексте имеют красивую окантовку. Не просто рамку, а например эффект тени, загнутый край или ещё что-то. Заметил, что при попытке скачать/скопировать картинку, качается только картинка без эффектов. Значит имеет место наложение картинка+эффект. Притом размеры картинок могут быть самые разные. Эффект как-то накладывается динамически. Как это реализуемо? Я не силён в пхп/хтмл.
Может есть какой модуль для этого? Укажите, пожалуйста, в каком направлении копать?

Заранее всем большое спасибо!

 

Ответ: Красивая окантовка вокруг картинок

Покажи пример сайта, я уверен что это просто CSS-класс красивый у нее.

 

Ответ: Красивая окантовка вокруг картинок

Ну например здесь. Очень красиво смотрится. На сегодняшнем этапе меня ещё пугают слова css, php и т.д.
Но Джумла очень понравилась по функциональности. Помогите плиз.

 

Ответ: Красивая окантовка вокруг картинок

Если посмотреть код страницы по ссылке выше то вылазит описание класса ссылки в CSS .avatar в котором описан background фон ссылки под фотографией. Это и есть т.н. красивая окантовка.

 

Ответ: Красивая окантовка вокруг картинок

Да, я догадывался, что это описано в стилях, но беда в том, что я не знаю как это реализовать у себя Могли бы вы подсказать как примерно должно выглядеть описание css - класса и пример его применения в контенте Джумлы. Например обычная вставка картинки {mosimage}. А как с учётом применения класса из css с обрамлением?

Добавлено через 1 час 7 минут
Свершилось чудо!
Добавил в css дополнительный класс "avatar" с обрамлением. Теперь при вызове html-кода:

Код (CODE):

1. <a href="http://mysite.ru" class="avatar"><img src="http://mysite.ru/images/spring.png" width="90" height="90" alt="Image" /></a>

всё прекрасно отрисовывается. Спасибо огромное!
Но! а как работать с этим классом в связке с {mosimage}? Ничего в голову не приходит. Если вставлять ссылки в режиме хтмл то редактор вырезает фрагмент с указанием класса и картинка получается обычной, без окантовки. Подскажите плиз, что делать? Заранее спасибо всем!

 

Ответ: Красивая окантовка вокруг картинок

в css пропиши
.mosimage {
}

 

Ответ: Красивая окантовка вокруг картинок

Хм... логично. Попробую так сделать. А вообще решил этот вопрос не через {mosimage}, а путём стандартной функции вставки изображения в текст. Там оказывается можно указать класс из css для изображения, а я не знал. Спасибо вам за помощь! Всё красиво смотрится.