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.


7 résultats trouvés pour 6

Onyx

[Codage] Element'style #6 - Différence de style - Dim 1 Déc 2019 - 21:22

Element'style #6


Différence de style



"Détruire pour mieux reconstruire" - On enfile le bleu de travail, on s'arme de peinture, D&co s'invite sur les forum, marouflez moi ces catégories et plus vite que ça ! Cette épreuve portera sur un élément précis de nos chères plateforme de prédilection, à savoir les forum, et plus précisément "ForumActif". L'animateur peut choisir de vous faire travailler sur la navigation, la page d'accueil, les catégories, le footer pourquoi pas, ou le profil, voire le profil et les messages... Il faudra, en respectant les consignes données, mettre en forme l'élément pour qu'il soit le plus harmonieux possible ! Selon les cas, l'animateur pourra imposer des couleurs, une image, une forme...à son choix.


Alors, c'est quoi ce défi?


Suite à la parution de la première gazette de NU, Ayfoth nous propose plusieurs défi. Le but de ce défi est de faire un thème (juste pour des catégories) avec des variables CSS qui ont des différentes de styles dans un élément de la même catégorie.
Par exemple, j'ai 3 forums dans une catégorie. Le premier a un contour rose, le deuxième bleu et le troisième mauve. Cela peut se faire avec les selectors.
Une autre façon serait d'utiliser les media-query pour changer le style d'un élément selon la résolution de l'écran. Bref, il y a plusieurs façons de faire ^^

Voilà les modalités :
- Vous avez jusqu'au 15 Décembre 2019 à 23h59 pour participer
- Vous envoyer les codes (avec un aperçu) directement dans ma boîte MPs
- Vous devez réaliser un thème avec des variables CSS avec des différences de styles dans un élément de la même catégorie

Si vous avez des questions, n'hésitez pas à me demander, je me ferais un plaisir d'y répondre :pompom:

Si vous ne comprenez pas le but du défi, je vous invite à lire la section "codage" de la gazette, cela sera très instructif Wink
Vous pouvez aussi aller dans la section des Tutoriels en codage, il me semble bien que Nihil Scar Winspeare a fait un tutoriel sur le sujet ^^

Bon courage à ceux qui se lancent dans ce défi :yay:

Nihil Scar Winspeare

Partie 2 - Etape 7 : Les positions et le z-index - Dim 13 Sep 2015 - 21:16

Coucou Ayfoth :)

Le position: absolute se place par rapport aux cotés de la page si il n'y a pas dans les parents (= dans les div autour) un élément avec position: relative :)

S'il y a un élément autour avec une position en relative, les éléments en position: absolute vont se mettre par rapport à cet élément là (^-^)

Pour la PA dont du parle par exemple, tu mets la div autour de ta PA en relative, puis tout à l'intérieur en absolute (^-^)

Ce sujet peut peut-être t'aider → Mission #6 - Explique moi... les positions!

Gravity

[Vainqueur: Kathee] Let The Music Play #2 - Lun 31 Aoû 2015 - 21:12

Mon vote ira aussi pour la 4 !
Un petit mot rapide pour chacune des créa':

1# Je trouve l'intégration de la végétation autour du visage un peu raté, idem pour les coups de brushes coloré :/ Le rendu n'est pas assez réaliste, j'apprécie cependant l'utilisation des floues ^^

2# La deux est très jolie,mais je rejoins l'avis de Eha' dans le sens où il y'a moins de travail comparé à la 4. Le stock utilisé était déjà à la base une magnifique création en elle même (que tu as d'ailleurs pensé à créditer, c'est cool ^^). Et j'ai tendance à ne pas valoriser une création qui se base déjà sur une création :hum:

3# La gestion des couleurs est intéressante, pourquoi pas tenter cet aspect multicolor. Mais ce n'est pas vraiment ce que me fais ressentir la musique pour ma part, et je n'accroche pas aux textures appliquées par dessus la femme =)

4# Ma préféré ! Je l'ai trouvé vraiment bien foutu! On a un aspect 3D/futuriste genre rayon XRay qui permet de voir l'intérieur de la tête. Y'a un côté un peu abstrait aussi et la typo va parfaitement dans l'ambiance, vraiment c'est top!

5# Celle-ci aurait pu être intéressante mais je n'ai pas trop compris le choix du format, on a l'impression que ça a été recadré au dernier moment ^^

