← Article précédent Article suivant →
Publié le 14 mai 2015
Concept Design

Une carte réalisée seulement avec de l'HTML et CSS, sans JavaScript. Ce tutoriel introduit une nouvelle série j'ai nommé "Concept Design".

Tutoriel HTML5 / CSS3 - Carte Article UI

Avant de débuter


Cette série de tutoriels intitulée "Concept Design" a pour but de convertir en code les concepts de design que nous pouvons voir sur la toile. En effet, de plus en plus nous voyons des concepts de design voir le jour, s'en suit alors des réalisations originales de designers. J'ai alors eu l'idée de réaliser le développement de ces créations et de vous les partager sous forme de tutoriels.
N'hésitez pas à me partager des liens de concept design qui pourraient faire l'objet d'un nouveau tutoriel dans cette série.

A l'origine de ce design


Qu'est-ce que c'est ?


Cette petite carte peut être utilisé pour vos articles sous forme de ticket ou autres. Elle peut très bien s'adaptée à un système de grille quelconque.
En survolant la carte à l'aide du curseur, une courte description du contenu en question apparaît. Ca permet à l'utilisateur de toujours avoir le visuel, ici l'image, du contenu et si il le souhaite alors en savoir plus avant de cliquer. Ce concept prend moins de place que d'afficher et le visuel et la description à la fois.

Une histoire de code


Nous n'avons pas besoin de faire appel à JavaScript ici, HTML et CSS suffisent.
En effet, la petite astuce est de cacher la description derrière l'en-tête du corps de la carte. Lors du survol de la carte, alors on déplace cet en-tête vers le haut et rend visible la description.

Je travaille dans un fichier "index.html" pour la structure et un fichier "style.css" pour le style. Je ne mets que le code permettant de faire la carte, vous pouvez télécharger le code en entier à l'aide du bouton "Code source" ci-dessus. Mais essayez de bien comprendre avant de le télécharger. :) Allez hop, on passe au code, c'est parti !

La structure HTML


On structure notre page via HTML de façon à adopter une certaine hiérarchie pour notre carte.
<div class="card">

    <!-- En-tête de la carte -->
    <div class="card-header">

        <!-- Le masque pour l'effet d'assombrissement lors du survol -->
        <div class="card-header-mask">
            <div class="card-header-date">
                <div class="card-header-date-day">12</div>
                <div class="card-header-date-month">May</div>
            </div>
        </div>
        
    </div>

    <!-- Corps de la carte -->
    <div class="card-body">

        <!-- En-tête du corps -->
        <div class="card-body-header">
            <div class="card-body-category">Photos</div>
            <h1>True Paradise on Earth: Unknown Place</h1>
            <p class="card-body-sentence">
                They call it <span>"</span>God's Own Country.<span>"</span>
            </p>
        </div>

        <!-- Description cachée par l'en-tête -->
        <p class="card-body-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Molestias autem aliquid, recusandae maiores iste fuga,
            explicabo dolor vitae magnam!
        </p>

        <!-- Pied de la carte -->
        <div class="card-body-footer">
            <i class="icon icon-time"></i> 6min. read
            <i class="icon icon-comment"></i> 39 comments
        </div>

    </div>

</div>

Le style


On passe au CSS pour styliser le tout.

Reset CSS


Nous allons utiliser le bout de code Reset CSS afin d'avoir un rendu similaire en terme d'espaces, marges, etc. pour les différents navigateurs que nous utilisons.
html, body, div, span, applet, object, iframes,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.card : conteneur principal de notre carte


On commence par le conteneur principal de notre carte que l'on centre verticalement et horizontalement par rapport à notre page à l'aide de la propriété "transform". Ici on donne une largeur fixe à notre carte.
.card {
    cursor: default;
    position: relative;
    width: 371px;
    top: 50%;
    left: 50%;
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    transform: -o-translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.card-header : en-tête et animation zoom image


Maintenant on passe à l'en-tête de notre carte. Celle-ci prend toute la largeur et comporte une image de fond qui prend toute sa largeur et la hauteur. On ajoute une transition qui sera de 0.3s pour animer notre image de fond. Le timing des transitions de ce tutoriel aura toujours pour valeur "ease-in-out" pour que ce soit lent du début à la fin, mais pas trop. :D

Lorsque l'on survol notre carte, on modifie la taille de notre fond (image) en l'augmentant de +32px autant en largeur qu'en hauteur. Pour rester centrer, on modifie également la position en Y et en X par rapport à l'augmentation de notre taille. Lorsque l'on survol notre carte, notre image a un petit effet de zoom par le centre.
.card-header {
    width: 371px;
    height: 235px;
    background: url(../images/background.jpg) no-repeat;
    background-size: 371px 235px;
    background-position: 0 0;
    border-radius: 1px 1px 0 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.card:hover .card-header {
    background-size: 403px 267px;
    background-position: -16px -16px;
}

.card-header-mask : masque pour l'assombrissement de l'image


Notre en-tête est également composé d'un masque permettant l'effet d'assombrissement lors du survol de la carte. Ce masque recouvre l'en-tête dans sa globalité, du coup toute l'image.

Pendant le survol de la carte, on attribue une couleur de fond noire à notre masque avec une opacité de 0.6 pour conserver une transparence.
.card-header-mask {
    height: 100%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.card:hover .card-header-mask {
    background-color: rgba(0, 0, 0, .6);
}

.card-header-date, .card-body-category : date et catégorie


On stylise ici la date se trouvant dans l'en-tête de notre carte ainsi que la catégorie de notre contenu, ici "Photos" pour l'exemple.
.card-header-date, .card-body-header-category {
    text-transform: uppercase;
    background-color: #EF5A31;
    color: #FFF;
    font-weight: bold;
    text-align: center;
}

.card-body-header-category {
    position: absolute;
    font-size: 13px;
    top: -31px;
    left: 0;
    padding: 8px 14px;
    line-height: 15px;
}

.card-header-date {
    float: right;
    margin: 20px 20px 0 0;
    border-radius: 50%;
    font-weight: bold;
    padding: 12px 15px;
    line-height: 15px;
}

.card-header-date-day {
    font-size: 18px;
}

.card-header-date-month {
    font-size: 11px;
}

.card-body : corps de notre carte


Le corps de notre carte comporte un en-tête, la description cachée, et le pied de notre carte.
.card-body {
    background-color: #FFF;
    border-radius: 0 0 1px 1px;
    padding: 0 26px 26px 26px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.card-body-header : en-tête du corps et animation de déplacement vers le haut


L'en-tête de notre corps est en position "absolute", mais pourquoi ? Rappelez-vous cet en-tête cache la description de notre carte, il faut donc qu'il puisse la superposer.

Lorsque l'on survol notre carte, alors on fait monter cet en-tête de 141px, le tout en étant animé avec la propriété "transition" que l'on a attribué à notre classe.
.card-body-header {
    position: absolute;
    left: 0;
    padding: 26px;
    background-color: #FFF;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.card:hover .card-body-header {
    margin-top: -141px;
}

Eléments de l'en-tête de notre corps


Ici rien d'exceptionnel, on stylise le titre de notre contenu ainsi qu'une petite phrase greffée sous notre titre.
h1 {
    color: #23282D;
    letter-spacing: -1px;
    font-size: 24px;
    font-weight: bold;
}

.card-body-header-sentence {
    color: #EF5A31;
    margin-top: 14px;
    font-size: 19px;
}

.card-body-header-sentence span {
    font-style: italic;
}

.card-body-description : description et apparition


Voici notre fameuse description, le texte qui s'affiche au survol de notre carte. Nous attribuons une opacité de 0 de façon à ce qu'elle ne soit pas visible. De plus, nous attribuons une transition à 0.2s pour le retour de l'animation, une fois que le curseur ne survolera plus la carte pour qu'il y ai une disparition plus rapide que l'apparition.

Lors du survol de la carte on attribue une opacité à 1 pour que la description soit totalement visible et une transition d'une demi-seconde. Ce temps permet un effet de succession : une fois l'en-tête de notre corps remonté, alors notre description apparaît en fondu.
.card-body-description {
    opacity: 0;
    color: #757B82;
    line-height: 30px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.card:hover .card-body-description {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.card-body-footer : c'est le pied !


Bon, je m'en vois navré pour ce jeu de mot. :)
Nous arrivons à la fin de notre carte, et oui ! Après la tête, le corps, on a le bas, ici le pied de la carte.
.card-body-footer {
    position: relative;
    z-index: 10;
    margin-top: 14px;
    font-size: 14px;
    color: #9FA5A8;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

.icon-time {
    margin-top: -3px;
    width: 10px;
    height: 17px;
    background: url(../images/icon-time.png) no-repeat;
}

.icon-comment {
    margin-top: -2px;
    margin-left: 12px;
    width: 14px;
    height: 14px;
    background: url(../images/icon-comment.png) no-repeat;
}

Contact


Si vous rencontrez des difficultés ou des erreurs en rapport avec ce tutoriel, contactez-moi via mon adresse email ou Twitter.

Faites-moi parvenir des créations de ce type, on verra ce que l'on pourra faire. :)

Partagez


En espèrant que ce tutoriel vous ait plu ! En attendant les prochains, n'hésitez pas à le partager en cliquant sur les boutons ci-dessous.