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

Здравейте всички. Събрах на едно място няколко варианта на оформяне на лентата за превъртане. Така с помощта на 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/AVvXsEjQcmfdlb7P9DIgmXM7BusUvuCzR4GFH1n2n3nQkpFs0FWLy-HQc0VLHqmFGlS4wS_PnMp6UmqnMeKdw1r94IYnIk2epwM5kxqhNjrk16kUMclJ94tneb_1wWSLa545G0FleBLwgYQA61g/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>

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

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

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