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

Суббота, 15 Августа 2015 г. 20:35 + в цитатник

Цитата сообщения 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>

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

Рубрики:

Фотошоп

<a href="https://www.liveinternet.ru/users/richar/post369492813/">Р”РµР»Р°РµРј РєСЂСѓРіР»С‹Рµ РєР°СЂС‚РёРЅРєРё Р±РµР· Р¤РЁ</a><br/>Р”РµР»Р°РµРј РєСЂСѓРіР»С‹Рµ РєР°СЂС‚РёРЅРєРё Р±РµР· Р¤РЁ

РєР°Рє СЃРґРµР»Р°С‚СЊ Р±РµР· Р¤РЁ РєСЂСѓРіР»СѓСЋ РєР°СЂС‚РёРЅРєСѓ?

РЈСЂРѕРє Р›Р°СЂРёСЃС‹ Р“СѓСЂСЊСЏРЅРѕРІРѕР№ ( http://loric-50.livejournal.com/42175.html )РЅР° Р–Р– РµСЃС‚СЊ, РЅРѕ С„РѕСЂРјСѓР»Р° С‚СѓС‚ РЅРµ РїРѕРґРѕС€Р»Р°, РїСЂРёС€Р»РѕСЃСЊ РјР°Р»РµРЅСЊРєРѕ РїРѕРґСЂРµРґР°РєС‚РёСЂРѕРІР°С‚СЊ РµРµ. Р•СЃР»Рё РІР·СЏС‚СЊ РєР°СЂС‚РёРЅРєСѓ СЃ РѕРґРёРЅР°РєРѕРІС‹РјРё (РёР»Рё РїСЂРёРјРµСЂРЅРѕ РѕРґРёРЅР°РєРѕРІС‹РјРё СЃС‚РѕСЂРѕРЅР°РјРё) Рё РїСЂРёРјРµРЅРёС‚СЊ С„РѕСЂРјСѓР»Сѓ , С‚Рѕ Сѓ РЅР°СЃ РїРѕР»СѓС‡РёС‚СЃСЏ РІРѕС‚ С‚Р°Рє:

Рђ С‚СѓС‚ СЏ СЂРµС€РёР»Р° РІРѕСЃРїРѕР»СЊР·РѕРІР°С‚СЊСЃСЏ СЃР°Р№С‚РѕРј 
box-shadow generator, Р° С‚Р°РєР¶Рµ РїРѕРјРµРЅСЏС‚СЊ СЂР°РґРёСѓСЃ РІ РєР°СЂС‚РёРЅРєР°С…, РІРѕС‚ С‡С‚Рѕ РїРѕР»СѓС‡РёР»РѕСЃСЊ!

3.  4.

3.     4.

Р° С‚Р°Рє РїРѕР»СѓС‡Р°РµС‚СЃСЏ, РєРѕРіРґР° С€РёСЂРёРЅР° РєР°СЂС‚РёРЅРєРё Р±РѕР»СЊС€Рµ РІС‹СЃРѕС‚С‹:

5.  6.

5.    6.

Р°... <a href="https://www.liveinternet.ru/users/richar/post369492813/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Поиск по дневнику

-Статистика

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