blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘css3’

comment creer une animation en css3 ? la réponse avec magic css3 animation

magic css3 animations. permet divers animations de vos éléments html et vous permettra de rendre votre site plus vivant et de créer des interface plus ludique pour vos visiteurs. le tout est contruit en css 3 et facile à intégrer.

Spritebox : créer ses classes css par rapport à une image de votre site

C’est une tuerie (enfin je trouve) spritebox permet en ligne de créer les classes css pour la mise en page de votre site.

le principe: vous faites le design entier de votre site sur photoshop par exemple: vous générer un jpeg et vous vous rendez sur la page de spritebox  vous uploader votre design et ensuite vous adapter vos div a votre image et vous gérer les positions css automatiquement.

spritebox css

CSS 3 : texte effet stereoscopique en 3D

voici une petite astuce en CSS3 qui permet de donner l’effet d’un texte en 3D.

voici le code css:

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

voila ce que ça donne:

texte stereoscopique 3D CSS3

texte stereoscopique 3D CSS3

développeur web recherche contrat de professionnalisation

Bonjour,

j’écris cet article au cas ou un entrepreneur de « web agency »  tomberait dessus.

je recherche un poste de développeur web dans l’ain ou la région lyonnaise. je suis spécialisé dans le PHP Mysql et AJAX (jquery).

je souhaiterais faire un master en ingénierie informatique à science U à Lyon via un contrat de professionnalisation.

Hors aucune entreprise ne m’a répondu favorablement. C’est donc un ultime SOS que je lance via mon blog aux entrepreneurs ayant le courage de prendre de jeunes licenciés (excusez moi du terme :D) et les former à devenir de bon web développeur complets.

voila c’était le blues du développeur web.

à bon entendeur!

CSS3 maker, générateur de style css3

J’ai découvert ce matin une grosse tuerie!

un générateur de code CSS3 appelé CSS3.0 maker.

il vous permet de générer le code css pour:
– border radius
– gradient
– css transformations
– css animations
– css transitions
– text shadow
– box shadow
– text rotation
– font face

vous trouverez le site css3 maker en cliquant sur cette image:

css3 maker

css3 maker, un générateur de code css3

css3 internet explorer et CSS3 PIE

image logo CSS3 PIE

CSS3 PIE

CSS3 PIE nous réconcilie avec IE

En effet CSS3 PIE est capable de rendre la plupart des effets CSS possible sous ie (bonus: de ie6 – ie8).

INSTALLER CSS3 PIE

rien de plus simple, allez sur le site de css3 pie en cliquant sur l’image plus haut

– télécharger la librairie css 3pie

– Dézippez le fichier télécharger, le fichier qui nous interesse est pie.htc

–  écrivez un peu de css trois sur une div sous Firefox

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

a la fin de votre css faites le lien vers css3 pie

behavior: url(path/to/PIE.htc);

le tour est joué! normalement, is cela ne marche pas geulez dans les commentaires! ^^

css3 ombre portée sur du texte

Si vous aussi vous voulez faire un effet d’ombre portée sur du texte en css3 voici un exemple, malheureusement ce n’est valable que sous firefox 3.1 et au delà.

le html de notre tuto: avec le texte à ombrer,

<h2>Mon exemple</h2>

voici le css qui va permettre l’effet d’ombre sur le texte grâce a css3

#h2:hover
{
cursor:pointer;
font-size:24px;

text-shadow: 2px 2px 20px #999;
width:400px;
}

voila ce que ça donne quand je passe ma souris sur le titre:

ombre portee css3 texte

ombre de texte en css3

je vous laisse vous amusez avec les paramètres pour découvrir sur quoi ils influent.

ce petit effet d’ombre en css est plutôt sympa. cela évite de créer des images sous photoshop etc etc.

on peut aussi creer un effet d’ombre portée sur une div ou un input:

<div id= »madiv »>ceci est ma div avec son ombre portée en css 3</div>

le css de ma div qui va permettre l’ombrage

#madiv

{
-moz-box-shadow: 1px 1px 10px #FF0;
background-color:#FFF;

}

ombre portee en css sur un elementscomme on peut le voir a gauche le rebord de ma div sans ombre et le background gris, et à droite  avec l’effet le rebord ombrée et le background blanc.

Je rappelle que ces propriétés sont valide uniquement sous mozilla firefox!