MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

Tutorial CSS, création d’un bouton design

Ce tutorial va vous permettre de créer des boutons personnalisés pour vos formulaire ou autre.

Première étape :
Créer les différentes images composant le bouton.

bg_button_span.gif bg_button_p.gif bg_button_a.gif

Seconde étape :
Une fois votre bouton créer et découper il ne vous reste plus qu’à insérer le code CSS suivant dans votre page.

<style type="text/css">
<!--

.clear { 

   overflow: hidden;
   width: 100%;
}

a.button {

 background: transparent url('bg_button_a.gif') no-repeat scroll top right;
 color: #FFF;
 display: block;
 float: left;
 font: normal 12px arial, sans-serif;
 font-weight:bold;
 height: 34px;
 margin-right: 6px;
 padding-right: 18px;
 text-decoration: none;

}

a.button p {

 background: transparent url('bg_button_span.gif') no-repeat;
 display: block;
 margin:0;
 padding:0;

}

a.button span {

 background: transparent url('bg_button_p.gif') repeat;
 display: block;
 line-height: 24px;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;

}

a.button:active {    

 background-position: bottom right;
 color: #000;
 outline: none;

}

a.button:active p{

 background-position: bottom left;
 padding:0;
 margin:0px;

}

a.button:active span {

 background-position: bottom;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;  

}

-->
</style>

Troisième étape :
Appeler ou insérer le bouton dans votre page HTML par le biais de de la ligne de code suivante :

<a class="button" href="#" onclick="this.blur();"><p><span>Je suis le plus beau bouton du monde</span></p></a>

Cette petite manipulation CSS, va vous permettre d’avoir des boutons plus stylés que les boutons part défaut, je tiens juste a vous informer que ce ne sont pas des boutons de type formulaire (input) mais plutôt une personnalisation de la balise lien (A).

Résultat du tutorial :

AddThis Social Bookmark Button

clipart-design.com : Clipart vectoriels gratuits

Clipart deSIGN est un site proposant des ressources graphiques pour les professionnels. Le site propose bien entendu des packs d’images de qualité payants mais également des centaines de clipart vectoriels gratuits dans diverses catégories ! Les images vectorielles sont proposées au format AI (Adobe Illustrator), CDR (Coreldraw), EPS (Photoshop) et SWF (Macromedia Flash).

des centaines d’autres clipart vectoriels sur Clipart deSIGN.

Source : webstorming

AddThis Social Bookmark Button

What the font : des fonts a partir d’une image

What the font est un nouveau service de MyFonts. Qui vous permet de trouver des fonts a partir d’une image, Il suffit de charger le fichier ou l’URL de votre logo et en quelques secondes il vous affiche le résultat.

Il faut dire que le résultat n’est pas d’une justesse absolu mais ça nous donne une orientation de recherche c’est déjà pas mal et si la réponse ne vous satisfait pas MyFonts vous propose de consulter un expert.



source : techcrunch

AddThis Social Bookmark Button

Mixer avec les bouts de vos doigts


Tiens, voici une belle idée simple, conceptuelle et rigolote, franchement je vous garanti un moment de pur fun. Ne pas oublier de laisser vos commentaires sur ce petit bijou. lien du site

AddThis Social Bookmark Button

DesktopOgraphy: du rêve sur photo


DestopOgraphy est un site qui propose des fonds d’écrans mais pas n’importe quels fonds d’écrans, que de petites merveilles graphiques pour enchanter nos petits yeux.

Ainsi, chaque année depuis 2005, DestopOgraphy propose une petite exposition de sublimes montages graphiques alliant photos d’espaces naturels et subtiles effets de design.

Surtout ne zappez pas l’introduction du site, la musique qui y est diffusée propose une ambiance qui nous met immédiatement dans un certain état d’esprit, reposante/relaxante et fraiche, de quoi se sentir tout disposé à profiter des images qui vont suivre. D’ailleurs je vous propose de l’écouter sans plus attendre

AddThis Social Bookmark Button

ColorJack : Bien choisir ses couleurs

Colorjack Colorjack est un générateur de couleurs en ligne à la sauce Web 2.0 qui propose des palettes de couleurs pour la construction de toute création graphique selon les accords chromatiques. Cet outil réalisé avec PHP, Javascript et Canvas permet de guider Les désigneurs dans le choix et l’agencement des couleurs constituant une charte graphique. De plus si vous manquez d’inspiration pour le choix de vos couleurs, il est possible de visualisez des palettes créées par d’autres utilisateurs en page d’accueil.

