lbsquat

YOU by Shaka

lbsquat — Fri, 25 Jun 2010 19:06:24 +0000

Je vous avait déjà parlé de Shaka dans ce billet et là je viens de tomber sur une autre de ces oeuvres et ça déchire!!!!

Il s'agit d'une toile de 300X110 cm avec un mélange de techniques pour un résultat de "sculpture / peinture" sur toile, c'est beau !!!!

BlizAar, une explosion de couleurs à vos pieds

lbsquat — Wed, 23 Jun 2010 20:31:40 +0000

Derrière ce titre se cache en fait une petite boutique "BlizAar" que j'ai découvert aujourd'hui et ou j'ai tout simplement flashé sur leurs chaussures, et franchement... il y a de quoi!!

Voici une vidéo de présentation de la boutique... et des shoes!!

(source: myspace.com/drmedzoo)

Bien entendu ils ne font pas que ça, au programme:

Marquage adhésif
Marquage laser sur tous supports
customisation d'objets
Peintures décoratives intérieur / extérieur
Réalisation de toiles à la demande
Flocage sur textiles

Et avec tout ça je suis tombé sur des personnes vraiment très sympathique dont DrMedzoo qui réalise les custos (celles de Fatal c'est lui aussi) ça méritait d'être dit, non??

Je tiens quand même à préciser que je n'ai aucune actions dans cette boutique et que ce n'est pas non plus de la lèche, c'est tout simplement le fait que j'ai vraiment flashé, voilà. (maintenant si il veulent m'offrir une paire je ne dit pas non )

dmslab.com

myspace.com/drmedzoo

facebook.com/DrMedzoo

Et voilà pour l'adresse:

BlizAar
27 route de corbeil
91390 morsang-sur-orge

Bon bah maintenant va falloir faire des économies €€€ ^^

Créer une galerie pour votre portfolio grâce à jQuery

lbsquat — Thu, 08 Apr 2010 08:20:19 +0000

Voici un petit tutoriel enfin plutôt une compilation de différentes ressources jQuery qui va vous permettre de mettre en place un slider qui contiendra différentes vignettes animées qui laisseront apparaitre les informations que vous souhaiterez, y compris un bouton pour pouvoir afficher une image en grand, visible grâce à une lightbox.
Bien entendu tout est possible via les css, cette présentation n'est qu'un exemple.

Pour ce tutoriel vous aurez besoin de 3 choses:

creat-a-slick-and-accessible-slideshow, le slider
sliding-boxes-and-captions, ce qui va vous permettre de faire l'animation sur vos images
clearbox 3, la lightbox pour afficher vos images

Et puis aussi un éditeur de texte, perso je vous conseil quand même Notepad++

Dans l'archive que je vous propose en téléchargement il y a tout ce dont vous avez besoin il vous suffit donc de copier les différents dossiers / fichiers / images de la même façon que sur l'exemple mais faites bien attention aux urls qui appellent vos fichiers.

Démonstration Download

Voici pour les explications:

Le slider

Nous allons commencer par mettre en place le slider.

Pour cela ouvrez votre fichier index ou header (selon votre cas) et dans la balise head nous allons appeler les fichiers néccessaire au bon fonctionnement et copiez aussi le dossier images_slider à la racine de votre site.

la bibliothèque jQuery

les fichiers css et javascript

Et voilà vous avez les fichiers nécessaire pour afficher le slider.

Maintenant ouvrez le fichier ou vous voulez placer votre slider, et copier ceci

Titre
Le texte que vous voulez afficher
visualiser

L'attribut rel va servir dans l'appel de la lightbox et ce qui se trouve entre les crochets sera pour créer le diaporama mais on verra ça plus tard.

Là vous avez une miniature pour en ajouter il suffit de copier la div="slide" et tout ce qui est dedans et de coller en dessous ou au dessus de celle présente.

Titre
Le texte que vous voulez afficher
visualiser

Maintenant on va passer au css pour donner forme à tout ça.
Créer une nouvelle feuille css et enregistré la à la racine de votre site en la nommant slideshow.css et collé ça dedans.

#slideshow {
margin: 10px auto 0 auto;
width: 767px;
height: 365px;
background: transparent;
position: relative;
}
#slideshow #slidesContainer {
margin: 0 auto;
padding: 0;
width: 687px;
height: 365px;
overflow: auto;
position: relative;
}
#slideshow #slidesContainer .slide {
margin: 0 auto;
padding: 0;
width: 667px;
height: 365px;
}
.slide img {
float: right;
margin: 0;
border: none;
}
.slide p {
line-height: 1.5em;
margin: 0;
}
.slide a {
color: #000;
font-weight: bold;
text-decoration: none;
padding: 0 0 2px 0;
border-bottom: 1px dotted #181818;
}
.control {
display: block;
width: 39px;
height: 270px;
text-indent: -9999px;
position: absolute;
cursor: pointer;
}
#navDiapo{
display: block;
width: 15px;
height: 16px;
position: absolute;
right: 25px;
bottom: 10px;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background: transparent url(images_slideshow/control_left.png) no-repeat 0 0;
}
#rightControl {
top: 0;
right: 0;
background: transparent url(images_slideshow/control_right.png) no-repeat 0 0;
}

