AccueilÉvènementsFAQRechercherMembresGroupesS'enregistrerConnexion

2 résultats trouvés pour cccccc

AuteurMessage
Tag cccccc sur Les Brumes de Beacon Hills Bouton69Sujet: Le codage pour les nuls
Mafdet Mahes

Réponses: 5
Vues: 5442

Rechercher dans: La FicheÔtèque   Tag cccccc sur Les Brumes de Beacon Hills Bouton74Sujet: Le codage pour les nuls    Tag cccccc sur Les Brumes de Beacon Hills EmptyVen 15 Mai 2015 - 14:07
Gérer les images :

taille, effets...


L'Éditeur basique du forum :

code HTML


- Si je me sers de la fonction disponible dans l'éditeur du forum, j'ai ce code (en HTML)
Code:
[img]http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw[/img]


Qui me donne ce résultat :
Vous avez la possibilité de changer la largeur et la hauteur, mais vous devez calculer la proportion entre les 2 pour ne pas déformer l'image = GONFLANT ! Et on ne peut rien faire d'autre.

Tag cccccc sur Les Brumes de Beacon Hills Giphy

***

Utilisation du CSS


- L’intérêt est de pouvoir la redimensionner plus facilement et ensuite de lui ajouter des attributs sympathiques.

Le code commence par :
Code:
<img src="

Vous écrivez ensuite l'URL de l'image :
Code:
http://www.etc

Le code fini par :
Code:
">


Code de base (qui reproduit ce que fait le code HTML)
Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw">




***

