Soft Ice - Contexte

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. Le code est compatible avec la dernière version de Firefox, Edge et Chrome... le reste n'a pas été testé.



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;
}

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

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

merci

Merci pour le partage !

Merci beaucoup !

Merci beaucoup, simple et très sobre =)

Merci pour le code :)

Merci !

Merciii beaucoup

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 !