6/27/2017

Ramka z przewijanym tekstem w poście


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin auctor varius dui. Duis imperdiet felis sapien, nec fringilla nulla facilisis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc quis quam congue consequat ut sit amet justo. Quisque varius diam id auctor vulputate. Morbi tincidunt facilisis accumsan. Sed nec nulla sed orci faucibus blandit in tristique libero. Sed cursus lorem orci, non euismod dolor rutrum vel. Sed malesuada ex sed felis suscipit, id mattis elit euismod. Ut a augue egestas, cursus nibh non, interdum urna. Aliquam erat volutpat. Praesent mattis tellus velit, sit amet cursus eros fermentum et. Nunc lacus metus, condimentum et interdum vitae, lobortis vel turpis.


W komentarzach pod *tą instrukcją* pojawiła się prośba o wskazówki dotyczące stworzenia ramki przewijanego tekstu w poście (jak wyżej). Jest to zasadniczo oparte na zasadach podglądu live *instrukcja*.


Wszystko robimy w HTML posta

Cały kod składa się z dwóch części: HTML i css.
Obie znajdują się w HTML posta.

CZĘŚĆ HTML

<div id="tek">
<div class="teks">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin auctor varius dui. Duis imperdiet felis sapien, nec fringilla nulla facilisis laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc quis quam congue consequat ut sit amet justo. Quisque varius diam id auctor vulputate. Morbi tincidunt facilisis accumsan. Sed nec nulla sed orci faucibus blandit in tristique libero. Sed cursus lorem orci, non euismod dolor rutrum vel. Sed malesuada ex sed felis suscipit, id mattis elit euismod. Ut a augue egestas, cursus nibh non, interdum urna. Aliquam erat volutpat. Praesent mattis tellus velit, sit amet cursus eros fermentum et. Nunc lacus metus, condimentum et interdum vitae, lobortis vel turpis.
</div>
</div>

CZĘŚĆ CSS

<style type="text/css">
.teks::-webkit-scrollbar { /*dłuższy pasek*/
width: 6px; /*grubość w pikselach*/
background-color: #fff; /*kolor*/
}
.teks::-webkit-scrollbar-thumb{ /*krótszy pasek*/
background: #000; /*kolor*/
border-radius:0px; /*zaokrąglenie rogów*/
}
.teks {
max-width: 300px !important; /*szerokość gadżetu*/
max-height:200px; /*wysokość gadżetu*/
padding: 15px; /*odległość tekstu od ramek*/
overflow: auto; /*sprawia, że pojawia się pasek przewijania*/
background: #93BAB9; /*tło*/
color: #fff; /*kolor czcionki*/
}
</style> 

Nie czuję obowiązku tłumaczenia wszystkiego, ponieważ jest to połączenie kodu z tych dwóch instrukcji: podgląd live i przewijany widget.

Mam nadzieję, że ten przykład połączenia dwóch instrukcji zainspiruje Was do innych ciekawych połączeń :).

1 komentarz: