28172 sujets

CSS et mise en forme, CSS3

Background dégradé en cercle ?

Bonjour,

J'aurais besoin de conseils concernant les background avec dégradé en cercle.
Je m'explique, voila ce que j'ai dans mon psd:
http://free0.hiboox.com/vignettes/5109/b128f767d22379aa64150358b2d3d1f9.jpg

Quelle approche utilisée pour passer en CSS ?

Ce que j'ai fait : découpé autour de la forme blanche dégradée et enregistrée en PNG pour mettre l'image en fond d'écran mais mise à part le fait qu'il faudra fixer la transparence pour IE, c'est surtout le poids de l'image qui m'interpelle... 77Ko juste pour le dégradé blanc Smiley ohwell 

body
{
	background: #9e9d9d url(img/background.png) 20% 0 no-repeat;
}


Merci
Bonne soirée
Modifié par italiasky (19 Dec 2009 - 20:57)
Modérateur
Hello,
En effet 77 ko, ça fait cher le pixel. As tu regardé ce que ça donne en .*jpeg ?
Je verrai un truc comme ça :


<body>
	<div id="global">
		<!-- contenu -->
	</div>
</body>



body{
	background-image:url("pattern_body.png"); /* 20 x 20 en exemple */
}
#global{
	background: url("degrade_radial.png") top center no-repeat;
}

(* code fait de tête)
Après faut voir si tu as besoin d'un global aussi grand ?

Au passage et merci par avance, peux tu s'il te plait réduire la taille de ton image sur le forum tout en indiquant si tu veux ses dimensions en dur (largeur x hauteur).

++
Modifié par Nolem (19 Dec 2009 - 20:57)
Nolem a écrit :
Hello,
En effet 77 ko, ça fait cher le pixel. As tu regardé ce que ça donne en .*jpeg ?

Alors j'ai regardé en .jpeg, avec la qualité élevée, ca fait du 18Ko, c'est mieux c'est sur Smiley smile
Enfin j'ai bien sur du prendre la couleur grise avec et non que le dégradé vu que le jpeg ne gère pas le dégradé...

Mais bon à priori ce serait la solution la plus raisonnable vous pensez ?

Nolem a écrit :


<body>
	<div id="global">
		<!-- contenu -->
	</div>
</body>



body{
	background-image:url("pattern_body.png"); /* 20 x 20 en exemple */
}
#global{
	background: url("degrade_radial.png") top center no-repeat;
}


- Le "pattern_body.png" que tu mets c'est pour la couleur grise de fond ? Je n'ai qu'une couleur donc c'est mieux d'utiliser directement le code couleur non ?

- Doit-on passer par un div global ? C'est quoi l'intérêt ? Je me posais la question justement si j'allais le mettre ou pas...
Pourquoi pas un id sur le body ?


Nolem a écrit :

Au passage et merci par avance, peux tu s'il te plait réduire la taille de ton image sur le forum tout en indiquant si tu veux ses dimensions en dur (largeur x hauteur).

Hum comment ca les dimensions de l'image en dur ? La taille du dégradé tu veux dire ?

Merci
++
Modifié par italiasky (20 Dec 2009 - 17:30)
Modérateur
a écrit :

Alors j'ai regardé en .jpeg, avec la qualité élevée (60 dans photoshop), ca fait du 18Ko, c'est mieux c'est sur.
[...]


;)
On peut peut être encore l'optimiser.

a écrit :

Enfin j'ai bien sur du prendre la couleur grise avec et non que le dégradé vu que le jpeg ne gère pas le dégradé...


hum, es tu sûr ?

a écrit :
Mais bon à priori ce serait la solution la plus raisonnable vous pensez ?

C'est une solution. J'ai dû consulter ma boule. Smiley lol

a écrit :

- Le "pattern_body.png" que tu mets c'est pour la couleur grise de fond ? Je n'ai qu'une couleur donc c'est mieux d'utiliser directement le code couleur non ?


oui en effet et tu risques de te heurter aux profils ICC Smiley cligne

a écrit :

Doit-on passer par un div global ? C'est quoi l'intérêt ? Je me posais la question justement si j'allais le mettre ou pas...
Pourquoi pas un id sur le body ?


