Une porte ouverte sur ma vie numérique (et pas que) !!!
Article tagué CSS
[WEBDESIGN] Le plein de ressources !
17/07/10
Je passe pas mal de temps à collecter des liens vers des sites qui, souvent, eux mêmes, collectent des liens vers d’autres sites. Ces liens pointes inlassablement sur des choses similaires : De bonnes ressources WEBDESIGN !
Voici donc une petite sélection rien que pour vous :
Stupid WordPress Tricks est une collection de petites astuces pour WordPress qui peuvent paraitre évidente mais qui on le mérite d’être rassemblés en un même endroit.
16 Gorgeous Web Safe Fonts to use with CSS est une sélection de polices de caractères que l’on peut utiliser dans toutes nos CSS sans risques.
40 Excellent Tutorials For Web Development Using CSS3 and HTML5 vous montrera comment faire pleins de belles choses avec CSS3 et HTML5 (de l’application iPhone au formulaire en passant par les effets de textes).
WordPress Rainbow : 35 Colorful Free WordPress Themes est une collection de thèmes colorés pour WordPress, ce que j’aime dans cette liste de thème c’est qu’il y’en a vraiment pour tous les gouts.
21 Amazing CSS Techniques You Should Know le meilleur des techniques CSS a connaitre !
How to Create a Customize Dock with CSS3 vous connaissez le dock de MacOS ? La même chose en CSS dans cet article !
The 200 Bests Footer on the Web une tonne d’inspiration pour vos footers !
[CSS] Un joli effet pour le survol d’images !
17/06/10
Vous avez du voir que j’ai ajouté un petit effet au survol des images de droites qui pointent vers mes profils Facebook et Twitter.
Pour faire cela rien de bien compliqué.
Le code HTML d’affichage des images :
<div id="socialicon" align="center"> <a href="#"><img src="img01.jpg"></a> <a href="#"><img src="img02.jpg"></a> <a href="#"><img src="img03.jpg"></a> </div>
#socialicon a img{
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;}
#socialicon a img {width:90%;}
#socialicon a:hover img {width:100%;}Et voila ! Magique non ? L’effet va donc ressembler à un léger zoom au survol avec une belle transition CSS3 !
[WordPress] Un slider avec le top billets sans plugin !
17/06/10
Vous avez du constater que le blog à un petit peu changer de look 
En effet j’ai mis à jour mon thème hier en le synchronisant avec ma version de dev. C’est bel et bien le même thème qu’avant mais avec d’autres options vu que l’on peut pas mal le customiser maintenant !
Une autre nouveauté est l’apparition d’un petit slider avec le Top Billets ! En fait ce Top Billets va chercher les 5 billets les plus commentés, ceux qui ont donc suscités le plus de commentaires ou retweet.
Mais alors comment qu’on fait ???
Tout d’abord les ingrédients de la recette :
- Une requête WordPress.
- Un poil de jQuery.
- Une pincée de CSS.
La requête WordPress :
En gros on va chercher les 5 billets les plus commentés, puis on boucle dans une liste en affichant l’imagette si elle existe, sinon on remplace par une image par défaut, on affiche aussi l’extrait du billet et un lien pour lire la suite.
On met le tout dans une liste car cela va servir pour le slider !
<div id="slider">Top billets !
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
-
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
-
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumb160'); ?>
<?php else : ?>
; ?>/img/noimg.png)
<?php endif; ?>
<?php the_title();?>
<?php the_excerpt(); ?> Lire la suite...
<?php endwhile; ?>
[CSS] Adapter votre template à la résolution de l’écran
13/06/10
Je viens de mettre en oeuvre sur mon blog de dev une solution consistant à adapter le template à la résolution de l’écran.
Je l’utilise pour faire passer mon template de 2 à 3 colonnes si la résolution est supérieur à 1300px de large.
Alors comment fait on me direz vous ?
Tout d’abord on crée plusieurs feuilles de style.
Ici j’en ai deux :
- medium.css
- large.css
/*------------*/
/* medium.css */
/*------------*/
.space {margin:10px 0; clear:both;}
#wrapper {width:960px; position:absolute;left:50%;margin: 20px 0 20px -480px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:right;padding:20px 5px;}
#sidebar2 {width:300px; margin:0;float:right; padding:20px 5px;}
#footer {clear:both;}
/*----------*/
/* large.css */
/*----------*/
.space {margin:10px 0; clear:both;}
#wrapper {width:1280px; position:absolute;left:50%;margin: 20px 0 20px -640px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:left;padding:20px 5px;}
#sidebar2 {width:300px; margin: 0; float:right; padding: 20px 5px;}
#footer {clear:both;}
Ensuite on appel la feuille de style avec des conditions :
[CSS] Ajouter un bel effet au survol de vos liens !
12/06/10
Grace aux nouvelles fonctions inclus dans CSS3 nous pouvons désormais avoir de jolies effets de transitions au survol des liens et sans utiliser le moindre fragment de JS.
Je ne vous le cache pas IE passe encore entre les mailles, mais IE passe toujours entre les mailles et de toute manière ca n’est qu’un effet cosmétique, donc un petit plus pour les personnes qui surfent sur de vrais navigateurs !
Alors comment qu’on fait ???
a {
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
}
Simple non ?
Vous voulez voir ceci en action ? Aller avec un vrai navigateur sur http://beta.chezwanders.info. C’est mon espace de travail en ligne, tout ce que je test est déjà appliqué à ce WordPress avant d’être mis en place sur mon blog.
