avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 22:44
Oh padding de 500px c'est pas bien, ça me fait peur *sort*
Le text-align ne fonctionne que dans les blocs. Logiquement quand tu as une balise qui se met sur la même ligne tu ne peux pas l'aligner seule.
Genre si j'ai :

Code:
<div>ma phrase <span>contient</span> une span</div>

Je peux pas changer l'alignement sur le mot contient uniquement, ça n'aura pas de sens.
Mais je peux aligner toute la phrase qui est le contenu d'un bloc (div).
Donc on va dire à la div, je veux que ton contenu soit à droite.

Dans ton cas tu as deux solutions, soit tu mets le text-align dans la div qui contient le span et donc c'est la div shan_ficherp mais ça veut dire que tout ce qu'on mettra éventuellement dans la div sera à droite.
Ici ce n'est pas un problème puisqu'on a rien dans la div à part la span et l'image, le reste ce sont des blocs déjà centrés.
La deuxième solution sera de transformer la span en div comme ça on peut mettre directement le text-align dedans et on est sûr que seule cette div aura son contenu aligné à droite.

Sinon je viens de remarquer qu'il manque l'icône décorative, sais-tu comment l'ajouter ?


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 22:53
Coucou :) Je viens de voir que je l'avais oubliée, #Boulet. Oui je sais comment faire :3 pour ce qui est du padding 500, moi aussi j'ai trouvée ça horrible mais je voyais pas comment faire Je te fais ça dans la soirée ou demain, avant je sais pas si je pourrai


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 23 Juil 2018 - 22:58
Pas de soucis, prends ton temps :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 29 Juil 2018 - 4:44
Bonsoir :3 je t'ai pas oubliée, je suis en train d'organisée le mariage de ma soeur ^^ j'aurai terminée le tout Lundi matin (et punaise je savais pas que c'était autant long faire ça u_u)


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Dim 29 Juil 2018 - 14:26
Coucou :3

Pas de soucis, prends ton temps, merci de m'avoir prévenu en tout cas :3
Félicitations à ta soeur :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Jeu 2 Aoû 2018 - 18:59
Coucou :3 Voilà c'bon je suis pleinement disponible, je te fais donc ça après manger :)


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 3 Aoû 2018 - 2:46
D'accord :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 3 Aoû 2018 - 19:56
Coucou Reine :3 Comme ça ?

https://codepen.io/Shanriya/pen/qyrGGX


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 1:21
Coucou :3

Alors, une image décorative n'a aucune valeur sémantique par rapport à notre contenu, c'est à dire qu'elle ne fait pas partie de celui-ci, c'est juste une déco. C'est pourquoi on ne l'introduit généralement pas dans le HTML mais on l'a met en background via le CSS.

On peut donc utiliser les propriétés individuelles suivantes :

