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); }

Advertisements

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>

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

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 →

Capital Letters with CSS

Drop Cap – Capital Letters with CSS CSS First Letter CSS allows you to add a property :first-letter which as you can guess allows you to style the first letter of the element. Therefore you can add this to all paragraph to create drop capitals on all paragraphs. p:first-letter { display:block; float:left; font-family:Georgia; font-size: 310%;... Continue Reading →

The syntax for conditional comments

The syntax for conditional comments is as follows: Positive<!--[if condition]> HTML <![endif]-->Negative<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->condition is one of the following: IEAny version of IElt IE versionVersions less than versionlte IE versionVersions less than or equal to versionIE versionOnly version versiongte IE versionVersions greater than or equal to versiongt IE versionVersions greater than versionversion is the... Continue Reading →

Create a website or blog at WordPress.com

Up ↑