Pixel Art en css3

Bonjour,



Je voudrais partager ma découverte, j'ai réussi à imiter le style pixel art grâce à quelques propriétés css3, en l'occurrence text-shadow, box-shadow, border-radius, et linear gradiant. (et un petit coup de border: outset)
Je vous pose ici le code de base :

.gradient {
/* Bords-Arrondis */
border-radius: 3px;
/* Texte et Ombre */
font-weight:bold;
border: 1px outset #CCCCCC;
text-align:center;
width:80px;
padding: 2px 5px;
font-family: 'Arial', Helvetica, sans-serif;
font-size:11px;
text-transform:uppercase;
color: #fff;
text-shadow: 0px 0px 1px #000;
box-shadow: 0px 0px 1px #000;
/* Anciens navigateurs */
background: #becf99;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Navigateurs récents */
background: -webkit-gradient(
linear,
left top, left bottom,
from(#becf99),
to(#91ab52)
);
background: -webkit-linear-gradient(
top,
#becf99, #91ab52
);
background: -moz-linear-gradient(
top,
#becf99, #91ab52
);
background: -o-linear-gradient(
top,
#becf99, #91ab52
);
background: linear-gradient(
top,
#becf99, #91ab52
);
}
.gradient:hover {cursor:pointer;
background: -webkit-gradient(
linear,
left top, left bottom,
from(#91ab52),
to(#becf99)
);
background: -webkit-linear-gradient(
top,
#91ab52, #becf99
);
background: -moz-linear-gradient(
top,
#91ab52, #becf99
);
background: -o-linear-gradient(
top,
#91ab52, #becf99
);
background: linear-gradient(
top,
#91ab52, #becf99
);
}
}

Vous avez juste à l'intégrer au style de la page, puis de rajouter

<p class="gradient">bouton</p>

Alors qu'en pensez-vous ?
Modifié par Oziris (07 Sep 2011 - 12:08)

très sympa, mais 2 chose :

1- tu n'es pas dans la bonne section du forum.

2- ta couleur de fond ne correspond pas à celle du gradient, du coup si le gradient ne fonctionne pas, on a un bleu à la place du vert.

edit :

une 3eme point, tu ne précise pas si tu autorise la copie de ton code ou non ou sous quelles conditions.
Modifié par ptitvincent (05 Sep 2011 - 12:26)

Bonjour ptitvincent,

Où verrais-tu ce sujet ?

Critique de vos site: code et design. Je pense

Edit : non mieux encore, dans tutoriel peut être.
Modifié par ptitvincent (06 Sep 2011 - 16:42)

Bonjour,

Il ne demande pas une critique de son site, donc ce ne serait pas le meilleur endroit. Il ne s'agit pas non plus d'une question ou d'une réaction en rapport aux articles et tutoriels du site d'Alsacréations. Bref, le salon CSS me semble le plus adapté, puisqu'il est question ici de CSS.

Mode geeke chieuse ^^

Il est vraiment sympa le bouton, par contre j'ai du mal à voir ce qui est "pixelart". On peut avoir une copier du résultat escompté en image peut-être (ou alors c'est moi qui sait pas copier coller un bout de code).

Sinon, dans la série boutons css3 j'aime bien le framework de Valentin sur Geekerie

Salut!

Dans le même concept : Radioactive button (en) (à mettre à jour pour la compatibilité gecko), CSS3 animated bubble button (Assez débile mais je suis fan).

Et mes boutons : http://www.pixemedia.com/temp/boutons-css3.html

jb_gfx a écrit :
Et mes boutons : http://www.pixemedia.com/temp/boutons-css3.html

En améliorant un chouïa la chose :

body {
    font-family: sans-serif;
    font-size: 0.75em;
}

.button {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid;
    border-radius: 8px;

    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);

    background-image:-moz-linear-gradient(
            top
        ,    rgba(255,255,255,.6) 0%
        ,    rgba(255,255,255,.3) 50%
        ,    rgba(255,255,255,.0) 51%
        ,    rgba(255,255,255,.6) 100%
    );
    
    background-image:-webkit-linear-gradient(
            top
        ,    rgba(255,255,255,.6) 0%
        ,    rgba(255,255,255,.3) 50%
        ,    rgba(255,255,255,.0) 51%
        ,    rgba(255,255,255,.6) 100%
    );
    
    
    -moz-transition-property: background-color, color;
    -moz-transition-duration: 0.2s;

    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 0.2s;   
}

.button.blue {
    background-color: #0670AA;
    border-color: #0E74BC
}

.button.blue:hover, .button.blue:focus {
    background-color: #00F;
    color: #000;
}

Voir la chose en action

L'idée du dégradé a été honteusement repompé de bonnes pratiques sur les dégradés CSS3

Note : Oui, les couleurs sont moches
Modifié par Florian_R (06 Sep 2011 - 23:09)

Florian_R a écrit :
L'idée du dégradé a été honteusement repompé de bonnes pratiques sur les dégradés CSS3

Note : Oui, les couleurs sont moches

Perso je fais mon design dans Photshop et en 3 coups de pipettes et de copier/coller j'ai mon CSS.

Bien entendu. Mais l'idée est d'avoir de base le fallback pour les navigateurs qui ne gèrent pas les dégradés en CSS, de simplifier le code surtout sur les rollovers et de pouvoir utiliser les transitions en CSS3. Y a que du gagnant dans cette méthode, tant que le dégradé ne joue que sur des nuances d'une même couleur.

Ah ouais mais je tape presque pas de code. Une syntaxe maison et une macro dans mon éditeur produit le code à ma place (avec le fallback pour IE).
Modifié par jb_gfx (07 Sep 2011 - 00:09)

Et bien merci, l'idée de ce bouton, c'est de surtout d'éviter une intégration en image pour faire du pixel art. Le style pixel art est réglé au pixel près, et du coup, très important de conserver des petites tailles (10px pour la taille de font) et d'être contrasté.
J'ai eu l'idée en re-vistitant le site de k101k, où je trouve çà très beau, mais un peu long à charger.
Je me demande d'ailleurs qui est le plus rapide entre l'image et le css...
C'est pour çà que je n'ai pas ajouter d'effets d'animation, trop lourdingue, un simple :hover en inversant le sens du dégradé, et c'est bon !
Merci donc pour vos autres exemples, mais désolé je préfère le miens. J'essaie d'étendre ces effets précis à un graphisme général, c'est à dire les mêmes effets sur les blocs ou les menus, le tout me plait pas mal, je le soumettrai bientôt aux critiques, dans la partie "critiques", cela va de soit.

Bien à vous.

PS:Le code est corrigé, sans erreurs de background, j'ai rajouté la propriété :hover, puis mis une image d’aperçu
Modifié par Oziris (07 Sep 2011 - 12:10)

la typographie est ton amie...

Oziris a écrit :
Je me demande d'ailleurs qui est le plus rapide entre l'image et le css...

ton css fait 1,38Ko, le bouton en lui-même (1 version) fait 1,20Ko, mais en nettement plus joli (avec un véritable dégradé et pas un gradient ^^)

En gros le css est légèrement moins lourd, reste la question du temps nécessaire pour un navigateur entre chipoter avec du CSS3 ou afficher une image

Et ça fait une requête HTTP de moins en CSS donc le choix est vite fait.

Si j'enregistre mon image, le gif fait 1,64ko (en 256 couleurs), et le css 1,25ko. Les deux ont exactement le même rendu et la qualité du dégradé est la même.
Mais si on fait un hover avec l'image, il faut multiplier par deux pour l'autre image de degradé inversé, tandis que le css reste à 1,25ko.
De plus le css est beaucoup plus pratique à mettre en place et à modifier selon les humeurs plutôt que d'aller sur photoshop pour redimensionner, enregistrer, etc...

Oziris a écrit :
le gif

Euh sérieux... on est en 2011, le GIF à un moment faut oublier.

Pourquoi?

Tes remarques sont souvent autistes...Tu nous fais un lien vers tes boutons, tu nous dis que tu utilises photoshop et utilises la pipette, que tu tapes pas beaucoup de codes, que la typographie est mon amie...
Et là encore une remarque où je dois trouver la bonne réponse.