Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Category:

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

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

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




фотооткрытки в качестве примера:

Эксперименты с шариком

globo_029.jpg


На анемоновом поле

globo_021.jpg


globo_026.jpg



globo_028.jpg



globo_025.jpg



globo_024.jpg



globo_023.jpg



globo_022.jpg



globo_020.jpg


Бонус для дочитавших:
<span style="font-size: 1.9em; letter-spacing:0.25em; color: #55bd40; text-shadow:2px 1px 1px #000, 0 0 6px #193e12; font-weight:800; font-family:Monotype Corsiva, fantasy;">Как сделать пушистый заголовок</span>




Tags: #природнаясреда, #эпохапросвещения, анемон, веб-штучки, фото-ухищрения
Subscribe

Posts from This Journal “фото-ухищрения” Tag

  • Радужные капельки

    Помню как появились первые мыльные пузыри в продаже - вытянутая баночка с надписью "Радужные шары". Одна из нехитрых детских радостей =)…

  • Выпуклый мир - играем с шариком

    Внук хвалится маленькой лупой из киндер-cюрприза - пластиковая, мутная, но худо-бедно увеличивает. Ходит, наводит на все подряд и рассматривает.…

  • Полосатый эскорт

    на субботней фото-прогулке. Развлекаюсь с эффектами, а любопытная киса сопровождает - та же самая, что и в прошлый раз, когда Перевернутый мир…

  • Сфера интересов

    Площадь опрокинутых представлений Знаний Продолжение фото-прогулки: в одном кармане свет-мой-зеркальце, в другом - стеклянный…

  • Свет мой зеркальце

    Земля и небо Идея не моя, в ин-ете подсмотрела. Шабат, пока все спят, на улицах тихо, выбралась на зарисовки и зеркальце прихватила -…

  • Друзья в полосочку

    Пост без слов в шести картинках Черезполосица Застеснялась…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 39 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →