PortFolio Shaion

Background animé sur un menu

Shaion — Sat, 21 Aug 2010 17:36:03 +0000

Vous souhaitez créer un menu un peu stylé, animé avec du Jquery ? C’est possible =) !

Pour commencer nous allons créer la partie html, rien de compliqué, une liste comme on en voit beaucoup.

1
2
3
4
5
6

Ensuite nous allons faire le css de ce menu :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.list{
height:40px;
list-style:none;
width:650px;
}

.list li a{
float:left;
width:150px;
text-align:center;
height:40px;
line-height:40px;
background:url(images/fond1.jpg) no-repeat top left;
color:#000;
text-decoration:none;
}

L’image que vous allez donc créer pour ce fond, sera de la hauteur que vous le souhaitez mais de 150 pixels de large comme un lien dans le menu.
Dans cette image vous aller faire une première partie qui fait 40 pixels de hauteur, un fond orange simple par exemple. Puis vous allez sur le reste de la hauteur (dépendant de la hauteur que vous aurez choisie) faire un dégradé, un motif, peu importe, tant que ça vous ressemble .

Pour ma part ça ressemblera à ça :

C’est clair c’est moche mais on s’en fou >_<.

Nous voilà pour la partie Jquery :

On importe Jquery (pour ce tutoriel je vous déconseillerais de le prendre depuis google parce que nous allons importer un plugin Jquery.
Puis nous créons un fichier list.js que nous importons aussi :
A mettre au préalable dans un dossier js évidemment.

1	<script src="js/jquery.js" type="text/javascript"></script> <script src="js/list.js " type="text/javascript"></script>

Ensuite nous collons ce bout de script (servant à l’animation du background) à la fin de Jquery.js.

Voilà la dernière partie Jquery (list.js) :

1
2
3
4
5
6
7
8
9
10
11

$(function(){
$(".list li a").mouseover(function(){
$(this).animate({backgroundPosition:"0px -200px"},500);
// "-200px" par ce que mon image de fond en fait 240 et que notre menu en prend 40.
});

$(".list li a").mouseout(function(){
$(this).animate({backgroundPosition:"0px 0px"},500);
});

});

Nous pouvons ajouter « .stop() » avant « .animate() » ce qui permet de stopper l’animation quand on passe assez vite d’un lien à un autre, mais d’après un ami ceci bloque l’animation sous chrome.

A vous de choisir !

Bon utilisation !

Démo – Source

Version Mobile

Shaion — Sat, 21 Aug 2010 13:04:29 +0000

Bonjour, je viens de passer le site en version mobile, pour pourrez donc accéder au site avec votre smartphone, la plus part sont integrés, si jamais ça ne fonctionne pas avec le votre, merci de me faire signe pour que je modifie le code.

A++ Shaion.

Site complet pour icônes web en tout genre

Shaion — Wed, 18 Aug 2010 22:32:18 +0000

Voici un petit site que j’aime beaucoup, un site complet pour tous les icônes que vous souhaitez !

Je tenais à le faire partager, plutôt que de vous laissez chercher sur google ou l’on trouve pas toujours ce que l’on souhaite ^^’ !

Lien…

Compresser son css en php ?

Shaion — Tue, 17 Aug 2010 22:04:26 +0000

En naviguant sur twitter (Je suppose que tu connais tout autant que moi ) j’ai trouvé une petite astuce twitter par Emob qui peut servir à tout le monde !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<?php
# Gzip
ob_start("ob_gzhandler");

# Header infos : set to a reasonable interval. I.e. 3600 (sec.) = 1 hr.
$expire_offset_time = 3600*24*7;

header('Content-type: text/css');
header('Cache-Control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expire_offset_time) . ' GMT');

# Compress output
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove spaces before / after delimiters */
$buffer = preg_replace(array('/(:|;|}|{)( |\r|\t|\n)+/','/ ({|;)/'), '$1', $buffer);
/* remove tabs, extra spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", " \n" , ' ', ' ', ' '), '', $buffer);
/* keep some readable content */
$buffer = str_replace('}', "}\n", $buffer);
return $buffer;
}

# Output buffering
ob_start("compress");

# Global includes
include("_layout/reset.php");
include("_layout/layout.php");
include("_layout/typo.php");

/* etc … */

# flush output to client

ob_end_flush();

?>

Il existe de nombreuses astuces autour du développement CSS, et en particulier avec PHP. Mais en général ce sont les mêmes qui reviennent, à savoir

ne faire qu’un appel de style css par page : idéalement regrouper tous les scripts en un via un peu de réécriture, et du php pour « merger » vos fichiers.

forcer le cache des fichiers css via une date d’expiration lointaine ; se passe via votre fichier htaccess, ou depuis les headers php que vous pourrez renvoyer

compresser vos fichier : des outils online le font pour vous, mais il y a aussi la solution maison, et c’est ce qui nous interesse dans ce billet !

etc …

Voilà pour les principales. Pour le détail de toutes les bonnes pratiques les plugins firefox Yslow et Page Speed vous feront un bon reporting ^^

[source]

L’avenir de PHP vu par Wilfried Ceron

Shaion — Tue, 17 Aug 2010 17:25:40 +0000

Voilà un petit interview de mon codeur préféré, Alias Yacodo, sujet plutôt intéressant sur l’avenir du php et l’arrêt du développement de PHP6.

L’avenir de PHP vu par Wilfried Ceron…

Hadopi Song III: Vivre ou survivre

Shaion — Mon, 16 Aug 2010 19:29:50 +0000

A l’heure ou Hadopi fait parler de plus en plus de lui, certain arrive à faire dériver la chose et rendre ça assez drôle.

Centrer un bloc horizontalement et verticalement ?

Shaion — Mon, 16 Aug 2010 12:20:00 +0000

Beaucoup de personne cherche ce code. Même moi qui touche assez au css, j’ai jamais réellement réussi à le faire (pas vraiment eu besoin de le faire non plus), et à ce moment là je me suis senti bien con.

Voici donc ce bout de code !

1
2
3
4
5
6
7
8
9

position: absolute;
left: 50%;
top: 50%;
width: 30em;
height: 30em;
margin: -15em 0 0 -15em;
border: 1px solid #000;
text-align: left;
background-color: #990;

Les Sprites en CSS

Shaion — Mon, 16 Aug 2010 09:13:14 +0000

Voici un superbe article sur les sprites en css, quelque chose que je devrais utilisé plus souvent pour éviter d’alourdir mes pages avec un trop plein d’image.

Le lien…

Azureus Rising

Shaion — Wed, 26 May 2010 20:48:03 +0000

Comme à mon habitude, je me baladais sur certains sites quelconque, quand je suis tombé sur cette superbe vidéo.

à Voir Absolument

Mega Drop Down Menu w/ CSS & jQuery

Shaion — Sun, 23 May 2010 07:55:53 +0000

While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.

According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other. – Jakob Nielsen – Alert Box

As I read his article he recommended that these kind of drop down menus should have a subtle time delay when hovering in and out of them. I decided to use the Hover Intent jQuery plugin to help me achieve this effect.

Voir le tutoriel…