AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Soft Ice - Contexte

    Partagez
    avatar
    Solaris
    MasculinAge : 28Messages : 98

    le Mer 1 Fév 2017 - 20:45



    Soft Ice - Contexte



    Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.


    Bien le bonjour à vous ! C'est caché là, pour proposeeeeeeer ! >< Bref.

    Voici mon premier libre service. Je compte faire un pack contenant plusieurs élément regroupés sous le nom "Soft Ice". En voici un aperçu. Le fond bleu pâle autour du cadre n'est pas fourni. Very Happy Le code est compatible avec la dernière version de Firefox, Edge et Chrome... le reste n'a pas été testé.

    Pour rappel, il est interdit d'enlever la signature de la fiche. Merci de votre compréhension


    Voici le HTML :

    Code:
    <div class="soft-ice-container"><img class="soft-ice-image" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration du contexte" /><section class="soft-ice-content-container"><div class="soft-ice-title soft-ice-title-big">À l'aube d'un Lorem Ipsum</div>
    <div class="soft-ice-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="soft-ice-title">Chapitre 1</div>
    <div class="soft-ice-text"><img class="soft-ice-image-round left" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.<div class="soft-ice-clear"></div></div>
    <div class="soft-ice-title">Chapitre 2</div>
    <div class="soft-ice-text"><img class="soft-ice-image-round right" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<div class="soft-ice-clear"></div></div>
    <div class="soft-ice-title">Chapitre 3</div>
    <img class="soft-ice-image soft-ice-image-secondary" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration contexte 2" /><div class="soft-ice-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
    <small>Codage © Solaris @ Never-Utopia</small></section></div>

    Ainsi que le code CSS :

    Code:
    .soft-ice-container {
       background-color: #fff;
       border-style: solid;
       border-width: 2px 1px;
       border-color: #a6beee;
       border-radius: 1em 1em 1em 1em / 3em 3em 3em 3em;
       color: #414245;
       overflow: hidden;
       box-shadow: 0 0 3px 0 #a6beee;
       text-shadow: 3px 4px 3px #a6beee;
    }

    .soft-ice-image {
       width: 100%;
       border-radius: 0 0 50% 50% / 0 0 15px 15px;
       border-bottom: 2px solid #a6beee;
       height: auto;
    }

    .soft-ice-image-secondary {
       margin: 0 5%;
       width: 90%;
    }

    .soft-ice-content-container {
       padding: 0.5em 1em 1em;
    }

    .soft-ice-title {
       border-bottom: 2px solid #a6beee;
       border-left: 1px solid #a6beee;
       border-radius: 1em 0 0 1em;
       font-size: 20px;
       padding: 0.25em 1em;
       margin-right: 0.75em;
       position: relative;
    }

    .soft-ice-title::after {
       content: "";
       position: absolute;
       width: 0.5em;
       height: 1em;
       right: -0.5em;
       bottom: -2px;
       border-style: solid;
       border-width: 1px 2px 2px 0;
       border-color: #a6beee #a6beee #a6beee transparent;
       border-radius: 0 0.5em 0.5em 0;
    }

    .soft-ice-title::before {
       content: "";
       position: absolute;
       width: 0.25em;
       height: 0.5em;
       right: 0;
       bottom: 1em;
       border-style: solid;
       border-width: 0 0 1px 1px;
       border-color: transparent transparent #a6beee #a6beee;
       border-radius: 0.25em 0 0 0.25em;
    }

    .soft-ice-title-big {
       font-size: 30px;
       margin-bottom: 0.25em;
    }

    .soft-ice-text {
       position: relative;
       margin: 0 1em;
       padding: 5px 5px 7px;
       border-bottom: 1px solid #a6beee;
    }

    .soft-ice-text::before {
       content: "";
       position: absolute;
       left: -0.5em;
       bottom: -1px;
       height: 1em;
       width: 0.5em;
       border-bottom: 1px solid #a6beee;
       border-left: 1px solid #a6beee;
       border-radius: 1em 0 0 1em;
    }

    .soft-ice-text::after {
       content: "";
       position: absolute;
       right: -0.5em;
       bottom: -1px;
       height: 1em;
       width: 0.5em;
       border-bottom: 1px solid #a6beee;
       border-right: 1px solid #a6beee;
       border-radius: 0 1em 1em 0;
    }

    .soft-ice-image-round {
       width: 150px;
       height: auto;
       border: 1px solid #a6beee;
       border-radius: 50%;
    }

    .soft-ice-image-round.left {
       float: left;
       margin-right: 1em;
    }

    .soft-ice-image-round.right {
       float: right;
       margin-left: 1em;
    }

    .soft-ice-clear {
       clear: both;
    }

    Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS
    Il est recommandé de mettre un retour chariot (un appui sur la touche entrée) après le titre principal, ainsi qu'autour des titres secondaires, à des fins esthétiques, mais aussi de clarté.


    Voici comment utiliser au mieux ce template de contexte


    Tout ce qui suit est à placer dans la section .soft-ice-content-container, avant la balise small.

    .soft-ice-title : Pour tous les titres
    .soft-ice-title-big : Pour les titres principaux

    .soft-ice-text : Bloc de texte
    .soft-ice-image-round : Dans un bloc de texte, sert à placer une image ronde
    .left ou .right : Couplé avec .soft-ice-image-round, permet de placer l'image à gauche ou à droite respectivement. L'une des deux est obligatoire
    .soft-ice-clear : Juste avant la fermeture de la div .soft-ice-text, mais seulement s'il y a une image en .left ou .right

    .soft-ice-image : Une image large, avec une bordure en dessous.
    .soft-ice-image-secondary : Classe pour les images secondaires du message, mais pas les rondes.


    Liens vers les autres modèles :
    Rien pour le moment


    Dernière édition par Solaris le Dim 12 Fév 2017 - 14:46, édité 1 fois
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Dim 12 Fév 2017 - 11:43

    Salut !

    Merci à toi pour ce LS. Ton code m'a l'air bien, mais il faudrait que tu donne une capture d'écran du rendu de ton code.

    Une fois que ce sera fait, nous pourront valider ton LS



    Présence réduite.
    avatar
    Likilou
    MasculinAge : 24Messages : 297

    le Sam 25 Fév 2017 - 16:30

    merci



    avatar
    Kelalin
    FémininAge : 25Messages : 1621

    le Sam 25 Fév 2017 - 23:17

    Merci pour le partage !
    avatar
    Ardy
    FémininAge : 15Messages : 50

    le Dim 9 Avr 2017 - 16:48

    Merci ! ♥





    © Volt, Star Malgré Lui, le film.


    avatar
    Lakia
    FémininAge : 19Messages : 97

    le Mer 5 Juil 2017 - 13:46

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Mar 26 Sep 2017 - 9:07