2015 Februar

Create CSS classes with smarty (from values)

Still not perfect, but if you need classes without playing around with PHP, this could be an easy way.

{assign var="generatedClass" value=$VALUEVARIABLE}
{assign "origin" array('ä', 'ö', 'ü', '+')} // to be continued ...
{assign "replacement" array('ae', 'oe', 'ue', '')} // to be continued ...

bla

Sure, this won´t work well with content that rapidly changes 😉 but in some cases … it might be helpfull.

    CSS Keyframe Animation fade out and hide without display:none

    The Display property is not working well with CSS animations, if you read this, you already know. So we have to find a way around.

    In my case, i have a layer above the entire page which is overlaying the page content. As you already tried out, visibility won´t work also, as it´s the same as opacity:0;

    Solutions:

    1. You can move the entire layer out of the viewport eg. position:absolute; left:-9000px;
    2. You can try out using a negative z-index to get the layer behind the page-content (makes only sense for layers which are absolute / fixed positioned over the page, not in normal element flow).
    3. Make overflow:hidden; and height:0; – take a look:
    @keyframes fadeOutAndHide {
        0% {
          opacity:1.0;
        }
        99%{
          opacity:0;
          height:100%;
        }
        100% {
          height:0;
        }
    }
    .page-welcome-layer.hidden{
      animation:fadeOutAndHide ease-in 1.5s;
      animation-fill-mode:forwards;
      animation-iteration-count: 1;
      overflow:hidden;
    }