<style>
.bordeimg1 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;padding:15px !important;border:1px solid #ccc;background:#FFF;}
.bordeimg1:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 0% 50%;box-shadow: 0px 0px 15px #000000;cursor:pointer;border:0;}
.bordeimg2 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 50% 0;box-shadow: 0px 0px 15px #000;padding:15px !important;border:0;background:#FFF;}.bordeimg2:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius:0;cursor:pointer;}
.bordeimg3 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;padding:0 !important;}.bordeimg3:hover {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 50%;box-shadow: 0px 0px 15px #000000;border:0;cursor:pointer;}.bordeimg4 {border:0; padding:0 !important;-moz-transition: all 1s;-webkit-transition: all 1s;
-o-transition: all 1s;border-radius: 50%;box-shadow: 0px 0px 15px #000000;border:0;padding:10 !important;}
.bordeimg4:hover {-moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;box-shadow: 0;cursor:pointer;border-radius: 0;}
.bordeimg5 {-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;border-radius: 45% / 20%;box-shadow: 0px 0px 15px #000000;padding:0 !important;}.bordeimg5:hover { -moz-transition: all 1s; -webkit-transition: all 1s;-o-transition: all 1s;border-radius:0;cursor:pointer;}
</style>
Кошку на снегу видите? А рамочку вокруг? Об этом и пойдёт речь. :)
Тестируя разные шаблоны, я наткнулась на один, в котором каждая картинка обводилась красивой рамкой - блогеру не надо было корпеть в Фотошоп перед тем как вставить рисунок в сообщение: сведения о том, что всякую картинку юзера следует обвести рамкой, хранились... пррральна, в коде HTML блога. :)
Ваш шаблон не содержит таких сведений? Не беда, вы легко научите HTML делать рамки, если пройдёте по ссылке. :)
Я же решила, что сама хочу выбирать, обрамлять картинку рамкой или нет. И сейчас, запихивая очередного кота в пост, должна была ручками прописать код для этой картинки, который выглядел так →
На некоторых шаблонах (вот как на этом моём) текст при добавлении рамки вышеуказанным способом автоматически прижимается вплотную к рамке. Если бы не Tod, я бы ни в жиссь не справилась с проблемой. Но сей доблестный рыцарь пришёл на помощь - вот другой код для картинки с рамкой →
где margin - тот самый отступ текста от картинки (сверху, справа, снизу, слева). Видите? Сверху и слева - нулевое значение, а справа и снизу - отступ текста на 10 пикселей.
Отступ снизу я тоже потом поставила в нулевое значение - снизу он и так отступает, по умолчанию.
Неразбериха с кодами случилась по одной причине: я почему-то не использую стандартный загрузчик картинок (наверху формы отправки сообщений - видите? там теги для выделения текста жирным шрифтом, курсивом, оформление цитаты, и там же - кнопка для изображений). Мне отчего-то легче оперировать стандартными html-кодами.
И вот теперь недоразумение прояснилось - Светлана в комментариях к своей теме, посвящённой картинкам в блоге, даёт подробные объяснения →
За отступы текста от картинки отвечает параметр margin. И когда мы загружаем картинку через Blogger, он нам этот параметр (margin) в style включает и дает размеры в зависимости от того хотим ли мы чтобы картинка была по левому краю, по правому краю или по центру.
В общем случае записываем margin следующим образом margin: tpx rpx bpx lpx; где px значит пикселей, а t, r, b, l число этих пикселей которые надо соответственно отступить:
t(op) - сверху r(ight) - справа b(ottom) - снизу l(eft) - слева
а порядок, в котором следуют эти отступы запоминается очень просто с помощью слова TROUBLE.
То есть код для картинки с рамкой меняется в зависимости от того, загружаете ли вы изображение используя стандартные средсва Blogger, вводите ли код html самостоятельно (я поступаю именно так, потому как в моём браузере, Опера, есть панель html-кнопок специально для этих целей - очень удобно).
Поэкспериментируйте - вы сразу поймёте, что отвечает за что, и какие значения вам нравятся больше и как вам удобнее составлять сообщения. :)
Кто хоть раз пытался вставить HTML-код в сообщение, объясняя, например, как модифицировать блог с помощью правки HTML-шаблона, тот обязательно столкнулся с этой проблемой - стоит опубликовать такую новость в блоге, код становится невидимкой. :)
Почему так происходит, как раз и рассказывает прекрасная Светлана. И дарит ссылку на онлайн-сервис Encode / Decode HTML Entities, каковой как раз и позволяет не мучиться: вводим код сразу под строчкой "Convert text to HTML entities (and vice-versa)", жмём внизу кнопку "Encode", получаем страшную абракадабру (ну, на мой непросвещённый взгляд), копируем её, забрасываем в своё сообщение, включаем предварительный просмотр - оп-ля! - код виден всем и каждому. :)
Весьма интересный и полезный ресурс. Зубрам от сайтостроения он, наверное, кажется детским лепетом на лужайке, а вот для таких в HTML "чайников" как я - самое оно: основные коды, примеры применения, тонкости оформления таблиц, ссылок, текста, картинок и т.д. - очень наглядно, очень доступно описано и показано. Рекомендую. :)
Комментариев нет:
Отправить комментарий