Ce n'est pas une nécessité ? J'ai essayé de comprendre la suite. Comme je ne connais pas la grille, c'est difficile.

En ce qui concerne l'id sur le body, je n'avais pas du tout pensé à ça. Et en effet c'est surement une bonne piste à suivre.

a écrit :
La taille du dégradé tu veux dire ?


oui

Regarde le poids en png en coupant au plus propre et proche ton dégradé radial.

++ Smiley smile
Nolem a écrit :

Enfin j'ai bien sur du prendre la couleur grise avec et non que le dégradé vu que le jpeg ne gère pas le dégradé...

hum, es tu sûr ?

Je voulais dire jpeg ne prend pas en charge la transparence... donc je dois prendre l'image avec le fond gris et non juste le dégradé blanc.


Nolem a écrit :

- Le "pattern_body.png" que tu mets c'est pour la couleur grise de fond ? Je n'ai qu'une couleur donc c'est mieux d'utiliser directement le code couleur non ?

oui en effet et tu risques de te heurter aux profils ICC

J'ai vu que profil ICC concerne la gestion des couleurs mais.. c'est à dire?

Nolem a écrit :

Doit-on passer par un div global ? C'est quoi l'intérêt ? Je me posais la question justement si j'allais le mettre ou pas...
Pourquoi pas un id sur le body ?

Ce n'est pas une nécessité ? J'ai essayé de comprendre la suite. Comme je ne connais pas la grille, c'est difficile.

En ce qui concerne l'id sur le body, je n'avais pas du tout pensé à ça. Et en effet c'est surement une bonne piste à suivre.


En fait je ne sais pas encore ce quoi je vais avoir besoin... Je voulais juste savoir s'il y avait des bonnes pratiques générales à adopter au niveau des div global et sur le body.

Merci
Bonne journée
++ Smiley smile
Modérateur
italiasky a écrit :

Je voulais dire jpeg ne prend pas en charge la transparence... donc je dois prendre l'image avec le fond gris et non juste le dégradé blanc.


Exact, tu substitues une partie de ton aplat gris (exmple : 20 px x 20 px). Tu vas créer un fichier avec. (exemple : fond_body.jpeg) et tu le feras répéter dans ton body.

italiasky a écrit :

J'ai vu que profil ICC concerne la gestion des couleurs mais.. c'est à dire?


C'est peu difficile à expliquer en deux lignes. Smiley sweatdrop . Grosso modo, c'est au sujet de la restitution des couleurs sur chaque périphérique de la chaine graphique. Cependant, un petit tour sur glouglou ou mieux, le wikipedia aurait évité cette question. Smiley smile Il y a beaucoup à dire dessus. Il y a même des livres intéressants.

italiasky a écrit :

En fait je ne sais pas encore ce quoi je vais avoir besoin... Je voulais juste savoir s'il y avait des bonnes pratiques générales à adopter au niveau des div global et sur le body.


Houla, je crois que t'es mal parti.

Prend une feuille de papier et un crayon. Griffonne tes éléments sur cette page (brouillon du gabarit et de la charte en parti : en-tête, menu, contenu, éléments du contenu, pied, accroches, etc.) Des carrés avec des bouts de textes suffisent amplement. Ainsi, sur ta feuille, tu auras une ligne de conduite et de suite tu vois pas mal de choses qui clochent ou pas dans ta mise en page. Ce qui a pour effet d'optimiser ta grille de mise en page et ton style graphique. Smiley cligne En plus, c'est quelque chose qui se fait rapidement et plus vite que sur ordi. Moi même ça m'arrive encore de le faire.

Une fois que tu as fait ça, tu adaptes tes éléments graphiques sur ton ordi Smiley murf avec Inkscape ou avec Gimp par exemple. Je rappelle que si on n'a pas acheté ou gagné la licence de tel ou tel logiciel, oubliez !

Une fois que tu as fait ça, tu commences à coder en html tes éléments (tag html : texte, images, listes, menu, division, etc.) tout an codant ton css (si tu te sents). Sinon, vers la fin de ton code html.

Voilà par exemple une bonne pratique. Ne pas mettre la charrue avant les boeuf. Smiley cligne Sinon, sans que je sache comment est ton gabarit du moins le début, ça va être un peu délicat pour t'aider. Smiley cligne

