jeudi, juin 23 2005

CSS2 pratique du design - le livre de Raphaël

Hoplà ! je l'ai depuis ce week-end !
Mon beau livre, fraichement acheté, posé sur un coin de bureau

N'étant pas un gros acheteur de livres techniques, j'attendais une occasion de m'en procurer un qui soit complêt sur le développement CSS/XHTML. Raphaël est arrivé-é-é, sans s'p... euh et voilà l'occase, connaissant ses talents de designer web et son érudition au sujet des feuilles de style.

Je l'ai rapidement parcouru : il répond à de nombreux besoins au quotidien, ET en cours d'apprentissage. Pédagogique et de référence, ce livre est celui qu'il vous faut !

Alors j'ai été scotché quand j'ai découvert l'un des exercices pratiques, sur un sujet qui m'est particulièrement familier ;o)

lundi, juillet 12 2004

Effets spéciaux sur le jardin zen

Petite découverte grâce à Hervé, qui a fait quelques styles pour le Jardin zen de la page des effets spéciaux.

J'aime bien justement celui d'Hervé.

Sinon, il en a fait un autre qui est pas mal. Bravo !

samedi, mai 22 2004

a{display:block;}, mon ami

S'il est une propriété utile tant pour un menu que pour le titre d'une page dont on voudrait que le lien prenne toute la largeur, c'est bien display: block; appliquée à une balise de lien (a) !

Petite illustration. Nous construisons une liste de la forme :

<ul>
    <li><a href="#">lien 1</a></li>
    <li><a href="#">lien 2</a></li>
</ul>

avec la feuille de style :

ul{
    list-style:none;
    width:300px;
    margin:0;
    padding:0;
    border:1px green solid;
}
li {
    list-style:none;
    text-align:center;
    padding:0;
}

Si le lien est stylé comme ceci :

a {
    border:1px blue solid;
    width:100%;
    padding:0;
}

cela donne pas un lien sur toute la largeur (100%) du bloc parent :

en revanche :

a {
    border:1px blue solid;
    width:100%;
    padding:0;
    display:block;
}

le fait :


Second exemple : le titre de page.

Voici le code html suivant :

<div id="pageHeader">
	<h2><a href="#">Mon titre</a></h2>
</div>

Et sa feuille de style :

#pageHeader h2 a{
    background:#36C;
    width:100%;
    height:110px;
}

Voici ce qu'on obtient :

si maintenant je corrige la feuille :

#pageHeader h2 a{
    background:#36C;
    width:100%;
    height:110px;
    display:block;
}

nous obtenons :

Et le lien est actif sur l'ensemble de la partie en bleu !

Edit : correction du titre (petite coquille...) Merci Sibélius pour l'avoir signalé !

Edit 2 : A noter les commentaires pertinents de notre éleveur de choucroute national, au bas de ce billet

mercredi, janvier 7 2004

Trucs magiques en CSS (2)

Une petite mine d'or que le site de Stu avec en particulier une autre lampe de site, mais aussi ces magnifiques miniatures et tout plein d'autres trucs magiques... A vous de découvrir !

samedi, janvier 3 2004

Trucs magiques en CSS

Trouvé sur le #42 de Marco, une lampe de site vraiment ingénieuse. Avec force travail, on arrive à créer de petites merveilles avec les feuilles de styles !

Lire la suite...

lundi, novembre 10 2003

Zengarden - style horizontal

Encore un exploi du CssZenGarden, avec en prime, un bel effet de tuner

mercredi, novembre 5 2003

Du CSS 3 que fait Safari 1.1 et que ne fait pas encore Mozilla

Vu chez Gatan[fr] un lien vers cette page où l'on peut voir à l'œuvre ombrage de caractères et transparance de blocs et de texte ! Magnifique, si ce n'est que ça ne fonctionne pas encore avec gecko, hélàs...

