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... Continue Reading →

Text Blink

* Text Blink <style> #Blinker { display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left; } @-moz-keyframes blink { 0% {opacity:0;} 100% {opacity:1;} } #Blinker:hover { -moz-animation-play-state: paused; } @-webkit-keyframes blink { 0% {opacity:0;} 100% {opacity:1;} } #Blinker:hover { -webkit-animation-play-state: paused; } </style> <div id="Blinker" >Text to blink here</div>

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,... Continue Reading →

Equal Height Technique

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue. Faux Columns- The simple secret is to use a vertically tiled background... Continue Reading →

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... Continue Reading →

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... Continue Reading →

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;... Continue Reading →

Create a website or blog at

Up ↑