mardi 04 juin 2013

dabblet.com

Catégorie : CSS : Test/Astuces

test et demo ont migré pour un temps sur dabblet.com

Si vous êtes curieux, vous en trouverez une centaine ici: dabblet.com/user/gcyrillus.

Vous en trouverez aussi sur cssdeck, codepen et jsfiddle

En fait, en ce moment mon cœur balance entre codepen et jsfiddle.

Dabblet sympa, a trop de défaut encore, et ne fonctionne pas sous tout les navigateurs.

dimanche 15 juillet 2012

coup de scalpel avec border-radius

Catégorie : CSS : Test/Astuces

Démo ou rappel sur les possibilités offertes par la syntaxe de border-radius

badge
bullet
stone
drop
loaf

border-radius (W3C)

samedi 09 juin 2012

menu deroulant accessible avec la tabulation et hover

Catégorie : CSS : Test/Astuces


tabuler moi ou toucher moi (smartphone)

Ce menu déroulant au clique, hover ou la tabulation est compatible smartphone et tablette.

Dans la serie tabindex, voici le menu déroulant à un niveau, qui se deroule avec 1 clique, :hover ou :focus.

Il se parcours à l'aide de la tabulation sans se refermer (ceux qui s'y sont essayer, comprennent de quoi il s'agit)

Le menu est ci dessus , pour le tester avec la touche tab, cliquer ici pour placer la touche tab devant le menu et ensuite appuyer dessus (sur la touche tab ou le menu sur une tablette).

Le truc ?

Les sous-menu sont disposés très loin à gauche et les liens en float:right. Lorsque le focus vient sur un lien, on lui donne une marge gauche trés grande, aussi grande que le menu est loin, ce qui le remet dans la zone d'affichage. les liens sont flottants, ils reviennent alors tous ensembles.

disclaimer

  • Il n'y a pas de contenu en display:none;
  • pas de JavaScript
  • pas d’éléments de formulaire maltraités
  • c'est accessible
  • Pour IE7, ben! essayé donc avec :active

menu déroulant à 2 niveau sans javascript

c'est aussi possible. La suite et demo dans l'article. Ce second menu s'ouvre via la tabulation , :hover ou 1 clique de souris /=> pression du doigt sur un écran tactile.

Lire la suite de : menu deroulant accessible avec la tabulation et hover

samedi 12 mai 2012

balises html5 et lightbox CSS , tabindex

Catégorie : CSS : Test/Astuces

Une autre galerie basé sur tabindex pour naviguer d'une image a l'autre, celle-ci mime le comportement d'une lightbox. Incompatible avec IE8 et inf , defaut de positionement de textes dans Chrome et Safari et tabindex pas totalement supporté. Fonctionne donc trés bien dans Firefox, Opera et IE9 (10 ?).

reinitialiser, recaler la tabulation et le focus.

Orchidée 1

orchid1.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 2

orchid2.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 3

orchid3.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 4

orchid4.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 5

orchid5.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 6

orchid6.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 7

orchid7.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24
Orchidée 8

orchid8.jpg

Dimensions
400X300
Résolutions
96pp
Profondeurs couleurs
24

Tester et copier les démos

Pour profiter complétement du test , voir la page en mode article en cliquant sur le titre ou voir la démo seule : Lightbox en html5 et CSS3.

Une autre demo, mimant les bordures autour de l'image avec linear-gradient : lightbox css3 et linear-gradient pour ajouter un cadre sous l'image. Attention, compatibilité limité au navigateur implémentant les background multiple et linear-gradient.

Vous pouvez copier ces démos et mes images qui vont avec (de piètre qualité certes) et torturer ces 2 bases chez vous.

Enfin, c'est pas parce que on peut qu'il faut ! , et vice versa.

dimanche 06 mai 2012

hacks CSS (opera en exemple)

Catégorie : CSS : Test/Astuces

Dans la series des mauvaises pratiques, il y a les hacks CSS.

Il etait une fois, quand les médias queries commençaient à se généralisée ...

En premier lieu le malin s’aperçut qu'elles s'appliquaient ou non dans tel ou tel navigateur, et avec un peu de dérapage elles devenaient des hacks ... éphémères.

Voici un exemple qui au départ viser Opéra: @media screen and (min-width: 0px) { body:before { content:'votre navigateur est Opéra'; } }

Rapidement, ces hacks ne ciblaient plus rien ou trop de navigateur, donc le malin commença a tester des requêtes "loufoques" pour jouer sur une implémentation incomplète ou mal finie de tel ou tel navigateur.

Second temps , Voici la requête précédente reprise à l'attention d'Opéra quand Firefox fut capable de l'appliquer: @media screen and (min-width: -10px) { body:before { content:'votre navigateur est Opéra'; } } , le coté loufoque est cette valeur de largeur négative.

autre temps plus récent, opéra se conforme enfin aux recommendations du W3C (EN) , et de part la même, rend ce hack obsolète, c'est généralement la dure vie des HACKS CSS !.

Enfin, le malin a la tête dure et de coq en âne, il en arrive à ressortir de nouvelles requêtes comme : @media not screen and (0) { body:before { content:'votre navigateur est Opéra'; } }, et paf le chien !

Quelle durée de vie pour cette nouvelle requête inattendue ?

Lire la suite de : hacks CSS (opera en exemple)

vendredi 04 mai 2012

afficher/cacher un div au clique en CSS

Catégorie : CSS : Test/Astuces

Petite démonstration des possibilité de :before allié a :focus et le selecteur + pour reproduire un "toggle" gérer classiquement en Javascript.

Contrairement aux apparences, ce n'est pas le lien qui masque le div, mais le div qui masque le lien !

premier toggle CSS

Afficher : cacher :

Premier div a afficher ou cacher sans l'aide de javascript

En recouvrant le lien d'un élément transparent lorsque que le lien a le focus et que cacher est affiché , la tentative de recliquer dessus lui fait perdre automatiquement le focus.

Second test pure css

Afficher : cacher :

Un autre div pour ce "toggle en CSS" , avec de simples règles génériques.

Dans cette exemple le selecteur principal est l'id du bloc de démo, mais il suffit d'attribuer une class au lien et de cibler cette class dans les styles.

Lire la suite de : afficher/cacher un div au clique en CSS

dimanche 13 mars 2011

menu centré: technique de base et avançées

Catégorie : CSS : Test/Astuces

test centrage menu en display sans flottement

technique de base

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}

a:hover,a:active, a:focus
{	background-color:#7A991A;}

correction espace avec word-spacing

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link, a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}

a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction espace avec word-spacing*/
ul {
word-spacing:-0.5em;}
a {
word-spacing:0em;}

correction espace avec letter-spacing

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link, a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}

a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction espace avec letter-spacing*/
ul {
letter-spacing:-0.5em;}
a {
letter-spacing:0em;}

correction fond ul

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/*correction fond ul*/
#fd-ul , .fd-ul{
	background-color:#98bf21;
}

correction fond ul et display

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction fond ul et display*/
ul {
	background-color:#98bf21;
}

correction fond ul et display lien

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction fond ul et display lien*/
ul {
	background-color:#98bf21;
}
a {display:inline-block;}

correction fond ul et display sur ul et lien

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction fond ul et display sur ul et lien*/
ul {
	background-color:#98bf21;
	display:table;
	margin:auto;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
a {display:inline-block;}

test sur centrage menu et flottements

correction display sur ul et float sur lien

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction display sur ul et float sur lien */
ul {
	background-color:#98bf21;
	display:table;
	margin:auto;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
a {float:left;}

correction display bis sur ul et float sur lien

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction display bis sur ul et float sur lien */
ul {
	background-color:#98bf21;
	display:inline-table;
	margin:auto;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
a {float:left;}

correction display sur ul et float sur li

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction display sur ul et float sur li */
ul {
	background-color:#98bf21;
	display:inline-block;;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
li {float:left;}

correction display bis sur ul et float sur li

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* correction display bis sur ul et float sur li */
ul {
	background-color:#98bf21;
	display:inline-table;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
li {float:left;}

et formatter comme si c'etait un tableau en marge auto.

display sur ul et li et float sur lien

CSS de base associé:

/* technique de base */
ul
{	text-align:center;	
	margin:0;
	padding:0;	
	list-style-type:none;
}
li
{	display:inline;	}
/* lifting */
a:link,a:visited
{	display:inline;
	width:120px;/* inefficace si inline */
	padding:4px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-decoration:none;
	}
a:hover,a:active, a:focus
{	background-color:#7A991A;}
/* display sur ul et li et float sur lien */
ul {
	background-color:#98bf21;
	display:table;
	margin:auto;
/*pour ie7 et moins en commentaires conditionnels: display:inline;zoom:1;*/
}
li {display:table-cell}
a {float:left;}

vendredi 17 décembre 2010

bouton CSS3

Catégorie : CSS : Test/Astuces

Démo : boutton css3 a partir d'une image

compatible : Firefox, Chrome, Safari, Opera

L'image issue d'un fichier psd

source: dribble

la decoupe d'une tel image pose nombre de question. la plus simple est de passer ces boutons en image map avec les text alternatif adequat sur les liens et de modifié la source de l'image via javascript selon l'etat.

exemple en image

Cette Démo n'est pas la pour decoupé cette image, mais demontrer que l'on pourrait presque s'en passer dans nos navigateurs récents.

Le resultat en css3 (ou copie legerement degradée)

la seule image utilisée est celle-ci: image de fond , aspect granulé trés leger en image de fond.

Si le resultat est trés approchant dans Firefox, on note des differences de gestion des dégradés d'ombrage dans les autres navigateurs.

onoff

onoff

onoff

onoff

Les effets de torsion ne sont pas terribles , textes et bordures.

Les effets de transitions css ne sont pas non plus excitant et diffèrent aussi d'un navigateur à l'autre.

Quel sont les regles css3 utilisées

Elles sont:

  1. box-shadow
  2. border-radius
  3. transform:skewY(xdeg) translateY(xpx)
  4. text-shadow

Enfin

Certaines nouvelle régles CSS3 permet de s'amuser un peu pour apprendre à s'en servir, mais les navigateurs ne sont pas totalement prés à les mettre en applications: disparité des resultat et défaut graphiques encore trop important.D'autant que IE est vraiment à la traine .

lundi 31 mai 2010

before, content et rotate au service des zones reactives

Catégorie : CSS : Test/Astuces

Les regles content:''; , transform:rotate(XXdeg); et les pseudos :before , :after permette de generer des element et de les faire pivoter dans une structure html passive sans l'aide de javascript.

En reprenant un menu déroulant , j'etait assez agacé de le voir se replier inopinement car les zones réactives n'etait pas assez larges.

Le javascript associer n'etait pas encore finie , je me suis servie des styles (comme a mon habitude) pour elargir les zones reactive et ainsi finir les test de rendu visuel de ce menu déplier ...

Lire la suite de : before, content et rotate au service des zones reactives

dimanche 20 décembre 2009

:before et :after pour un faux eclairage , gradient .

Catégorie : CSS : Test/Astuces

Firefox et effet gradient en css

Sous Firefox et sans l'aide d'image ni de javascript , vous devriez voir quelque chose comme ceci : miniature : effet d'eclairage sur les coins d'un conteneur

Comment ?

Lire la suite de : :before et :after pour un faux eclairage , gradient .

page 1 sur 2 | suivante > | >>