JT Yeek : cadeaux originaux geek et design

bbxdesign

CSS + WordPress + Web Design

Mode normal → (affichage complet du blog)

Suivant

Précédent

css3

bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress

Colonnes, marges et nth-child en CSS 3

Billet

Mail d’une amie :

J’ai une colle pour toi :

1 – 4 colonnes de 240px => largeur totale 960px
2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960px
Et pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.
How is it possible ?

Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.

Lire la suite →

Lien

→ Making Love to Webkit

Exceptionnelle utilisation des 3D Transforms en CSS3.
(Hyper fluide avec Chrome sous Mac OS X mais je ne l’assure pas partout).

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

Billet

Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Screenshot formulaire CSS3
Lire la suite →

CSS3 Please : un générateur de CSS3

Billet

Si vous voulez déjà utiliser des propriétés CSS3, vous devez savoir qu’elles sont implémentées sur plusieurs navigateurs mais avec des dénominations différentes.
Par exemple border-radius (pour obtenir des coins arrondis)  :

  • -moz-border-radius sous Firefox
  • -webkit-border-radius sous Chrome et Safari
  • border-radius sous Opera et le prochain IE9

Etant donné qu’il est assez laborieux de trouver chacune des dénominations pour une seule et même propriété, CSS3 Please vous sera d’une grande aide. Il vous permet d’éditer les valeurs pour chaque propriété CSS3 puis de les copier et les utiliser sur (quasiment) tous les navigateurs, que ce soit :

  • les ombres
  • les dégradés
  • les fonds semi transparents en RGBA
  • la rotation
  • les arrondis
  • @font-face (pour inclure la police qu’on veut)

Quelques-unes de ces propriétés marchent même sous IE6 et IE7!

Modernizr : un JavaScript pour utiliser du HTML 5 et du CSS 3 dès maintenant

Billet

modernizr

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

Populaire Tutoriels Fun