Smooth Font Using CSS3

html, html a { -webkit-font-smoothing: antialiased !important; } html, html a { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); } html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

Default Responsive CSS for Template

/*Responsive CSS*/ @viewport { width: device-width; zoom: 1; } img, video, canvas { max-width: 100%; } figure { height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; width: 100%; } iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } @media all and (min-width: 768px) and (max-width: 1024px) { } @media all...

Table row alternat Efect

table row alternat efect table tr:nth-child(odd) td{ } table tr:nth-child(even) td{ }

Sprite Image

Beautiful Button The best practice is to combine all button states into one image and divide them out using CSS. This is because it: reduces http requests resulting in faster transfers prevents flickering effect caused by change of state by loading all states as one file The CSS Code Now that we’ve brought the different...

Various Link Techniques

  Showing Hyperlink Cues with CSS- The CSS Guy shows us how to get the little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7,...

Rundown of Handling Flexible Media

When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will...

CSS Tricks

Vertical Centering Block Level Elements Positioning can be used to vertically center block level elements. The HTML: 1 <div id="content">your content here</div> The CSS: 1 div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px} The top left corner of the div will be positioned 50% from the top. Since we want the center of the...

CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code. The HTML: 1 This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here. The CSS: 1 a.tooltip {position: relative} 2 a.tooltip span {display:none; padding:5px;...

CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles...

Using a CSS Reset for Cross-Browser Compatibility

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,...