Et voilà votre Slider est fait !!

Toute la documentation et les options disponible ici

Animation sur image

Maintenant on va donner un petit effet sympa à vos miniatures qui permettra de dévoiler les divers informations.
Dans votre fichier index on va appeler (toujours dans la balise head) le fichier boxgrid.css (on va voir ça juste en dessous) et mettre le javascript nécessaire au bon fonctionnement.

Et pour le css il vous suffit de coller ça dans une nouvelle feuille nommée boxgrid.css et enregistrée la à la racine de votre site.

.boxgrid{
width: 180px;
height: 90px;
font-family: Verdana, sans-serif;
margin: 4px 22px;
float:left;
background: #f3f3f3;
border: solid 1px #aaa;
overflow: hidden;
position: relative;
}
.boxgrid h3 {
font-size: 12px;
font-weight: bold;
padding: 2px 2px 0 2px;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
font-size: 10px;
padding: 2px 2px 0 2px;
margin: 0 0 2px 0;
color:#404040;
}
.boxgrid_link {
margin: 0 5px 0 0;
}
.boxgrid a {
width: 15px;
height: 13px;
display: block;
text-indent: -9999px;
text-decoration: none;
float: right;
background: transparent url("images_slider/preview.png") no-repeat top;
}

Toute la documentation et les options disponible ici

Et voilà l'animation est bonne !!

L'affichage de vos images via clearbox3

Cela va vous permettre d'afficher votre image en grand et en plus en toute beauté !! Dans cette galerie on va opter pour un diaporama histoire d'avoir une navigation plus sympa.
Clearbox3 est pour moi la meilleur des lightbox (que je connaisse) pleins d'options sont disponible et très pratique, vous verrez !!

Copiez le dossier clearbox ainsi que le fichier clearbox.js dans votre dossier js.

Dans votre fichier index et entre la balise head

Pour en revenir à la fonction diaporama, en fait il suffit donc de rajouter l'attribut

rel=""

Puis clearbox

rel="clearbox"

Définir un nom pour la galerie ce qui aura pour effet d'afficher toutes les images comportant ce nom de galerie

rel="clearbox[ gallery=photos ]"

Et maintenant le timing du diaporama, soit 10 secondes

rel="clearbox[ gallery=photos,,slideshowtime=10 ]"

Et voilà pour l'affichage de vos images.

Toute la documentation et les options disponible ici

Bon bah c'est fini !!

Démonstration Download

J'espère que tout est assez clair si toutefois vous avez des soucis n'hésitez pas à le signaler dans les commentaires

Le graffiti s’invite chez vous

lbsquat — Sat, 03 Apr 2010 19:43:30 +0000

Si il y a bien une chose qui est agréable quand on se balade dans les rues bien ternes de nos grandes villes c'est de tomber sur une belle petite fresque histoire de nous réveiller les yeux.
Et bah moi je trouve que le graffiti s'invite aussi très bien dans notre intérieur et c'est même très agréable !!

Réalisation by skills

Chambre

Chambre

Chambre

Bureau

Chambre

Chambre

Restaurant Picnics, Metz

Restaurant Terra Nomis

Réalisations by aerosoleil

Chambre

Chambre

Chambre

Chambre

Bar / Brasserie

Réalisation by décospray

Show room

Salle de pause

Chambre

Chambre

Restaurant sur Toulouse

Il est possible de réaliser de superbes décors en harmonisant bien sur tout le reste de la pièce, je sais pas vous mais moi ça me donne envie de faire appel à leurs services !!

29 webdesigns très nature

lbsquat — Thu, 01 Apr 2010 20:28:28 +0000

Voiçi une petite sélection de webdesigns venant de Deviantart sur le thème de la "nature", ouais j'suis vert en ce moment ^^

imagine_air by mindfuckx

fairy by detrans

great_pakistan by naseemhaider

book_store by downsign

my_portfolio by sencerbugrahan

kenrico_redone by juliusx

designers_weblog by harm-less

renueva_consultores by sogaso

designers_junior by fictionfourtyfour

kindergarten by phil-sn

pro_bass_tours by loveinjected

path by crazyclouds

waterfall by coloformia

v5 website by v5design

gamer portfolio by princepal

AVG blog by antoniavg

bakalland by t3t5uo

