Diskuze: Machr na webdesign - CSS 3 bez obrázků

David Hartinger

Vlastník

David Hartinger:25.3.2013 11:21

Zdravím, machr na tento týden bude o webdesignu, konkrétně o technologii CSS 3. Jako vždy se jedná o týdenní minisoutěž, kde nejlepší získá placku "Machr na webdesign" a nějaké samolepky.

Všichni máte k dispozici stejnou HTML stránku, kterou nesmíte měnit. Úkolem je vytvořit co nejkreativnější CSS 3 šablonu tak, abyste v ní nikde nepoužili obrázek, ale využívali ke stylování a dosažení patřičného efektu pouze nových vlastností specifikace CSS 3. Je známo, že CSS dokáže divy a stejná stránka může vypadat s jinými styly úplně jinak (jak barevně, tak i rozložením).

Nebojte se použít CSS 3 animace, přechody, rotace, gradienty a další nové vlastnosti, nyní máte příležitost prozkoušet si vše, co CSS 3 nabízí. Kompatibilitu neřešte, stačí, když to správně zobrazí alespoň nový Chrome.

Malá inspirace, jak lze udělat např. obrázky čistě v CSS 3 (klidně si nějaký vypůjčete): http://nicolasgallagher.com/…s-gui-icons/

HTML šablona je následující:

<!DOCTYPE html>

<html lang="cs-cz">
        <head>
                <meta charset="UTF-8" />
                <title>Webdesign Novák - Tvorba webových stránek a softwaru na zakázku</title>
                <link rel="stylesheet" href="style.css" type="text/css" />
        </head>

        <body>
                <header>
                        <div id="logo">&nbsp;</div>
                        <h1>Webdesign Novák</h1>
                </header>

                <nav>
                        <ul>
                                <li><a href="">O nás</a></li>
                                <li><a href="">Webtvorba</a></li>
                                <li><a href="">Software</a></li>
                                <li><a href="">Reference</a></li>
                                <li id="last-li"><a href="">Kontakt</a></li>
                        </ul>
                </nav>

                <br clear="both" />

                <div id="article-top">&nbsp;</div>

                <article>
                        <header>
                                <h1>Nadpis</h1>
                        </header>
                        <section>
                                <p>Vítejte na mých stránkách!</p>
                                <p>Tato stránka slouží jako vzor pro soutěž Machr na webdesign na programátorské sociální síti devbook.cz. Úkolem členů sítě je vytvořit k této stránce pěkný CSS 3 styl bez použití obrázků.</p>
                                <p>Jinak se jmenuji Jan Novák a jsem opravdový machr na webdesign. Někdy si říkám i šumachr. Umím úplně vše, hlavně SEO, kterým vás dostanu na první příčky v Google vyhledávači. Znám totiž několik zaručených triků, které nezná nikdo jiný! Hlavně to, že na svých stránkách nemám description a keywords.</p>
                                <p>Používám free Wordpress šablony a Wordpress, stránky stojí jen 5.000 Kč. Noví zákazníci mají slevu 5%. Tvorba webu mě opravdu baví!</p>
                        </section>
                        <footer>&nbsp;</footer>
                </article>

                <footer>&copy; Novák corporation 2013, soubor pro devbook.cz</footer>
        </body>
</html>

Mělo by v ní být dost divů a připravených elementů k tomu, aby stránka mohla kloudně vypadat. Čas si dejme jako vždy sobota 30.3. v 19:00. Jsem zvědavý, co vymyslíte

Editováno

Odpovědět

25.3.2013 11:21

New kid back on the block with a R.I.P

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:25.3.2013 15:59

Přidám si tam link na ten style, to snad nevadí.

Nahoru Odpovědět

25.3.2013 15:59

Honza Bittner

Tvůrce

Honza Bittner:25.3.2013 16:15

bude to super soutěž díky za ní

Nahoru Odpovědět

25.3.2013 16:15

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 17:15

Jůů supér

Nahoru Odpovědět

25.3.2013 17:15

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 17:15

link na style tam už je

Nahoru Odpovědět

25.3.2013 17:15

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger:25.3.2013 17:42

Link tam máš HTML soubor není třeba editovat.

Nahoru Odpovědět

25.3.2013 17:42