Gérer la largeur (Ici j'ai mis 300px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="width: 300px; (dans la boucle img)

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 300px;">




***

Gérer la hauteur (Ici j'ai mis 100px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="height: 100px; (dans la boucle img)

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="height: 100px;">




***

Mettre une ombre

L'attribut a ajouter est : style="2px 2px 12px #83e5fe;"
Les 2 premiers nombres donnent le décalage en x et Y, le 3ème l'importance du floutage

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px;box-shadow: 2px 2px 12px #83e5fe;">




***

Mettre des arrondis

L'attribut a ajouter est : style=" border-radius: 40px 0 40px 0;"
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">




***

Ajouter une bordure

L'attribut a ajouter est : style="border: 10px groove #cccccc;" (épaisseur, type, couleur)
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">




Les différents types de bordure :

solid

double

dotted

dashed

double

groove

ridge

inset

outset



Tag cccccc sur Les Brumes de Beacon Hills Bouton69Sujet: Le codage pour les nuls
Mafdet Mahes

Réponses: 5
Vues: 5442

Rechercher dans: La FicheÔtèque   Tag cccccc sur Les Brumes de Beacon Hills Bouton74Sujet: Le codage pour les nuls    Tag cccccc sur Les Brumes de Beacon Hills EmptyJeu 14 Mai 2015 - 15:43
Créer un cadre avec une div


Les attributs simples possibles sont : Le paramétrage est expliqué après

- width : La largeur qui est exprimée en px ou en %
- height : La hauteur qui est exprimée en px, en % ou mise en "auto"
- border : Les bordures : qui sont définies par une épaisseur en px, une couleur, une nature (pleine, double, pointillés..), des arrondis aux angles
- margin : Son centrage par rapport à l'élément (div) qui l'encadre, exprimé en px ou mis en  "auto"
- padding : La marge interne (entre le cadre et le texte qu'il contient), exprimée en px ou mis en "auto"
- background-color : La couleur du fond, exprimé par une couleur, une opacité (qui affecte même le texte)
- background-image : Une image de fond, exprimée par une url, et sa manière de prise en compte (mise à l'échelle ou non)
- box-shadow : Une ombre, définie par une couleur et 3 largeur en px (le décalage, le floutage en x, le floutage en y)
- overflow : L'apparition d'une scroll barre sur la droite i le texte déborde, définie en "auto" (votre navigateur prend la main) ou scroll

Exemple ci-dessous :

Une 1ère div (bordure blanche fond vert) encadre une 2ème div (bordure en pointillé, fond gris avec opacité de 0,8 )

Dans la 1ère div :
- J'ai défini un padding: 20px, cela centre la 2ème div à l'intérieur.
- box-shadow, donne un halo sur la droite et le bas
- border: 3px double #fff, pour une bordure double il faut au minimum une largeur de 3px

Dans la 2ème div :
- background-color: #cccccc; opacity: 0.8, défini un fond gris avec une transparence de 0,8. (0 = transparent  et 1 = 100% opaque) Exclamation le texte de la div est aussi affecté.
- padding: 20px définit une marge de 20px entre le texte et les bords du cadre
- overflow: auto, colle une scroll barre à droite
- border: 4px dotted #0f1428 définit une bordure en pointillé

Code:
<div style="width:400px; height: 400px; background-color: #307a0c; margin: auto; padding: 20px; border: 3px double #fff; box-shadow: 2px 5px 5px #cccccc; "><div style="width: 300px; height: 350px; text-align: justify; background-color: #cccccc; opacity: 0.8; overflow: auto; padding: 20px; border: 4px dotted #0f1428; ">Blabla...
</div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.


Autre exemple :

La première div a une image en fond. Dans la 2ème div, j'ai placé une image.  
Exclamation  Notez la différence de codage.

Code:
<div style="width:400px; height: 200px; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); margin: auto; padding: auto; border: 5px groove #7a4a0c; border-radius: 100px 0 100px 0; "><div style="margin: auto; padding: 20px;">
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://img11.hostingpics.net/pics/3309092003.gif&sa=X&ei=3b1UVeuHB8TSU6vlgeAC&ved=0CAkQ8wc4Og&usg=AFQjCNHde52O5h_8EwuuFUBST9ONluPHYg" style="width: auto;"></div></div>





Paramétrage de ce merdier


- width : La largeur qui est exprimée en px ou en % de la largeur définie dans la div parent

Code:
<div style="width: 200px;">Blabla...</div>


- height : La hauteur qui est exprimée en px, en % de la largeur définie dans la div parent ou mise en "auto". Pour la 1ère div, je vous conseille de mettre "auto", elle s'agrandira en fonction du contenu que vous ajoutez dedans.

Code:
<div style="width: 500px; height: auto;">Blabla...</div>


- border :
On peut définir les bordures individuellement, dans ce cas, spécifiez avant les attributs: border-left , border-right, border-top ou border-bottom
L'épaisseur peut être différente : border-width:1px 2px 3px 2px; (gauche, haut, droite, bas)

Les différents types de bordure :
Code:
<div style="width:200px; height: auto; font-family: Times New Roman; font-size: 18px; text-align: center; color: #fff; padding: 10px; border: 4px solid #27859c;">solid</div>


solid

double

dotted

dashed

double (3px mini)

groove (4px mini)

ridge (4px mini)

inset (4px mini)

outset (4px mini)

Les arrondis :
border-radius:10px ==> donne un arrondi de rayon 10 px aux 4 angles
border-radius:10px 100px 0 10px ==> angle supérieur gauche à 10 px, après on tourne dans le sens des aiguille d'une montre (pour une valeur à 0, pas besoin de mettre l'unité px)

Code:
<div style="border: 5px double #cccccc; border-radius: 10px 100px 0 10px;">Blabla...</div>


border-radius: 10px 100px 0 10px


- margin :
margin: 15px => met une marge extérieure de 15px mini avec la div qui entoure celle-ci
Cette marge peut être spécifiée vis à vis d'un côté : margin-left, margin-right, margin-top ou margin-bottom
auto, valeur seule, marge calculée automatiquement,
inherit, valeur seule, hérite des propriétés de son parent

Code:
<div style="width: 500px; height : auto; margin-left: 20px; margin-top: 30px;">Blabla...</div>


- padding :
padding : 15px => met une marge intérieure de 15px mini avec le contenue de la div
Cette marge peut être spécifiée vis à vis d'un côté : padding-left, padding-right, padding-top ou padding-bottom
► très utile pour écarter du texte de son cadre

Code:
<div style="width: 500px; height : auto; padding: 50px;">Blabla...</div>


- background-color :
Généralement donnée en hexadécimal (#000000 pour le noir, #ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)
On peut y ajouter une valeur de transparence avec opacity (valeur de 0 pour transparent à 1 pour opaque) ex: opacity: 0.8  Exclamation affecte tout le contenu de la div

Code:
<div style="width: 250px; height : 40px; background-color: #c5c5c5; opacity: 0.9;">Blabla...</div>


background-color #c5c5c5; opacity: 0.9

- background-image :
Permet de mettre une image en fond. la syntaxe est : background-image: url('https://i.servimg.com/u/f49/16/59/46/39/testde10.png')
On y ajoute des indicateur de positionnement :
background-repeat: repeat (ou no-repeat) reproduit X fois l'image si la taille de la div est plus grande que l'image
background-position: center center (ou 50% 50%) pour centrer l'image dans la div
background-position: left top (ou 0% 0%) pour la mettre en haut à gauche dans la div
background-position: right bottom (ou 100% 100%) pour la mettre en bas à droite dans la div
background-size : cover ou contain, l'image se redimensionne sans déformer à la taille de la div
background-size : auto, l'image garde sa taille initiale
background-size : % ou px, on impose la taille de l'image

Code:
<div style="width: 650px; height 100px: auto; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat;">Blabla...</div>


background-size : cover; background-repeat: no-repeat


background-size : none; background-repeat: repeat


- box-shadow :
les deux 1er chiffres correspondent au décalage en x et y, le dernier l'épaisseur du floutage, suit la valeur de la couleur
box-shadow: 1px 1px 12px #555;

Code:
<div style="width: 500px; height : auto; box-shadow: 1px 1px 12px #555;">Blabla...</div>


box-shadow

- overflow :
Permet de gérer les débordements de texte
visible ou inherit : tout le texte sera visible et pourra parfois déborder sur le reste
hidden : ce qui dépasse du cadre de la div est invisible
auto : ce qui dépasse du cadre de la div sera visible grace à une scroll barre horizontale ou verticale (overflow-x, ou overflow-y force la scroll barre que dans un sens)
initial : garde les propriété de la div parent

Code:
<div style="width: 500px; height : auto; overflow: auto;">Blabla...</div>


Exemple d'une div avec tous les paramètres réunis :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.

Code:
<div style="width:400px; height: 250px; font-size: 14px; text-align: justify; color: #252524; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat; background-color: white; opacity: 0.8; overflow: auto; padding: 30px; border: solid #212c57; border-width:1px 2px 3px 2px; border-radius:100px 10px 0 50px; box-shadow: 3px 3px 5px #8ca2f8; ">Blabla...Duis vel quam et enim interdum venenatis.</div>

Revenir en haut 
Page 1 sur 1
Sauter vers: