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

Търсене

Breaking

Оформяне на лентата за превъртане

лентата за превъртане
Здравейте всички. Събрах на едно място няколко варианта на оформяне на лентата за превъртане. Така с помощта на CSS стиловете ще промените нейния външен вид. Понякога се налага в публикация да затворите текст в скролер. Аз самата често използвам този похват при публикуването на дълги кодове. Така пестя място в публикацията си. Какво е лента за превъртане, плъзгач или скролер можете да си припомните тук.

Всичко е много просто. И ако ви е интересно, поиграйте си с някой от кодовете, които ви предлагам, като промените оцветените в синьо в тях елементи. Ако използвате въображението си можете да създадете една много необичайна лента за превъртане.

Вариант първи



Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст
Тук ще бъде вашият дълъг, предълъг и много важен текст


Кодът е:

<center><div style="background-color: #fcfadd; color: #714d03; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">
Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст
</div></center>



Вариант втори




Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст



Код:


<center><div style="background-color: red; color: white; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;">
Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст
Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст
</div></center>

Вариант трети




Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст


Кодът е:

<center> <div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6LhabDWQoVcx-KxMNp6NYag22zFGgSZFsWKzzsbbftk3M6iYoAqPHGYMLPUU3VkQPzSoEAPCUDqz1yOg-1ytOiA0zDyLmWZ-0X-tM3AV0Xqvs8A_MLgy6o6VqIE6lDZSB6NWjrpQsrc/w140-h140-p/izobrajenie.jpg); color: #ffffff; height: 150px; line-height: 3em; overflow-y: scroll; padding: 5px; width: 250px;"> Тук ще бъде вашият дълъг, предълъг и много важен текст </div></center>



Вариант четвърти




Тук ще бъде вашият дълъг, предълъг и много важен текст



Неговият код е:


<center> <div style="border: 6px ridge #debb07; height: 150px; line-height: 3em; overflow: scroll; padding: 5px; width: 150px;">
Тук ще бъде вашият дълъг, предълъг и много важен текст </div></center>



Вариант пети




Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст



Код:



<center> <div style="width:250px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px double #2288bb;">
Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст </div></center>



Вариант шести




Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст



Код:



<center> <div style="width:150px;height:250px;line-height:3em;overflow-y:scroll;padding:5px;border:12px solid #372520;">
Тук ще бъде вашият дълъг, предълъг и много важен текст Тук ще бъде вашият дълъг, предълъг и много важен текст </div></center>


За днес това е всичко. Нека ви е лятно, слънчево и отморяващо. Благодаря за посещението.

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

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

BGtop

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

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