New kid back on the block with a R.I.P

Kit

Tvůrce

Kit:25.3.2013 17:44

Určitě bych odstranil nebo změnil ten odporný text "Vítejte na mých stránkách!" a také bych změnil jméno autora.

Nahoru Odpovědět

25.3.2013 17:44

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 18:02

Prosimtě neřeš a kóduj

Nahoru Odpovědět

25.3.2013 18:02

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 20:57

Tak fajne, tady je moje Nejdřív jsem opravdu netušil jak to udělat bez obrázků, ale nakonec to vyšlo celkem dobře

http://leteckaposta.cz/256942685
http://prntscr.com/xtjcg

Editováno

Nahoru Odpovědět

25.3.2013 20:57

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:25.3.2013 20:58

Zajímá tě výsledek, nebo jak jsme to udělali a co všechno jsme použili? Vyhraje třeba stránka, která je naprosto jednoduchá, ale pěkně vypadá a co je použito tak je použito v rozumné míře nebo efekty přeplácaná stránka?

Nahoru Odpovědět

25.3.2013 20:58

David Hartinger

Vlastník

David Hartinger:25.3.2013 21:00

Vyhraje klidně i jednoduchá

Nahoru Odpovědět

25.3.2013 21:00

New kid back on the block with a R.I.P

David Hartinger

Vlastník

David Hartinger:25.3.2013 21:01

Týjo, fakt nářez, vůbec není poznat že tam nejsou obrázky, tohle bys mohl prodat

Nahoru Odpovědět

25.3.2013 21:01

New kid back on the block with a R.I.P

Amomym

Člen

Amomym:25.3.2013 21:06

no, mám se ještě co učit, abych dosáhl takových výsledků

Nahoru Odpovědět

25.3.2013 21:06

Petr Nymsa

Tvůrce

Petr Nymsa:25.3.2013 22:03

Super ! Ale k čemu je tam sakra to ý ?

Nahoru Odpovědět

25.3.2013 22:03

Pokrok nezastavíš, neusni a jdi s ním vpřed

Petr Nymsa

Tvůrce

Petr Nymsa:25.3.2013 22:04

Musí se stylovat i ty ID ?

Nahoru Odpovědět

25.3.2013 22:04

Pokrok nezastavíš, neusni a jdi s ním vpřed

Petr Nymsa

Tvůrce

Petr Nymsa:25.3.2013 22:16

Aha, ono to funguje pouze v Chrome

Nahoru Odpovědět

25.3.2013 22:16

Pokrok nezastavíš, neusni a jdi s ním vpřed

Drakeman

Tvůrce

Drakeman:25.3.2013 22:23

hmm tohle vypadá fakt dobře :-)

Nahoru Odpovědět

25.3.2013 22:23

Když se chce, tak jde všechno,

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 22:33

Tak děkuji, nečekal jsem že to sklidí takový úspěch

Nahoru Odpovědět

25.3.2013 22:33

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.3.2013 22:35

Vzpomněl jsem si na Win8 Hands on Lab jak ten lektor říkal že používají speciální font kde je halda ikonek a vzpomněl jsem si na Webdings, ý by tam měla být pavučinka A když to fungovalo v Chromu i IE tak jsem to měl za funkční všude no Asi budu muset nainstalovat i Firefox

Editováno

Nahoru Odpovědět

25.3.2013 22:35

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:25.3.2013 23:21

Sakra ... ono není tak lehké udělat css na dané html

Nahoru Odpovědět

25.3.2013 23:21

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

David Hynek

Tvůrce

David Hynek:26.3.2013 0:33

Má šablona funguje ve FF, Opeře, Chromu... ale IE značky HTML5 odmítá, jak to v tomto prohlížeči spouštíte?

Nahoru Odpovědět

26.3.2013 0:33

Čím víc vím, tím víc věcí nevím.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.3.2013 6:49

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

například umístěním tímto do HTML souboru: V tomto připadě to nikdo nebude řešit v IE, protože nemáme jak to zajistit bez změny HTML

Nahoru Odpovědět

26.3.2013 6:49

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.3.2013 10:47

jak tak koukám, bude to těžký

Nahoru Odpovědět

26.3.2013 10:47

Neaktivní uživatelský účet