#6,7&9: Le format là aussi ne conviens pas trop, ça s'apparente plus à une signature plus qu'à un Large Piece travaillé dans l'idée et le concept :/

#8: Elle est assez simple, je sais pas si il s'agit d'une photographie personnelle mais il manque la présence de l'Homme je trouve, qui reste malgré tout au coeur de la musique.

GG à tous en tout cas, c'est cool de voir autant de participations.

(ps: c'est fou comme je perds toutes crédibilité en princesse)

Gravity

[Vainqueur: Kathee] Let The Music Play #2 - Lun 31 Aoû 2015 - 11:42

NyoTheNeko

Mission #6 - Explique moi... les positions! - Jeu 9 Oct 2014 - 15:04

Mission #6 - Explique moi... les positions!



Bonjour à tous! Il est temps pour nous de débuter une nouvelle mission! Petit changement cette fois-ci, car il n'y a pas de code à écrire à proprement parler! En effet, cette mission consiste à expliquer, avec vos propres mots une fonction très utilisée en CSS: le position!
Aucune contrainte donc dans cette mission: expliquez du mieux que vous le pouvez comment utiliser les position!

Quelques pistes


Si vous ne savez pas où commencer, voici quelques pistes! Vous devez bien sûr parler des différents TYPES de position (fixed, absolute et relative), mais vous pouvez aussi parler de top, bottom, left et right, et comment ils affectent votre objet. Vous pouvez aussi penser aux relations entre les différentes sortes de position (relative et absolute). Et si vous avez la foi, vous pouvez bien-sûr parler du z-index! Wink

Bonne chance! =D

Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !

A-Lice

Maitre d'œuvre #1 - Les votes - Nihil gagnante ! - Mar 9 Sep 2014 - 14:44

# 5 par Dakota


   
- Voici mes relations -


   
Nom
   Prénom
   Age
   Faction
   Motivation


   
La famille ... c'est sacré ?

   
   
Les collègues - amis

   
   
Eux, je ne les aime pas

   
   
En gros, j'ai des relations compliquées !

   


Code:
<center><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><div style="width: 565px; height: 1060px; background-color: #151513;"><img src="http://nsa34.casimages.com/img/2014/09/06/140906090505531515.jpg" style="width: 565px;">
    <div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20; position: relative; top: 1em;"></div><div style="font-family: 'Open Sans Condensed'; text-align: center; position: relative; top: 1em; color: #927663; font-size: 18px; letter-spacing: 3px;"> - Voici mes relations - </div><div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20; position: relative; top: 2em;"></div>

    <div style="width: 479px; font-family: 'Open Sans Condensed'; text-align: left; font-size: 15px; color: #f66b20;"><img src="http://nsa34.casimages.com/img/2014/09/06/140906100138295583.jpg" style="width: 150px; height: 100px; float: left;" />Nom
    Prénom
    Age
    Faction
    Motivation</div>

    <div style="display:block; width: 479px;font-family: 'Open Sans Condensed'; text-align: left;  color: #f66b20; font-size: 17px; letter-spacing: 1px;"> La famille ... c'est sacré ? </div><div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20; "></div><img src="http://nsa33.casimages.com/img/2014/09/06/140906103527740292.jpg"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Quiksilver - J'ai un frère, pas d'bol.</a></div>
    <img src="http://nsa33.casimages.com/img/2014/09/06/140906105736499702.jpg"  style=" position: relative; top: 1em;"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Magneto - lui c'est mon père. Méchant, mais je l'aime bien.</a></div>
    <div style="display:block; width: 479px;font-family: 'Open Sans Condensed'; text-align: left; color: #f66b20; font-size: 17px; letter-spacing: 1px;"> Les collègues - amis </div><div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20;"></div><img src="http://nsa33.casimages.com/img/2014/09/06/140906110549405405.jpg"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Iron Man - Trop cool la boite de conserve</a></div>
    <img src="http://nsa34.casimages.com/img/2014/09/06/140906110716146052.jpg"  style=" position: relative; top: 1em;"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Thor - Il cause bizarre mais il est sympa</a></div>
    <div style="display:block; width: 479px;font-family: 'Open Sans Condensed'; text-align: left; color: #f66b20; font-size: 17px; letter-spacing: 1px;"> Eux, je ne les aime pas </div><div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20;"></div><img src="http://nsa34.casimages.com/img/2014/09/06/140906111038710390.jpg"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Des robots cinglés,, larbins en plus</a></div>
    <img src="http://nsa34.casimages.com/img/2014/09/06/140906111140126267.jpg" style=" position: relative; top: 1em;"><div><a href="LIEN ICI" style="display:block; width: 479px; font-family: 'Open Sans Condensed'; text-align: left; color: #927663; font-size: 15px;">Ultron - Encore un robot cinglé, le chef de la bande</a></div>
    <div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20; position: relative; top: 1em;"></div><div style="font-family: 'Open Sans Condensed'; text-align: center; position: relative; top: 1em; color: #927663; font-size: 18px; letter-spacing: 3px;"> En gros, j'ai des relations compliquées ! </div><div style="display:block; width: 479px; border-bottom:solid 1px; color: #f66b20; position: relative; top: 2em;"></div>
    </div></center>


#6 par Onyx

League
Dr. Mildly Overcast

Nom : Krats.

Prénom : Ynot.

Surnom : Dr. Mildly Overcast.

Âge : Cette donnée est inconnue.

Métier : Docteur en Météorologie et Supervilain.

Objectif : La domination du monde par le contrôle des micro-climats et par la maîtrise des catastrophes naturelles.

Pouvoirs : Une intelligence supérieure, une armure en métal et une armée de robots météorologiques.


Observez mon apparence...
Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
... sans me démasquer.


Plongez dans ma psychée...
Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
... sans vous y perdre.


Laissez-moi vous raconter...
Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
... mon histoire.


Le joueur du grenier
Prénom : Chose.
Âge : 99 ans.
Sexe : Nope.
Tu as un parrain? Nope.
Quel est ton avatar ? Doctor Doom.
As-tu lu le règlement? Yep!
Comment as-tu connu le forum? Mystère.
Le fofo, t'en penses quoi? ... Joker? *siffle*


Code:
<link href='http://fonts.googleapis.com/css?family=Lobster|Marvel' rel='stylesheet' type='text/css' /><center><div style="margin-left: 20px; text-align: center; margin-top: 55px; width: 480px; border-top: solid 20px #c4c4c4; border-bottom: solid 20px #c4c4c4; background: #202020; color: #c4c4c4; padding: 30px; text-shadow: 1px 1px 0px #000000; position: relative;"><div style="position: absolute; top: -80px; left: -65px; z-index: 3;"><img src="http://img15.hostingpics.net/pics/366827League2.png" alt="League" /></div><span style="padding-right: 30px; padding-left: 30px; font-variant: small-caps; font-size: 48px; border-bottom: 3px dotted #c4c4c4; font-weight: bold; text-shadow: 2px 2px 0px #000000; font-family: marvel;">Dr. Mildly Overcast</span>

<table style="width: 100%; margin-top: 25px; margin-bottom: 20px; padding: 10px; border-radius: 50px 20px 50px 20px; background: #101010; box-shadow: 0px 0px 5px 2px #000000;"><tr><td width="200"><div style="border-radius: 50px 20px 50px 20px; box-shadow: 0px 0px 5px 2px #000000; width: 200px; height: 350px; background: url('http://img4.hostingpics.net/pics/377775sasss.png');"></div></td><td align="left" style="padding-left: 15px; padding-right: 15px;"><div style="font-family: verdana; font-size: 12px; overflow: auto; max-height: 350px;"><span style="font-size: 16px; font-weight: bold; font-family: marvel;">Nom : </span>Krats.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Prénom : </span>Ynot.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Surnom : </span>Dr. Mildly Overcast.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Âge : </span>Cette donnée est inconnue.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Métier : </span>Docteur en Météorologie et Supervilain.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Objectif : </span>La domination du monde par le contrôle des micro-climats et par la maîtrise des catastrophes naturelles.

<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Pouvoirs : </span>Une intelligence supérieure, une armure en métal et une armée de robots météorologiques.</div></td></tr></table>

<table width="100%" cellspacing="0" cellpadidng="0"><tr><td align="left" style="padding-left: 25px;"><span style="display: inline-block; border-radius: 20px 20px 0 0; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">Observez mon apparence...</span></td></tr><tr><td align="center"><div style="border-radius: 20px; background: #101010; box-shadow: 0px 0px 5px 2px #000000; padding: 10px; text-align: justify; font-family: verdana; font-size: 12px; position: relative; z-index: 2;">Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</div></td></tr><tr><td align="right" style="padding-right: 25px;"><span style="display: inline-block; border-radius: 0 0 20px 20px; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">... sans me démasquer.</span></td></tr></table>

<table width="100%" cellspacing="0" cellpadidng="0"><tr><td align="left" style="padding-left: 25px;"><span style="display: inline-block; border-radius: 20px 20px 0 0; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">Plongez dans ma psychée...</span></td></tr><tr><td align="center"><div style="border-radius: 20px; background: #101010; box-shadow: 0px 0px 5px 2px #000000; padding: 10px; text-align: justify; font-family: verdana; font-size: 12px; position: relative; z-index: 2;">Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</div></td></tr><tr><td align="right" style="padding-right: 25px;"><span style="display: inline-block; border-radius: 0 0 20px 20px; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">... sans vous y perdre.</span></td></tr></table>

<table width="100%" cellspacing="0" cellpadidng="0"><tr><td align="left" style="padding-left: 25px;"><span style="display: inline-block; border-radius: 20px 20px 0 0; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">Laissez-moi vous raconter...</span></td></tr><tr><td align="center"><div style="border-radius: 20px; background: #101010; box-shadow: 0px 0px 5px 2px #000000; padding: 10px; text-align: justify; font-family: verdana; font-size: 12px; position: relative; z-index: 2;">Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.

Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</div></td></tr><tr><td align="right" style="padding-right: 25px;"><span style="display: inline-block; border-radius: 0 0 20px 20px; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">... mon histoire.</span></td></tr></table>

<table width="100%" cellspacing="0" cellpadidng="0"><tr><td align="left" style="padding-left: 25px;"><span style="display: inline-block; border-radius: 20px 20px 0 0; background: #151515; box-shadow: 0px 0px 5px 2px #000000; padding: 3px; padding-right: 15px; padding-left: 20px; font-family: lobster; font-size: 14px;">Le joueur du grenier</span></td></tr><tr><td align="center"><table style="width: 100%; position: relative; z-index: 2; padding: 10px; border-radius: 20px 50px 20px 50px; background: #101010; box-shadow: 0px 0px 5px 2px #000000;"><tr><td width="150"><div style="border-radius: 20px 50px 20px 50px; box-shadow: 0px 0px 5px 2px #000000; width: 150px; height: 150px; background: url('http://img4.hostingpics.net/pics/377775sasss.png');"></div></td><td align="left" style="font-family: verdana; font-size: 12px; padding-left: 15px; padding-right: 15px;"><div style="overflow: auto; height: 150px;"><span style="font-size: 16px; font-weight: bold; font-family: marvel;">Prénom : </span>Chose.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Âge : </span>99 ans.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Sexe : </span>Nope.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Tu as un parrain? </span>Nope.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Quel est ton avatar ? </span>Doctor Doom.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">As-tu lu le règlement? </span>Yep!
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Comment as-tu connu le forum? </span>Mystère.
<span style="font-size: 16px; font-weight: bold; font-family: marvel;">Le fofo, t'en penses quoi? </span>... Joker? *siffle*</div></td></tr></table></td></tr></table></div></center>


#7 par Alzufen








Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae justo nec massa pretium mattis. Phasellus consectetur euismod ipsum in pharetra. Vivamus quis efficitur sem. Nullam varius sapien orci, id vulputate quam hendrerit non. Maecenas sagittis massa enim, eu sagittis mauris commodo efficitur. Donec in malesuada mi. Mauris tempor fermentum lacinia. Integer aliquam vitae nulla eu ullamcorper. Praesent imperdiet porttitor suscipit. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis imperdiet velit felis, quis dignissim lectus finibus eget. Quisque ultricies consectetur massa. Vestibulum eleifend lacinia congue. Praesent at dolor nunc.


Donec eleifend condimentum ligula id ornare. Nam eget tristique nunc, nec porttitor dui. Etiam auctor eros quis venenatis rutrum. Donec sagittis, risus ut elementum volutpat, dui risus ultrices orci, nec condimentum libero velit eu augue. Integer fringilla varius sapien, sed semper purus elementum quis. Nullam pulvinar cursus enim, sed placerat odio. Nunc eu condimentum lectus. Cras ut sem fermentum, varius sem volutpat, vulputate dui. Maecenas a hendrerit turpis, at ullamcorper nisl. Donec vel leo fringilla, scelerisque magna sit amet, suscipit ex. Ut venenatis, ligula condimentum tempus fermentum, turpis nisl congue ipsum, non consequat nulla lectus eget mauris. Nam id nisl felis. Phasellus quis malesuada dolor. Fusce mattis ultricies neque eu accumsan. Nam nec feugiat lectus.


Morbi luctus non nisl sit amet aliquam. Mauris vitae neque nulla. Nulla tempus mattis dictum. Curabitur ac massa in dolor fringilla pellentesque quis ac nibh. In facilisis lacinia justo, nec convallis sapien.

Maecenas convallis tellus id fermentum imperdiet. Sed porttitor turpis at odio rutrum, consectetur commodo ex commodo. Curabitur id finibus dolor, sed tristique justo. Pellentesque mattis mollis ligula, gravida luctus tortor dapibus quis. Morbi cursus lorem arcu, eget venenatis tortor venenatis eget. Curabitur venenatis congue eros, at blandit nunc fermentum non. Donec ut faucibus quam. Praesent dictum felis ac nisi maximus, id lacinia mauris dignissim. Integer in feugiat justo, vitae ultricies enim. Ut eleifend porttitor metus.

Donec pretium convallis erat, ac ullamcorper turpis. Curabitur mauris odio, tristique nec dolor eu, lacinia rutrum dui. Duis varius in lectus eget tempus. Fusce et est at odio viverra rutrum in eu orci. In elit lectus, hendrerit sit amet faucibus mattis, euismod a arcu. Pellentesque sodales libero urna, at rutrum orci elementum a. Etiam ipsum eros, cursus at ex ac, mattis molestie mi. Sed mauris libero, blandit tincidunt quam eu, laoreet dignissim nulla. Donec tempus massa nisl, eget mattis felis sodales nec.

Donec a orci id nisl sagittis ullamcorper. Aenean nunc ipsum, rutrum eget posuere sed, lacinia non magna. Mauris tortor urna, luctus ut efficitur at, egestas in urna. In hac habitasse platea dictumst. Integer ac mauris eu mauris lacinia fermentum. Praesent nec metus eu nibh porta tempor. Sed quis turpis turpis. Quisque congue urna elit, at hendrerit dui eleifend in. Donec at feugiat dui. Aliquam sit amet dui eu massa tincidunt rhoncus. Mauris orci nisl, imperdiet eu nisl id, sagittis blandit odio.



Code:
<div style="display: none;"><link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css' />

<style>#james_imagec{display: inline-block; height: 196px; width: 136px; position: relative; border: 2px solid #000; border-top: 0; margin-left: -4px; font: 13px 'Handlee'; text-align: center; overflow: hidden;} #james_imagec span{position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: #fff; z-index: 999; transition: 1s all; } #james_imagec:hover span{opacity: 1;}#fiche_br br{display: none;}.fiche_br br{display: block;}</style>

</div><div style="width: 436px; height: 596px; margin: auto;" id="fiche_br">
<div class="fiche_br">
<div style="display: inline-block; background: url(http://image.noelshack.com/fichiers/2014/36/1410124848-1410122555-james-buchanan-bucky-barnes-full-1719689.jpg) top left; height: 196px; width: 107px; border: 2px solid #000;"></div>
<div style="display: inline-block; height: 196px; width: 214px; border: 2px solid #000; border-left: 0; margin-left: -4px; overflow: auto; font: 13px 'Handlee'; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae justo nec massa pretium mattis. Phasellus consectetur euismod ipsum in pharetra. Vivamus quis efficitur sem. Nullam varius sapien orci, id vulputate quam hendrerit non. Maecenas sagittis massa enim, eu sagittis mauris commodo efficitur. Donec in malesuada mi. Mauris tempor fermentum lacinia. Integer aliquam vitae nulla eu ullamcorper. Praesent imperdiet porttitor suscipit. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis imperdiet velit felis, quis dignissim lectus finibus eget. Quisque ultricies consectetur massa. Vestibulum eleifend lacinia congue. Praesent at dolor nunc.</div>
<div style="display: inline-block; background: url(http://image.noelshack.com/fichiers/2014/36/1410124432-james-buchanan-bucky-barnes-600-1700441.jpg) top center; height: 196px; width: 107px; border: 2px solid #000; border-left: 0; margin-left: -4px;"></div></div><div class="fiche_br">
<div style="display: inline-block; height: 196px; width: 146px; border: 2px solid #000; border-top: 0; overflow: auto; font: 13px 'Handlee'; direction: rtl;">Donec eleifend condimentum ligula id ornare. Nam eget tristique nunc, nec porttitor dui. Etiam auctor eros quis venenatis rutrum. Donec sagittis, risus ut elementum volutpat, dui risus ultrices orci, nec condimentum libero velit eu augue. Integer fringilla varius sapien, sed semper purus elementum quis. Nullam pulvinar cursus enim, sed placerat odio. Nunc eu condimentum lectus. Cras ut sem fermentum, varius sem volutpat, vulputate dui. Maecenas a hendrerit turpis, at ullamcorper nisl. Donec vel leo fringilla, scelerisque magna sit amet, suscipit ex. Ut venenatis, ligula condimentum tempus fermentum, turpis nisl congue ipsum, non consequat nulla lectus eget mauris. Nam id nisl felis. Phasellus quis malesuada dolor. Fusce mattis ultricies neque eu accumsan. Nam nec feugiat lectus.</div>
<div id="james_imagec">
<div style="background: url(http://image.noelshack.com/fichiers/2014/36/1410124776-james-buchanan-bucky-barnes-600-1728336.jpg) top center; height: 196px; width: 136px;"></div><span>Morbi luctus non nisl sit amet aliquam. Mauris vitae neque nulla. Nulla tempus mattis dictum. Curabitur ac massa in dolor fringilla pellentesque quis ac nibh. In facilisis lacinia justo, nec convallis sapien.</span></div>
<div style="display: inline-block; height: 196px; width: 146px; border: 2px solid #000; border-left: 0; border-top: 0; margin-left: -4px; overflow: auto; font: 13px 'Handlee';">Maecenas convallis tellus id fermentum imperdiet. Sed porttitor turpis at odio rutrum, consectetur commodo ex commodo. Curabitur id finibus dolor, sed tristique justo. Pellentesque mattis mollis ligula, gravida luctus tortor dapibus quis. Morbi cursus lorem arcu, eget venenatis tortor venenatis eget. Curabitur venenatis congue eros, at blandit nunc fermentum non. Donec ut faucibus quam. Praesent dictum felis ac nisi maximus, id lacinia mauris dignissim. Integer in feugiat justo, vitae ultricies enim. Ut eleifend porttitor metus.</div></div><div class="fiche_br">
<div style="display: inline-block; height: 196px; width: 213px; border: 2px solid #000; border-top: 0; overflow: auto; font: 13px 'Handlee';">Donec pretium convallis erat, ac ullamcorper turpis. Curabitur mauris odio, tristique nec dolor eu, lacinia rutrum dui. Duis varius in lectus eget tempus. Fusce et est at odio viverra rutrum in eu orci. In elit lectus, hendrerit sit amet faucibus mattis, euismod a arcu. Pellentesque sodales libero urna, at rutrum orci elementum a. Etiam ipsum eros, cursus at ex ac, mattis molestie mi. Sed mauris libero, blandit tincidunt quam eu, laoreet dignissim nulla. Donec tempus massa nisl, eget mattis felis sodales nec.</div>
<div style="display: inline-block; height: 196px; width: 213px; border: 2px solid #000; border-left: 0; border-top: 0; margin-left: -4px; overflow: auto; font: 13px 'Handlee'; direction: rtl; text-align: left;">Donec a orci id nisl sagittis ullamcorper. Aenean nunc ipsum, rutrum eget posuere sed, lacinia non magna. Mauris tortor urna, luctus ut efficitur at, egestas in urna. In hac habitasse platea dictumst. Integer ac mauris eu mauris lacinia fermentum. Praesent nec metus eu nibh porta tempor. Sed quis turpis turpis. Quisque congue urna elit, at hendrerit dui eleifend in. Donec at feugiat dui. Aliquam sit amet dui eu massa tincidunt rhoncus. Mauris orci nisl, imperdiet eu nisl id, sagittis blandit odio.</div></div>
</div>

Morpic

Batman | Arkham City - Mar 24 Juin 2014 - 23:31

Salut à tous et bienvenue dans un nouveau tuto !
Ici on apprend en s'amusant !

On va donc réaliser une signature sur le thème des héros puisque c'est le sujet du thème du 7ème anniversaire du forum !
Le but ici est de mettre en valeur notre personnage (d'autres astuces dans la mission #6)
Et quoi de mieux que Batman, le héros de l'ombre ??!!

Rendu :
Tag 6 sur Never Utopia - graphisme, codage et game design 1403645058-batman4


Ressources:


Tuto:


Revenir en haut

La date/heure actuelle est Ven 26 Avr 2024 - 20:09