Ludwik.org

CSS3 - moja lista życzeń

Zanim CSS3 wejdzie w życie minie jeszcze spoooro czasu… W ogóle to mam wątpliwości, czy wejdzie w życie, bo patrzę na produkt Microsoftu o nazwie Internet Explorer i zaczynam się nieco obawiać… Przecież IE nie do końca obsługuje CSS2 a my tu o już o wersji 3 rozmawiamy! No ale nic… Czekać niestety trzeba, bo nic nam CSS3 nie da, skoro IE tego nie będzie obsługiwał, dlatego za bardzo się teraz tym nie martwię.
Z tego, co wiem są już jakieś tam polecenia w CSS3 gotowe. Jakie dokładnie to nie wiem. Były tam chyba zaokrąglone rogi, i takie tam różne. Jednak ja przygotowałem swoją prywatną listę życzeń “Co bym chętnie ujrzał w CSS3″.

• font-color - do tej pory kolor tekstu określało się poleceniem color, np. color: #000000;. Daje to pewne ograniczenia w stylowaniu tekstu, chociażby nie można określić osobno koloru czcionki oraz koloru podkreślenia… Bo załóżmy że tekst chciałbym mieć różowy, a podkreślenie błękitne. Używając text-decoration: underline; nie możemy osiągnąć takiego efektu. Jest możliwość pobawienia się border-bottom: lightblue;, lecz to się nieco mija z celem, gdyż borderem określamy obramowanie, a nie podkreślenie.. To tak jakby przybijać gwóźdź bananem, mimo że mamy pod ręką młotek. Natomiast gdybyśmy mieli osobno polecenie font-color oraz osobno polecenie color można by osiągnąć dany efekt bez chodzenia na około.
  W czym jest to potrzebne? Bardzo fajnie wyglądają np. takie linki, gdzie podkreślenie jest zrobione innym kolorem niż sam link (Tutaj można takie coś zobaczyć [efekt hover w treści] choć to i tak nie jest najlepszy przykład. Gdzieś miałem adres takiej strony, gdzie było to pięknie widać, no ale zgubiłem oczywiście).
• …-gradient czyli tworzenie gradientów w tle za pomocą czystego CSSa, bez potrzeby używania grafiki. Najpierw powiem krótko co to jest gradient dla tych co nie wiedzą. Otóż jest to takie łagodne przejście z jednego koloru do drugiego. Taki obrazek powinien wam wszystko wyjaśnić. Widzimy tutaj przejście z ciemnego niebieskiego (#003366) do jaśniejszego (#0066CC). Jak wyobrażam sobie składnie takiego polecenia w CSS?

  
  #id {
  vertical-gradient: #003366 0% #0066CC 100%;
  }
  

  Teraz małe objaśnienie. Po każdym kolorze określamy jego procentową pozycję (lub też pikselową). 0% oznacza początek elementu, a 100% koniec elementu. Polecenie to nazwałem vertical-gradient. Oznacza to tyle, że przejście kolorów będzie z góry na dół. Można też określić sobie horizontal-gradient itp. Można też dać kilka kolorów, a nie tylko dwa, np.:

  
  #id {
  vertical-gradient: #000000 0% #FFFFFF 33% #000000 66% #FFFFFF 100%;
  }
  

  Wtedy nasz gradient będzie wyglądał w ten sposób.

• rounded-corner - tutaj sprawa oczywista… Zaokrąglone narożniki. Jako wartość można by np. podawać długość promienia w pikselach albo coś w ten deseń.
• background-image - znaczy się to polecenie już istnieje w CSS, jednak mi chodzi o rozwinięcie. Głównie mam na myśli takie coś, aby można było dodawać kilka obrazków w tle, a nie tylko jeden jak to jest do tej pory.
• height:100%; - czyli raz na zawsze rozwiązać problem z faux columns oraz divami na wysokość całego okna ;).
• vertical-align - to polecenie działa na razie tylko dla elementów tabelopodobnych ;). Ja bym pozwolił temu działać w każdym elemencie. Nie trzeba by wtedy było wymyślać różnych obejść do tego.

Mam jeszcze wiele życzeń odnośnie CSS3, jednak kolejne wypiszę w następnych częściach tego wpisu.