Forum de FilmDeCulte

Le forum cinéma le plus méchant du net...
Nous sommes le 22 Déc 2024, 08:30

Heures au format UTC + 1 heure




Poster un nouveau sujet Répondre au sujet  [ 170 messages ]  Aller à la page Précédente  1, 2, 3, 4, 5 ... 12  Suivante
Auteur Message
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 14 Fév 2011, 18:22 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
Image

Delirium Tremens a écrit:
je trouve ça plus simple d'avoir 2 images, on a pas géré le positionnement du background

rien à gérer

#facebook {display:block; width:60px; height:60px; background:url(facebook.png) no-repeat 0 0;}
#facebook:hover {background:url(facebook.png) no-repeat 0 -60px;}

1 image, 2 lignes de css, je ne vois pas de méthode plus simple pour un bouton réactif au survol.

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 14 Fév 2011, 18:28 
Hors ligne
Expert
Avatar de l’utilisateur

Inscription: 18 Aoû 2005, 23:40
Messages: 19478
Localisation: Rebirth Island
Le gros avantage de cette méthode, c'est qu'on se tape pas le temps de chargement de la seconde image quand on passe sur la première.


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 14 Fév 2011, 18:28 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
Exactement

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 15 Fév 2011, 09:55 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
rotary [Bot] a écrit:
rien à gérer

#facebook {display:block; width:60px; height:60px; background:url(facebook.png) no-repeat 0 0;}
#facebook:hover {background:url(facebook.png) no-repeat 0 -60px;}

1 image, 2 lignes de css, je ne vois pas de méthode plus simple pour un bouton réactif au survol.

Là en effet le cas est super simple (un simple positionnement horizontal à gérer), seulement 2 images de taille identique et carrée sans transparence mais c'est pas toujours le cas, et il faut parfois gérer le positionnement horizontal et vertical...

Sur ce bouton, y'a plusieurs méthodes possibles de toute façon, tu pourrais mettre une seule image avec le F et le petit ombrage blanc en transparence, et 2 couleurs de fond différentes... (on pourrait même ne pas utiliser d'image, si le F est dans une police basique, avec la transparence du blanc sur l'ombrage, mais bon ça fait 2 div pas sûr que ce soit plus intéressant, qu'une div et une image)

Pour ce qui est du temps de chargement sur 3-4 images c'est un net avantage, si vous en avez 20 comme ça, c'est la page qui mettra le double de temps à se charger, donc ça ne fait que déplacer le temps de chargement (mais ça semblera en effet moins buggué pour le visiteur avec la méthode 1 seule image). Après y'a des solutions (que je n'utilise pas encore perso), comme charger les images lourdes en fin de page, avec des fonds et des images temporaires, ce qui du coup ne déforme pas la page, et quand les vraies images sont là elles remplacent les images temporaires.

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 15 Fév 2011, 19:42 
Hors ligne
Expert

Inscription: 04 Juil 2005, 15:04
Messages: 10218
Localisation: Montréal
Dédé il fait du dev. web comme dans les année 90 avec des technologies des années 2000...


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 15 Fév 2011, 20:09 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
Mon Colonel a écrit:
Dédé il fait du dev. web comme dans les année 90 avec des technologies des années 2000...

Parfois oui... malheureusement car je connais pas forcément les dernières petites trouvailles ! Mais dans l'ensemble ça va, je suis à peu près au point, je pense, mais je développe toujours pour IE6 contrairement à pas mal de devs qui ne s'emmerdent même plus...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 16 Fév 2011, 01:45 
Hors ligne
Le quoteur fou
Avatar de l’utilisateur

Inscription: 23 Juil 2005, 17:40
Messages: 11786
Localisation: Hill Valley
Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

_________________
Tennis de Table Bordeaux


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 16 Fév 2011, 08:58 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
rotary [Bot] a écrit:
Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

7% c'est énorme (et sur différents sites dont je m'occupe c'est plus que ça, c'est au-dessus de 10, à mon avis aux USA c'est moins de 5%, en Europe aux alentours de 10) ! C'est plus que le pourcentage de personnes qui n'ont pas Flash... Et puis généralement IE6 et IE5.5 sont pas très loin au niveau compatibilité, donc tu peux récupérer 2-3% encore... A partir de 3% je pense que je peux commencer à faire l'impasse, au dessus ça me parait difficile. Après ça dépend de la cible du site comme toujours (si ce ne sont que des djeunz de 15-25 européens, je peux faire l'impasse sans trop réfléchir). Après, je ne fais pas non plus d'énormes efforts, je fais en sorte si possible que le site soit lisible sous ces navigateurs, mais pas forcément identique...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 17 Fév 2011, 21:41 
Hors ligne
Expert

Inscription: 04 Juil 2005, 15:04
Messages: 10218
Localisation: Montréal
Delirium Tremens a écrit:
rotary [Bot] a écrit:
Delirium Tremens a écrit:
je développe toujours pour IE6

7 % des internautes hors Chine. Mais peut être as tu des clients chinois.

7% c'est énorme (et sur différents sites dont je m'occupe c'est plus que ça, c'est au-dessus de 10, à mon avis aux USA c'est moins de 5%, en Europe aux alentours de 10) ! C'est plus que le pourcentage de personnes qui n'ont pas Flash... Et puis généralement IE6 et IE5.5 sont pas très loin au niveau compatibilité, donc tu peux récupérer 2-3% encore... A partir de 3% je pense que je peux commencer à faire l'impasse, au dessus ça me parait difficile. Après ça dépend de la cible du site comme toujours (si ce ne sont que des djeunz de 15-25 européens, je peux faire l'impasse sans trop réfléchir). Après, je ne fais pas non plus d'énormes efforts, je fais en sorte si possible que le site soit lisible sous ces navigateurs, mais pas forcément identique...


Dans les 7% t'as une bonne partie des gens qui sont au bureau dans des entreprises verrouillées par des DRI rétrogrades je suis pas sur que ça vaille le coup de les prendre en compte.
(au boulot je suis encore sur XP avec IE6... heureusement j'ai un mac à disposition pour m'évader).


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 17 Fév 2011, 21:49 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
Mon Colonel a écrit:
Dans les 7% t'as une bonne partie des gens qui sont au bureau dans des entreprises verrouillées par des DRI rétrogrades je suis pas sur que ça vaille le coup de les prendre en compte.
(au boulot je suis encore sur XP avec IE6... heureusement j'ai un mac à disposition pour m'évader).

Si car ce sont des visiteurs comme les autres qui visitent ton site... Ce serait comme faire un site entièrement en flash que d'abandonner les 7% (mais c'est plus que ça en France de toute façon). Donc non, sous la barre des 5, là je dis pas... (et je dis ça mais tous les sites que je fais ne sont pas compatibles IE6 mais j'aimerai et je fais tout mon possible pour qu'ils le soient...)

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 21 Fév 2011, 20:25 
Hors ligne
Expert

Inscription: 04 Juil 2005, 15:04
Messages: 10218
Localisation: Montréal
tiens dédé jette un oeil là dessus : http://www.spritebox.net/


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 21 Fév 2011, 21:42 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
Mon Colonel a écrit:
tiens dédé jette un oeil là dessus : http://www.spritebox.net/

La prouesse technique est belle, même si pour moi ce genre de choses ne me sert pas. Mais y'a des idées intéressantes pour des sites comme Facebook par ex... Sinon l'effet "cahier à carreaux" avec transparence des div flottantes a un petit rendu bien sympa, en plus j'ai téléchargé une photo de coquelicot pour le test et ça donnait vraiment un super rendu du coup ! Faudrait que je me fasse un petit catalogue avec ce type de sites pour récupérer certaines idées (CSS Zen Garden parait dépassé à côté de ce type de sites, faudrait qu'ils renouvellent le truc)...

