CSS hrou CSS3, experimenty, svet v kaskádových štýloch

FireBug pre Internet Explorer 6,7,8

03.16.2010 · Posted in Layout

Dnes mi kolega v práci veľmi pomohol. V kóde jednej stránky sa cez JS generoval iframe, ktorý pod IE6 čiastočne znefunkčoval jej obsah. No a kolega mi doporučil vloziť hocikde do stránky tento kód:

[code lang="html"] <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> [/code]

Toto Vám umožní používať tento supertruper nástroj aj pod IE6, IE7.

...

No Comments » Tags: , , ,

Nebojte sa používať CSS3

02.11.2010 · Posted in Projekt

Stále sa stretávam s názormi, že CSS3 sú zbytočnosť, kopec prehliadačov ich nepodporuje a nie su ešte štandardmi. Opak je však pravdou. CSS3 vám uľahčia pracu, skrášlia Vám deň, či ste webdesigner alebo návštevník. Sú inovatívne, jednoduché a šetria veľkosť kódu. Dnes 95% css3 vlastností podporujú všetky prehliadače, až na Internet Explorer, samozrejme. Štandardmi síce ...

3 Comments » Tags: , , , , , , , , , , ,

CSS3 :target

01.28.2010 · Posted in Layout

Možnosť prepínať medzi obsahom bez JavaScriptu? Áno.. Samozrejme, príklad je veľmi stručný, skúste sa s ním pohrať.

...

No Comments » Tags: ,

X stĺpcový zoznam s jediným OL/UL tagom

01.24.2010 · Posted in Layout

Pred časom som v práci riešil zapeklitý problém. Ako s jedným UL/OL LI zoznamom vytvoriť štvorsĺpcový, ktorý sa po zmenšení okna prehliadača automaticky prispôsobí na tri stĺpce? Prvé pokusy nedopadali najlepšie.

Prvé riešenie pozostáva z troch jednotlivých OL položiek. Skúste si zmenšiť okno na cca 900 px na šírku. Nepoužitelné.

...

No Comments » Tags: , ,

Pekná CSS3 fotogaléria

11.29.2009 · Posted in Práca s obrázkami

Prezrieť CSS: #galeria {margin: 10px auto; float:left;} #galeria a { position: relative; float: left; width: 100px; height: 75px; margin: 30px;} #galeria img { width: 100px; height: 75px; padding:15px; border: 0; -moz-box-shadow: 1px 1px 7px #ccc; -webkit-box-shadow: 1px 1px 7px #ccc; -moz-transition: all 0.2s; -webkit-transition: all 0.2s;} #galeria img:nth-child(n+1) { -moz-transform: rotate(5deg) skew(0deg, 0deg); -webkit-transform: rotate(5deg) skew(0deg, 0deg); -o-transform: rotate(5deg) skew(0deg, ...

5 Comments » Tags:

CSS disketa

10.26.2009 · Posted in Obrazce

Na dnes taká menšia oddychová vec. Nepodarilo sa mi urobiť nejaké drobnosti presne podľa návrhu, resp. by s tým bola piplačka. Disketa je animovaná v prehliadačoch Google Chrome, Firefox 3.6 a Safari 3.

...

No Comments »

Formálne pravidlá kaskádovania

10.20.2009 · Posted in Projekt

Tento výňatok textu je z knihy xCSS – referenční příručka, ktorú vydáva Zoner Press. Ďakujem Jurajovi za doplnenie. Kaskádovanie je klúčová vlastnosť CSS – určuje postup, ktorým sa prehliadač musí riadiť pri zpracovaní všetkých existujúcich štýlov platných pre zpracovavaný dokument a pre použité médium. Štýlové predpisy môžu pochádzať z troch rôznych zdrojov: od autora, uživateľa alebo agenta a ...

3 Comments »

HTML 5 – video a audio

10.03.2009 · Posted in Selektory, CSS3, HTML 5

Jednoduché, pekné. Prezrieť <video src="test.mp4" controls="true"></video> <audio src="zvuk.mp3" controls="true"></audio> Dalsie možnosti: http://www.w3schools.com/tags/html5_video.asp Podpora od: Firefox 3.6, Google Chrome 0.4 ...

No Comments »

Ladíme stránky pre Internet Explorer 6

09.21.2009 · Posted in Projekt

Začnem asi skrátka. Jedna z najdôležitejších CSS vlastností, ktorá Vám skráti čas ladenia stránky pre Internet Explorer 6 je float: left. Nebojte sa napríklad floatovat každý blok stránky, ktorý susedí s iným blokom. S prípadnou kombináciou clear: both sa takáto kostra stránky nerozsype. Vyhnite sa však floatovaniu textových elementov, h1-h6, tagu P. Nadpisy by sa ...

7 Comments » Tags: , , ,