KategorieCSSWeb Developer

Jak ustawić łamanie tekstu w CSS, gdy zamiast spacji mamy podłogę _ ??

Z problemem łamania tekstu możemy się spotkać, gdy zamiast spacji mamy np. znak podłogi “_”. W większości przypadków występuje on, gdy chcemy wyświetlać pliki. Tam z różnych względów twórcy aplikacji zamieniają spację na podłogę “_”. I pojawia się problem, gdy chcemy wyświetlić takie nazwy plików w interfejsie.

Czytaj dalej
KategorieWeb Developer

[CSS] Jak ustawić style dla tekstu zastępczego (placeholder) w polu input ?

Wraz z pojawieniem się standardu HTML5 otrzymaliśmy możliwość wykorzystania atrybutu placeholder, który ustawia tekst zastępczy elementu input, gdy ten jest pusty. Standard CSS3 określa pseudo element “::input-placeholder” którym powinniśmy się posługiwać przy definiowaniu styli dla tekstu zastępczego.

Niestety jak wiemy świat nie jest idealny i przeglądarki w większości wykorzystują prefiksy. Tak więc konieczne jest zapisanie definicji pseudo elementu dla każdej przeglądarki osobno, tak jak zostało zrobione to poniżej:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Dla osób nieco znających CSS-y powiem od razu że nie można tego zapisu uprościć do postaci:

::-webkit-input-placeholder, 
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder 
{  
   ...style...
}

Powyższy zapis nie zadziała, gdyż nie ma przedlądarki która by rozumiała prefiks ::-webkit-* i :-moz-* jednocześnie.

KategorieSkryptyWeb Developer

[Skrypty] Przyciski z paskiem postępu

Dla większości przycisków animacje ograniczają się do efektu wciśnięcia przycisku. Jednak wraz z coraz większymi możliwościami CSS-ów oraz coraz szerszego stosowania skryptów JavaScript mamy do dyspozycji coraz bardziej zaawansowane animacje. Poniższy zestaw przycisków pokazuje jak efektownie pokazać pasek postępu po kliknięciu na przycisk.
Czytaj dalej

KategorieWeb Developer

[CSS] Jak wykonać prosty efekt powiększenia ?

Dzięki dynamicznemu rozwojowi szablonów stylów CSS, które to z wersji na wersję dają nam coraz to większe możliwości, jesteśmy w stanie zastąpić część efektów pisanych do tej pory w Java Script. Mam nadzieję że poniższy przykład zachęci część z was do bliższego zapoznania z możliwościami CSS-ów.
Czytaj dalej