background-color: couleur;
background-image: url('lien_de_l'image');
background-position: horizontale verticale;
on peut positionner avec les valeurs : top, center, bottom left, center, right ou avec des valeurs en pixels ou en pourcentages.

Comme on peut tout mettre dans le raccourci background, exemple :

Code:
background: url('https://image.gif') top center #86afc2;


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 1:25
Ooooh je vois, pardon. Donc du coup à chaque fois que j'intégrerai une image décorative, c'est ça que je vais mettre ? Et comme ceci si j'ai bien compris ?

https://codepen.io/Shanriya/pen/qyrGGX


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 1:32
C'est très bien :3
Il reste juste le padding 500 à régler :3
Et je ne sais pas si c'est normal que ton image aie une marge négative qui fait qu'elle devient un peu superposée au texte ? Je demande parce que je ne suis pas sûre que ce soit l'effet que tu veux. Si c'est fait exprès c'est bon :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 1:44
Coucou :3 Oh j'avais oubliée le padding /FACEPALM/ et sinon effectivement, je n'avais pas vu le titre, voilà qui est corrigée :3 Est-ce bon ? **

https://codepen.io/Shanriya/pen/qyrGGX


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 2:05
Parfait :3

Pour le titre le problème venait surtout de cette marge là :

Code:
.shan_ficherp img {
  margin-bottom: -20px;
}

le padding que tu as ajouté a bel et bien annulé la marge mais plutôt que de rallonger notre CSS en ajoutant quelque chose qu'on va annuler autant l'enlever carrément.

Je crois qu'avec ça notre fiche sera prête à être mise sur le forum,tu peux donc la compresser :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 4 Aoû 2018 - 2:28
Coucou :3 voilà, le soucis à été corrigé pour le titre en enlevant ce que tu m'as pointée :3

Titre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia qui necessitatibus laborum, distinctio libero modi perferendis sapiente atque ex. Incidunt debitis, animi accusantium voluptatum aspernatur distinctio ratione accusamus veniam reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab labore ipsam, possimus unde dignissimos repudiandae dolorum quia numquam itaque illum sequi vel officiis? Commodi iste magnam tempore nisi deserunt maxime?

Feat Shanya


Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"><div class="shan_ficherp"><img src="https://nsm09.casimages.com/img/2018/07/22//18072212345712811115816747.png" /><h2>Titre</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia qui necessitatibus laborum, distinctio libero modi perferendis sapiente atque ex. Incidunt debitis, animi accusantium voluptatum aspernatur distinctio ratione accusamus veniam reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab labore ipsam, possimus unde dignissimos repudiandae dolorum quia numquam itaque illum sequi vel officiis? Commodi iste magnam tempore nisi deserunt maxime?</p><div class="shan_fichecredit">Feat Shanya</div></div><style>.shan_ficherp{margin:auto;background-color:#fee0d5;width:560px;padding-bottom:20px;background-image:url('https://nsm09.casimages.com/img/2018/07/22//18072206505712811115818387.png');background-repeat:no-repeat;background-position:bottom left}.shan_ficherp h2{text-align:center;border-bottom:1px solid #a2030a;font-family:'Dancing Script',cursive;font-size:30px;color:#a2030a;width:250px;margin:auto}.shan_ficherp p{color:#a2030a;padding:40px;text-align:justify;background-color:white;width:300px;margin:auto}.shan_fichecredit{color:#a2030a;text-align:right;padding-right:10px;font-family:'Dancing Script',cursive;font-size:12px}</style>


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 20 Aoû 2018 - 23:21
Coucou :3

Ah c'est tout beau, tout propre, bravo pour avoir réussi ta première fiche :3
Tu peux l'utiliser ou la mettre en LS si tu veux :3

Je vais donc attendre ton retour avant de reprendre le cours. Bon courage pour le déménagement :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Mar 4 Sep 2018 - 22:13
Coucou Reine :3 juste pour te dire que je suis de retour :D


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Jeu 6 Sep 2018 - 0:06
Coucou :3
Bon retour, contente de te retrouver :3
Alors le déménagement ça était ?
J'espère que tu t'es bien reposée après tant de travail :3

Alors pour la reprise du cours, veux-tu essayer de coder une fiche libre pour voir un peu si tu t'en sors après cette petite pause ?


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Jeu 6 Sep 2018 - 0:26
Coucou Reine :D Merci ^^ Contente de revenir :3 Oui ça va, même si je suis super fatiguée parce que je dois avoir dormi genre 10h en une semaine XD

Et bien, qu'entends-tu par une fiche libre ? Tu me donne un schéma et je te la code ?


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Jeu 6 Sep 2018 - 13:21
Coucou :3

Ah mais il faut dormir assez quand même, n'en fais pas trop :3

Par libre je veux dire sans contrainte de schéma, tu peux faire comme tu veux question de voir la limite de tes connaissances actuelles :3
Mais si tu préfères avoir un schéma sous la main, je peux t'en faire un :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 8 Sep 2018 - 14:50
Coucou :3 Oui, le sommeil est important en effet XD Sinon, j'avoue que je préfère avoir un schéma sous la main, car je ne saurais pas quoi faire au niveau visuel /vasecacher/


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Lun 10 Sep 2018 - 0:02
Hello :3

Et bien, je n'ai pas ouvert Photoshop depuis le 20 Aout, voici une bonne occasion pour le faire x)
Par contre j'étais pas très inspirée haha, on va faire avec ça :



Polices :
John Green : Anton à 48px
La citation : Roboto thin italic 16 px
Liste d'infos : Roboto condensed 14px
La description : Roboto light 12px
Le crédit : Roboto light 10px

Image :
Lien
Opacité à 70%.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Mar 11 Sep 2018 - 20:53
Coucou :3 D'accord je te fais ça d'ici la fin de la semaine (j'ai commencée à travailler, donc du coup moins de temps à moins la semaine :c )


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Mar 11 Sep 2018 - 22:56
D'accord pas de soucis :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Mar 18 Sep 2018 - 17:28
Coucou :) (bon je m'acharne depuis deux jours sur le titre tout en haut et j'arrive à rien x_x je te met tout de même le codepen :3)

https://codepen.io/Shanriya/pen/gdQxyL


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Jeu 20 Sep 2018 - 12:58
Coucou :3

C'est bien tout ça, bravo :3
On va régler les petits problèmes un à un et apprendre de nouvelles balises et propriétés. J'ai fait exprès d'ajouter de nouvelles choses pour que tu t'ennuies pas :p

Alors commençons par le titre.
- Vu que tu as galéré pour l'ombre, je t'explique ça en premier.
La valeur des propriétés text-shadow et box-shadow s'écrit de cette façon :
text-shadow: ombre-horizontale ombre-verticale degré-du-flou couleur;
un nombre positif donnera une ombre droite pour l'horizontale et une ombre en bas pour la verticale
un nombre négatif donnera donc une ombre gauche et/ou une ombre vers le haut.
Le nombre reflètera bien sûr la taille de l'ombre.

Exemple :
Code:
<span style="text-shadow: 3px 4px 1px skyblue"> LE TEXTE AVEC UNE OMBRE </span>

LE TEXTE AVEC UNE OMBRE

Si on ne veut pas mettre de flou donc 0, on peut le pas l'écrire et du coup on aura juste deux valeurs avant la couleur.

- Maintenant, la position.
On ne va pas faire de positionnement absolu pour l'instant, surtout qu'on peut faire plus simple. D'ailleurs ton positionnement en absolu fait qu'on ne voit que la moitié inférieur du titre.
Je ne sais pas si tu as remarqué mais dans la maquette on a un espace de 1px entre l'image et la bordure bleue, ce qui fait que la bordure n'est pas celle de l'image mais bien celle du titre.
Donc notre titre aura une bordure inférieure de 30px, mais on veut que notre bordure soit superposée à notre titre. Pour ça on va simplement limité l'espace réservé au titre. On va donc lui donner à peu près la même hauteur que la bordure. La bordure fait 30px, si par exemple mon shadow descend de 5px je vais mettre height: 35px pour que l'ombre ne dépasse pas du cadre.

Bien sûr notre bordure doit prendre toute la largeur et donc on aura pas de marges mais tu peux ajouter de l'espace à l'intérieur de la boite pour décaler le texte par rapport au bord gauche de la fiche.

Je te laisse donc revoir ça et si tu as des questions n'hésite pas :3


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