Webmajstri
Združenie webových remeselníkov Slovenska

Archives: Štýlovanie

1px line on retina devices

17 October, 2014 by Majster Pedant | No Comments | Filed in Štýlovanie

How to make 1px line on retina devices? As you may have found, retina devices draw 1px css styled line as 2 physical pixel line (speaking about displays with device-pixel-ratio:2) You can somehow trick iOS browser to display 1px physical pixel wide line with CSS definition as background gradient pushed to 1px with background size. […]

Tlačové CSS – ešte stále nie presné

28 July, 2010 by Michelangelo | No Comments | Filed in Štýlovanie, Užitočné

Ak chcete tlačiť údaje z webovej stránky a vytvoriť na to špeciálne CSS, treba myslieť na nepresnosti, ktoré môžu vzniknúť. Problém je, že každý prehliadač posiela iné údaje do tlačiarne, a keď chcete nastaviť rozmery tlačených objektov v centimetroch a milimetroch, tak pri tlačenom výstupe dostanete odlišné rozmery. Najbližšie skutočným jednotkám metrickým jednotkám pri tlači […]

Tags: , , , , ,

„Spinner“ – zobrazenie načítavania obsahu použitím CSS

16 July, 2010 by Michelangelo | No Comments | Filed in Štýlovanie

Poznáte tie GIF animované obrázky, ktoré sa zobrazujú pri ajaxových dopytoch, kým čakáte na obsah časti stránky (alebo aj celej). Skúsme niečo také vyrobiť v CSS, špecifickejšie povedané, v CSS 3, pretože to umožňuje objekty animovať. Majme hlavný element, v ktorom sa bude všetko odohrávať (pozicovaný relatívne). Doň umiestníme toto HTML:

Z vyššie uvedeného […]

Tags: , , , , , , ,

Select box v prehliadačoch a ako odstrániť ich rozdiel

8 July, 2010 by Michelangelo | No Comments | Filed in Štýlovanie

Nastavenie výšky (v CSS height) pre select element je problém vo Firefoxe. Kým Safari a Opera ponecháva text vertikálne v strede, Firefox nie. Tento problém sa s týmto prehliadačom nesie už hodnú dobu a ešte som nedospel k uspokojivému riešeniu. Ako možné riešenie mi napadá vyrobiť si vlastný select funkčne (i dizajnovo) blízky k bežnému […]

Tags: , , , , , , , , ,

Ako zlomiť dlhé slovo za pomoci CSS

29 June, 2010 by Michelangelo | No Comments | Filed in Štýlovanie, Užitočné

Už dlhšie sa dá lámať dlhé slovo za pomoci CSS, ktoré funguje od starých a dnes už nepoznaných verzií prehliadača Internet Explorer (pretože Microsoft toto pravidlo zaviedol ako prvý a tak sa postupom času dostalo do špecifikácie CSS 3).

Ak chceme toto dlhé slovo (často URL adresy) zlomiť na viac riadkov, stačí použiť CSS: […]

Tags: , , , , ,

Pravidlo pre tlačidlo odosielajúce formulár

3 June, 2010 by Michelangelo | No Comments | Filed in Použiteľnosť, Štýlovanie

Správne tlačidlo, ktoré odosiela formulár, by malo mať aspoň tri stavy: keď sa naň len pozeráme, keď ponadeň prechádzame kurzorom (neplatí pre ovládanie dotykom), a keď ho aktivujeme, (je tu aj štvrtý bod, že keď sa tlačidlo nedá stlačiť, je to zakázané). Ešte raz v obrázkoch (normal, hover, active): Prečo aj stav aktivácie tlačidla Pretože […]

Tags: , , ,

Kritika CSS Zen Garden dizajnov

31 May, 2010 by Michelangelo | No Comments | Filed in Štýlovanie

Známa zbierka CSS tvorby, CSS Zen Garden, má jednu veľkú chybu – nepozerá na použiteľnosť daných dizajnov, ale na peknosť. Aj to len na peknosť na prvý pohľad a bez kliku. To je chyba, pretože niektoré dizajny naozaj nie sú moc vhodné pre masové použitie. Napríklad v tomto dizajne sa orientuje veľmi ťažko a je […]

Tags: , , , , ,

Formulárové tlačidlo (button, input) pomocou CSS 3

20 May, 2010 by Michelangelo | 2 Comments | Filed in Štýlovanie

Je to jednoduché. Majme HTML:

A dajme ho do takejto formy: Týmto CSS:

Výsledok je viditeľný tu. Funguje čiastočne vo všetkých dnes najpoužívanejších prehliadačoch. Tie slabšie dostanú modrý obdĺžnik, lepšie dostanú aj oblé rohy a tie najrýchlejšie vyvíjané aj tieňované pozadie.

Tags: , , , ,

Grid, alebo ako na jednoduchú mriežku v HTML a CSS

19 May, 2010 by Michelangelo | No Comments | Filed in Ako na, Štýlovanie

Predstavme si, že vytvárame webové sídlo v určitej mriežke (ang. grid). Napríklad šírka stránky bude 960 pixlov. A chceme tam napasovať tri stĺpce o šírke 300 pixlov s rozostupom 30 pixlov medzi každými dvoma susednými. Jedna vec je používať rôzne JS alebo jQuery vychytávky, my si ale ukážeme, ako na to pomocou CSS, HTML a […]

Tags: , , , , , ,

Nefunguje

5 May, 2010 by Michelangelo | 2 Comments | Filed in Štýlovanie

Toto nefunguje:

Zatiaľ.

Tags: ,