Des fonctionnalités dont j'ai eu besoin plus d'une fois... malheureusement résolues avec du png ! Vivement que soit généralisé l'usage des css 3, et que l'on puisse en toute liberté construire nos styles à coup de text-shadow et en sélectionnant les :target !

samedi, octobre 11 2003

Du style pour dotclear

En attendant un style plus élaboré pour ITINÉRAIRELIBRE, voici le moyen de voler le style des autres !

Dans le template, il faut mettre à la place du css normal :

<? if (isset($_GET["css"])) : ?>
<link rel="stylesheet" type="text/css" href="<? echo $_GET["css"]; ?>" title="Style choisi"/>
<link rel="alternate stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" media="screen" title="Défaut"/>
<? else : ?>
<link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/style.css" media="screen" title="Défaut"/>
<? endif; ?>

Ensuite, il suffit d'invoquer la feuille de style du voisin pour lui ressembler :

Ici comme Olivier (oui, bon, c'est pas ça : il y a des blocs qui ont des span ou divs renommés), Stéphane (ok, c'est pas mieux !), bon, comme Laurent, alors (Arg, j'ai un template qui va pas ou quoi ?), Maurice, Nicky (excellent avec les adresses absolues !), François (voilà qui est mieux), Tristan (ahhhh ! ohhhh !)...

D'ailleurs, le Standblog a l'air de ne plus répondre sur http://standblog.com... Il faut donc aller voir sur http://standblog.apinc.org/.

jeudi, octobre 2 2003

Le site de Mozilla retravaillé

D'après Mozillazine[en], un projet officiel[en] serait mené pour enfin se débarrasser des tables html qui ont fait jaser au moment de la sortie[fr] du nouveau site mozilla[en].

Des initiatives là dessus avait déjà été prises, mais apparement, ce n'est pas venu aux oreilles de Ben Goodger, le designer de la nouvelle page d'accueil et développeur de Firebird, jusqu'à maintenant ! cf les propositions de LaurentJ et Glandium (parti au japon aujourd'hui !). Il y en a sûrement d'autres...

lundi, septembre 1 2003

Bug ou pas bug ?

J'hésite à poster ce qui va suivre comme un bug, ne sachant pas, surtout où cela se situe... mais il y a bien un problème quelque part, dans l'affichage des styles avec la gestion des z-index sur gecko !

Voyez la page suivante. Avec votre stylesheet switcher favori, permutez sur "pas de style", puis revenez au style par défaut. Ce que je vois avec Firebird, c'est que le rectangle arrière qui fait office d'ombre dans un div est passé à l'avant... pour revenir à l'affichage d'origine, il faut recharger la page.

Ce qu'il faut savoir, c'est que le div prévu pour l'arrière plan a un z-index fixé à zéro et est déclaré avant le div de premier plan. Tout ceci pour s'assurer de l'ordre d'apparition des deux blocs. Naturellement, si j'ajoute un z-index élevé au div de premier plan comme ici, l'ordre restera toujours correct avec Firebird du moins. Mais cela signifie dans une page où de nombreux blocs serait présents, que pour s'assurer que l'affichage restera le même en toutes circonstances, il faut fixer un z-index à chaque bloc... contraignant et peu économique !

Autre aspect du problème : impossible de travailler sur la page en question avec EditCSS ou Edit Styles... contrariant !

Enfin, je dis ça, je dis rien ©

samedi, août 9 2003

Nouveau style zengarden

Du nouveau dans le zengarden :
Prêt-à-porter magnifique, tout en vertical me fait forcément penser à celui de Clément [fr].

A regarder avec un navigateur qui sait afficher les css ! il y a du position:fixed estompant joliement le texte dans un dégradé conduit sur un canal alpha !

samedi, août 2 2003

Des problèmes

Comme en maths (souvenez-vous!) voici quelques problèmes...

Des solutions existent sûrement, j'aurais aimé autrement qu'en javascript.
Parfois le CSS3 peut bien aider, mais hélàs, c'est le CSS3... Vivement qu'on y passe tous !

Les problèmes sont là [fr], là [fr] et là [fr].