Bon dimanche à toi. Smiley smile
Modifié par Nolem (20 Dec 2009 - 17:26)
Nolem a écrit :
C'est peu difficile à expliquer en deux lignes. Smiley sweatdrop . Grosso modo, c'est au sujet de la restitution des couleurs sur chaque périphérique de la chaine graphique. Cependant, un petit tour sur glouglou ou mieux, le wikipedia aurait évité cette question. Smiley smile Il y a beaucoup à dire dessus. Il y a même des livres intéressants.

Oui j'ai vu tout ça, j'ai lu quelques pages sur internet mais un peu perdu tout de même... est-ce que concrètement ca veut dire que si je mets dans mon CSS une couleur avec le code #xxxxxx elle n'aura pas le même rendu que si j'enregistre une image jpg, png, enfin sans incorporer le profil sRGB si j'ai bien compris ?
En clair, il est préférable pour un arrière plan de couleur unie d'utiliser quand même une image et non pas le code couleur dans CSS ?


Nolem a écrit :

Houla, je crois que t'es mal parti.

Prend une feuille de papier et un crayon. Griffonne tes éléments sur cette page (brouillon du gabarit et de la charte en parti : en-tête, menu, contenu, éléments du contenu, pied, accroches, etc.) Des carrés avec des bouts de textes suffisent amplement. Ainsi, sur ta feuille, tu auras une ligne de conduite et de suite tu vois pas mal de choses qui clochent ou pas dans ta mise en page. Ce qui a pour effet d'optimiser ta grille de mise en page et ton style graphique. Smiley cligne En plus, c'est quelque chose qui se fait rapidement et plus vite que sur ordi. Moi même ça m'arrive encore de le faire.

Une fois que tu as fait ça, tu commences à coder en html tes éléments (tag html : texte, images, listes, menu, division, etc.) tout an codant ton css (si tu te sents). Sinon, vers la fin de ton code html.

Voilà par exemple une bonne pratique. Ne pas mettre la charrue avant les boeuf. Smiley cligne Sinon, sans que je sache comment est ton gabarit du moins le début, ça va être un peu délicat pour t'aider. Smiley cligne

Lol oui je sais c'est vrai, aller je vais dessiner alors... Smiley lol

Merci
Bonne fin de weekend.
Modifié par italiasky (20 Dec 2009 - 17:52)
Ah non j'ai rien dit, j'avais un float:left qui trainait sur le header... Smiley ohwell

-------------------------------------------------------------------------------
J'ai commencé à griffonner et à coder en html et faire le CSS progressivement et je crois que j'ai peut être la réponse pour à quoi servirait un div globale..
Je n'arrive pas à coller mon div header en haut de la page, un petit espace reste... cela intervient quand je rajoute la liste <ul>

<body>
		<div id="header">
		</div> <!-- div id="header" -->

		<ul id="items">
			<li>item1<li>
			<li id="item-selected">item2<li>
			<li>item3<li>
		</ul>

	</body>


body
{
	background: #9e9d9d url(img/background.png);
	margin: 0;
	padding:0;
}

div#header
{
	height: 30px;
	background: green;
	width:100%
}



Est-ce qu'il faudrait utiliser un div global ici pour régler ce problème ou rien a voir ?

Merci
Bonne soirée
Modifié par italiasky (20 Dec 2009 - 21:03)
Modérateur
Hello,

italiasky a écrit :
[...]rien à voir ?


C'est un problème de styles par défaut de chaque élément. Tu devrais trouver ton bonheur dans cette
réponse.

<edit>
Je t'invite à lire ou à relire cet article.
</edit>
Bonne soirée à toi
Modifié par Nolem (20 Dec 2009 - 21:40)
bonjour,

Pour fabriquer ton gabarit , l'ideal est de faire la partie html et de la remplir afin d'avoir un document web proche de la réalité .

En general du 'lorem ipsum' ou autre "faux texte" est utilisé pour simuler du contenu .

Par exemple , ce site : http://html-ipsum.com/ te propose quelques portions de code qui peuvent te faciliter la tache , mais il y en a plein d'autres .

Un conteneur global est toujours utile , il te servira par exemple a donner une largeur a ton document une fois pour toutes .