AddThis Social Bookmark Button

Web20Badges, Générateur de badge a la sauce Web 2.0

Web20Badges est un générateur gratuit de badge type web 2.0.
web20badges.com met à la disposition de tous un utilitaire permettant de générer ce genre d’artifice
On choisit la forme, la couleur, le texte. On valide et nous voilà transporté dans l’univers magique du Web 2.0 !

AddThis Social Bookmark Button

Pawel Nolbert - HelloColor

Pawel Nolbert - HelloColor
Dans une mouvance créative proche de Pete Harrison ou Peter Jaworowski, le graphiste polonais Pawel Nolbert propose sur son porfolio, HelloColor, des créations évidemment colorées mais surtout de belles mises en scène. Il y a d’ailleurs quelques créations en collaboration avec Pete Harrison.

Visiter le porfolio de Pawel Nolbert - HelloColor

AddThis Social Bookmark Button

Xcavator, recherche d’images à vos couleurs

Xcavator est un site très sympa qui permet simplement de piocher parmi un énorme stock de photos.
La recherche peut se faire facilement grâce à un mot clé, à une couleur, ou à une photo similaire…, Vous pouvez aussi les partager par email en glissant les photos que vous avez aimé dans la barre juste en bas de la pages

je vous laisse tester car il est tard pour moi là ! C’est par là !

AddThis Social Bookmark Button

FeelImage, Rechercher vos images intelligament

FeelImage: un moteur de recherche d’images “intelligent”
Un nouveau moteur de recherche d’images “intelligent” (encore en phase alpha) qui vous permet d’effectuer des requêtes pas uniquement par tags mais également avec des phrases entières (exemple: Red Flower in spring), disponible pour le moment uniquement en anglais.

FeelImage indexe des photos à partir de Photozou et Flickr. Chaque recherche vous fournit également une liste de tags similaires pour plus d’options de recherche. La recherche avancée inclut des options de couleur, saison, date, moment de la journée,… Vous pourrez également trier votre recherche par licence Creative Commons, Le site de l’image d’origine ainsi que l’ordre des photos.

La technologie sur laquelle se base FeelImage permet d’avoir des résultats pertinents en priorité avec des options de couleur et de temps. En conclusion un service ambitieux, intéressant qui offre une bonne alternative à Google images et autres pour des requêtes spécifiques et avancées.

AddThis Social Bookmark Button

1000 icones PNG Gratuites

Ces icones sont au format png mais ne sont pas disponibles depuis un package .zip ou .rar. Vous ne pouvez les télécharger qu’un par un. C’est pourquoi, pour éviter ceci, je vous propose cette extension (pour firefox seulement, ceux qui ont IE, voilà une bonne raison d’abandonner ce navigateur moins performant et d’opter pour firefox…) qui vous permet d’enregistrer tous les fichiers cibles d’une même page web en un seul clic. Pas mal non ?

Pour les droits d’auteur y’a rien qui est dis alors a vos sourie et cliquez ici

AddThis Social Bookmark Button

Les finalistes du FlashForward 2007

Les finalistes du FlashForward 2007
Le festival international dédié à Flash, à l’occasion duquel une remise des prix récompense les meilleurs sites Flash du web

La prochaine édition se tiendra du 19 au 21 septembre à Boston. Flash, Flex, ActionScript, Apollo, Papervision3D, les sujets de conversation ne manqueront pas cette année. Et les 60 finalistes du concours ont été nomminé hier par le jury, à raison de 4 dans chacune des 15 catégories. Les lauréats, ainsi qu’un prix spécial décerné par le public seront désignés lors de la conférence.

Du très beau monde en compétition, comme le site GetTheGlass

AddThis Social Bookmark Button

Multiplié votre inspiration


Un super travail fait par fredzone, il nous propose de découvrir une cinquantaine de liens histoire de doper l’imagination & l’inspiration surtout dans le cas d’une petite panne. A consommer sans modération.

» lire la suite de l’article

AddThis Social Bookmark Button

Recevez les derniers articles par mail :

 

Recent Comments

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris