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.
The fliph or Horizontal Flip mirrors the content horizontally. It also flips everything within the division including the margin, padding and width.
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
<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
<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.
.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>
Using 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.
<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.
<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.
<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.
<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.
<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.
<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>
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.
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.
Filters – Links and Resources
- Web Design Tutorials – CSS Filters
- W3.org’s CSS Color Module
- Mandarin’s Shadows, Filters, and Playful Text ***
- Self Help HTML: CSS Filters
- Microsoft Filters: Demos and Code ***
- Browser Compatibility: Will the browser apply the rules
- SSI Developer CSS Vertical Text
- IBD Guy’s CSS Tricks With Text Code Generator
- WebDeveloper’s Beyond DHTML with CSS Text and Image Filters
- Internet Related Technologys’ Multimedia in Microsoft Internet Explorer
- CSS Filters: Microsoft-Specific Style Sheet Properties
- Microsoft’s Introduction to Filters and Transitions
- Examples of Microsoft Internet Explorer Filters – Interactive
- Visual Filters and Transitions Reference
- Kali’s CSS Filters
- Fred.net’s CSS Filter Examples
- TekTips’ How to apply visual filters to text with CSS
- W3 Schools DHTML and Filters
10 Comments