45 Výkonný CSS / JavaScript-techniky

šířka = "650">
width = "650">
Smashing-časopis-reklama v 45 Výkonný CSS / JavaScript-techniky /> ve 45 Výkonný CSS / JavaScript-techniky ve 45 Výkonný CSS / JavaScript-techniky ve 45 Výkonný CSS / JavaScript-techniky

Spacer ve 45 Výkonný CSS / JavaScript-techniky

CSS a JavaScript jsou mimořádně výkonné nástroje pro designéry a vývojáře. Nicméně, někdy je to obtížné přijít s jeden skvělý nápad, který by vyřešil problém, který se díváte právě teď. Dobrá zpráva: téměř každý den návrháři a vývojáři přijít s čerstvým a chytrý CSS triky a techniky a jejich sdílení s ostatními vývojáři online. Pravidelně shromažďovat všechny tyto triky, filtrovat, řadit, přezkoumá je a připravit je pro Smashing Magazine čtenářů.

V této post prezentujeme 45 užitečných CSS / JavaScript-techniky, které vám mohou pomoci najít chytrá řešení některých vašich problémů nebo jen nechat inspirovat tím, co je možné s CSS. Pokrýváme zajímavé CSS-technik, navigační menu, CSS typografie, CSS seznamy a CSS tlačítka. Těžištěm této post leží v CSS, prosím, zjistíte, že některé techniky používají JavaScript nebo PHP pro rozšířené funkce.

Uvědomte si prosím, že toto je první část naší velké kolo-Up čerstvého CSS / JavaScript-technik. Jiné techniky (CSS tabulky, CSS rozvržení CSS pro mobilní zařízení a CSS formuláře) budou obsaženy v připravované článku. Takže nezapomeňte přihlásit do našeho RSS feed- a Následujte nás na štěbetat pro podobné výrobky a jejich proud užitečných zdrojů. Napište nám také vědět, co bychom měli změnit nebo zlepšit v našich budoucích pracovních míst!

Jsme si vědomi toho, že mnozí čtenáři jsou unaveni z "seznamů" plovoucí kolem webu, ale jsme si jisti, že drtivá většina našich návštěvníků budou mít prospěch z této post formátu a najde alespoň některé z technik vystupoval v tento post užitečné.

Zajímavé CSS techniky

Budování nového vizuálního Poznámky /> Jedná Poznámka překryvy se skládá ze dvou hlavních elementů, překrytí s leskem a hranici s transparentností. Velmi zajímavé, ale jednoduché techniky, které ZURB Design agentury, designéři, kteří vypracovali sérii článků o Smashing Magazine stejně.

Anotace ve 45 Výkonný CSS / JavaScript-techniky

Sexy hudební album Overlays /> Tento aticle ukazuje, jak se styl vaší hudební proudy, a nabízí některé grafiky, aby tak učinily.

CSS-112 v 45 Výkonný CSS / JavaScript-techniky

Barevné hodiny s CSS & jQuery /> Tento tutoriál popisuje, jak lze vytvořit hodiny s využitím základních CSS a JavaScript.

CSS-086 v 45 Výkonný CSS / JavaScript-techniky

Jak vytvořit hloubku a Nice 3D Stuhy pouze pomocí CSS3 /> Budeme používat box-shadow vytvořit drop-shadow s RGBA, barevný model, který umožňuje optimalizovat kontrast s jakýmkoli druhem pozadí. RGBA je standardní RGB model (0,0,0 - 255255255), a dodává, poslední možnost (a) na krytí. Můžeme použít tento model i pro další vlastnosti a funguje to s novým prohlížečem.

CSS-197 v 45 Výkonný CSS / JavaScript-techniky

Rozšířené Event Časová osa s PHP, CSS & jQuery /> Tento moderní Event Časová osa se používá pomocí PHP, MySQL, CSS a jQuery. Výsledek: příjemný čas souladu s klikací akce. Přidání nových je bude stejně snadné jako vložení řádku do databáze.

CSS-195 v 45 Výkonný CSS / JavaScript-techniky

CSS navigačních menu

CSS 3D Meninas /> "Já jsem vzal klasický lak Služky cti (Las Meninas) a vytvořili CSS pseudo-3D / Parallax efekt. Je to čistá CSS, JavaScript, nebo žádný Flash se jedná. To bylo testováno a pracuje na Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 a Konqueror 3,5, a to ověřuje, taky.

CSS-006 v 45 Výkonný CSS / JavaScript-techniky

Sproing! - Zkontrolujte, elastické Thumbnail Menu /> "V pokračující snaze nabídnout alternativní metody k smrk do menu, jsem se dal dohromady elastické náhled menu. To zvětšuje položky menu, pokud jsou vznášel nad a položky v menu rozšiřovat směrem nahoru.

CSS-063 v 45 Výkonný CSS / JavaScript-techniky

Jak vytvořit jednoduchý a účinný Pod NAV s rozlišením seznamy /> "Když potřebujeme jednoduchý a účinný on-page navigace, buď přeskočit na obsah stránky, nebo flip do jiného zobrazení, používáme dl element. Jeho dílčí prvky, dt a dd, aby bylo velmi snadné pro nás vytvořit inline propojení s jasným label. Zde budeme s vámi podělit o rychlý, lehký způsob, jak budeme používat CSS udělat. "

CSS-072 v 45 Výkonný CSS / JavaScript-techniky

Lepkavý SideNav dispozice s CSS /> Naučte se, jak vytvořit pevnou sidenav layout pro váš blog nebo webové stránky. S pevným sidenav přijde vhod, když se zabývají blog stylu webové stránky, kde obsah je extrémně vysoký a je potřeba pro dobré výši rolování. Pevná navigace umožňuje uživateli plavba obsahu bez rolování zpět až na začátek procházet zbytek webu.

CSS-056 v 45 Výkonný CSS / JavaScript-techniky

Decentní rozbalovací Page Burza /> Používání <select> rozbalovací menu k vytvoření navigace není tak běžné jako to kdysi bylo, ale je to stále kolem. Je tu báječný o docela dobré, že jsou nepřístupné / dotěrný. Opravdu hodně skriptů najdete tam pro tvorbu menu jako je tato, jsou tímto způsobem. Pech. Ať ten, který pracuje s nebo bez JavaScriptu.

CSS-015 v 45 Výkonný CSS / JavaScript-techniky

CSS Navigace: Ne JavaScript, jQuery nebo obrazu Povinné zdarma, CSS Navigace / Paginace s Tooltip /> CSS-založené navigace / stránkování bar bez JavaScriptu. Tam je tooltip na hover pro 'předchozí' a 'další' stránky kuliček, které je navigace snadnější.

CSS-170 v 45 Výkonný CSS / JavaScript-techniky

Jak zákoníku Překrývající záložkách hlavního menu /> Hlavní navigační menu je součástí webových stránek, která dělá z celé stránky vypadají živé a úplné. Ale nejvíce obyčejný druh stylu navigačním menu stále používá hodně, je s kartami navigační menu. Zde je návod, jak kód překrývající se záložkami menu.

CSS-187 v 45 Výkonný CSS / JavaScript-techniky

Řešení pro velmi dlouho rozbalovací nabídky /> "Já bych být jisti, s post tituly, ale ve skutečnosti je v tomto případě možné řešení pro velmi dlouhé rozbalovacích. Problém s dlouhými rozbalovacích je, že rozbalovací sám může jít pod "složit" na internetových stránkách. To znamená, že pod viditelnou oblast okna prohlížeče. Tak, aby přístup k těmto položkám menu dole, musíte posouvat okna prohlížeče. Pro ty z nás, s navigační kola nějaké na našem myší (myší?), Není to velký problém. Pro ty, aniž by se ty menší položky menu jsou zcela nepřístupné, protože se používat prohlížeč posuvník znamená Mousing z menu (a pravděpodobně mít to blízko). "

CSS-052 v 45 Výkonný CSS / JavaScript-techniky

Mega rozbalovacím menu w / CSS & jQuery /> Při správně používány, mohou mega drop down menu je poměrně účinná na velkých internetových stránkách. Pojďme se experimentovat s různými způsoby provádění této techniky. Tutorial od Soh Tanaka, Smashing Magazine pravidelné autora.

CSS-053 v 45 Výkonný CSS / JavaScript-techniky

CSS Typografie a tělo kopírování

Jak vytvořit Cool Anaglyphic Text Effect s CSS /> Anaglyfy jsou úžasné 3D obrázky, které jsou vytvořeny započtením dvě červené, zelené a modré kanály a jsou považovány s těmi nerdy vypadající 3D brýle s různými barevnými čočkami. Nevím, jestli tento efekt funguje pro reálné, jak jsem se bohužel ztracená moje 3D brejle, ale je to docela cool text účinek přesto! Pojďme se podívat, jak může podobný styl má být vytvořen pro sprucing svůj web design, přičemž bere v úvahu sémantiku a vyhnout se opakování jakéhokoli značek.

CSS-193 v 45 Výkonný CSS / JavaScript-techniky

Typografické práce autem /> Enter to, trochu HTML / CSS typografické práce autem. Pomocí některé super-sémantické HTML a trochou CSS, můžete řemeslo krásné hledět ještě neuvěřitelně jednoduché práce, plánovač pro vás a vaše zaměstnance.

CSS-199 v 45 Výkonný CSS / JavaScript-techniky

Probírka Text v Webkit (Safari) /> Safari má ne-tak-krásná způsob, jak spojit do textu pomocí sub-pixel rendering. Na předchozí verze Safari, byla tato pevná s text-stín prohlášení, ale vzhledem k tomu, že Snow Leopard způsob už nefunguje. Naštěstí existuje alternativa.

CSS-196 v 45 Výkonný CSS / JavaScript-techniky

Pseudo Drop Caps /> Už je asi na chvíli teď, objevit se v časopisech, tisku a nyní web. Návrháři a vývojáři podobně experimentovali s více zástupná řešení v použití inline stylů pomocí image náhradní, ale s oběma z těchto řešení existují problémy. Například to, co se stane, když znovu vaše stránky a rozhodnout, že již nechcete vkládat obrázky drop čepici, ty jsi teď bude vlevo se zlomené image na začátku každé místo, které jste dříve vytvořili, je to samozřejmě za předpokladu, že jste nepoužili text-odrážky. Pokud jste se rozhodli jít dolů na inline styl trasu pak se vaše jsou jen špatné, jen velmi špatný.

CSS-081 v 45 Výkonný CSS / JavaScript-techniky

Jak vytvářet perfektní před Tagy /> Pokud provozujete internetové stránky, že funkce spousta příkladů kódu, víte, jak je důležité strávit nějaký kvalitní čas styling &tl; pre> element. Když opustil unstyled, divoké <pre> tagy budou mandl váš předformátován obsah a zničit vaše stránky layout. Různých prohlížečích léčbě <pre> značku zcela odlišně, se měnit velmi v jejich výchozí manipulaci s font-velikosti, posuvník-rendering, a slovo-balení. Ve skutečnosti, jak se vaše předformátované kód vypadat konzistentní, použitelný, stylový a napříč prohlížeči není nijak snadný úkol, ale určitě lze učinit. Tento článek vysvětluje vše, co potřebujete k vytvoření správné <pre> tagy.

CSS-090 v 45 Výkonný CSS / JavaScript-techniky

Zlepšit vaše webové typografie s výchozí hodnotou posunu /> Výchozí je neviditelná linka, na kterou všechny typy postav sedí, i když samozřejmě některé znaky (včetně 'j', 'p', 'g' a 'y') mají slaňovací, která visí pod základní. Baseline posun znamená pohybující se postavy nahoru nebo dolů v souvislosti s výchozí a používat to skutečně může mít obrovský vliv na profesionální vzhled vašeho typu. Přestože základní posun je tradičně součástí s použitím nástrojů, jako je InDesign nebo Quark, existují způsoby, jak dosáhnout stejných výsledků pomocí CSS.

CSS-109 v 45 Výkonný CSS / JavaScript-techniky

Typograph - Scale & Rhythm /> Tato stránka je i esej, a nástroj. To si klade za cíl prozkoumat, jak dva, propojených konceptů, často hravé, ale někdy i drzá, může být povzbuzovány k tanci na webových stránkách. Přetáhněte barevné krabice podél stupnice hodit tato slova znovu. Pro nejvíce se rozdělit, tento text je jen libreto pro výkon se chystáte hrát na něm.

CSS-085 v 45 Výkonný CSS / JavaScript-techniky

