Entries Tagged 'CSS: Styling' ↓

Another extension of the Nice Titles meme. In this one the tool tip fades in.

Introducing Sweet Titles

Another CSS tutorial explaining how to give boxes round corners.

CSS and round corners: Borders with curves

On the web, we often need to place a picture together with its description, caption etc. It’s easy to place other elements around the image, but if the image is floating (left or right), it’s a bit more complicated.

Do it with CSS: Photo Cards

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn’t requires images, extra markup nor CSS.

Nifty Corners: rounded corners without images

Since its publication, I’ve worked a lot on Nifty Corners, bringing many improvements: looking back at the solution presented in the first article, seems to me that it was written ages ago. …

More Nifty Corners

You just never know where problems can stem from.

Never, ever do CSS markup in a word processor. Well, I did. It was only two sentences but I didn’t want to make a typo. MT calls the Textile plug in (which I’ll replace with Markdown when I install 3.1) on my entries. Textile educated the word processor quotes in the div I use to denote second thoughts when I update an entry.

Never got caught by this before because I normally cut and paste to my plain text editor when I add in the HTML markup.

I spent several stupefied minutes trying to figure out why my style sheet wasn’t working on just one entry.

How to create text shadows in Mozilla and Opera: CSS text shadow. A comment tells how to do it in Internet Explorer.

They also point to Text Shadows with CSS

Mark Newhouse’s CSS Help was one of the first CSSCascading Style Sheets tricks I learned. Cheah Chu Yeow takes the idea up a level:

The smart part is when printing: the tooltips are “inlined” and bracketed appropriately so that they show up in the normal flow of the document when printing.

Tooltips with CSS

I’ll confess that I’ve never been a big fan of nice titles. Sometimes they startle the hell out of me. Too often they obscure the text I’m trying to read when I inadvertently move my cursor over a link.

The exceptionally gifted Dunstan has fixed that:

I will now count backwards from ten

Usually I never put photos or other images in my weblog. I’d been meaning forever to find some way of styling them. I can’t credit the link that led me to “Easy CSS drop shadows” which proved to be exactly what I wanted.

A few people have noticed that the drop shadows I use on images here aren’t part of the pictures themselves, but are added on through the web equivalent of Magic Fairy Dust — CSS. I thought I’d explain how it’s done in case anyone else wanted to know.

Easy CSS drop shadows

Now if I can just figure out where my alt text went.

I’ve never been much able to visualize box borders - often they’ve been an unpleasant surprise. Copysense offers an online border testing utility.

This utility enables the sampling of Cascading Style Sheet (CSS) border styles, and creates the corresponding CSS code for implementation.

CSS Box Border Test