with Lorelle and Brent VanFossen

CSS Tips and Tricks – Filters and Transforming Text

Flippin’ Filter Fun: flipv and fliph

There are tons of filters you can have fun with with your CSS experiments. Remember, these only work on a few browsers, so test them out before putting them into use. Firefox and older browsers have trouble with these, though Microsoft Internet Explorer’s latest versions display these well. We have links to help you explore the fun and games with CSS filters below, but here are a few more examples of some CSS experiments with filters.

The flipv or Vertical Flip actually mirrors the content upside down.

Flip Things Vertically
<div style=”height:5%; width:50%; font-size:1.3em; color:blue; filter:flipv“>Flip Things Vertically</div>

The fliph or Horizontal Flip mirrors the content horizontally. It also flips everything within the division including the margin, padding and width.

Flip Things Horizontal
<div style=”height:5%; width:50%; font-size:1.3em; color:blue; filter: fliph“>Flip Things Horizontal</div>

The Flip Horizontal and Vertical filters appear to be fairly silly CSS experiments, but there are some interesting things you can do with them, if you release your creative spirit. One technique is to use the fliph and flipv repeatedly within the same filter statement. This example flips the text vertically and then horizontally. A text-align:center declaration forces the lines to be in the center close to each other.

Dream Now

Dream Now
<div style=”height:1%; width:30%; padding:10px; text-align:center; font-family:Georgia, Times Roman, serif; color:purple; font-size:140%; font-weight:bold; background:#FFCCFF”>
Dream Now
<div style=”height:1%; filter:flipv fliph“>
Dream Now
</div>
</div>

The example below flips the repeated text horizontally, then vertically, then horizontally to move it upside down under the original text.

Dream Now

Dream Now
<div style=”height:1%; width:30%; padding:10px; text-align:center; font-family:Georgia, Times Roman, serif; color:purple; font-size:140%; font-weight:bold; background:#FFCCFF”>
Dream Now
<div style=”height:1%; filter:fliph flipv fliph“>
Dream Now
</div>
</div>

By uses CSS classes to hold the horizontal or vertical flip instructions, you can apply this technique to design elements within your web page design.

In this example, we’ve actually forced the letters to go sideways, then using the flip filters, we’ve flipped the first one vertically and then horizontally, an the second one has been flipped vertically twice and then horizontally once to create a reverse reflection.

SIDEWAYS SIDEWAYS
CSS Style Sheet:
.verttext {
font-family:Georgia, Times Roman, serif; color:purple; font-size: 120%; writing-mode: tb-rl; filter: flipv fliph; padding:5px}

.verttextflip {
font-family:Georgia, Times Roman, serif; color:purple;font-size: 120%; writing-mode: tb-rl; filter: flipv flipv fliph; padding:5px}

HTML Structure:
<div>
<span class=”verttext”>SIDEWAYS</span>
<span class=”verttextflip”>SIDEWAYS</span>
</div>

Leaf pattern, photograph by Brent VanFossenUsing the photograph to the right of a closeup leaf pattern, we’ll use a similar technique to the one done to create our popular PhotoQuilt notecards, but we will only use the CSS filter for vertical and horizontal. First we will display the two images side by side by using a style declaration of float:left on the first image. Notice also that all the margins and paddings have been set to zero to make sure there is no white space between the images.

Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
</div>

Let’s apply the flip vertical filter to the second image.

Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0;filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
</div>

Let’s change the vertical flip to the horizontal flip filter on the second image to begin the mirror reflection aspect.

Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Now we have something interesting with our CSS experiments. Remember, these filters aren’t recognized by all browsers, so if you only see two leaf pictures sitting next to each other, or some space between the photographs, then your browser is having trouble interpreting the CSS filter instructions since they are proprietary for Microsoft products. We’ll show you a graphic image of what the final result should look like in a moment.

Let’s double up on what we’ve done to create a first level quilt effect with our CSS experiments. We now have four sets of images, two on top of each other.

Leaf Leaf
Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”fmargin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Now, let’s double flip the bottom two images so they will create the final results.

Leaf Leaf
Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0; filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph flipv” width=”85″ height=”127″ alt=”Leaf”>
</div>

Wow! Let’s take it a little further and reverse the top and bottom two images to change the “look” of the PhotoQuilt. Notice in the code how the third box in the list has no flip filter. It is in the position of the original image.

Leaf Leaf
Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0; filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph flipv” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Final images of the PhotoQuilt effect created with CSS Filters fliph and flipv, original photograph by Brent VanFossen Can’t see the effect we’re going for here? Here is a screen shot of what the final results should look like. We’ve taken four exact images and used the CSS filter for flipping horizontally and vertically to position these images, using only CSS styles, to recreate the PhotoQuilt effect. We have more examples of our real PhotoQuilts and how we create our PhotoQuilt Notecards in our Learning Zone.

