Skip to main content

Posts

Showing posts from June, 2013

Using CSS Background-Color and Box-Shadow to Substitute Linear-Gradient for Small Object

DEMO linear gradient to bottom linear gradient hover box-shadow box-shadow with hover linear gradient to bottom right linear gradient hover box-shadow box-shadow with hover linear gradient to right linear gradient hover box-shadow box-shadow with hover As you can see above, using CSS box-shadow and background color can almost substitute the CSS linear gradient background-image. But, it's still rendered a bit differently on Chrome and Firefox. The transition of CSS gradient color value can't be animated (yet). Because it's an image : background-image property. The advantages of using box-shadow and background-color : You can animate the transition using CSS transition property. Box-shadow values can be put in series to create vivid shape - because of the different shadow color and position. Box-shadow and background-color can be rendered by most of (desktop and mobile) browsers WITHOUT using any prefix - reducing code lines ...

CSS Border-Radius, Box-Shadow and Text-Shadow, Bevel and Emboss - No Image

Inset box-shadow and text-shadow border-radius:10% border-radius:20% border-radius:30% border-radius:40% border-radius:50% border-radius:5em 50% 5em 50% CSS HTML

Blogger Conditional Tag — b:if and b:else

Blogger has special b:if , b:elseif , and b:else tags. Those only work if we put them in the XHTML of the Blogger blog, not in the HTML widget (via layout). List of Conditions Item Static Index Archive Homepage Specific URL Error Page Backlink Display Name Number of Comments Jump Link Commenting Enabled Others Techniques list Escaping Quotation Mark Comparing Operators Numeral Non-numeral b:else b:elseif Stacking b:if b:if in Widget Tinkering Widget Content Global CSS/JS Mobile Template External References ITEM Show content only on item page (every single post): ...content... LIST TOP STATIC Show content only on static page(s): ...content... LIST TOP INDEX Show content only on index page (sorted by label and date): ...content... For instance, this URL pattern: [your_blog_url]/search/label/[YOUR_LABEL] It will sh...