0

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

лентата за превъртане
Здравейте всички. Събрах на едно място няколко варианта на оформяне на лентата за превъртане. Така с помощта на 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://lh3.googleusercontent.com/-u2PhhFyPcpg/WB9io0zoxTI/AAAAAAAAB3k/ipeWvH4Qv3QazG16G3GQGzgjmgjsP-BlwCEwYBhgL/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>


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

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

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


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита