28172 sujets

CSS et mise en forme, CSS3

Contours avec image png

Salut,
J'aimerais fignoler un site en ajoutant des contours avec de la transparence sur les cotés et en bas.
Le résultat serait celui-ci

J'aimerais savoir comment m'y prendre, voici le site en question : http://lyser.fr/jeux/teso/
Modifié par Lyser (26 Mar 2015 - 14:54)
Ahh les Elder Scrolls ! J'ai été bercé au Morrowind, je n'ai pas aimé Oblivion...

Donc, pour le conteneur à designer : une image de contour en top, une image en bottom, et une image centrale en repeat-y.

L'analyse de ce thème Wordpressien vous donnera une idée : Chocotheme. La technique de ce thème date un peu, les images en top et bottom n'ont plus besoin d'être mises dans des div spécifiques, comme à l'époque de la création de ce thème ancien : les pseudo-éléments ::before et ::after pourrons venir à la rescousse.

Vous pouvez aussi utilisez la technique border-image, mais je ne vous la conseillerait pas pour l'instant en raison de son manque de compatibilité avec IE10 et inf.

En ce qui vous concerne plus spécifiquement, la div conteneur doit être plus grande que ce qu'elle est en réalité, ceci afin de pouvoir accueillir un contour créé en png transparents.
Ah oui, j'ai moins joué a Morrowind qu'à Oblivion qui m'a laissé de bons souvenirs, le elderscroll online est lui sympathique Smiley smile

Alors, j'ai essayé de mettre ce bout de code css mais j'arrive pas à choper le bon conteneur, j'ai fait une ptite image png de test, mais elle n'apparait pas.

.x-column {
    border-left: 15px solid transparent; /*juste pour tester le coté gauche*/
    width: 1015px; /*je rajoute 15px pour le png en plus*/
    padding: 0 0 0 15px; /*je créé un espace pour le png*/
    -webkit-border-image: url(http://lyser.fr/jeux/teso/wp-content/uploads/2015/03/contours-tests.png) 30 30 30 30;
    o-border-image: url(http://lyser.fr/jeux/teso/wp-content/uploads/2015/03/contours-tests.png) 30 30 30 30;
    border-image: url(http://lyser.fr/jeux/teso/wp-content/uploads/2015/03/contours-tests.png) 30 30 30 30;
}


J'ai commenté le code, ptet je me plante (surement d'ailleurs vu que ca marche pas Smiley lol , mais je ne sais pas ou...)

Je cois que je ne connais pas assez le développement pour me lancer dans des divs tout ça...
Modifié par Lyser (26 Mar 2015 - 17:58)
Puisque vous optez pour la solution border-image il vous faut définir la taille de cette bordure, avec un border-width (et du coup, plus besoin de changer la taille du conteneur).

Un exemple sur CodePen : border-image.
Sujet clos
Aller à