demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Four Ways to Make Elements Disappear (And Reappear) Using CSS

css / properties

Estimated reading time: 3 minutes, 20 seconds

Normal layout of image and textAs web pages become more active and dynamic, we desire content to appear and disappear at will. There are four properties typically used to accomplish this: three of them standard to 1 and 2, and the other in CSS3.

It’s notable that , whether employed as a framework or not, will use these exact same techniques to animate or disappear elements. Remember, only CSS can alter the appearance of elements on the page: JavaScript is just one way of manipulating CSS.

Each technique has its uses, along with its own advantages and disadvantages. It’s also common to employ more than one technique at the same time; where appropriate, I have linked to examples.

I’ll be applying the CSS in each example to the same basic code:

<p>Dice used for traditional Dungeons &amp; Dragons games are actually reflections of the five Platonic solids: the tetrahedron (4 sided die), octahedron (8 sides), dodecahedron (12)and icosahedron (20 sides).
<img src="dice.jpg" alt=”Photograph of metal dice used in Dungeons and Dragons games" id="dice">
<p>The dice are used to determine the attributes of characters, and the character’s success or failure in undertaking tasks, challenges, casting spells, attacks and defences.

The original CSS applied to the image:

img#dice { float: right; margin-left: 2em; }

The techniques are:

visibility: hidden

img#dice { float: right; margin-left: 2em; visibility: hidden; }

Layout of image and text with visibility set to hidden on an imageThe obvious choice, and often the first employed. It works – you can’t see the influenced element – but the rest of the page still acts like the element is there; it is simply treated as being invisible, while taking up space.

Used for: “popping” elements in and out of existence, when an animated transition effect is not required.

Countered by: setting the element to visibility: visible.

opacity: 0

img#dice { float: right; margin-left: 2em; opacity: 0; }

Layout of image and text with opacity set to 0 on an imageA CSS3 property, setting opacity to 0 causes an element to be invisible, in the exact same way that visibility: hidden does. opacity the advantage that, unlike visibility, it can be .

Used for: creating “fade in” and “fade out” effects.

Countered by: setting the element to opacity: 1 (or any value greater than 0).

position: absolute

img#dice { position: absolute; left: -1000px; }

Layout of image and text with position set to absolute on an imageThe oldest and most standardized of the techniques. Takes the element out of the flow of the page, causing it to layer above ordinary content. Using a high negative left value takes it off the page entirely.  float and margin are irrelevant with position: absolute, so they are removed.

Used for: Linear animation; “pop” placement of elements with the greatest compatibility between browsers.

Countered by: setting the left position to a value that allows the element to be seen on the page.

display: none

img#dice { display: none; }

Layout of image and text with display set to none on an imageThe second-oldest of the techniques. Might be thought of as a compromise between position: absolute and visibility: hidden; the element is both invisible and no longer influences other content on the page.

Used for: stylesheets for alternative media, to eliminate inappropriate content; as a way of “collapsing” content around an element that will be “pushed” when it re-appears, as in an accordion menu.

Countered by: setting the element to display: block or any other value.

There are other ways of making elements vanish, especially in CSS3 – for example, you could use scale to diminish the apparent size of an element until it is invisible – but on the whole they have the same effect as those I have described here. (scale will retain the original space of the element, just as opacity: 0 and visibility: hidden do).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.