En fait ce serait plutôt "Le codage pour les graphistes 8D" LE CODAGE POUR LES FLEMMARDS *comme moi quoi*
Bon alors c'est trèèèès simple Vous êtes graphiste ? Vous utilisez Photoshop/Gimp/photofiltre et vous aimeriez avoir de beaux "codes" ? Et bien bienvenue dans ce tutoriel assez original ! Alors en fait l'astuce, c'est de faire le fond... C'est déjà une première approche au codage, ce sera votre base. C'est très simple Alors vous faites votre "planche". Armez vous d'imagination ! Vous n'êtes pas graphiste pour rien ! On commence par très facile, pour débuter !
Exemple 1 Alors là c'est vraiment simple. Mais ça marche seulement si vous avez la transparence bien sûr (donc pas Photofiltre, mais bon vous pouvez prendre le fond du forum, attention par contre il change tous les deux mois ). Alors j'ai pris cette image : https://2img.net/r/hpimg15/pics/710846notration.png Ensuite il faudra donc que cette image soit votre fond. Fond se dit "Background" en anglais (et oui l'anglais vous suivra partout è_é ) Bref, vous voulez que ce background soit une image. Facile, ça donne ....?? *Dora* Background-image, bravo !! Bon alors pour mettre un fond, il vous faut le mettre dans la balise "div style".
Code:
<div style="background-image:url('')">
Ah oui j'avais oublié, il faut mettre url aussi, puis vous collez l'adresse url entre la parenthèse et l'apostrophe ainsi :
Chaque élément mis est très important n'enlevez rien è_é Maintenant les dimensions de l'image ! Height est la hauteur, Width est la largeur, en px le tout ! Espacez vos éléments avec ";", ça vous donne :
Ensuite j'ai rajouté un padding, qui permet que votre texte ne touche pas les bords (en clair c'est pour les idiots comme moi, qui ont mal redimensionner la partie texte donc c'est pour rétrécir 8D) Pour le déroulant à droite, c'est overflow:auto
Vous écrivez votre texte à la suite de cette balise et vous fermez avec deux /div, puisque vous en avez ouvert deux. Et bien sûr mettez tout ça entre les balises center !
Ahhhhhhh nonnn Arya t'as fait quoi :'(, la balise center au secoursss ! Pour centrer automatiquement tu peux utiliser le "margin:auto;" qui doit s'appliquer pour chaque élément. Sinon j'aime bien le tuto et l'exemple choisi :D good job!
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
@Arya Si on veut introduire une image dans le codage on fait comment pour que celle-ci se redimensionne automatiquement ? :) et c'est ou qu'on doit introduire les balises pour les images ? (entre le background et le code pour le texte ?)
+ je peux utiliser ce meme codage pour un tuto sur OH ? avec les crédits bien sur
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
on fait comment pour que celle-ci se redimensionne automatiquement ? :
Code:
<img src="URL"width="LARGEUR EN PX">
c'est ou qu'on doit introduire les balises pour les images ? (entre le background et le code pour le texte ?) J'ai pas bien compris ta question XD Tu veux mettre une image en background ?
Et oui tu peux utiliser ce codage avec crédit !
Myria Léviathan des Nymphes
Messages : 4603 Date d'inscription : 04/06/2016 Age : 23
Voilà pour l'image et pour la case du texte faur revoir les dimensions, n'oublie pas de toujours tester ta case en mettant de longs textes ! :D (je te laisse faire, tu pourras tester ! )
Yaaay Et si en plein milieu des balises textes j'ai envie de mettre des images je n'aurais qu'à mettre ça ?
Code:
<img src="LIEN IMAGE"
Aussi est-ce-que la distance entre la balise du fond et celle de l'image a une signification ou pas ? J'ai tellement l'habitude des codes, si tu oublies un espace ça part en cacahuète
Oui c'est ça ! Et tu devras surement la redimenssionner !
In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.
Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris. Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
<img src="http://image.noelshack.com/fichiers/2016/34/1472410956-beautiful.png"width="350px"> <div style=" height:200px; width:400px; padding:25px;overflow:auto;">In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.
Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris. <img src="http://image.noelshack.com/fichiers/2016/23/1465289027-banniere-cadre.png"width="300px"> Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum. </div></div></center>
Et oui ça a une signification sur le forum XD
Myria Léviathan des Nymphes
Messages : 4603 Date d'inscription : 04/06/2016 Age : 23
LE FOND Alors pour commencer appliques un dégradé radial du blanc au rose (ea817c) de sorte à avoir quelque chose de similaire à ceci <img src="http://image.noelshack.com/fichiers/2016/34/1472414163-beautiful.png "width="300px">
Après tu vas venir prendre ton render et le mettre sur le coté gauche de la créa en le décalant légèrement avec le raccourci alt+cmd+T. Après tu prends ce meme render, tu le mets en dessous du calque du premier en diminuant de sa taille et en faisant une symétrie axe horizontal (edition - transformation - symétrie axe horizontal) tu devrais avoir quelque chose de ce genre : <img src="http://www.noelshack.com/2016-35-1472427204-1.png"width="300px">
L’ETAPE QUI SUIT N’EST PAS À SUIVRE À LA LETTRE, FAIT AU FEELING ;) Maintenant on va passer aux éléments de ton fond, rien de bien compliqué. Tu va venir prendre ta fleur nX et la placer vers la gauche en ne laissant dépasser que les roses (faire des rotations si besoin) Apres ça tu prends ton png feuille et tu le places vers le coté droit à coté du petit render et un autre à coté du plus grand render. Ensuite tu prends ton png fleur nX et tu le place aussi derrière le plus grand render vers le bas. Tu reprends le meme png et tu en place cette fois ci derrière les deux renders au milieu. Ensuite tu fais un peu comme plus haut en passant les fleurs devant et derrière tes renders pour les incruster. A la fin tu devrais avoir quelque chose dans le genre : <img src="http://image.noelshack.com/fichiers/2016/35/1472425287-2.png "width="300px">
Maintenant prend ton png bulle et tu le redimensionnes et tu fais quelque chose dans ce style, quand tu utilises une bulle gomme le reste puis crée un nouveau calque pour mettre la bulle suivante et ainsi de suite,… en jouant sur la taille pour tromper l’oeil.
</div></div></center>
Arya Léviathan des Nymphes
Messages : 4012 Date d'inscription : 14/07/2015 Age : 28
LE FOND Alors pour commencer appliques un dégradé radial du blanc au rose (ea817c) de sorte à avoir quelque chose de similaire à ceci
Après tu vas venir prendre ton render et le mettre sur le coté gauche de la créa en le décalant légèrement avec le raccourci alt+cmd+T. Après tu prends ce meme render, tu le mets en dessous du calque du premier en diminuant de sa taille et en faisant une symétrie axe horizontal (edition - transformation - symétrie axe horizontal) tu devrais avoir quelque chose de ce genre :
L’ETAPE QUI SUIT N’EST PAS À SUIVRE À LA LETTRE, FAIT AU FEELING Maintenant on va passer aux éléments de ton fond, rien de bien compliqué. Tu va venir prendre ta fleur nX et la placer vers la gauche en ne laissant dépasser que les roses (faire des rotations si besoin) Apres ça tu prends ton png feuille et tu le places vers le coté droit à coté du petit render et un autre à coté du plus grand render. Ensuite tu prends ton png fleur nX et tu le place aussi derrière le plus grand render vers le bas. Tu reprends le meme png et tu en place cette fois ci derrière les deux renders au milieu. Ensuite tu fais un peu comme plus haut en passant les fleurs devant et derrière tes renders pour les incruster. A la fin tu devrais avoir quelque chose dans le genre :
Maintenant prend ton png bulle et tu le redimensionnes et tu fais quelque chose dans ce style, quand tu utilises une bulle gomme le reste puis crée un nouveau calque pour mettre la bulle suivante et ainsi de suite,… en jouant sur la taille pour tromper l’oeil.
Accueil 
)