Fancy Quotes s jQuery, AJAX a CSS /> Naučte se, jak vytvořit efektní citát systém hodnocení, který bude zobrazovat počet slavných uvozovek a umožní návštěvníkům hodnotit své favority.

CSS-156 v 45 Výkonný CSS / JavaScript-techniky

Jak vytvořit jednoduchý, stylový a vyměnitelná obrázek Hlavička /> Většina řešení image titulek vyžadují hodně nadměrného HTML, ztěžují redesign nebo nekomunikují jasně, že patří do obrazu. Podívejme se, co můžeme udělat pro řešení těchto problémů.

CSS-189 v 45 Výkonný CSS / JavaScript-techniky

Styling foto titulky s CSS /> Jistě, některé fotky jsou samo-vysvětlující, ale většina fotografií jsou nejlépe s textových popisků. Je pravda, že pro tradiční média jako noviny a časopisy, a stejně tak platí i pro blogu a webových článků. Zde je rychlý tip na využití fotografie titulky a design je pěkně s kouzlem CSS.

CSS-183 v 45 Výkonný CSS / JavaScript-techniky

Obrázek titulky na webových stránkách /> Tento dokument navrhuje tři způsoby podání obrazu s popiskem v HTML. Styling v CSS je také předmětem diskuse.

CSS-176 v 45 Výkonný CSS / JavaScript-techniky

Styling příspěvek Rubriky To vystrčit /> "Nedávno jsem si všiml trend v blogu čísel, kde vyčnívá z jeho základny layout. Chtěl bych sdílet techniku pro ty, kteří by chtěli vyjádřit svůj post čísel nový styl. Jeden tip mít na paměti při navrhování tohoto je, aby se ujistil, že se vejde k vaší cílové skupině rozlišení obrazovky velikost. Všimněte si, že tato technika může lišit v závislosti na vaší design. Mým cílem je, abyste pochopili hlavní koncepce v tomto tutoriálu, takže můžete experimentovat a použít pro své vlastní projekty. "

Použití elipsa s HTML a CSS /> Pokud je text příliš široký, aby se vešly do kontejneru, pěkné řešení je možné, že elipsa ukázat existuje více dostupných informací. I když v současné době součástí oficiálního specifikací HTML, je možné, že elipsa definována v CSS a funguje to pro Internet Explorer, Safari, Chrome a Opera. To není práce pro Firefox, ale existuje řešení, které může být provedeno s jQuery.

5 Zpráva boxy styl vašeho upozornění s CSS /> Tento článek přináší bez oznámení boxy k použití / přizpůsobit, stejně jako velmi jednoduchá technika vytvořit svůj vlastní ty inspirované z tohoto Roundup.

CSS seznamy

Vytvořte Microsoft Word-Style osnovy s CSS /> Jak vidíte, prohlížeč neobtěžuje měnit odsazení stylu hodně, nebo změnit typ výpisu z římských číslic na písmena a tak dále ... všechny věci, které jsme tak zvyklí, protože Microsoft Word a další psaní programů se jim ve výchozím nastavení. Takže pojďme se použít trochu vynalézavosti CSS, aby se Microsoft Word-stylizovaný obrys pomocí uspořádané seznamy!

CSS-188 v 45 Výkonný CSS / JavaScript-techniky

Pure CSS Časová osa /> "Chtěl jsem vytvořit harmonogram CSS pro" O "sekci svých webových stránek při použití nějaké čisté a jednoduché formátování. Chtěl jsem, aby se zabránilo použití obrázků co nejvíce, a tak jsem strávil několik minut prototypování některé možnosti a přišel s řešením pomocí neuspořádané seznamy. Výsledkem je jednoduchý a čistý hledáte časovou osu s některými velmi přímočará značky. V tomto článku budu sdílet můj přístup k vytváření časové osy z CSS a HTML, což vede pěkně vypadající, jednoduché časové ose. "

CSS-106 v 45 Výkonný CSS / JavaScript-techniky

Automatické číslování s CSS čítače /> Při psaní dokumentů, to je často užitečné počet sekcí a má obsah. Můžete počet těchto ručně, přímo ve značkování, ale to může být časově náročné, pokud pořadí změn a budete muset upravit všechna čísla. CSS2.1 nám automatizovaný způsob generování čísel pomocí CSS pulty, a tento článek vás provede, jak je používat. Jedno slovo na vědomí, než začneme, je, že CSS čítače ještě nejsou prováděny v IE, i když jsou o plánu pro IE8.

CSS-116 v 45 Výkonný CSS / JavaScript-techniky

CSS triky pro vlastní střely

CSS-129 v 45 Výkonný CSS / JavaScript-techniky

Elastické Kalendář Styling s CSS /> Jedná se o tradiční kalendář je mřížku číslované kolonky na stránce. Jako web designer, můžete jít přímo na stůl, a já bych se chyba vám za to. Tabulky, i když mohou být někdy těžké svalové do tvaru. Puristické CSS ve mně dostane naštvaný, když jsem nastavit šířku tabulky (či buňky) a rozhodne se, že ví lépe, a roste, nebo smršťuje, jak uzná za vhodné. /> Můžete řešit kalendář styling s čistým CSS, a cítím to dělá stejně smysl sémanticky jako tabulku dělá. Co je kalendář, ne-li uložit seznam dní? Pomocí CSS, můžeme udělat i nějaké cool věci, jako si všechny naše velikosti s EMS, takže náš kalendář layout bude pružná. To znamená, že růst v obou šířku a výšku, když je text změně velikosti v prohlížečích, zatímco výrazně zvýšit dostupnost.

CSS-030 v 45 Výkonný CSS / JavaScript-techniky

Styl seznam s jeden pixel /> One-pixel obrázku na pozadí může být do jisté míry univerzální věc. S opakovat-x to může být vodorovná čára, opakují-y je svislá čára, a opakovat činí barvu výplně. Stejně jako trochu legrace důkaz konceptu, můžeme využít k vytvoření hloubky-chart hledáte neuspořádaný seznam.

CSS-017 v 45 Výkonný CSS / JavaScript-techniky

Styl objednané Seznam /> Ve výchozím nastavení je většina prohlížečů zobrazí seřazeném seznamu čísel stejný styl písma jako text. Zde je rychlý CSS tutorial o tom, jak můžete využít objednané seznam (ol) a odstavce (p), prvek designu stylový číslovaný seznam.

CSS-029 v 45 Výkonný CSS / JavaScript-techniky

Simulovat tabulky pomocí Nečíslovaný seznam /> Vaše první otázka okamžitě by mohla být, "proč bych měl chtít simulovat tabulku se seznamem, proč ne jen používat tabulky?" S zvýšení popularity AJAX semen seznamu prvků, pomocí položek seznamu zastupovat více sloupců údajů tabulka může umožnit snadné třídění různých více "tabley" informace. Takže můžeme začít.

CSS-031 v 45 Výkonný CSS / JavaScript-techniky

8 různých způsobů, jak krásně styl vašeho HTML seznamy s CSS /> "Použití seznamů HTML (<ol> pro objednané seznam, <ul> pro neuspořádaný seznam) je velmi časté v těchto dnech. Dnes budeme dívat trochu dále, než vytváření pravidelných seznamů, které ukazuje 8 různých způsobů, jak krásně styl vašeho HTML seznamy s CSS. Budeme používat některé čisté CSS technik, aby se nudil seznamu pohled děsivý (a dokonce i některé další funkce). "

CSS-042 v 45 Výkonný CSS / JavaScript-techniky

Rychlý Tip - Zjednodušit List rozpětí CSS /> Už jste někdy nastavit výchozí okraje pro layout, a pak se musel vrátit zpět a ručně nastavit všechny vaše seznamy? Ve výchozím nastavení, markery položku seznamu mít negativní polohy ve vztahu k seznamu položku sám. To znamená, že nula-ing v rozpětí automaticky vede k přetečení v případě, že seznam je uveden v něco jiného. Nebylo by jednodušší, aby položky seznamu marker ve stejný časový bod, jako ostatní prvky místo? Štěstí pro nás, je tu styl pomoci udělat právě to. Podívejme se, co lze udělat s list-style-position majetku.

CSS-068 v 45 Výkonný CSS / JavaScript-techniky