Sinon rien à voir, t'as déjà matté le SDK iOS ou pas du tout ? Si oui t'as lu des bouquins intéressants sur le sujet pour s'y mettre ? J'aimerai faire une appli (pour tester et que j'ai une idée sympa), j'ai pas besoin d'énormément de choses, car ce sera principalement des flux xml que je compte récupérer et j'ai besoin de gérer des notifications push et surtout une grosse et bonne gestion de la géolocalisation ? Si d'autres ont essayé le SDK d'Android ça m'intéresse tout autant...

_________________
Delirium Tremens


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 21 Fév 2011, 23:36 
Hors ligne
Expert

Inscription: 04 Juil 2005, 15:04
Messages: 10218
Localisation: Montréal
Delirium Tremens a écrit:
Sinon rien à voir, t'as déjà matté le SDK iOS ou pas du tout ? Si oui t'as lu des bouquins intéressants sur le sujet pour s'y mettre ? J'aimerai faire une appli (pour tester et que j'ai une idée sympa), j'ai pas besoin d'énormément de choses, car ce sera principalement des flux xml que je compte récupérer et j'ai besoin de gérer des notifications push et surtout une grosse et bonne gestion de la géolocalisation ? Si d'autres ont essayé le SDK d'Android ça m'intéresse tout autant...


J'avais installé le version beta du SDK puis j'ai rien pigé alors je l'ai viré, mais l'interface builder avait l'air bien sympa.
Des bouquins y en plusieurs mais j'en ai lu aucun...


Haut
 Profil  
 
 Sujet du message: Re: Les petites astuces CSS
MessagePosté: 17 Oct 2011, 09:29 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
Delirium Tremens a écrit:
Ca revient au même que 2 images, je trouve ça même plus simple d'avoir 2 images, on a pas géré le positionnement du background et à bien positionner chaque image à égale distance. Cela dit pour des barres de menu avec icônes ça peut être pratique...

Je corrige les bêtises que je dis, la technique des sprites a un avantage au niveau "rapidité", un navigateur met moins de temps à charger une seule grosse image que plusieurs petites. Surtout qu'un navigateur est limité au niveau des téléchargements parallèles par domaine (du coup si vous avez beaucoup de téléchargements parallèles (js, css, images...) pour une même page, il est préconisé d'utiliser des sous-domaines pour tromper le navigateur). Les sprites CSS devraient donc améliorer la vitesse et le référencement du coup (je les utilise pour un nouveau site, verdict dans quelques semaines, mais bon ajouter à d'autres techniques : CSS et JS compressés (bon ça c'était déjà le cas, mais le système de compression va changer), sprites, caches différés, stats en js au lieu de php, bannières pubs appelées en fin de page... ce sera donc difficile de savoir ce qui améliore le plus la vitesse du site, par contre j'attends de voir le ref, même si le site change aussi donc dur de comparer, faudrait faire ça sur un site sans rien toucher au design et aux balises).

Sinon petite astuce pour mettre du texte à la verticale (pas les lettres sous les autres, juste comme si on avait tourné une div à 90°) :

Citation:
-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


Comme d'hab, IE en fait qu'à sa tête, mais sinon ça commence à me gonfler aussi de devoir préciser à chaque fois le nav (webkit, moz, o et ie) dans les options css récentes. Le rendu est pas terrible sous IE tel quel, il faut mettre un background de la couleur du fond, pour ne pas que la police bave.

Source : http://snook.ca/archives/html_and_css/css-text-rotation

_________________
Delirium Tremens


Haut
 Profil  
 
MessagePosté: 04 Nov 2011, 16:55 
Hors ligne
Sacré trou du cul
Avatar de l’utilisateur

Inscription: 19 Juin 2005, 22:59
Messages: 11249
Pour ceux que ça intéresserait, il y a une magnifique bibliothèque pour faire des graphiques (courbes, barres, zones...) avec légendes, sans... : http://www.highcharts.com/

La licence est payante pour une utilisation commerciale (300 et quelques $) mais je pense que ça les vaut largement, c'est excessivement simple à prendre en main, ça produit un résultat très classe... Bon y'a plein de libraires qui produisent presque le même résultat, mais là je crois que c'est la Rolls.

_________________
Delirium Tremens


Haut
 Profil  
 
Afficher les messages postés depuis:  Trier par  
Poster un nouveau sujet Répondre au sujet  [ 170 messages ]  Aller à la page Précédente  1, 2, 3, 4, 5 ... 12  Suivante

Heures au format UTC + 1 heure


Articles en relation
 Sujets   Auteur   Réponses   Vus   Dernier message 
Aucun nouveau message non-lu dans ce sujet. Hop au boulot les hackers en herbe ...

Karlito

12

1798

21 Mar 2006, 21:01

Delirium Tremens Voir le dernier message

Aucun nouveau message non-lu dans ce sujet. Pour Liam et tous les vidéastes en herbe

Juan

0

1649

05 Juil 2006, 11:44

Juan Voir le dernier message

 


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages

Rechercher:
Aller à:  
Powered by phpBB® Forum Software © phpBB Group
Traduction par: phpBB-fr.com
phpBB SEO
Hébergement mutualisé : Avenue Du Web