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

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.