Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 32
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog banerПривіт всім відвідувачам Zura – Blog, сьогодні також до вашої уваги ще один красивий і корисний елемент, який може прикрасити ваш сайт, це рекламний банер з висуваючим текстом.

Передивляючись попередні публікації які стосувались красивих ефектів для сайту, побачив внизу сторінки що такої тематики публікаціями на Zura – Blog, поділились відвідувачі в соціальних мережах, клацнувши на одну з кнопок.

А це дає підстави, та й також показує, яким темам слід надавати перевагу, викладаючи свої публікації.

Цілком зрозуміло, що бажаними  для відвідувачів будуть такі матеріали, які легко засвоюються, де доступно і зрозуміло все розяснено, і де описано про ті елементи, які будуть і корисними для сайту,  вони  також можуть і прикрашати сайт, і їх повинно бути легко додати до свого проекту.

В сьогоднішній публікації запропоную ще один чудовий елемент, який безперечно більшість з вас захочуть додати до своїх проектів, ну або запропонують клієнтам якщо ви розробляєте комусь сайт.

Це рекламний банер з висуваючим текстом, на вигляд дуже красиво дивиться, ( щоб подивитись як виглядає цей елемент, клацніть на “Демонстрацію ефекту” нижче), створити такий елемент не тяжко, якщо взяти таке поняття як банер, і де його взяти, звісно щоб створити банер самому  ви повинні мати довсід роботи з графічними редакторами, ну або скачати готовий банер з якогось ресурсу, або в крайньому разі заказати за кошти.


user_97

Демнонстрація ефекту


В кінці публікації я планую  розмістити відео, на відео буде показано як створити банер самому з допомогою програми ACD See Pro, ну а також як додати цей банер до сайту, додається  банер дуже просто і легко, оскільки все працює тільки за рахунок стилей CCS, і папки в якій  знаходятьсь чотири картинки.

Отже все дуже просто і легко робиться, копіюєте код, запускаєте редактор для програмування, наприклад Notepad++, чудовий редактор і до того ж безкоштовний, створюєте в редакторі новий файл, вставляєте цей код в файл, і зберігаєте файл.

Звісно що, щоб картинки відображались в сторінці браузера, вони повинні знаходитись в папці, так що створюєте папку, як за звичай папку для картинок називають  “images”, в папку додаєте чотири графічні файли з розширеням jpg.

zura-blog baner1

Чотирьох файлів цілком буде достатньо, для того щоб на сторінці браузера відображався красивий рекламний ролик, оскільки тільки за допомогою стилей CCS відбувається ефект затухання, що таке ефект затухання, візміть для прикладу  цих чотири фото

ара0ара6ара5ара1

збережіть в себе, і просто вставте їх в створену папку “images” , як видно на всіх чотирьох фото одинакове зображення, і зображення  відрізняються один від одного різними відтінками кольору (відтінок— синій, зелений, оранжевий і розовий).

zura-blog baner2

Що я маю на увазі, це одне й те саме зображення, правда одне кольорове, інше звісно що таке саме, але може і чорнобіле бути, третє ще з якимось іншим відтінком, четверте ще з іншим (наприклад сепая), просто додайте ці або якісь свої картинки в папку  “images”, відкрийте файл в браузері, і ви побачите як картинка буде міняти з одного кольору на інший. При цьому якщо картинки одинакові, на вигляд буде здаватись що це одна і та ж картинка, в якій просто міняється кольорова гамма.


user_97

Демнонстрація ефекту


Цей код можна застосовувати  для створення дуже корисних і красивих елементів, якщо наприклад ціль це проста зміна кольорів на картинці, тоді можливо потрібно буде видалити в кодах частинку, через яку з правої сторони віїзджає прямокутник з текстом, він в такому випадку виходить лишнім, а в принципі може і ні, все залежить як вам подобається.

Коли є код, і деякі поняття, то можна багато для чого код застосовувати, модифікуваши його Ну власне я цей код вирішив спочатку застосувати для рекламного банера з текстом, а потім також посидівши над кодом винайшов можливість створити ще один елемент.

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

В кого цих знань достатньо, то звісно що потрібен тільки сам код, без всяких там розясненнь, тоді копіюєте і перевіряєте як працює, ну а для початківця перше що варто зробити перед зміною в любих кодах, “щоб файл не пошкодити”, це звісно що зробити копію, тоді у вас буде гарантія, і ви можите з одним файлом робити все що завгодно, без всяких там ризиків, оскільки в вас є копія файлу, яку в випадку чого, ви зможите застосувати і файл буде працювати.

Далі сам код, і розяснення до коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Рекламний банер</title>
<style type="text/css">
/* бігунок */
.slides {
height:1000px;
margin:130px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}