Flipping CSS around can be fun. Use your imagination and see what is possible.

 

More Text Tips and Tricks:
Engrave and Emboss Filters

The Engrave and Emboss Filters are different from others as they change the background to gray, but the intensity of the effect is based upon the tone of the background color.The closer to white, the more intense the effect. The closer to black or dark tones, the less intense the effect is.

Embossed on white background.
Embossed with green-toned (#009900) background.
This is Embossed with blue background.
<div style=”height:25px; width:50%; padding:10px; font-size:1.2em; font-weight:bold; background:white; filter:progid:DXImageTransform.Microsoft.Emboss ()“>Embossed on white background.</div>
 
Engraved with white background
Engraved with green-toned (#009900) background
Engraved with blue background
<div style=”height:25px; width:50%; padding:10px; font-size:1.2em; font-weight:bold; background:white; filter:progid:DXImageTransform.Microsoft.Engrave ()“>Engraved with white background</div>

These two CSS filters can be used to create buttons or links, such as the one below using the embossed filter. We maintained our web page design link featuring a background and top and bottom borders that look like this link when you hover the mouse over the link. See the interesting results when you move the mouse over the link box below.

<div style=”height:25px; width:25px; padding:10px; font-size:1.5em; font-weight:bold; background:#CCCCFF; filter:progid:DXImageTransform.Microsoft.Emboss()“><a style=”padding:5px” href=”cssfun.html#linkemboss” title=”this link reloads this page on CSS Filter Fun”>Link</a></div>

10 Comments

  • Posted April 27, 2005 at 7:28 | Permalink

    I have found some problems to print the “SIDEWAYS” (verttext). The text don´t appear in print preview.
    How can I solve this?
    Regards
    Everton

  • Posted April 27, 2005 at 14:39 | Permalink

    You have to put the CSS in the print.css file in order for it to show up when printed. But remember, sideways is very choosy and will not work in the same way on all browsers. I can’t get it to work in Firefox, and I have to more research to find out why. In fact, most of this page doesn’t work in Firefox. The filters are pretty limited to MSIE.

  • Serine
    Posted May 24, 2005 at 22:38 | Permalink

    This is excellent and so helpful. Thanks.

  • Posted July 13, 2005 at 12:11 | Permalink

    ha. Yea, most of these CSS tricks don’t show up in Firefox. Oh well.

  • Rajesh Ahuja
    Posted November 25, 2005 at 5:08 | Permalink

    Vertical Text is the requirement of my project, this is a good expample, I want to print the vertical text but the printer does not print properly. Is it printable or no?

  • Posted November 26, 2005 at 11:56 | Permalink

    Excellent question. CSS controls several things, one of which is how your page will look when viewed on the screen. Another is how that same page will look when printed. Unfortunately, the two formats don’t always match nor meet. Vertical text created with filters and viewable only with MSIE do not always print accordingly on a printer. Sorry. I haven’t figured out how to apply vertical CSS filters to print style sheets. If you find out how, let me know. Otherwise, a screen capture turned into a graphic is the only way with a web page, or use a graphics program to create your designed page for printing.

  • patrick clancey
    Posted July 18, 2006 at 10:00 | Permalink

    Filters are an IE only thing, it’s very, very unlikely that any other browser will implement them, they are not standard and if you use them your CSS won’t validate. For this reason filters really shouldn’t be used at all.

    They can be lots of fun to play with though, and if you want to pep up your site for IE users you can add an IE style sheet using conditional comments, so your pages will still validate ok.

  • Posted August 21, 2006 at 15:03 | Permalink

    Real-life application for L-R mirroring is in the logo
    for the new XeTeX version of the TeX typesetter, see
    http://scripts.sil.org/xetex for an example.

  • Nelly
    Posted March 14, 2007 at 6:09 | Permalink

    Hello, I use “writing-mode: tb-rl; filter: flipv fliph;” and in IE appears what I whant, but when I print it, in paper appears viseverse….Can you help me?

  • Posted March 14, 2007 at 10:32 | Permalink

    No, I can’t help you. Neither can anyone else. The “writing-mode” is now obsolete. It may work in IE but it won’t work in Firefox or other browsers. The last thing you want is a browser specific feature when a huge majority of the world is now turning away from that browser.

    As for the printing issue, the printer also doesn’t recognize the instruction. It only works because it works in IE, not the printer. The page changes when you print. If you are determined, create a print.css stylesheet for printing and see if it will work inside there, but I’ve never gotten it to work.

    There is a big disconnect between viewing a page and printing a page from the web.

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>