Как сделать прозрачный фон у картинки.

  

Как сделать прозрачный фон у картинки.

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

Если у вас есть бесплатный редактор GIMP (бесплатный аналог фотошопа), то я написал отдельный пост о том, как удалить фон в GIMP

Для примера, возьмем картинку в виде стрелочки вверх. На самом деле вы можете ее нарисовать сами или взять уже готовую в интернете. Формат картинки в данном случае значения не имеет.

Идем в онлайн редактор  https://pixlr.com/
Нажимаем загрузить и далее смотрите как на картинках.

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

Далее берем «волшебную палочку» (см. слева вверху стрелочка) и щелкаем по белому полю.

Оно выделится мигающим пунктиром.

Нажимаете кнопку – delete и удаляете белый фон.

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

Главное выбрать формат  PNG!!! Иначе прозрачность фона потеряется.
Сохраняйте себе на компьютер и все готово.
Теперь останется только загрузить картинку в интернет и получить ссылку, которую вы можете использовать  для создания стрелочки прокрутки поста вверх.

Здесь я выложил ту стрелочку, на которой я вам показал, как можно сделать прозрачный фон на картинке. Делюсь.

                                                                                                                         

https://sites.google.com/site/youmorestop/home/Pj5.png                              






 Как загрузить картинку в интернет и получить ссылку.

Стрелочка прокрутки вверх для блога.

           

Стрелочка прокрутки вверх.

 

Вы наверное часто встречали в блогах достаточно удобные гаджеты – стрелочка прокрутки вверх. Иногда бывает и стрелочка прокрутки вниз. Это достаточно удобно для пользователей, потому что они могут помнить, что какая – то нужная им информация может находиться внизу страницы. Эта функция избавляет пользователей от нудного прокручивания колесика вниз блога. Особенно стрелочка прокрутки блога вверх полезна при больших и длинных страницах блога, когда меню располагается, только в верхней части.  

Здесь я расскажу, как поставить на ваш блог стрелочку прокрутки вверх.
Сделать это просто. Достаточно иметь саму картинку стрелочки вверх. Как самому сделать такую картинку я рассказал здесь. Итак, вы берете понравившуюся вам картинку, точнее ссылку на нее и вставляете в этот код:

<script type="text/javascript" >

var smoothJumpUp = function() {

if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {

window.scrollBy(0,-50);

setTimeout(smoothJumpUp, 20);

}

}

</script>

<div id="topcontrol" style="position: fixed; z-index: 100500; bottom: 5px; right: 5px; cursor: pointer; opacity: 1; " title="К началу страницы">

<a href="javascript:smoothJumpUp()">

<img src="тут ваша ссылка"/>

</a>

</div>

Заходите в Дизайн – Добавить гаджет – Добавить HTML/JavaScript и вставляете туда этот код.

На место отмеченное красным «тут ваша ссылка» вставляете ссылку на понравившееся вам изображение или свою. Как её сделать, я рассказал здесь.
Сохраняете и всё. Наслаждайтесь. Если у вас еще нет своих картинок стрелочек, то вы можете использовать эти. Достаточно нажать на ссылку и скопировать адресную строку. Для возврата в блог нажать кнопку браузера "Вернуться назад" (тоже, как не странно, стрелочка!)

---

С использование jQuery

Подключаете библиотеку jQuery к блогу -> в head блога ссылку на СDN -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Далее - просто добавить такой код в виде гаджета.

<div id="upbutton"></div>
<script>
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            if ($('#upbutton').is(':hidden')) {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { $('#upbutton').stop(true, false).fadeOut('fast'); }
    });
    $('#upbutton').click(function() {
        $('html, body').stop().animate({scrollTop : 0}, 300);
    });
</script>
<style>
  #upbutton {
    background: url("
Здесь URL вашей картинки
") no-repeat top left;
    height: 60px;
    width: 60px;
    bottom: 30px;
    right: 30px;  
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 999;
  }
<style>

Посмотреть готовый пример можно здесь - CodePen

Единственное радикальное отличие от кода в начале поста, это то, что кнопка прокрутки показывается, только после начала скроллинга.

Это ссылка на кртинку - https://sites.google.com/site/youmorestop/home/004670-black-white-pearl-icon-arrows-cut-arrow-up-60x60.png

---

Не все адреса ссылок рабочие. Проверяйте! Лучше брать адрес ссылки просто правой кнопкой мышки (копировать ссылку на изображение) или разметить у себя на сайте, блоге - это более надежный вариант!

 https://sites.google.com/site/youmorestop/home/s1.png

 https://sites.google.com/site/youmorestop/home/s2.png

https://sites.google.com/site/youmorestop/home/s3.png

https://sites.google.com/site/youmorestop/home/s4.png

https://sites.google.com/site/youmorestop/home/s5.png 

https://sites.google.com/site/youmorestop/home/s6.png

https://sites.google.com/site/youmorestop/home/s7.png

https://sites.google.com/site/youmorestop/home/s8.png

https://sites.google.com/site/youmorestop/home/s9.png

https://sites.google.com/site/youmorestop/home/s10.png

https://sites.google.com/site/youmorestop/home/s11.png

https://sites.google.com/site/youmorestop/home/s12.png 

https://sites.google.com/site/youmorestop/home/arrow.png


Да, и чуть не забыл..Для того чтобы ставить гифку с бабочкой в самом начале поста, нужно поставить на место ссылки вот этот код:

https://975c0837-a-62cb3a1a-s-sites.googlegroups.com/site/youmorestop/home/vverkh.gif?attachauth=ANoY7crrTjmt33MtpB7VgLpK3IWvGnDgfAS-nIa0B4jJQDIKxVkQxSdW7l54fIJSsUvxbDt9sWKtm-ewmQ9HmLIdER-QuKKHkxo91ATlECWsByvuS0doHBW3Umz8-0EvayCskmU6epqUi7tdcr2N9ZyO44J04ZuLnjktDIsOug5dYNqlfB1JWjhkd6uGscQXy0cASjItBTyTnlrY5HZN4pvAnDJH9WCEIg%3D%3D&attredirects=0

                                                                                                               Здесь вы можете добавить различные кнопки соц. сетей себе в блог.                                                                                                                   

                                                                                                                                                 

Как отключить тачпэд на ноутбуке.

Как отключить тачпэд на ноутбуке.

Часто бывает так, что невозможно отключить тачпед на ноутбуке нажатием кнопки. У меня на ASUS это сочетание Fn+ F9. Эту проблему можно очень легко устранить.
Если у вас не работает кнопка отключения тачпеда на ноутбуке, то можно последовать по такому пути, как я.

Меню Пуск—Панель управления—Оборудование и звук – Мышь - ELAN – поставить галочку «Отключение при подключении внешней мыши». Сохранить и ВСЁ!
Смотри все на картинках в деталях!

Здесь ссылка на то, как сделать скриншот экрана без скачивания дополнительных программ.