Nine Techniques for CSS Image Replacement CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1>tag and text for this for the accessibility and SEO benefits, but ideally you'd like to show your logo, not text. Note that some of these techniques are very old. The report card consists of five major categories: CSS ON / Images ONRepresents browsers in their normal states. Technique #1 <h1 id="technique-one"><span>CSS-Tricks</span></h1> More information: This technique is referred to as FIR or "Fahrner Image Replacement". Technique #2 <h1 class="technique-two"> CSS-Tricks </h1> More information: Radu Darvas is credited with this technique. Technique #3 <h1 class="technique-three"> CSS-Tricks </h1> More information: This technique is credited to Mike Rundle and referred to as the Phark Method. Technique #4 Technique #5 More information: Radu Darvas is also credited with this technique. Technique #6 Technique #7
Nice Web Type – How to use CSS @font-face Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated May 2010 with new syntax from Paul Irish. The CSS: The HTML: <h2>This headline is typeset in <em>your typeface</em>. Before we get started If you want to brush up history and basics, Håkon Wium Lie has a great introduction to the CSS @font-face property in his A List Apart article, CSS @ Ten: The Next Big Thing. Acquire a typeface You may have a typeface in mind, or you may have no idea where to begin. I have also experimented with several properly-licensed typefaces in a series I call Nice Web Type Likes, providing bits of advice with each example and explaining what I feel are each typeface’s merits. For this demonstration I’ll use Fontin Sans from Exljbris. /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ Go grab a properly licensed typeface, then continue reading here. Use several font formats
CSS3 Flexbox « Isotoma Blog CSS3 brings us a host of new features. Whilst most people will be familiar with gradients, text-shadow etc. I’d like to draw your attention to one of the lesser known modules in CSS3: flexbox. What’s interesting about Flexbox is that you can use it now if you use a Gecko or Webkit based browser (no IE sadly and Opera’s support isn’t there yet). What does Flexbox bring us that we didn’t have before? Well it gives us a whole raft of new ways of controlling layout and flow. I’ve never liked floats, they always seemed a hacky way of structuring HTML. display: box Example 1 box-orient Example 2 Box-orient is inherited i.e. child elements will also be aligned horizontally. Example 3 Observant viewer will have noticed that Firefox (3.6.8) ignores the width and height setting on the child boxes, whilst Webkit respects it but overflows the content. So if you want child elements to be aligned vertically, you’ll need to set the containing element to box-orient:vertical. box-ordinal-group Example 4 box-flex
Becoming a Font Embedding Master I've spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process. Font Formats Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). Licensing, and Browser Support Licensing Licensing is one of the biggest hurdles. Even many free fonts have limitations on how they can be used, often times requiring specific directions on linking back to the original source or only using them in non-commercial sites. These days, a number of resources are popping up—especially those dedicated to font embedding. Browser Support Which leads me into the other major issue, browser support. Okay, that's decent already but we can do better. If you have an OTF file, you'll need to convert it into a TTF file before you can convert it into an EOT.
CSS3 Zoooom images CSSplay Zoooom Images 8th November 2011 IE7, IE8, IE9, IE10, Firefox, Opera, Safari and Chrome Photographs taken in Gloucester Cathedral during a recent Exhibition copyright © stu nicholls - CSS play Information A method of controlling the zoom of a set of images. Just hover any of the above images to give a zoom to full size of that image and a gradient zoom of any images to the left and right of this image. You can move left/right between images to zoom the adjacent images to full size. Works by using an overlay of links and the general sibling selector to control the size, position and opacity of the images. Each image can also be a link to another page. IE will see an instant jump in the size of the images, but all other browsers will see these animate to size, position and opacity. Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright.
한국워드프레스사용자모임 | 워드프레스를 사용하는 사람들의 커뮤니티 한국워드프레스사용자모임 | 워드프레스를 사용하는 사람들의 커뮤니티 CSS Font Shorthand Property Cheat Sheet In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works. So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy! Download the CSS Font Shorthand Cheat Sheet (PDF) Advertise Here Comment Rules: Please use a real name or alias. Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags.
iWeb Widgets, Tutorials, Tips, and Tricks | Beyond iWeb 14 CSS3 Smashing Generators | Marked Lines - StumbleUpon Many exciting new functions and features are being thought up for CSS3. You can try and take the code to use them with a CSS3 Generator. Below there are 14 wonderful generators that they will help you with these new functions and features! The post is a refresh of 6 CSS3 Smashing Generators
» CSS Trick: Turning a background image into a clickable link One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this: Range Web Development Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles: That’s all the (X)HTML you’ll need to make your background image clickable. So, how can we make a background image a clickable link? At this point it should look something like this: Range Web Development Now all we need to do is hide the text. And the finished product looks like this: Range Web Development And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links.