Как закруглить уголки фотографий и отбросить от них тень
Оригинал взят у ![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
edkin в Как закруглить уголки фотографий и отбросить от них тень
edkin в Как закруглить уголки фотографий и отбросить от них теньМногие фотографы делают закругленные уголки своих фотографий, накладывая их непосредственно в графическом редакторе.
Между тем, последние версии таблиц стилей CSS позволяют делать это всего несколькими строчками. В этих таблицах можно задать вид всех страниц на сайте, размеры, цвета, расположение, фоны, рамки, таблицы...
Последние версии давно поддерживаются браузерами Firefox и Opera, как всегда в отстающих - ослик IE (Internet Explorer), но и и он то ли с 8, то ли с 9 версии обзавелся данной функцией.
Конечно, проще всего разместить в одном для всех фотографий месте, в частности в ЖЖ это можно сделать в настройке Custom CSS по адресу:
http://www.livejournal.com/customize/options.bml?group=customcss
Например, так как я все фотографии выравниваю по центру, то у меня это свойство выглядит как:
Первая строчка говорить, что стиль применяется для отцентрованных рисунков, и после скобки { начинается описание оформления. Следующие три строчки задают скругление уголков с радиусом в 20 пикселей, потом идет описание рамки толщиной в 2 пикселя, белая, непрерывная, последние строчки отбрасывают тень от фотографии, которую многие тоже любят рисовать в редакторе. И закрывающая скобка } . Если убрать слово center, то все картинки будут отбрасывать тени и иметь скругленные уголки, если не указано иначе.
Можно применять CSS и непосредственно к каждой картинке, задав ее стиль:
(Замечу, что тег alt является обязательным)
Например:
Если Вы сохраните снимок, то увидите, что он прямоугольный.
Благодаря тому, что CSS поддерживается практически любыми даже бесплатными сервисами, можно сильно изменить вид своих галерей.
Между тем, последние версии таблиц стилей CSS позволяют делать это всего несколькими строчками. В этих таблицах можно задать вид всех страниц на сайте, размеры, цвета, расположение, фоны, рамки, таблицы...
Последние версии давно поддерживаются браузерами Firefox и Opera, как всегда в отстающих - ослик IE (Internet Explorer), но и и он то ли с 8, то ли с 9 версии обзавелся данной функцией.
Конечно, проще всего разместить в одном для всех фотографий месте, в частности в ЖЖ это можно сделать в настройке Custom CSS по адресу:
http://www.livejournal.com/customize/options.bml?group=customcss
Например, так как я все фотографии выравниваю по центру, то у меня это свойство выглядит как:
center img {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 2px solid White;
-webkit-box-shadow: 8px 8px 4px #888;
-moz-box-shadow: 8px 8px 4px #888;
box-shadow: 8px 8px 4px #888;
}
Первая строчка говорить, что стиль применяется для отцентрованных рисунков, и после скобки { начинается описание оформления. Следующие три строчки задают скругление уголков с радиусом в 20 пикселей, потом идет описание рамки толщиной в 2 пикселя, белая, непрерывная, последние строчки отбрасывают тень от фотографии, которую многие тоже любят рисовать в редакторе. И закрывающая скобка } . Если убрать слово center, то все картинки будут отбрасывать тени и иметь скругленные уголки, если не указано иначе.
Можно применять CSS и непосредственно к каждой картинке, задав ее стиль:
<img style="-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 2px solid White; -webkit-box-shadow: 8px 8px 4px #888; -moz-box-shadow: 8px 8px 4px #888; box-shadow: 8px 8px 4px #888;" src="ССЫЛКА НА ВАШУ ФОТОГРАФИЮ" alt="">
(Замечу, что тег alt является обязательным)
Например:
Если Вы сохраните снимок, то увидите, что он прямоугольный.
Благодаря тому, что CSS поддерживается практически любыми даже бесплатными сервисами, можно сильно изменить вид своих галерей.