Sexy HTML List triky /> Aj všudypřítomné seznam prvků, <ul> a <ol>. Tyto dva prvky sexy pomoci milionům webových stránek zobrazit seznamy informací v čistých, sémantické módy. Bez nich bychom se plazit kolem jako špinavé jeskynní lidé, jíst špíny a vytí na měsíc. Ale tyto seznam prvků jsou nejen sexy, ale jsou také velmi flexibilní, což nám pokorný návrhářům vytvářet robustní seznamu konfigurace, které jsou sémanticky univerzální a vysoce přizpůsobitelné.

CSS-091 v 45 Výkonný CSS / JavaScript-techniky

Klikací <li> /> Původně jsem kódované značky, aby se stolu, ale objevil problém, když jsem se snažil, aby celý řádek kliknout. Skončil jsem s seznam článků místo.

CSS-061 v 45 Výkonný CSS / JavaScript-techniky

CSS tlačítka

Stačí-Tlačítka v2 /> Tato technika představuje tlačítka na velikost, která vždy vejde obsah. K dispozici jsou 3 stavy: aktivní, aktivní a vznášejí. Tato technika pracuje ve všech hlavních prohlížečích a nevyžaduje JavaScript.

CSS-099 v 45 Výkonný CSS / JavaScript-techniky

Jak udělat sexy tlačítka s CSS /> Tento návod vás naučí, jak vytvářet hezké hledáte textových tlačítek (se střídavými stisknutém stavu) za použití CSS. Dynamické tlačítka ušetří hromady čas jinak strávený vytváření grafiky a budou v podstatě vás šťastnější osoba, na konci dne.

CSS-173 v 45 Výkonný CSS / JavaScript-techniky

Tekuté & Barva Nastavitelný CSS tlačítka /> Při práci na velkém místě s více tlačítek, může to být docela únavné, aby se všechna tlačítka ve Photoshopu. Vytváření budoucí úpravy na mnohomluvnost a barvy mohou být také časově náročné. Tím, že má dynamický tlačítek, tento scénář je mnohem jednodušší k manipulaci, a tím, že kapalná a barvy nastavitelná tlačítka s CSS, jsme schopni změnit mnohomluvnost a barev v programu Flash.

CSS-175 v 45 Výkonný CSS / JavaScript-techniky

Vytvořit tlačítko s Vznášet se a Active státy využívající CSS Skřítci /> Příliš mnoho designérů zanedbávání klikněte stav ( active -majetku v CSS) ve web design, buď proto, že si neuvědomuje to, podceňují význam, nebo jsou líní prostý. Je to jednoduchý efekt, který zlepšuje použitelnost tím, že uživatel nějakou zpětnou vazbu na to, co jste klikli na, ale může také přidat hloubku design.

CSS-159 v 45 Výkonný CSS / JavaScript-techniky

Znovuvytvoření tlačítko /> "Myslel jsem si, že by bylo zajímavé, aby část pozadí, na knoflíky tady, a diskutují o některých iterací jsme prošli tak daleko, aby si na současný stav."

CSS-134 v 45 Výkonný CSS / JavaScript-techniky

Zaoblený tvar tlačítek

CSS-101 v 45 Výkonný CSS / JavaScript-techniky

Google Imageless tlačítka /> Zajímavá diskuze o různých technikách tlačítka design rekonstruovat Google imageless tlačítka.

Zůstaňte s námi!

Toto je první část naší velké kolo-Up čerstvého CSS / JavaScript-technik. Nezapomeňte se přihlásit do našeho RSS feed- a Následujte nás na štěbetat pro podobné výrobky a jejich proud užitečných zdrojů. Napište nám také vědět, co bychom měli změnit nebo zlepšit v našich budoucích pracovních míst!

/> Chcete vidět více podobných kolo-up na Smashing Magazine v budoucnu? ( odpovědi ) />

/>

© Smashing Redakční pro Smashing Magazine , 2010. | Permalink | 52 komentáře | Přidat do del.icio.us | Digg to | klopýtnou o StumbleUpon! | Pípání to! | Přidat do Reddit | fórum Smashing Magazine
Příspěvek Štítky: , ,

45 Výkonný CSS / JavaScript-techniky

Štítky:

0 Komentáře

Můžete být první, kdo napsat komentář.

Zanechat komentář





XHTML: Můžete použít tyto značky:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>