David Hynek

Tvůrce

David Hynek:26.3.2013 12:20

prosím o úpravu zadaného kódu, nejsme přeci čuňata, abychom do webové stránky dávali 2x H1!!! Díky

Nahoru Odpovědět

26.3.2013 12:20

Čím víc vím, tím víc věcí nevím.

David Hartinger

Vlastník

David Hartinger:26.3.2013 12:34

Pokud je v headeru, je to v pořádku, HTML 5 s tím počítá nebo jsem si to alespoň doteď myslel.

Nahoru Odpovědět

26.3.2013 12:34

New kid back on the block with a R.I.P

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.3.2013 12:57

Nikdo tu není čuně, jenom byste si měl asi něco malinko dostudovat ...

například zde:
http://stackoverflow.com/…-h1-in-html5

Editováno

Nahoru Odpovědět

26.3.2013 12:57

Neaktivní uživatelský účet

David Hynek

Tvůrce

David Hynek:26.3.2013 14:23

H1 jakožto hlavní název, by měl být jednou, proto je to hlavní název. Ale samozřejmě používejte co uznáte za vhodné. To že HTML5 kašle na pravidla je bohužel smutné...

Nahoru Odpovědět

26.3.2013 14:23

Čím víc vím, tím víc věcí nevím.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:26.3.2013 15:03

Mě nemusíte vysvětlovat, co to je H1 a jak se používá. Ano, před HTML 5 se směl používat pouze jednou. HTML 5 přineslo mnoho změn, jednou z nich je rozčlenění stránky na části, kde každá z nich může mít svůj hlavní název. Nekašle na pravidla, zavadí se nová.

Nahoru Odpovědět

26.3.2013 15:03

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger:26.3.2013 15:13

HTML 5 specifikace chápe stránku jako více dokumentů, každý může mít hlavičku a patičku. Není na tom nic smutného, naopak je logické, že hlavičku má stránka samotná a potom článek v ní vložený. Nelogické je dávat článku nadpis h2 a stránce h1. Pro oba dokumenty je to první nadpis, proto to změnili.

Editováno

Nahoru Odpovědět

26.3.2013 15:13

New kid back on the block with a R.I.P

David Hartinger

Vlastník

David Hartinger:26.3.2013 15:21

Problém je v tom, že zaměňuješ titulek stránky a nadpis, jsou to 2 jiné věci

Nahoru Odpovědět

26.3.2013 15:21

New kid back on the block with a R.I.P

adam440

Tvůrce

adam440:26.3.2013 17:32

Tady je můj výtvor :
http://leteckaposta.cz/427106347

Nahoru Odpovědět

26.3.2013 17:32

David Hynek

Tvůrce

David Hynek:26.3.2013 21:09

Hezký večer přeji.

Kromě IE to funguje ve všech prohlížečích.
Odkaz na soubor: http://davidhynek.cz/files/style.css

Mějte se...

Nahoru Odpovědět

26.3.2013 21:09

Čím víc vím, tím víc věcí nevím.

David Hynek

Tvůrce

David Hynek:26.3.2013 21:20

Omylem se mi sem nahrála verze, která nebyla ještě finální.
Takže na předchozí zapomeňte.

styl: http://davidhynek.cz/files/style.css

Nahoru Odpovědět

26.3.2013 21:20

Čím víc vím, tím víc věcí nevím.

Honza Bittner

Tvůrce

Honza Bittner:26.3.2013 22:30

David Hartinger ... kdo bude hodnotit ?

Nahoru Odpovědět

26.3.2013 22:30

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:26.3.2013 22:36

A ještě kam můžeme případně dávat výtvor(css soubor) když nechceme sem ?
.. nechci uveřejňovat před koncem ..

Nahoru Odpovědět

26.3.2013 22:36

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

David Hartinger

Vlastník

David Hartinger:27.3.2013 6:48

Můžeš to sem hodit až v sobotu nebo mě link do PM. Kdo bude hodnotit ještě nevím, předpokládám, že se s někým dohodnu v pátek na srazu

Nahoru Odpovědět

27.3.2013 6:48

New kid back on the block with a R.I.P

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:27.3.2013 14:40

Tak já jsem hotový. http://uloz.to/…sazfinal-zip

Opět si nemyslím, že bych mohl vyhrát, ale přesto to zkouším.

Nahoru Odpovědět

27.3.2013 14:40

David Hartinger

Vlastník

David Hartinger:27.3.2013 14:53

Ta kulatá tlačítka vypadají dobře

Nahoru Odpovědět

27.3.2013 14:53

New kid back on the block with a R.I.P

michalsip

Člen

michalsip:27.3.2013 16:35

Přidávám se k soutěži:
odkaz na hotový web: http://m.dunamenti.cz
a tady je css

Nahoru Odpovědět

27.3.2013 16:35

Učíme se každý den, proto nasávejme vědomosti jak to jen jde a proměňujme je ve znalosti.

michalsip

Člen

michalsip:27.3.2013 16:37

sorry http://ulozto.cz/…w1/style-css

Nahoru Odpovědět

27.3.2013 16:37

Učíme se každý den, proto nasávejme vědomosti jak to jen jde a proměňujme je ve znalosti.

Neaktivní uživatel

Člen

Neaktivní uživatel:27.3.2013 21:05

Chci se jen zeptat, můžu odstranit jednu patičku(footer) ze souboru? Docela mi tam překáží. Díky za odpověď.

Nahoru Odpovědět

27.3.2013 21:05

Neaktivní uživatelský účet

Honza Bittner

Tvůrce

Honza Bittner:27.3.2013 21:09

nemůžeš ... teoreticky sdraco a porota veme jen css soubor a ten přidají k html .. takže ne

Nahoru Odpovědět

27.3.2013 21:09

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:27.3.2013 21:13

ale kdyžtak ti poradím ... display: none;
..

Nahoru Odpovědět

27.3.2013 21:13

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:27.3.2013 21:48

Každý web by nějakou patičku mít měl, myslím si že když je v kódu tak se nepředpokládá že bys ji měl skrýt (Honza Bittner)

Nahoru Odpovědět

27.3.2013 21:48

Neaktivní uživatelský účet

David Hynek

Tvůrce

David Hynek:27.3.2013 21:55

HoBi měl asi na mysli footer který je pod article, obsahuje jen mezeru. A jestli jej nepotřebuje vypnutí se přímo nabízí...

Nahoru Odpovědět

27.3.2013 21:55

Čím víc vím, tím víc věcí nevím.

michalsip

Člen

michalsip:27.3.2013 21:57

chci se zeptat? stačí tedy odkaz na doménu kam jsem ten web nahrál, nebo jak vlastně bude probíhat hodnocení? Jde mi o to, že jsem poslal odkaz na style.css a odkaz na doménu. Mám tam, ale přiřazené dva soubory s písmem. Mám tedy nahodit kompletní zazipovanou složku?

Nahoru Odpovědět

27.3.2013 21:57

Učíme se každý den, proto nasávejme vědomosti jak to jen jde a proměňujme je ve znalosti.

Honza Bittner

Tvůrce

Honza Bittner:27.3.2013 21:58

ano, to jsem myslel ..

samozřejmě části s textem by měly zůstat ..

Nahoru Odpovědět

27.3.2013 21:58

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:27.3.2013 21:59

myslím že bys žádné externí písmo používat neměl.. zadání bylo upravovat pouze CSS ne ?

Nahoru Odpovědět

27.3.2013 21:59

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:27.3.2013 22:02

externí písmo nepoužívej, přeci jistota je jistota. Vyber si jakékoliv jiné, které jede v nejnovějším chrome.

Nahoru Odpovědět

27.3.2013 22:02

michalsip

Člen

michalsip:27.3.2013 22:03

upravovat css ano. Pokud je mi známo tak @font-face je vlastnost css3 a o písmu není nikde řeč. Fonty nejsou přeci obrázky. Proč by tedy nebylo možné změnit font. Já použil odkaz na font v kořenové složce a podle mě je to stejná úprava jako bych použil odkaz na font třeba u Googlu?

Nahoru Odpovědět

27.3.2013 22:03

Učíme se každý den, proto nasávejme vědomosti jak to jen jde a proměňujme je ve znalosti.

Nejčastěji vyhledáváné

Diskuze: Machr na webdesign - CSS 3 bez obrázků