Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Изображения със заоблени ъгли

ъглите на изображенията
Здравейте, скъпи гости и читатели. Днес в моята кратка публикация искам да ви разкажа как, ако вмъквате един код под формата на притурка, ще заоблите ъглите на всички изображения в страниците на блога си.




    Този код бе запазен на компютъра ми и аз, честно казано, бях забравила за него. Вчера реших да почистя папката, да премахна излишното от нея и намерих кода. Не си спомням източника му на произход, затруднявам се, но нека авторът му ми прости.

    Кратко описание

    Искам да обърна вниманието ви на това, че поставяйки този код, всички изображения на страниците на блога ви ще се появят със заоблени ъгли. Единственото нещо, което няма да се промени, са изображенията в страничната колона. Това, което харесвам в кода е, че е подходящ за всеки фон и дизайн, защото може да използва всички цветове. А за работата му мога да гарантирам че действа за блоговете на Blogspot. Нищо, че примера, който ви давам е с блог, създаден с тема от страничен разработчик. Извод си направете вие.

    Демонстрация

    Предлагам да разгледаме изображенията в този мой блог. Разходете се из него и преценете дали имате нужда от този код.
    Предложеният скрипт генерира в кода значението на border-radius и заобля ръбовете на изображенията, като е достатъчно да се посочи необходимото число на заобляне в пиксели.

    А ето и самия код

    <style>
    .post-body img
    {
    -webkit-border-radius:12px!important;
    -moz-border-radius:12px!important;
    border-radius:12px!important;
    }
    </style>


    Настройки на кода

    Ако замените 12 px с желана от вас стойност, можете да зададете заобляне на изображенията като по-големи или по-малки;

    Предлагам и мое решение на настройките на кода

    <style>
    .post-body img
    {
    padding: 8px;
    background: #0a9e08;
    border: 1px solid #0a9e08;
    -webkit-border-radius:12px!important;
    -moz-border-radius:12px!important;
    border-radius:12px!important;
    }

    </style>

    Оцветеното в червено са значенията, определящи цвета на фона и рамката около изображенията. В случая те са с еднакъв цвят.
    Заменете оцветеното в червен цвят със собствени стойности.

    Инсталиране на кода


    ➤Кодът се вмъква в обикновена притурка Html / JavaScript.

    ➤В полето за наименование не пишете нищо.

    ➤Поставете притурката в долната част на оформлението на блога.


    Надявам се, че информацията ще ви бъде полезна. Нека имате желаното от вас оформяне на изображения в блога си.
    Доскоро и успех!

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop


    Няма коментари:

    Публикуване на коментар