buntzel muehle by carl06

honduras guia by eamejia

ruonis by kntz

furniture makers by VictoryDesign

papugi by sinvar

eastern drilling by nas-wd

mint magazine by lumberpack

ridge agency by cryogenicdreams

villaggio by ducoradini

pixelzeesh by pixelzeesh

wlt city v2 by hkgood

cute creations by cute creations

Que l'inspiration vous soit verte !!

Michael Möller alias Phanox

lbsquat — Thu, 01 Apr 2010 10:38:26 +0000

Phanox est d'origine Allemande et vit à Lüneburg, ses armes, Photoshop et Cinema4D... voilà le résultat.

N'hésitez pas à visiter son site et son deviantart pour voir d'autres de ses réalisations.

Portfolio de Phanox
Deviantart de Phanox

Après le blog le portfolio aussi subit son lifting

lbsquat — Wed, 31 Mar 2010 08:25:21 +0000

Et oui c'est également le printemps pour mon portfolio, maintenant il est aussi "nature". Pour cette nouvelle version j'ai opté pour un site "à l'horizontal", certains diront, c'est bien ça change, d'autres diront qu'un site horizontal c'est pas bien... moi j'ai juste voulu tester (c'est mon premier) et puis en même temps je trouve ça sympa !!

Bon concernant les petites choses que j'ai utilisé, il y a:

create a slick and accessible slideshow using jquery by sixrevisions
sliding boxes and captions with jquery by buildinternet
clearbox3 by George Krupa

http://portfolio.lbsquat.com ou ici pour une prévisualisation

shaka, artiste peintre

lbsquat — Sun, 21 Mar 2010 17:46:27 +0000

shaka est donc un peintre qui réalise la majorité de ces oeuvres à la bombe aérosol aussi bien sur mur que sur toile et franchement il asure!!!

2 réalisations en acrylique sur toile

2 autres toiles

Et pour finir voilà 2 petites vidéos

Vous pouvez retrouver toutes les créations de shaka sur son blog.

Le blog de shaka

Nouvelle déco pour le blog

lbsquat — Sun, 21 Mar 2010 15:58:31 +0000

Et oui... encore un nouveau design!!!

Alors pourquoi ce changement, d'une part l'ancien (pas si vieux que ça) ne me plaisait plus et puis je voulais surtout une autre présentation notamment sur l'accueil, différencier la sidebar de l'accueil à celle des billets, j'ai aussi essayé de soigner la présentation (polices,couleurs,taille des textes,etc...), enfin bon quelques petites modifications, rien de bien important. J'ai également rajouté une page d'archives disponible dans la navigation du header et aussi fait ma page à propos.

Histoire de bien faire les choses j'ai aussi modifié l'apparence de la page de connexion grâce à ce tutoriel trouvé sur geekeries.fr (je sais... je suis le seul à la voir mais bon...) j'ai également limité le nombre de plugins, pour la sidebar elle est "widget ready" même si pour le moment il n'y en a pas.

Côté graphisme j'ai voulu quelque chose de sombre et nature et je suis plutôt très satisfait du résultat
Il y aura surement encore quelques petites modifications au fil du temps par contre si vous constatez des bugs graphique/affichage n'hésitez pas à me les signaler via les commentaires, merci.

Divers ressources utilisées pour le design

grunge peeling stickers social media icons on tutorial9 pour les icones des réseaux sociaux (le .psd est dispo dans le pack, pratique pour créer les icones manquantes).
birdies cute free twitter icons on smashingmagazine pour l'icone twitter qui se situe dans le footer.
coca-cola family by bluemalboro pour la canette de coca (par exemple sur l'index).

J'espère que la nouvelle déco vous plait!!

Application Android: WebSharing

lbsquat — Mon, 15 Feb 2010 14:31:15 +0000

Voiçi une petite application que j'ai découvert ce matin et qui est tout simplement INDISPENSABLE!! Avec WebSharing vous allez pouvoir transférer via le wifi des fichiers de votre ordinateur vers votre mobile Android, et vis et versa, et le tout par le navigateur web de votre pc, simple non??

Liens

Version gratuite: WebSharing Free

Liens

Version payante (2.99$): WebSharing

Infos

Testé sur un HTC Hero

lbsquat

YOU by Shaka

BlizAar, une explosion de couleurs à vos pieds

Créer une galerie pour votre portfolio grâce à jQuery

Le slider

Titre

Titre

Animation sur image

L'affichage de vos images via clearbox3

Le graffiti s’invite chez vous

29 webdesigns très nature

Michael Möller alias Phanox

Après le blog le portfolio aussi subit son lifting

shaka, artiste peintre

Nouvelle déco pour le blog

Divers ressources utilisées pour le design

Application Android: WebSharing

Liens

Liens

Infos