Мобильный LiveInternet Делаем круглые картинки без ФШ | Даша_Лебидева

Авторизация

Дневник Даша_Лебидева Лента друзей - Дневник - Полная версия

Делаем круглые картинки без ФШ 17-08-2015 01:16 к комментариям - к полной версии - понравилось!

Это цитата сообщения Lyusya-Spring Оригинальное сообщение

Делаем круглые картинки без ФШ

как сделать без ФШ круглую картинку?

Урок Ларисы Гурьяновой

( http://loric-50.livejournal.com/42175.html )на ЖЖ есть, но формула тут не подошла, пришлось маленько подредактировать ее. Если взять картинку с одинаковыми (или примерно одинаковыми сторонами) и применить формулу

<img alt="" src="***Адрес картинки***" width="***ширина картинки***" title="" border="0" style="border-radius: 100%;" />

, то у нас получится вот так:

1.

<img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;" />

А тут я решила воспользоваться сайтом

box-shadow generator

, а также поменять радиус в картинках, вот что получилось!

2.

<img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;box-shadow: 6px 6px #989898, 12px 12px #6c6666;" />

<img alt="" src="https://img-fotki.yandex.ru/get/5204/bull-denic.51/0_497b0_2d4cf54c_orig.jpg" width="300" title="" border="0" style="border-radius: 20%; box-shadow: 0 0 0 3px #CE7B74,inset  0 0 0 3px #CE7B74;" />

<img alt="" src="https://img-fotki.yandex.ru/get/4125/9984761.75/0_9071d_f229feaa_orig.jpg" width="300" title="" border="0" style="border-radius: 20%;box-shadow: black 2px 2px 35px #000000;" />

а так получается, когда ширина картинки больше высоты:

5.

<img alt="" src="https://img-fotki.yandex.ru/get/9/39073472.58/0_a9d8a_ee599233_XL.jpg" width="300" title="" border="0" style="border-radius: 50%;box-shadow:-20px 20px 0 -17px #fff,20px -20px 0 -17px #fff,20px 20px 0 -20px #c27153,0 0 0 2px #c27153;" />

<img alt="" src="https://img-fotki.yandex.ru/get/9/39073472.58/0_a9d8a_ee599233_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;box-shadow: black 2px 2px 35px #000000;" />

а если высота картинки больше ширины, то получается вот так:

7.

<img alt="" src="https://img-fotki.yandex.ru/get/15522/79831464.36/0_78c79_27e06405_-1-XXXL.jpg" width="300" title="" border="0" style="border-radius: 100%;box-shadow: black 2px 2px 35px #000000;" />

А тут я решила попробовать формулы рамочек

Тани Егоровой

, получилось вот так:

<img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;border-radius: 20px 90px 20px 90px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" />

<img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;border-radius: 90px 20px 90px 20px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" />

<img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius:80px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" />

<table style=" solid silver; border-radius:180px;" background="https://img-fotki.yandex.ru/get/4713/120937872.163/0_b390b_5939feb5_XS.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" style="background-image: url('https://img-fotki.yandex.ru/get/6833/120937872.163/0_b38f7_1934ef97_XXS.png'); background-color: #996633; border-radius: 180px; box-shadow: inset 1px 1px 25px #000000;" cellpadding="0" cellspacing="0"><tr><td style="padding:15px" zzz="zzz" align="center"><img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;" /></td></tr></table></td></tr></table>

<table style=" width:300px;-webkit-border-radius: 20px 90px 20px 90px;-moz-border-radius: 20px 90px 20px 90px;border-radius: 20px 90px 20px 90px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" background="https://img-fotki.yandex.ru/get/16102/120937872.171/0_b41da_4f18520e_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;border-radius: 20px 90px 20px 90px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" /></td></tr></table>

<table style=" solid silver; border-radius:20px 90px 20px 90px;" background="https://img-fotki.yandex.ru/get/4713/120937872.163/0_b390b_5939feb5_XS.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" style="background-image: url('https://img-fotki.yandex.ru/get/17870/120937872.171/0_b41de_31271489_XXXS.jpg'); background-color: #996633; border-radius: 20px 90px 20px 90px; box-shadow: inset 1px 1px 25px #000000;" cellpadding="0" cellspacing="0"><tr><td style="padding:10px" zzz="zzz" align="center"><img alt="" src="https://img-fotki.yandex.ru/get/15488/293484408.0/0_132862_be70a9f9_XL.jpg" width="300" title="" border="0" style="border-radius: 100%;border-radius: 20px 90px 20px 90px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" /></td></tr></table></td></tr></table>

вот такие мини-открыточки можно сделать без ФШ!

вверх^ к полной версии понравилось! в evernote

Комментарии (1):

Иришка-Манюшка 18-08-2015-00:14 удалить

Привет, Дашенька! Я удалила комментарий с нерабочими ссылками, а ты под ним написала, потому и твой удалился. Я все исправила и в самой записи о ФШ рамке дала ссылочки. Все работает, иди смотри, бери, пользуйся на радость!

Обратиться - Ответить - К полной версии

Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Делаем круглые картинки без ФШ | Даша_Лебидева - Дневник Даша Лебидева | Лента друзей Даша_Лебидева / Полная версия Добавить в друзья Страницы: раньше»