Bardzo często się zdarza, że grafik zaprojektuje grafikę strony tak, że na niektóre elementy nie mamy zbyt wiele miejsca, a dodatkowo powinny się mieścić w jednej linii. Wszystko fajnie jeżeli chodzi o projekt graficzny, jednak problem pojawia się w przypadku dynamicznej zawartości. Nie jesteśmy bowiem w stanie przewidzieć jak długi tekst wprowadzi użytkownik. Można co prawda pokusić się o funkcje liczące ilość wyrazów (mało dokładne) lub znaków (dokładniejsze), jednak wówczas jest ryzyko, że tekst zostanie obcięty w najmniej spodziewanym momencie.

Ciekawym rozwiązaniem tego problemu jest zastosowanie styli css, które zrobią całość za nas, a co więcej – bardzo ciekawie i estetycznie to wygląda. Z resztą wystarczy spojrzeć na poniższy zrzut fragmentu ekranu.

Gradientowe zakończenie tekstu za pomocą css

Wygląda to dość ciekawie – jak więc to osiągnąć.

1. kontener na tekst

W pierwszym kroku należy przygotować kontener na tekst. Dodam, że kontener na tekst jest elementem typu div umieszczonym wewnątrz nadrzędnego elementu div, który na powyższym zrzucie ekranu posiada ramkę.

<div id="contnetHolder">
  <a href="#">***4,8 % Rendite mit 76 Wohneinheiten Nähe dem Wannsee***</a>
</div>

Bardzo ważne jest określenie trzech atrybutów styli dla elementu div, w którym zamieszczmy nasz tekst:

div#contnetHolder {
  width: 350px;
  overflow: hidden;
  position: relative;
}

Już ten zabieg spowoduje, że tekst zostanie przycięty adekwatnie do szerokości ustawionej dla div’a. Jednak nie będzie to płynne zakończenie, lecz “nagłe urwanie” tekstu.

2. dodanie gradientu

Dodanie odpowiedniego stylowania, aby osiągnąć efekt gradientu odbywa się nie dla kontenera div, lecz dla znajdującego się wewnątrz niego linku, a z pomocą przychodzi nam tutaj selektor after. Dzieki niemu dodawane jest stylowanie po konkretnym elemencie. Dla powyższego przykładu wygląda to tak:

div#contnetHolder a:after {
  background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0), #FFFFFF) 
        repeat scroll 0 0 transparent;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  z-index: 901;

Za pomocą własciwości width i height określamy wymiary gradientu, z-index określa nam kolejność elementu na stosie (musi posiadać odpowiednią wartość – większą niż ta ustawiona dla elementu a). Skoro chcemy ustawić gradient z prawej strony tekstu, wyrównujemy go do prawej górnej krawędzi za pomocą top i right. Bardzo ważne jest ustawienie wartości position oraz display tak, jak w powyższym przkładzie. No i na koniec odpowiednie ustawienie gradientu za pomocą właściwości background i atrybutu -moz-linear-gradient, który przyjmuje następujące parametry: pozycja startowa, kolor w pozycji startowej, kolor w pozycji końcowej.

Rozwiązanie to będzie działać w większości nowych przeglądarek, gdyby jednak pojawiły się problemy zachęcam do zapoznania się z atrybutami -ms-linear-gradiend, czy też -linear-gradient dla właściwości background.

Gradientowe zakończenie długiego tekstu
Tagged on:                     

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social Widgets powered by AB-WebLog.com.