Поддержка Проблемы и решения Красиво добавить каринку

  • Как добавить картинку к посту, чтобы это смотрелось красиво?
    Порой, основной цвет картинки белый, и текст на ней точно такого же размра и начертания, что основной текст поста — вообще непонятно, что это картинка!
    Мне кажется, что картинку нужно вкладывать в div с серым фоном,
    было бы неплохо закруглить ему и картинке края через стили, предусмотреть внизу дива место для подписи картинки.
    Как вы думаете?
    Может быть есть уже готовый файл стилей где-то для подобного дива?

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Можете просто сделать рамку толщиной в 1px вокруг картинки, будет всё понятно. Или без рамки, но с тенью.

    Можете просто сделать рамку толщиной в 1px вокруг картинки

    Не совсем понял вашу идею. Вы имеете в виду рамку в графическом редакторе или рамку через div?
    Или, может быть (хотя и сомневаюсь) через стили можно сделать вообще всем картинкам блога?

    Модератор Yuri

    (@yube)

    (хотя и сомневаюсь)

    Если есть сомнения, стоит обратиться к документации. Рекомендую http://htmlbook.ru/

    Если есть сомнения, стоит обратиться к документации. Рекомендую http://htmlbook.ru/

    Да не! К документации лучше обращаться, когда уже чётко определился чего хочешь. Я ещё не дошёл до кондиции 🙂

    Пока добавил такой стиль и оборачиваю картинки в этот див.

    div.img-wrp {
    border: 1px solid black;
    padding:15px;
    margin:10;
    }

    Смотрится довольно убого, но лучше, чем когда белый фон картинки вообще без всякого ограничения переходит в белый фон страницы.

    Хотелось бы, например эффект того как будто картинка зрительно выше уровня страницы лежит, или что-то иное — ясно выделяющее картинку из потока текста!

    Если у вас есть на примете такой эффект, то подскажите!

    Модератор Yuri

    (@yube)

    Спасибо!

    http://htmlbook.ru/css/box-shadow

    Это вполне приличная основа.
    Только пока не могу сообразить, как сделать чтобы div не на всю ширину внешнего элемена раздвигался, а максимально плотно обнимал картинку.

    div.shadow {
        background: #fc0; /* Цвет фона */
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
        box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
        padding: 10px;
       }

    В IE не работает!
    Опера, и Мозила — ОК

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Тема «Красиво добавить каринку» закрыта для новых ответов.