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)

lundi 25 juin 2012

carrousel fluide 100% CSS

Catégorie : CSS : Valign

Derniere variante et toujours sans javascript:

«»

un

deux

trois

quatre

cinq

six

samedi 23 juin 2012

carrousel manuel 100% css3

Catégorie : CSS:Transitions

Variante du carrousel précédent avec une navigation pas à pas. (pas de js)

.

un

1

deux

2

trois

3

quatre

4

cinq

5

six

6

1

samedi 23 juin 2012

Onglet et carrousel ,100% CSS3

Catégorie : CSS:Transitions

Pour cet démo, 5 liens, 1 boite , :target et transition pour faire un carroussel qui va de gauche a droite.Pas de position:absolute; ici.


un

deux

trois

quatre

cinq

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

lundi 14 mai 2012

text-align:justify sur derniere ligne et centrage de boites

Catégorie : CSS : Valign

A quoi sert text-align:justify;

Dans un texte, le nombre de mots et leur nombre de lettre varient et sont a même distance des un des autres, la longeur de chaque ligne peut varier.

justify, compense cette différence en plaçant le premier et dernier mot de chaque ligne aux extrémités en adaptant l'espacement entre les mot pour remplir la ligne de façon homogène.Cela s'appelle justifier le texte.

La dernière ligne, pouvant contenir peu de mot, garde un comportement non justifier.

Ça marche bien, pourquoi forcé la dernière ligne ?

Cette derniere ligne pourrait:

  • - être rempli a 80 ou 90% et justifié sans nuire a sa lisibilité
  • - être une seule ligne comportant des images ou des liens
  • être une ligne avec un mot a gauche et une image a droite que l'on veut a droite et que l'on ne peut pas mettre en flottant
  • etc ...

Comment ?

Pour que le texte soit justifié sur la dernière ligne, il ne faut pas que celle-ci soit la dernière, nous en ajoutons donc une avec :after qui permet d'injecter cette nouvelle et dernière ligne.

Testons voir

Les styles utiles a cet effet :

[selecteur]:after {
content:'';
display:inline-block;
width:100%;
}

La ligne ajouté est visualisée par une bordure jaune.

Ce qui donne :

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Le resultat n'est pas terrible.

Modulons en injectant des portions de lignes de longueurs différentes

redimensionnez votre navigateur en largeur pour tester les différents résultats.

50%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

25%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

10%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Ce dernier conditionnant la justification à 90% de remplissage n'est pas mauvaise, a moins , c'est désastreux. On peut y trouver une utilité.

une technique de centrage horizontal justifié

Interactions possibles avec des éléments de type inline-block

un mot et une image.

Orchidé une fleur

des images

une fleur une fleur une fleur une fleur

Des boites

un titre sur
2 lignes

un paragraphe a 50% de largeur de la boite , Curabitur accumsan viverra libero

une fleur

Une liste de liens :

Conclusion

text-align:justify et :after peuvent servir a mettre en place une technique de centrage horizontal justifié. en attendant que {flex:justify;} soit utilisable dans nos futur navigateur.

lundi 14 mai 2012

fausses colonnes avec inline-block et linear gradient

Catégorie : CSS : Valign

Attention, troll en embuscade !

Nop, juste pour dire qu'il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs.

CSS mis en œuvre

  • margin:auto; pour le conteneur
  • display:inline-block; et vertical-align pour les 2 similis colonnes
  • :before, position:absolute pour les bordures centrales et l'ecart entre les deux simili-colonnes.
  • linear-gradient pour les couleurs de chaque simili-colonne et l'espace entre elles

Selon les version de IE on aura toujours nos deux colonnes avec ou sans séparations.

Démonstration:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus tellus. Nam tristique neque in arcu vestibulum a egestas massa rutrum. Suspendisse dictum pharetra tortor, quis commodo purus semper viverra. Donec imperdiet, ligula in posuere tempor, sapien ante rhoncus nibh, eget placerat tellus dolor tristique neque. Donec et libero non nibh blandit congue. Suspendisse potenti. Integer ac urna augue, in fermentum massa. Vestibulum vel enim vitae arcu imperdiet auctor vitae at ante. Nulla et massa mi. Aliquam a enim eros, ut ultricies enim. Pellentesque in lectus quis diam pellentesque adipiscing. Aliquam in dui a elit tincidunt lacinia nec sed eros. Donec condimentum libero ac massa venenatis vulputate.
Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus. Praesent euismod elementum nunc, quis interdum erat egestas non. Phasellus condimentum pharetra mi, nec condimentum ligula iaculis vitae.

Pas de tableau ni de display:table-cell; et pour Ie7 et moins , on a 2 colonnes quand même mais on perd les bordures centrales et les 2couleurs.

Si l'alignement vertical ne vous interesse pas , alors float a la place de display:inline-block convient parfaitement, c'est d'ailleurs le choix mis en application comme alternative pour IE7 et inf .

Stop

Arrêtez de confondre table ou display ou float , utilisez donc ce que vous pouvez quand il faut .

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.

vendredi 11 mai 2012

Rideau coulissant en CSS (ouverture/fermeture)

Catégorie : CSS:Transitions

Pour cette démo, petite reproduction simpliste d'une scéne de théatre avec le rideau qui s'ouvre et se ferme.

Démo

Passez la souris au dessus du rideau pour l'ouvrir.

Animation complète dans Firefox où l'on voit le tissu du rideau se rétracter sur lui même et s'ouvrir légèrement en biais.

Au théatre

Ce soir !

Propriétés utilisées :
:before,:after,box-shadow, transition:, linear-gradient, background-size, transform:rotate();, ...

Visualisez le code source pour retrouvé les propriétés et valeurs CSS utilisées.

page 1 sur 7 | suivante > | >>