AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Soft Ice - Contexte

    Solaris
    Solaris
    FémininAge : 35Messages : 98

    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
    Anonymous
    Invité

    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
    Likilou
    Likilou
    MasculinAge : 30Messages : 307

    Sam 25 Fév 2017 - 16:30

    merci



    css - Soft Ice - Contexte 707828SignArthur2
    Anonymous
    Invité

    Sam 25 Fév 2017 - 23:17

    Merci pour le partage !
    avatar
    Ardy
    MasculinAge : 23Messages : 51

    Dim 9 Avr 2017 - 16:48

    Merci ! ♥
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Mer 5 Juil 2017 - 13:46

    Merci beaucoup !
    Nathouille
    Nathouille
    FémininAge : 32Messages : 70

    Sam 9 Déc 2017 - 11:19

    Merci beaucoup, simple et très sobre =)
    Anonymous
    Invité

    Sam 9 Déc 2017 - 17:41

    Merci pour le code :)
    Illumina
    Illumina
    FémininAge : 25Messages : 7

    Lun 20 Mai 2019 - 22:00

    Merci !
    NewtScamy
    NewtScamy
    Messages : 7

    Dim 4 Oct 2020 - 17:57

    Merciii beaucoup Very Happy
    Kaehlyth
    Kaehlyth
    FémininAge : 29Messages : 15

    Sam 30 Avr 2022 - 23:13

    C'est une présentation super glacieuse (Héhé jeu de mots, tout ça...) pour présenter un univers en chapitre, ou tout autre chose !

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 22:32