Quotes using CSS (example) Styling photo captions with CSS. Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS: Now I won’t delve too deeply into how to code your captions. Some people do it this way: <p><img src=”image.jpg” alt=”image” /><br />Caption text here</p> But apparently the proper, semantic way would be to use a definition list, like so: <dl> <dt><img src=”image.jpg” alt=”image” /></dt> <dd>Caption text here</dd> </dl> where: dl = definition list dt = definition term dd = definition definition Got that?
And here’s how to accomplish it: <dl> <dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt> <dd>I love the smell of freshly sharpened pencils</dd> </dl> Me, I like my captions plain and simple- I think the photos should stand out more than the captions. Will give you this: You gotta love CSS. Border-radius: create rounded corners with CSS! Home / CSS3 Previews / Border-radius: create rounded corners with CSS! The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.
Here’s a basic example: This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. The code for this example is, in theory, quite simple: However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details): How it Works border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius The Syntax: How to do a Basic 3-Column Footer. The first question I am answering (from the blog entry, Q&A: WordPress, Blogging, and More), comes from Dayze.
The question is as follows: I really like the layout of your site; it’s simple but pretty :) I’m always finding alternate ways to make a 3-columned footer so I hope you can share Now you can do this one of two ways. The first would be using floats to just float each column next to each other (which is what I will be sharing), or what I am currently using is absolute positioning (granted I have room for a 4th column but not sure what I want down there yet). Float Method Add this code to your CSS (cascading style sheet): Add this code to your footer: <div class="floatleft"><h3>Heading</h3> All sorts of awesome footer goodness </div> Of course you can change the width, the margins, etc.
{View a Demo} This technique works for a three column blog design, for a large header/sidebar, whatever you want to have multiple columns. I would appreciate your feedback on this tutorial! CSS Cheat Sheet. Dynamic Drive CSS Library- Arrow Green Vertical Menu. Arrow Green Vertical Menu Author: Ian Main (with changes by Dynamic Drive) Arrow Green Menu is a vertical list based menu that uses a single background image to create 3 distinct states, by shifting the image vertically to reveal a different style. The last state is user applied, by giving the desired element a CSS class of ".selected". Demo: Single image used (two flavors): The CSS: Code Info Rate this code: Date Posted: 09/15/2008 Revision History: None Usage Terms: Click here Your Comments (35) Got a question or need help customizing this CSS code?
Css and Web Design Community News. All Things Kawaii > Graphics > Web Materials. 46 resources & tools to improve your web typography at LifeClever ;-) Tips for Design and Life. Who says type on the web has to look wretched? Sure, there are annoying constraints like low-resolutions, limited font choices, and browser incompatibilities. But with the right tools and a little bit of guidance, you can absolutely make on-screen typography beautiful. Here’s 46 resources to help you create, find, and code great looking type for the web. This list is geared towards web designers and developers, but print designers will also find many of the resources useful: CSS, HTML, & Flash Ah, the joy of coding a site and making the type look consistent, legible, and readable.
Typetester Compare screen fonts set with various CSS attributes. Font Identification Need help identifying or finding the right typeface? Identifont A step-by-step wizard to help you identify a mysterious fontLinotype Font Identifier Another version of the same tool aboveWhatTheFont?! Font Previewers The sites below let you to preview any sample text in a chosen typeface before you buy. Pixel Font Collections. CSS Vault » The Web's CSS Gallery & Site.