Pour les décallages , il s'agit probablement des effet du au fusion de marges . Tu peut faire un RAZ sur les marges de quelques elements ou les contenir avec un padding ou une bordure sur le conteneur global.

Cordialement.

<hs> Pour le fun et sous Firefox : ton halo lumineux sans images 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>fond degradé en cercle</title>
<style type='text/css'>
html , body { height:100%;background:#9D9D9D;margin:0;padding:0;}
div:before {content:'';display:block;position:absolute;-moz-box-shadow:500px 200px 300px 200px white;}
</style>
</head>
<body>
<div> halo lumineux sans image dans Firefox</div>
</body>
</html>


Si ce rendu via Firefox de box-shadow peut-etre pris comme reference , il ya quelques effets sympa et peu couteux en perspective ...
</hs>
Merci de tes commentaires gc-nomade, c'est trop cool le halo comme tu l'as fais sous Firefox... Smiley lol
Il n'y a pas des astuces de ce genre sous d'autres navigateurs assez respectueux comme Chrome, Opera, Safari... ? (Je me fais pas d'illusion pour IE Smiley cligne )
A moins que le -moz soit vraiment une spécificité étendue de mozilla ? et non un futur standard du CSS3 ?

En tout cas, crois-tu que appliquer sous firefox cette technique et sur les autres utiliser une image peut être intéressant ou plus un casse tête qu'autre chose ?
Parce que il faudrait l'utiliser qu'à partir de Firefox 3.5 comme indiqué ici
Et comment détecter que c'est Firefox 3.5... ? Les commentaires conditionnels sont fait pour tous les navigateurs ?

En tout cas, je vais continuer un peu sur ma structure mais avant je relis quelques cours du site parce que je vois que je ne suis pas clair sur le positionnement Smiley rolleyes

I'll be back soon!! Smiley smile lol

Merci
Bonne soirée
italiasky a écrit :

Il n'y a pas des astuces de ce genre sous d'autres navigateurs assez respectueux comme Chrome, Opera, Safari... ? (Je me fais pas d'illusion pour IE Smiley cligne )
Bonne soirée

Pas vraiment , Safari/chrome , ne prennent par exemple que 3 paramètres pour dessiner l'ombrage , ça va forcement moins bien marcher , en tout cas differemment .
italiasky a écrit :
crois-tu que appliquer sous firefox cette technique et sur les autres utiliser une image peut être intéressant ou plus un casse tête qu'autre chose ?

Casse tête et sans intêret , l'image passe aussi trés bien dans FF 3.5 Smiley smile .

italiasky a écrit :

Les commentaires conditionnels sont fait pour tous les navigateurs ?


Non , c'est specifique aux versions de IE .
Pour les autres :
Quelques astuces via , des règles propriétaires ou les media queries peuvent parfois être utilisé , aujourd'hui , cela ne sert pas grand choses car elle deviennent vite obsolète ou les versions de navigateurs ciblés disparaissent . Il vaut mieux s'en passer et eviter les bugs connus (ou que tu connais deja) souvent il suffit de changer de technique pour que ça passe.

italiasky a écrit :

En tout cas, je vais continuer un peu sur ma structure mais avant je relis quelques cours du site parce que je vois que je ne suis pas clair sur le positionnement Smiley rolleyes

+1 , tu as tout compris !
bonne aventure

GC
Bonjour,

Tout d'abord, Joyeux Noël tout le monde Smiley cligne

Je ne vais pas ouvrir un autre post même si ma question ne concerne plus exactement le sujet du début.

J'ai commencé à réfléchir sur la structure.

Par contre, j'ai une question...

Est-ce qu'on peut placer un <li> a un endroit particulier et que les autres <li> au dessus et dessous s'adapte du coup...

En fait, au départ j'ai une liste et il y a toujours un des <li> qui aura la classe "selectionné", et dans ce cas, la présentation du dit <li> doit changer mais le <li> sélectionné doit toujours apparaitre au même endroit... est-ce possible ?

Ou je dois partir sur 2 listes et un div pour ce que je veux mettre en valeur :
<ul>
   <li>item1</li>
   <li>item2</li>
</ul>
<div>
 ITEM3
</div>
<ul>
   <li>item4</li>
</ul>


Merci
Bonne journée
Modifié par italiasky (26 Dec 2009 - 11:26)
Sujet clos
Aller à