WEBDESIGN GOGAN EXPEDIMENT
Tuto stánku jsem udělal pro pokusy s různými postupy které snad umožní CSS 3. Prozatím jsou většinou validátorem hodnoceny jako nekorektní - to je smůla :-), nic méně někdy i fungují. Rád bych si tu vyskoušel i převody fontů do EOT a jejich možnosti, například u písma AdLib v logu stránky se mě převod nepovedl. Microsoft Weft si prostě někdy postaví hlavu.
Petr Gogan Dvořák 20. 3. 2007, moje profesní stránky
Tak tohle je Photoshop, potom v IE filtr Shadow nasnímaná obrazovka a opět jemná úprava v Photoshopu.
Validní náhrada tagu iframe pro XHTML 1.0 Strict prvkem object.
Pro vkládání e-mailového formuláře jsem chtěl vyskoušet průhlednosti vládaného okna, ve Firefoxu funguje naprosto perfekrně s Operou je to kapánek horší. Zřejmě ještě kombinacemi průhlednosti jednotlivých bloků půjde průhlednost vyšperkovat. IE, protože formulář relouduji ze své pracovní domény ( tam je IE zcela bez problémů )dělá problémy s neznámým obsahem. Samotné vložní je řešeno prvkem object je to výborná alternativa za iframe pro ty co rámy potřebují používat a zároveň mít validní kód stránky. Je to i skvělé řešení jak se při znovu načtení stránky po odeslání formuláře zbavit hlášky „stránka obsahuje POSTDATA“ a duplicitnímu odesílání formulářů. V PHP scriptu vkládaného formuláře musíte po odeslání příkazem include přesměrovat sám na sebe.
Průsvitnost 50%, použity filtry alfa pro IE a opacity pro Firefox a Operu
| #ptak { | |
|---|---|
| position: absolute; | |
| width: 700px; | |
| height: 400px; | |
| background: url(ptak.png); | |
| filter: alpha(opacity=50); | |
| opacity: 0.5; | |
| } |
Tady je stín filtrem Shadow a duplicitně vlastností CSS 3 box-shadow, až efekt uvidíme ve Firefoxu a v Opeře tak se „blýská na lepší časy“. Filtr je Shadow podporován jen v IE, adekvátní náhradu pro filtr se mě najít nepodařilo. Asi by šel použít nějakej Java Apllet, ale to už ztrácí poesii.
| #stin { | |
|---|---|
| width: 814px; | |
| height: 414px; | |
| background: url(ptaci.gif) no-repeat; | |
| padding-bottom: 10px; | |
| box-shadow: 10px 15px 0px gray; | |
| filter:DropShadow(color=gray, direction=120); | |
| } |
KONVERZE TT FONTU DO EOT
Jak se dá tušit už podle jména konverzního programu „Microsoft WEFT“ opět se zobrazuje jen v IE. Podrobně se postupem jak převést písmo do *.eot zabývá jakpsatweb. Je to jistě škoda že v ostatních prohlížečích se dynamycké písma nezobrazují. Je to sice škoda, ale jistě je pro kulturu a vzhled webu mnohem důležitější použití zásad typografie. Pokud Vás typografie zajímá mnoho užitečného se dá najít na Derových stránkách.
Šikmé pozicování generovaného obsahu pomocí CSS
Při stylování generovaného kódu z php počítadla jsem použil CSS operátor „+“ pro definování selektoru sousedícího prvku. Třídu pro formátování jsem samozřejmě definoval i v PHP scriptu pro html výpis proměných. Tady na stránce připočítává každé načtení to je samozřejmě dá podmínit ip adresou, ale to už je odjinud. Stylování nefunguje v IE 6 v IE 7 už ano.
| td.jedna | { |
|---|---|
| padding: 58px 0 0 0; | |
| } | |
| td.jedna+td.jedna | { |
| padding: 42px 0 0 27px; | |
| } | |
| td.jedna+td.jedna+td.jedna | { |
| padding: 25px 0 0 53px; | |
| } |
... jestli máte na stránkách použitý netradiční grafický postup
písnite maila rád Vás linknu. Pokud je opravdu zajímavý a nechcete ho právě z důvodů validity na svých stránkách použít můžeme ho pod Vaším jménem dát sem
pokud by jste chtěli stránku linknout tak je to takhle:
| <p> | |
| <a href="http://webdesign-expediment.czechian.net/"> | |
| <img style="border:0;width:100px;height:24px" | |
| src="http://webdesign-expediment.czechian.net/WGE.gif" | |
| alt="Webdesign Gogan Expediment"/></a> | |
| </p> |
| <p> | |
| <a href="http://webdesign-expediment.czechian.net/"> | |
| <img style="border:0;width:100px;height:24px" | |
| src="http://webdesign-expediment.czechian.net/WGE1.gif" | |
| alt="Webdesign Gogan Expediment"/></a> | |
| </p> |
 |  |  |  |  |