HTML5 + W d Pr e s s         or Gl oba l I nf or ma t i on I nt e r ns hi p Pr ogr a m                   f r om BUDNETwww....
W i s t hi s Guy Anywa y?     ho• 12+ ye a r s HTM CSS/ J a va Sc r i pt .                       L/  M j ob s i nc e 1999....
I nt r oduc t i on t o HTML5HTM  L5 i s a l ot of t hi ngs -– Ongoi ng. Thi s i s a movi ng t a r ge t .  The s pe c c a n...
W t Ar e W Goi ng To Ta l k ha       e          AboutM r ki ng up a s t a nda r d W dPr e s s bl og  a                    ...
M e t t he Ne w Se ma nt i c  e          El e me nt s<section>The s e c t i     on e l e me nt r e pr e s e nt s a ge ne r...
M e t t he Ne w Se ma nt i c  e          El e me nt s<nav>The na v e l e me nt r e pr e s e nt s a s e c t i on of apa ge ...
M e t t he Ne w Se ma nt i c  e          El e me nt s<article>The a r t i c l e e l e me nt r e pr e s e nt s a c ompone n...
M e t t he Ne w Se ma nt i c  e          El e me nt s<aside>The a s i de e l e me nt r e pr e s e nt s a s e c t i on ofa ...
M e t t he Ne w Se ma nt i c  e          El e me nt s<hgroup>The hgr oup e l e me nt r e pr e s e nt s t he he a di ngof a...
M e t t he Ne w Se ma nt i c  e          El e me nt s<header>The he a de r e l e me nt r e pr e s e nt s a gr oup ofi nt r...
M e t t he Ne w Se ma nt i c  e          El e me nt s<footer>The f oot e r e l e me nt r e pr e s e nt s a f oot e r f ori...
M e t t he Ne w Se ma nt i c  e          El e me nt s<time>The t i me e l e me nt r e pr e s e nt s e i t he r a t i meon ...
M e t t he Ne w Se ma nt i c     e             El e me nt s<form> <input> attributesPl a c e hol de r Te xt / Se a r c h B...
I s n’ t Al l Tha t Ne w St uf f  J us t About Pe r f e c t f or     M r ki ng up a Bl og?       a He c k ye s .
Le t ’ s Look a t Some Code
he a de r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><!DOCTYPE html><!--simplified!--><html <?ph...
he a de r . php<style media="screen"><?php// Checks to see whether it needs a sidebar or notif ( empty($withcomments) && !...
he a de r . php<!DOCTYPE html><html <?php language_attributes(); ?> class=“no-js”><head profile="http://gmpg.org/xfn/11"><...
Vi e w Sour c e<html lang="en-US" dir="ltr" class="js canvas canvastext   geolocation rgba hsla no-multiplebgs borderimage...
i nde x. php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */get_header(); ?>      <div id="content" class="n...
Vi e w Sour c es<article id="post-3" class="post-3 post hentry category-uncategorized">      <h1><a title="Permanent Link ...
s i de ba r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><aside id="sidebar" >    <ul>         <?p...
s e a r c hf or m. php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><form method="get" id="searchform" a...
c omme nt s . php<?php// snip!?><?php if ( comments_open() ) : ?><div id="comment-form">      <h2><?php comment_form_title...
f oot e r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><hr /><footer id="footer" ><!-- If youd lik...
W t ’ s t he Di f f ?              hafooter.php
a r c hi ve s . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 *//*Template Name: Archives*/?><?php get_he...
s t yl e . c s s/*SNIP!*//* Begin Structure */body {                margin: 0 0 20px 0;                padding: 0;        ...
W t ’ s t he Di f f ?             hastyle.css
s t yl e . c s s.borderradius.boxshadow.rgba #container #main article,.borderradius.boxshadow.rgba #container #main #posts...
PSST! CSS3
Thi ngs I Le a r ne dThe new outline algorithm is a fickle masterOtherwise- not so bad.Kubrick worked with almost no brows...
Any Que s t i ons ?
M e I nf o              orht t p: / / www. budne t de s i gn. c om
Upcoming SlideShare
Loading in …5
×

Catchy web pages via Wordpress

3,604 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,604
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Note I didn’t use a &lt;section&gt; for the div id=content. It’s really just a generic container. If that was a section- the outline (which I’ll show you) would show “untitled section” because it’s not coupled with a header. The time element has a machine readable datetime attribute.
  • Note I didn’t use a &lt;section&gt; for the div id=content. It’s really just a generic container. If that was a section- the outline (which I’ll show you) would show “untitled section” because it’s not coupled with a header. The time element has a machine readable datetime attribute.
  • Catchy web pages via Wordpress

    1. 1. HTML5 + W d Pr e s s or Gl oba l I nf or ma t i on I nt e r ns hi p Pr ogr a m f r om BUDNETwww. budne t de s i gn. c om
    2. 2. W i s t hi s Guy Anywa y? ho• 12+ ye a r s HTM CSS/ J a va Sc r i pt . L/ M j ob s i nc e 1999. y• W dPr e s s s i nc e 2005. La unc he d or a t on of s i t e s . Cur r e nt l y ma na ge 6.• For t he ne xt 5 da ys : Pr i nc i pa l Pr e s e nt a t i on Engi ne e r a t Cr a me r• Ne xt W e k: M e c ul a r e ol• PAST: Advi s or Te c h, Compe t e , De ma ndwa r e , The W e kl y Di g, e Gi l l e t t e , M e um of Sc i e nc e , Bos t on, PC Conne c t i on, St a t e us St r e e t , W be x e
    3. 3. I nt r oduc t i on t o HTML5HTM L5 i s a l ot of t hi ngs -– Ongoi ng. Thi s i s a movi ng t a r ge t . The s pe c c a n c ha nge unde r ne a t h you. Thi s c a n be f un, I s we a r . I t a l s o me a ns t he r e ’ s not a l wa ys a n answ . er Tha t , t oo, c a n be f un.– Oc c a s i ona l l y c ont r ove r s i a l .– Ful l of c ool s t uf f t ha t ’ s got bot h br ows e r a nd we b de ve l ope r s e xc i t e d– Some t hi ng t o pa y a t t e nt i on t o/ e xpe r i me nt wi t h/ di s c us s a nd gi ve f e e dba c k on ( whi c h i s why we ’ r e he r e t oda y)
    4. 4. W t Ar e W Goi ng To Ta l k ha e AboutM r ki ng up a s t a nda r d W dPr e s s bl og a orus i ng s ome of t he ne w, s e ma nt i ce l e me nt s / a t t r i but e s . Thi s i s a s ubs e t oft he s pe c t ha t ’ s r e l a t i ve l y s t a bl e a nd i sus a bl e r i ght now. W ’ l l us e a s ma l l bi t eof J a va Sc r i pt or t he M ode r ni z r l i br a r y t oma ke s t yl i ng t he s e e l e me nt s wor k i nI nt e r ne t Expl or e r .Swe e t .
    5. 5. M e t t he Ne w Se ma nt i c e El e me nt s<section>The s e c t i on e l e me nt r e pr e s e nt s a ge ne r i cdoc ume nt or a ppl i c a t i on s e c t i on. As e c t i on, i n t hi s c ont e xt , i s a t he ma t i cgr oupi ng of c ont e nt , t ypi c a l l y wi t h ahe a di ng. Exa mpl e s of s e c t i ons woul d bec ha pt e r s , t he va r i ous t a bbe d pa ge s i n at a bbe d di a l og box, or t he numbe r e ds e c t i ons of a t he s i s . A W b s i t e s home epa ge c oul d be s pl i t i nt o s e c t i ons f or a ni nt r oduc t i on, ne ws i t e ms , c ont a c t
    6. 6. M e t t he Ne w Se ma nt i c e El e me nt s<nav>The na v e l e me nt r e pr e s e nt s a s e c t i on of apa ge t ha t l i nks t o ot he r pa ge s or t o pa r t swi t hi n t he pa ge : a s e c t i on wi t h na vi ga t i onl i nks . Not a l l gr oups of l i nks on a pa gene e d t o be i n a na v e l e me nt — onl ys e c t i ons t ha t c ons i s t of ma j or na vi ga t i onbl oc ks a r e a ppr opr i a t e f or t he na ve l e me nt . I n pa r t i c ul a r , i t i s c ommon f orf oot e r s t o ha ve a s hor t l i s t of l i nks t ova r i ous pa ge s of a s i t e , s uc h a s t he t e r ms
    7. 7. M e t t he Ne w Se ma nt i c e El e me nt s<article>The a r t i c l e e l e me nt r e pr e s e nt s a c ompone ntof a pa ge t ha t c ons i s t s of a s e l f -c ont a i ne d c ompos i t i on i n a doc ume nt , pa ge ,a ppl i c a t i on, or s i t e a nd t ha t i s i nt e nde dt o be i nde pe nde nt l y di s t r i but a bl e orr e us a bl e , e . g. i n s yndi c a t i on. Thi s c oul dbe a f or um pos t , a ma ga z i ne or ne ws pa pe ra r t i c l e , a W b l og e nt r y, a us e r - s ubmi t t e d ec omme nt , a n i nt e r a c t i ve wi dge t or ga dge t ,or a ny ot he r i nde pe nde nt i t e m of c ont e nt .
    8. 8. M e t t he Ne w Se ma nt i c e El e me nt s<aside>The a s i de e l e me nt r e pr e s e nt s a s e c t i on ofa pa ge t ha t c ons i s t s of c ont e nt t ha t i st a nge nt i a l l y r e l a t e d t o t he c ont e nt a r oundt he a s i de e l e me nt , a nd whi c h c oul d bec ons i de r e d s e pa r a t e f r om t ha t c ont e nt .Suc h s e c t i ons a r e of t e n r e pr e s e nt e d a ss i de ba r s i n pr i nt e d t ypogr a phy. Thee l e me nt c a n be us e d f or t ypogr a phi c a le f f e c t s l i ke pul l quot e s or s i de ba r s , f ora dve r t i s i ng, f or gr oups of na v e l e me nt s ,
    9. 9. M e t t he Ne w Se ma nt i c e El e me nt s<hgroup>The hgr oup e l e me nt r e pr e s e nt s t he he a di ngof a s e c t i on. The e l e me nt i s us e d t o gr oupa s e t of h1–h6 e l e me nt s whe n t he he a di ngha s mul t i pl e l e ve l s , s uc h a s s ubhe a di ngs ,a l t e r na t i ve t i t l e s , or t a gl i ne s .“ Ju s t a n o t he r wo r d p r e s s we b l o g ”
    10. 10. M e t t he Ne w Se ma nt i c e El e me nt s<header>The he a de r e l e me nt r e pr e s e nt s a gr oup ofi nt r oduc t or y or na vi ga t i ona l a i ds . Ahe a de r e l e me nt i s i nt e nde d t o us ua l l yc ont a i n t he s e c t i on’ s he a di ng ( a n h1–h6e l e me nt or a n hgr oup e l e me nt ) , but t hi s i snot r e qui r e d. The he a de r e l e me nt c a n a l s obe us e d t o wr a p a s e c t i on’ s t a bl e ofc ont e nt s , a s e a r c h f or m, or a ny r e l e va ntl ogos .
    11. 11. M e t t he Ne w Se ma nt i c e El e me nt s<footer>The f oot e r e l e me nt r e pr e s e nt s a f oot e r f ori t s ne a r e s t a nc e s t or s e c t i oni ng c ont e nt ors e c t i oni ng r oot e l e me nt . A f oot e rt ypi c a l l y c ont a i ns i nf or ma t i on a bout i t ss e c t i on s uc h a s who wr ot e i t , l i nks t or e l a t e d doc ume nt s , c opyr i ght da t a , a nd t hel i ke . Foot e r s don’ t ne c e s s a r i l y ha ve t oa ppe a r a t t he e nd of a s e c t i on, t hought he y us ua l l y do. W n t he f oot e r e l e me nt hec ont a i ns e nt i r e s e c t i ons , t he y r e pr e s e nt
    12. 12. M e t t he Ne w Se ma nt i c e El e me nt s<time>The t i me e l e me nt r e pr e s e nt s e i t he r a t i meon a 24 hour c l oc k, or a pr e c i s e da t e i nt he pr ol e pt i c Gr e gor i a n c a l e nda r ,opt i ona l l y wi t h a t i me a nd a t i me - z oneof f s e t .
    13. 13. M e t t he Ne w Se ma nt i c e El e me nt s<form> <input> attributesPl a c e hol de r Te xt / Se a r c h Boxe s<input type="search" placeholder=“Search Example.com" name="s" id="s" />Ema i l Addr e s s e s<input type="email" class="text-input" name="email" id="email" value="" size="22" tabindex="2" aria-required=true />W b Addr e s s e s e<input type="url" class="text-input" name="url" id="url" value="" size="22“ tabindex="3" />
    14. 14. I s n’ t Al l Tha t Ne w St uf f J us t About Pe r f e c t f or M r ki ng up a Bl og? a He c k ye s .
    15. 15. Le t ’ s Look a t Some Code
    16. 16. he a de r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><!DOCTYPE html><!--simplified!--><html <?php language_attributes(); ?>><!--simplified!--><head profile="http://gmpg.org/xfn/11"><!--simplified!--><meta charset="<?php bloginfo(charset); ?>" /><title><?php wp_title(&laquo;, true, right); ?> <?php bloginfo(name); ?></title><script type="text/javascript">var elem;var elems = abbr article aside audio canvas datalist details eventsource figure footer header hgroup mark menu meter nav output progress section time video.split( );var i = elems.length+1;while ( --i ) { elem = document.createElement( elems[i] );}elem = null;</script><link rel="stylesheet" href="<?php bloginfo(stylesheet_url); ?>" media="screen" /><link rel="pingback" href="<?php bloginfo(pingback_url); ?>" /> Default/Kubrick (part 1)
    17. 17. he a de r . php<style media="screen"><?php// Checks to see whether it needs a sidebar or notif ( empty($withcomments) && !is_single() ) {?> #page { background: url("<?php bloginfo(stylesheet_directory); ?>/images/kubrickbg-<?php bloginfo(text_direction); ?>.jpg") repeat-y top; border: none; }<?php } else { // No sidebar ?> #page { background: url("<?php bloginfo(stylesheet_directory); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }<?php } ?></style><?php if ( is_singular() ) wp_enqueue_script( comment-reply ); ?><?php wp_head(); ?></head><body <?php body_class(); ?>><div id="page"><!--header--><header id="header" > <hgroup id="headerimg"> <h1><a href="<?php echo get_option(home); ?>/"><?php bloginfo(name); ?></a></h1> <h2 class="description"><?php bloginfo(description); ?></h2> </hgroup></header><hr /> Default/Kubrick (part 2)
    18. 18. he a de r . php<!DOCTYPE html><html <?php language_attributes(); ?> class=“no-js”><head profile="http://gmpg.org/xfn/11"><title><?php if ( is_front_page() ) {bloginfo(name);?> | Fresh Ideas Caught and Served <?php } else {;?> <?php bloginfo(name);?> | <?php if($post->post_parent) { $parent_title = get_the_title($post->post_parent); echo $parent_title;?> &ndash; <?php }?> <?php wp_title(); ?><?php } ?></title><meta charset="<?php bloginfo(charset); ?>" /><meta name="description" content="<?php echo get_post_meta($post->ID, "meta-description", "true"); ?>" /><link rel="shortcut icon" href="http://static.crameronline.com/_assets/images/favicon.ico"/><script type="text/javascript"> var ___baseURL ="<?php bloginfo(template_directory); ?>";</script><!—one file, which contains Modernizr <script type="text/javascript" src="<?php bloginfo(template_directory); ?>/_assets/scripts/b.c.js"></script> AwiderNet.com
    19. 19. Vi e w Sour c e<html lang="en-US" dir="ltr" class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no- csstransitions video audio fontface"><!– such is the power of modernizr <head profile="http://gmpg.org/xfn/11"><title>A Wider Net | Fresh Ideas Caught and Served </title><meta charset="UTF-8"> AwiderNet.com
    20. 20. i nde x. php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */get_header(); ?> <div id="content" class="narrowcolumn" > <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1> <time datetime="<?php the_time(c) ?>" pubdate="pubdate"><?php the_time(F jS, Y) ?></time> <div class="entry"> <?php the_content(Read the rest of this entry &raquo;); ?> </div> <p class="postmetadata"><?php the_tags(Tags: , , , <br />); ?> Posted in <?php the_category(, ) ?> |<?php edit_post_link(Edit, , | ); ?> <?php comments_popup_link(No Comments », 1 Comment », % Comments »);?></p> </article> <?php endwhile; ?> <nav class="navigation"> <div class="alignleft"><?php next_posts_link(&laquo; Older Entries) ?></div> <div class="alignright"><?php previous_posts_link(Newer Entries &raquo;) ?></div> </nav> <?php else : ?> <h1 class="center">Not Found</h1> <p class="center">Sorry, but you are looking for something that isnt here.</p> <?php get_search_form(); ?> <?php endif; ?> </div><?php get_sidebar(); ?><?php get_footer(); ?> Default/Kubrick
    21. 21. Vi e w Sour c es<article id="post-3" class="post-3 post hentry category-uncategorized"> <h1><a title="Permanent Link to This Is an HTML5ized Version of the Default Wordpress Theme" rel="bookmark"href="http://htmlcssjavascript.com/dev/?p=3">This Is an HTML5ized Version of the Default Wordpress Theme</a></h1> <time pubdate="pubdate" datetime="2010-01-17T21:52:52+00:00">January 17th, 2010</time> <div class="entry"> <p>Source Code and discussion.</p> </div> <p class="postmetadata"> Posted in <a rel="category" title="View all posts in Uncategorized"href="http://htmlcssjavascript.com/dev/?cat=1">Uncategorized</a> | <a title="Edit post" href="http://htmlcssjavascript.com/dev/wp-admin/post.php?action=edit&amp;post=3" class="post-edit-link">Edit</a> | <a title="Comment on This Is an HTML5ized Version of theDefault Wordpress Theme" href="http://htmlcssjavascript.com/dev/?p=3#respond">No Comments »</a></p> </article> Default/Kubrick
    22. 22. s i de ba r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><aside id="sidebar" > <ul> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar() ) : ?><!-- SNIP --> </li> <?php }?> </ul> <nav> <ul> <?php wp_list_pages(title_li=<h2>Pages</h2> ); ?> <li><h2>Archives</h2> <ul> <?php wp_get_archives(type=monthly); ?> </ul> </li> <?php wp_list_categories(show_count=1&title_li=<h2>Categories</h2>); ?> </ul> </nav> <ul> <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?> <?php wp_list_bookmarks(); ?> <li><h2>Meta</h2><!-- SNIP --> </li> <?php } ?> <?php endif; ?> </ul></aside> Default/Kubrick
    23. 23. s e a r c hf or m. php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><form method="get" id="searchform" action="<?php bloginfo(url); ?>" > <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="search" placeholder="Search <?phpbloginfo(blogtitle); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div></form> Default/Kubrick
    24. 24. c omme nt s . php<?php// snip!?><?php if ( comments_open() ) : ?><div id="comment-form"> <h2><?php comment_form_title( Leave a comment, Leave a Reply to %s ); ?></h2> <div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div> <?php if ( get_option(comment_registration) && !is_user_logged_in() ) : ?> <p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p> <?php else : ?> <form action="<?php echo get_option(siteurl); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( is_user_logged_in() ) : ?> <p>Logged in as <a href="<?php echo get_option(siteurl); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p> <?php else : ?> <p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label><input type="text"class="text-input" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req)echo "aria-required=true"; ?> /> </p> <p><label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label><input type="email" class="text-input" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>"size="22" tabindex="2" <?php if ($req) echo "aria-required=true"; ?> /></p> <p><label for="url"><small>Website</small></label><input type="url" class="text-input" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /> </p> <?php endif; ?> <p><label for="comment"><small>Comments</small></label> <textarea name="comment" cols="100%" rows="10" tabindex="4"></textarea> </p> <div class="button"><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /></div> <?php comment_id_fields(); ?> <?php do_action(comment_form, $post->ID); ?> </form><!—SNIP- AWiderNet
    25. 25. f oot e r . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 */?><hr /><footer id="footer" ><!-- If youd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; its our only promotionor advertising. --> <p> <?php bloginfo(name); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a> <br /><a href="<?php bloginfo(rss2_url); ?>">Entries (RSS)</a> and <a href="<?php bloginfo(comments_rss2_url); ?>">Comments (RSS)</a>. <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> </p></footer></div><!-- Gorgeous design by Michael Heilemann - http://binarybonsai.com/kubrick/ --><?php /* "Just what do you think youre doing Dave?" */ ?> <?php wp_footer(); ?></body></html> Default/Kubrick
    26. 26. W t ’ s t he Di f f ? hafooter.php
    27. 27. a r c hi ve s . php<?php/** * @package WordPress * @subpackage Kubrick_x_HTML5 *//*Template Name: Archives*/?><?php get_header(); ?><div id="content" class="widecolumn"><?php get_search_form(); ?><section><h2>Archives by Month:</h2> <ul> <?php wp_get_archives(type=monthly); ?> </ul></section><section><h2>Archives by Subject:</h2> <ul> <?php wp_list_categories(); ?> </ul></section></div><?php get_footer(); ?> Kubrick/default
    28. 28. s t yl e . c s s/*SNIP!*//* Begin Structure */body { margin: 0 0 20px 0; padding: 0; }/*HTML5*/footer, section, article, aside, header, time { display:block; }#page { background-color: white; margin: 20px auto; padding: 0; width: 760px; border: 1px solid #959596; }#header/*SNIP!*/ Kubrick/default
    29. 29. W t ’ s t he Di f f ? hastyle.css
    30. 30. s t yl e . c s s.borderradius.boxshadow.rgba #container #main article,.borderradius.boxshadow.rgba #container #main #posts > .meta-data,.borderradius.boxshadow.rgba #container #main #posts #no-results,.borderradius.boxshadow.rgba #container #main #posts .author { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15); box-shadow: 0px 0px 5px rgba(0, 0, 0, .15); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15); background:#fff; overflow: hidden;} AWiderNet
    31. 31. PSST! CSS3
    32. 32. Thi ngs I Le a r ne dThe new outline algorithm is a fickle masterOtherwise- not so bad.Kubrick worked with almost no browser specific intervention in modern browsers
    33. 33. Any Que s t i ons ?
    34. 34. M e I nf o orht t p: / / www. budne t de s i gn. c om

    ×