.slides ul li div {
background-color:#6D5DE2;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:50px;
position:absolute;
top:50%;
width:600px;

/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
</style>
</head>

<body>
<div class="slides">
            <ul>
                <li><img src="images/img1.jpg" title="зображення 1" alt="" />
                    <div>Текст для банера 1</div>
                </li>
                <li><img src="images/img2.jpg" title="зображення 2" alt="" />
                    <div>Текст для банера 2</div>
                </li>
                <li><img src="images/img3.jpg" title="зображення 3" alt="" />
                    <div>Текст для банера 3</div>
                </li>
                <li><img src="images/img4.jpg" title="зображення 4" alt="" />
                    <div>Текст для банера 4</div>

            </ul>
</div>
<p><center><a href="http://ruszura.in.ua">Zura - Blog</a></center></p>
</body>
</html>

Розяснення до коду

donald

Основа це стилі CCS. За рахунок тільки самих стилів CCS працює цей ефект, і дивлячись як красиво відображається цей ефект, і не скажеш що все обходиться без втручання скриптів. Отож спочатку зверніть увагу на ваші картинки, а саме які в них параметри, мається на увазі розміри, вони повинні бути девятсот пікселів в ширину, і триста в висоту.

Ви можите і інші розміри застосовувати, а для цього прийдеться робити зміни в стилях CCS, знову ж, якщо у вас є досвід з подібними завданнями то ви в стилях все відрегулюєте, якщо досвід відсутній, тоді скоріш за все картинка з іншими розмірами буде відображатись не коректно.

Як виставити необхідний розмір, в любому графічному редакторі ви зможите виставити потрібну ширину і висоту.

145 рядок в коді —

background-color:#6D5DE2;

можите виставити свій колір для фону виїзджаючого прямокутника, якщо синій вам не підходить до вашого проекту, тоді виставляєте той який буде підходити для вашого проекту, помінявши в сто сорок пятому рядку код кольору “#6D5DE2”

148 рядок в коді —

color:#FFFFFF;

в сто сорок восьмому рядку можите виставити свій колір для тексту, замість білого інший колір, помінявши код кольору  “#FFFFFF”

155 рядок в коді —

width:600px;

в сто пятдесять пятому рядку можите поміняти розмір виїзджаючого прямокутника, з текстом на інший

Як я вже згадував в цій рублікації, що посидівши деякий час над цим кодом, в мене получився ще один класний ефект, де картинка міняє  кольорову гамму. Спочатку подумав створитище одну публікацію, спеціально для ефекту, де картинка міняє кольорову гамму, але по суті для того щоб саме такий ефект створити, потрібно всього то, в цьому коді видалити частинку.

Якщо видалити цю частину в стилях

.slides ul li div {
background-color:#6D5DE2;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:50px;
position:absolute;
top:50%;
width:600px;

тоді виїзджаючий прямокутник з текстом просто не буде відображатись, і за умови якщо ви досте в папку чотири фото з різними відтінками, приклад фото вище, тоді у вас і получиться ще один елемент.

Як створити картинку зі зміною кольорової гамми

На Zura – Blog в публікації яка належить до категорії “Програми для веб дизайну” в публікації говориться про програму Colour Surprise, до речі дуже корисна програма, яка на фотографії поміняє кольорову гамму, саме для такого завдання ця програма супер, внизу тієї публікації знаходиться приклад (одинакових фото з різною кольоровою гаммою), якщо відтінки які знаходяться на фото в цій публікації не влаштовують, тоді за допомогою програми Colour Suprise можна зробити ті які вам підійдуть.

Виберіть чотири, збережіть в себе, і додайте в папку “images”, виставте потрібну ширину і довжину  900х300 px, видаліть частинку коду в стилях CCS, яка стосується віїзджаючого прямокутника, рядок в коді (144 — 155), і після перезапуску сторінки ви отримаєте ще один дуже красивий ефект, в якому буде мінятись кольорова гамма.

Хоча цю частинку видаляти не обовязково, її можна в коді позначити як коментар, тоді так само ефект виїзджаючого прямокутника з текстом не буде відображатись в браузері, а частинка коду залишиться, в майбутньому може ще пригодитись для чогось.

В принципі все, дуже класний код, я все протестував, обидва ефекти, рекламний банер з виїзджаючим прямокутником з текстом, і катинка з зміною кольорової гамми працюють. І при цьому класно виглядають, не думав що тільки з самих стилей CCS можуть вийти такі ефекти.

Збираюсь закінчувати публікацію,  але так і кортить вписати пару слів про ЄВРО 2016, вчорашній матч між Україною і Німеччиною. Можите не погодитись зі мною, а на нічию як мінімум тянули, але як і минулого року з Іспанією програли чомусь. Звісно що можна сказати класу не вистачає, погоджуюсь частково, але візьмем матч інших команд, де англійці своїх суперників  “темлевили цілих два тайма, як мішок  😛 “.

І що в кінцевому підсумку, нічия, де лише вдалося два рази перейти центр поля, а на останній хвилині, мяч після навісу попадає в “чердак”, а від “чердака”, відлітає та ще й по такій траєкторії, і не має сенсу тренера англійців в замінах звинувачувати, тут хоть не знаю що придумай.

Згадав один цікавий випадок, прохідний екзамен тоді здавали по футболу, для вступу в спортивний заклад, потрібно було точно надіслати футбольний мяч, памятаю як мав пробивати один “чувак”, видно було що він звідкись приїхав, і мабуть для екзаменаторів  пів свині з  горівкою чекало.

Але не про те мова, мова про те як він виконував це завдання, підходить до мяча, чую йому хтось там кричать,  мабуть разом з ним на екзамен приїхав, “Грицю бий шпіцом”, і  знаєте копнув мяч “шпіцом”, але уявіть собі мяч попав то як раз, в самий квадрат. Тут аж більшість за голову зловилось від здивування, але нічого не поробиш, по – пав і все.

Ох коли вже і нашій збірній так “впре”, (дійти за гру два рази до воріт, просто копнути в штрафну мяч, навіть попасти в чиїсь “чердак”, і щоб від “чердака” мяч так вдало влетів в ворота).

До зустрічі!

Leave a Reply

Your email address will not be published. Required fields are marked *