avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Lun 27 Aoû 2018 - 21:15
Ah oui, mon t a dû se faire manger quand j'ai retiré un espace :s J'l'ai rajouté ^^ Voilà mon essai :


TITRE
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.

Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.

Code:
<style> .base { width:480px; background-color:#436785; margin:auto; } .titre { text-align:center; font-size:48px; color:#ffffff; text-shadow:#123456 1px 1px 1px; padding:15px; } .paragraphe { text-align:justify; font-size:18px; color:#ffffff; text-shadow:#123456 1px 1px 1px; padding:25px; } </style>
<div class="base"><div class="titre">TITRE</div><div class="paragraphe">Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br /><br />Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.<br /><br />Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.</div></div>

Tu mets des pièges, t'es une vilaine :o
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Lun 27 Aoû 2018 - 23:39
Oui j'aime les pièges ! Pour moi tout est bon dans ton code et tu as même rajouté une ombre sur le texte, tu sais comment me parler toi !

On va donc monter encore un peu la difficulté ! Cette fois, je te donne une maquette, et ce sera à toi de la reproduire ! La prochaine sera of course un peu plus compliquée ~

Pour les couleurs, fais comme bon te semble, je demande juste que les bordures restent par contre o/


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Mar 28 Aoû 2018 - 0:10
Voilà ce que j'ai fait :



TITRE DU RP

Un petit sous-titre bien comme il faut


Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.

Cuius acerbitati uxor grave accesserat incentivum, germanitate Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris avida nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.

Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.

Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.

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.

Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.

Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?

Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.

Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.

Quod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.r.


Code:
<style> .first_block { background-color:#DECD93; width:800px; height:1500px; } .imag { background-image:url(https://zupimages.net/up/18/35/dfou.bmp); width:750px; height:316; margin:25px; border-top:#000000 1px solid; border-bottom:#000000 1px solid; border-right:#000000 1px solid; border-left:#000000 1px solid; } .titreuh { text-align:center; font-size:60px; color:#4F4F4F; text-shadow:#000000 1px 1px 2px; } .sous_titre { text-align:center; font-size:20px; color:#4F4F4F; } .cadr { border-top:#000000 1px solid; border-bottom:#000000 1px solid; border-right:#000000 1px solid; border-left:#000000 1px solid; width:750; height:1000px; margin:auto; overflow:auto; } .textou { text-align:justify; margin:30px; color:#4F4F4F; font-size:18; } </style>
<div class="first_block"><br /><div class="imag"></div>
<div class="titreuh">TITRE DU RP</div>
<div class="sous_titre">Un petit sous-titre bien comme il faut</div><br />
<div class="cadr"><div class="textou">Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.

Cuius acerbitati uxor grave accesserat incentivum, germanitate Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris avida nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.

Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.

Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.

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.

Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.

Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?

Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.

Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.

Quod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.r.</div>
</div></div>

Beuh, ici c'est tout moche. Je l'ai d'abord fait là : http://scratchpad.io/pumped-vase-434
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Mar 28 Aoû 2018 - 0:15
Yup alors sur scratchpad c'est niquel, par contre ça merde pas mal ici XD !
Quand tu fais une fiche, n'hésites pas à partir dans quelque chose de petit en largeur, n'hésites pas aussi à abuser des paddings !

Du coup, il faudrait que tu réduises la largeur du bloc principal à 500px graaand maximum !
Et essayes de passer ton CSS sur ce site là > https://www.willpeavy.com/minifier/ pour qu'il soit tout bien compressé tout beau ♥️ !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Mar 28 Aoû 2018 - 0:31
J'y retravaillerai la semaine prochaine :) Je vais aller dormir et comme je suis pas là pendant 5 jours... x) J'aurai le temps de réfléchir à tout ça ^^
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Mar 28 Aoû 2018 - 0:33
No souci, j'attend de voir ça avec impatience !

Bonnes vacances à toi \o/


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Dim 2 Sep 2018 - 21:53
Coucou @Myrddin ! Je suis revenue :3 Voilà, je pense que ça va mieux cette fois-ci pour ton exercice ^^




TITRE DU RP

Sous-titre pour le fun

Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.

Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.

Code:
<style>.boite {margin:auto; width:400px; height:600px; background-color:#DECD93; } .cadre_image {width:300px; height:150px; background-image:url(https://i.goopics.net/krJyb.png); margin:auto; border:#ffffff 1px solid; } .title {text-align:center; color:#ffffff; font-size:32px; text-shadow:#A58354 1px 1px 2px; } .subtitle {text-align:center; color:#ffffff; font-size:18; margin-top:-15px; } .cadre_contenu {width:300px; height:300px; border:#ffffff 1px solid;margin-left:50px; overflow:auto; } .contenu {text-align:justify; color:#ffffff; padding:10px; }
</style>
<div class="boite"><br /><div class="cadre_image"></div><br /><div class="title">TITRE DU RP</div><br /><div class="subtitle">Sous-titre pour le fun</div><br /><div class="cadre_contenu"><div class="contenu">Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.

Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.</div></div></div>
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Dim 2 Sep 2018 - 22:17
C'est exactement ça ! Tu progresses super vite et ça fait plaisir de voir qeu tu retiens correctement tout !
*donne un cookie à la bonne élève* /PAN

Du coup maintenant, on va un peu corser les choses !  Je vais commencer à t'apprendre un hover très simple. Pas le genre de trucs où il se passe des trucs de fou au passage de la souris, mais un simple changement de couleur !
Un hover, c'est quand un truc arrive au passage de la souris. C'est à dire que ton élément de base sera tout le temps comme ça, sauf quand le pointeur de la souris sera dessus ~
Tu peux donc faire tout un tas de choses basiques (changer une couleur, changer une taille, etc...) ! Du coup ici, je vais te donner un exemple détaillé d'un hover qui permet de griser ton image. Á savoir que pour qu'un hover se passe, il faut qu'il y ait déjà une valeur indiquée dans la balise principale. C'est à dire, par exemple, si tu veux que ton texte change de couleur au passage de la souris, il faut déjà lui avoir donné une couleur de base puis une nouvelle dans le hover ~

Par exemple :

Coucou Milou tu veux voir mon concombre ?


Pour l'explication :

Code:

.nameici {
text-align:center; /*tu alignes ton texte*/
font:20px calibri; /*la taille et la police d'écriture*/
color:pink; /*la couleur du texte*/
transition:all 800ms; /*avec cette valeur, tu prépares ton texte à subir une transformation; la transition qui se fera donc, tu lui donnes un temps. Là, elle est à 0.8secondes, soit 800 millisecondes, mais tu peux changer ça comme tu le sens !*/
filter:grayscale(0%); /*ce filtre permet de passer les images en gris -gray-, mais là il est à 0% donc l'image ne changera pas*/
}
.nameici:hover{ /*le :hover dit au CSS que c'est sur cette valeur là qu'une transition va se faire*/
transition:all 800ms; /*une fois encore, tu lui indique que la transition se fera mais se retirera en tant de temps*/
filter:grayscale(100%); /*a 100%, le filtre sera totalement gris*/
}

Du coup pour mettre ça en pratique, je te donne un schéma d'une petite PA toute simple à réaliser ! Il n'y a aura que quelques éléments à mettre, pas une PA complète, pour que tu te fasses doucement la main ~

Les couleurs  :
Fond : #141414
Violet : #9478b3
Blanc : #e0e0e0

Pour les images, mets ce que tu veux, je demande seulement à ce qu'elles se redimentionnent automatiquement à la taille du bloc ! C'est à dire que tu peux mettre une image en 300x300, elle apparaîtra en 50x50 dans le bloc ~

Courage


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Dim 2 Sep 2018 - 23:44
Voilà ce que j'ai fait. Je te laisse le lien scratchpad parce que j'ai un peu la flemme de tout remettre ici à plat, mon cerveau va pas aimer :c Je suppose qu'y a plein de trucs inutiles ou mal utilisés mais au moins j'ai fait quelque chose XD Dans mon résultat, y a seulement le lien vers les prédéfinis qui reste bleu qui me perturbe. J'attends ton commentaire du coup.
http://scratchpad.io/concerned-oranges-6118
Je l'ai sauvegardé sur un autre lien alors tu peux y faire des modifs si ça t'arrange pour m'expliquer certaines choses.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Lun 3 Sep 2018 - 0:02
OMG MAIS TELLEMENT DE PROGRES RAPIDEMENT JE ... Admirer Admirer

Alors tout est quasi parfait ! Déjà je vois que tu as correctement réussi à tout aligner, que les div sont bonnes et dans le bon ordre (oui y'a un ordre /PAN), que les couleurs sont respectées et omg YOU DID IT SO FAST
Je vois quelques petites choses qui me chagrinent par contre, mais rien de grave, c'est tout de même ta toute première PA et franchement c'est du super boulot !!
- Tu abuses beaucoup des /br, tu pourrais facilement éviter ça en mettant sur les blocs au dessus des margin-bottom par exemple, ça éviterai de devoir sauter des lignes comme ça !
- Pour ton conteneur du staff, tu n'as pas besoin d'un margin-left ! Tu peux remplacer par ça :
Code:
.contener_staff {
    width: 420px;
    height: 150px;
    display: inline-block;
    vertical-align: top;
}
C'est à dire agrandir la largeur tout simplement et retirer le margin-left !
- Tu n'es pas obligé de mettre une balise .news dans tes news, un simple padding sur ta balise fond_news suffira ♥️ ! Ce qui ferait quelque chose comme :
Code:
.fond_news {
    width: 250px;
    height: 130px;
    background-color: #9478b3;
    margin-left: 6px;
    overflow: auto;
    padding: 10px;
    display: inline-block;
}
- Tu peux largement enlever le margin-top:-4 sur tes prédéfinis, inutile vu que tu as sauté une ligne !
- Et enfin pour le lien, ça fonctionne un peu différement. Pour le placement, tu peux rester sur ta balise principale (ta balise .line) mais pour tout ce qui est la couleur, la police d'écriture, tout ce qui est décoratif, il faudra rajouter une balise : .lien a. Le "a" veut dire que tu ne te concentres que sur le lien !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Lun 3 Sep 2018 - 0:14
Ok, je crois que j'ai compris la plupart de tes commentaires. Est-ce que tu pourrais juste me faire un résumé de la différence margin/padding ? Je les confonds parfois et c'est seulement en voyant mon code tout cassé que je change, mais je comprends pas à quoi ils servent concrètement.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Lun 3 Sep 2018 - 0:15
Mmh concrétement, le padding permet d'éloigner un texte ou un objet depuis l'intérieur de l'objet (ça éloigne le texte des bords du cadre par exemple) alors que le margin, ça éloigne depuis l'extérieur ... j'sais pas si je suis assez claire XD ! En gros le margin te permet de déplacer un bloc dans l'espace, alors que le padding va aggrandir le bloc depuis l'intérieur !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Lun 3 Sep 2018 - 0:27
Donc, avec le margin, c'est l'élément concerné qui bouge, alors qu'avec le padding, c'est l'entourage de l'élément qui bouge. C'est ça ?
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Lun 3 Sep 2018 - 0:56
Le padding c'est l'intérieur oui ! En gros, visualise ça comme l'intérieur qui éloigne les bordures de l'intérieur du bloc \o/


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Lun 3 Sep 2018 - 11:30
Ok, je crois que j'ai compris du coup. Et pour le lien qui reste bleu dans mon code, tu dis que je dois utiliser un "a". Comment je dois l'utiliser ? Qu'est-ce que je devrais mettre comme code pour que mon lien ait une couleur particulière ?

EDIT : j'ai testé quelques trucs, je suis arrivée à ça
Code:
  .lien {
    text-align:center;
    color:#9478b3;
    text-transform:uppercase;
    margin-top:-25px;
  }
  .lien a {
    color:#9478b3;
    text-decoration:none;
  }
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Lun 3 Sep 2018 - 15:14
Et voilà t'as tout compris \o/ !
Dans le .lien, tu peux enlever la couleur puisque là tu ne cherches qu'à changer la couleur de ton lien uniquement :3 ! Tu peux aussi déplacer le text-transform dans le .lien a puisque ça concerne directement la déco', comme je disais avant :3 ! Tout ce qui est couleur, taille, transformation du texte; etc, tu peux directement le mettre dans ta balise .lien a


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Lun 3 Sep 2018 - 16:14
Ok, merci plz Je crois que tout est ok pour cet exercice-là pour moi :3
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Jeu 6 Sep 2018 - 2:09
Nous allons donc pouvoir passer à ton exercice final !
Cette fois, ce sera un header. Avec image de fond, prédéfinis, staff, contexte et news ! Je ne te demanderai bien sûr pas d'y inclure des valeurs templates parce que ce n'est clairement pas le but, mais de reproduire tout ce que tu verras à l'image !
Ca peut sembler un peu compliqué mais justement, le but étant de te donner un exercice un chouilla plus poussé avec une maquette un peu plus travaillée, pour que tu puisses largement te faire la main ~

La maquette :
> https://imgur.com/iu3fRmf.png (pour pouvoir l'ouvrir de ton côté)
Et voici l'image de fond dont tu auras besoin : https://imgur.com/0fMDtaK.png
Le fond de "event en cours" et "prédéfinis" : https://imgur.com/DoZ99O4.png

Les couleurs :
Violet > #9478b3
Noir > #141414
Gris + bordure grise autour de l'avatar > #626262
Les bordures violettes foncés > #896da8

Naturellement, ce header devra prendre la totalité de la largeur de l'écran ! Le nom du forum doit être un lien, ainsi que les "accueil, membres" et autres liens de la barre de navigation ~
J'aimerais également voir des images différentes pour chaque cadre du staff ou des prédéfinis !


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 3187
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: Classe de Miloule Dim 16 Sep 2018 - 10:22
Coucou Myr ! Avec le gentil crash de Scratchpad, je prendrai un peu plus de temps pour ton exercice, vu que je sais encore moins ce que je fais du coup x)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1607
Designer
Voir le profil de l'utilisateur
# Re: Classe de Miloule Dim 16 Sep 2018 - 12:27
Vive la mort de Scratchpad qui n'aime personne
Prends tout ton temps ♥️


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum