Créer un CSS Popup, de fondu et d'effet

Je veux créer un CSS popup (CSS3 Permis) sans JavaScript, avec un effet de fondu de transition et de l'effet d'échelle. Quelque chose de semblable à IceCream Sandwitch et JellyBean messages popup.

J'ai essayé les suivantes:

http://jsfiddle.net/OMS_/7UaK4/5/

Principales Parties de Code:

HTML 

<span class="info"> Info </span>
<div class="message">
    <p>
        Content
    </p>
</div>​

CSS

.message {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transform: scale(.9, .9);
    -webkit-transition: all .18s ease-in-out;
}
.info:hover + .message {
    opacity: 1;
    -webkit-transform: scale(1, 1);
}

Ce que je suis en train de faire est de définir la opacity de l'élément à 0, et sur hover un frère ou une sœur de l'élément DOM, transtion à 1.

Comment dois-je positionner dans le centre, à la fois verticalement et horizontalement?

Aussi, est-ce la bonne façon de faire un CSS3 popup?

Puis-je la transition de display: none à display: block ?

Grâce

OriginalL'auteur Om Shankar | 2012-12-29

  1. 5

    Comment dois-je positionner dans le centre, à la fois verticalement et horizontalement?

    Essentiellement, vous poussez le popup de 50% à partir du haut et de gauche. Cependant, vous devez revenir en arrière un peu, car il faut prendre en compte la largeur et la hauteur de la fenêtre contextuelle.

    .center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  /* -(height/2) */;
    left: 50%;    margin-left: /* -(width/2) */;
}

    Source: Comment faire pour centrer un objet exactement dans le centre?

    Remarque: -(height/2) et -(width/2) sont les valeurs négatives de la moitié de l'élément de largeur et de hauteur. E. g. si votre élément est 300px x 200px code est:

    .center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  -100px;
    left: 50%;    margin-left: -150px;
}

    Aussi, est-ce la bonne façon de faire un CSS3 popup?

    Oui, si vous parlez d'un hover popup.

    Puis-je la transition à partir de l'affichage: aucun display: block ?

    Pas. Vous allez partir display: none à display: block avec transition seulement sur opacity.

    Désolé pour le retard dans l'acceptation de réponse. Merci pour CSS-tricks lien pour le positionnement dans le centre. J'ai utilisé une fois, mais j'ai oublié ça 🙂

    OriginalL'auteur John Smith