March 4th, 2020

hamsa

Как добавить тени и поля к картинкам

globo_030.jpg

Что бы придать картинке объём, "приподнять" ее над страницей, добавим стили к стандартной формуле:

[Как это сделать быстро во всем посте]
<img src='https://ic.pics.livejournal.com/foto/123456780/1234/1234_original.jpg'>

задав тень, поля и границу специальным образом:

style="box-shadow:3px 3px 10px #595a5e; padding:18px; border:1px solid #73767a;"

Все в сборе будет выглядеть вот так:

<img src='https://ic.pics.livejournal.com/foto/123456780/1234/1234_original.jpg' style="box-shadow:3px 3px 10px #595a5e; padding:18px; border:1px solid #73767a;">
- стили помещаются внутрь угловых скобок.

В старом редакторе это делается в режиме ручного редактирования (вкладка - НТМL).
А в новом?
- Никак. Или пририсовать тени к картинкам заранее, в графическом редакторе.
Почему бы в любом случае не обрабатывать фото таким же образом, чтобы никаких кодов не требовалось?
- На странице, где фон цветной (даже молочный, отличный от стандартного белого) - готовые тени смотрятся неестественно.



Если картинок много?
- Решается в три клика.
Многими способами. Самый простой - в обычном виндозном блокноте:

Tenj_000.png

Если нет под рукой, его легко вызвать (в зависимости от настроек - даже по-русски)


Tenj_001.PNG

Скопируем в Блокнот список кодов, полученных, например, из "Альбомов ЖЖ"


Tenj_002.PNG

Добавим к одному из кодов формулу стилей.

Далее, из строчки ниже скопируем часть линка в исходном виде. И вызовем диалог замены (клавишами ctrl H)

В окошке заменить "Что" при этом появится то, что мы скопировали
(а если вдруг не - то вклеим клавишами ctrl V)

А теперь в окошко "Чем" скопируем усовершенствованную часть линка

Tenj_003.PNG

И - нажмем "заменить все".


Tenj_004.jpg

Готово.
ВАШ КО

Таким же способом можно "обернуть" адреса картинок тегами для вставки в блог -
если некий фотосервис выдает список линков вида:

httрs//pics.com/12345/foto_01.jpg
httрs//pics.com/12345/foto_02.jpg
httрs//pics.com/12345/foto_03.jpg

В "заменить Что" впишем - jpg, а в "заменить Чем" - jpg" > (или сразу со стилями jpg" style="border:1px solid grey; box-shadow:2px 2px 4px grey;" />)

А вторым действием "заменить Что" - httрs
"заменить Чем" - <img src=" httрs

Это можно сделать еще быстрее, в один прогон, но потребуется более продвинутый Блокнот. О нем в следующий раз.



Collapse )