aw ! web LE PARTAGE

CSS3 Ombres Box ("box-shadow" propriété)

2011-07-15T18:03:00.001+02:00

CSS3 Ombres Box ("box-shadow" propriété)

: Ajout d'infos sur la création d'ombres dans IE en utilisant des filtres.

CSS3 soutient une nouvelle " box-shadow "propriété qui rend les travaux légers d'ajouter des ombres à des éléments sur votre page, comme des images, DIV et s'étend. La fonctionnalité est supportée dans FF3.5, Safari 3.1 +, et Google Chrome, mais le tout via des versions spécifiques au fournisseur de cette propriété.Et IE a longtemps soutenu les ombres portées simples via son pripoertary " Drop Shadow "filtre. Ensemble, ils vous permettent d'ajouter facilement des ombres légères qui travaillent dans ces navigateurs pris en charge tout en dégradant très bien dans les navigateurs qui ne sont pas.

La syntaxe de "box-shadow» est:

box-shadow: <horizontal> <vertical> <blur> <couleur>

Aux termes duquel:

Horizontaux : Une longueur en spécifiant le décalage horizontal de l'ombre. Une valeur positive (ie: 5px) rendra l'ombre à la droite de la boîte, tandis qu'une valeur négative (c'est à dire:-10px) va le rendre à la gauche à la place.
Verticale : Une longueur en spécifiant le décalage vertical de l'ombre. Une valeur positive (ie: 5px) rendra l'ombre suivant le fond de la boîte, tandis qu'une valeur négative (c'est à dire:-10px) va le rendre à la gauche à la place.
Blur: Une longueur en réglant le rayon diffusion / flou. La valeur par défaut est 0, ce qui signifie pas de flou. Une valeur positive augmente le flou, alors qu'une valeur négative rétrécit réellement l'ombre. Cette propriété par défaut à 0 si elle n'est pas spécifiée.
Couleur: Une valeur de couleur définissant la couleur de l'ombre.

Comme mentionné précédemment, tout en FF3.5 et WebKit navigateurs prennent en charge le
" box-shadow "propriété, ils actuellement sa mise en œuvre via leur fournisseur de propriété équivalente lui est propre. Donc, pour appliquer une ombre CSS3 case pour un conteneur,
vous devez définir tous les trois propriétés dans le même temps, chacun suivant les règles
exactes même syntaxe que la propriété d'origine ci-dessus.

L'exemple suivant ajoute une ombre à un DIV qui a compensé à droite et au fond, sans flou:

{shadow1.

box-shadow: 5px 5px # 818181;

-webkit-box-shadow: 5px 5px # 818181;

-moz-box-shadow: 5px 5px # 818181;

filtre: ProgID: DXImageTransform.Microsoft.dropShadow (color = # 818181, offX = 5, offY = 5, positif = true);

}

</ style> <div class = "shadow1" style = "width: 500px; height: 50px; padding: 5px ; de fond: la marine; border: 1px solid black; "> </ div>

Avis de la dernière ligne, ce qui est propre méthode d'IE d'ajouter une ombre à l'aide de filtres.
Pour plus d'informations sur sa syntaxe, voir: " Drop Shadow "filtre.

Voici une ombre très similaire, sauf avec un rayon de flou de 8px ajouté:

. shadow2 {

box-shadow: 7px 7px 8px # 818181;

-webkit-box-shadow: 7px 7px 8px # 818181;

-moz-box-shadow: 7px 7px 8px # 818181;

Filtre : ProgID: DXImageTransform.Microsoft.dropShadow (color = # 818181, offX = 7, offY = 7, positif = true);

}

</ style> <div class = "shadow2" style = "width: 500px; height: 50px; padding: 5px; background: navy; border: 1px solid black; "> </ div>

L'effet de flou n'est pas visible dans IE, comme «Ombre portée» d'IE filtres ne le supporte pas. Et voici une ombre ajoutée à une image, inversée et en utilisant une couleur brunâtre:

. shadow3 {

box-shadow:-6px-6px 10px # 561A0B;

-webkit-box-shadow:-6px-6px 10px # 561A0B;

-moz-box-shadow:-6px - 6px 10px # 561A0B;

filtre: ProgID: DXImageTransform.Microsoft.dropShadow (color = # 561A0B, offX =- 6, offY =- 6, positif = true);

}

</ style> <img src = "brandstorming.gif« classe = "shadow3" />

3D CSS buttons

2011-07-15T17:06:00.003+02:00

3D boutons CSS

En utilisant border-style d'un élément d'attributs CSS départ,
vous pouvez
facilement créer un bouton 3D regarder.
Un pas de plus sur le
bouton peut aussi apparaître déprimé si désiré, en passant
d'une valeur border-style de départ pour en médaillon.
Les exemples ci-dessous sont 100% CSS basée,
pour ne pas mentionner léger:

RSS

XML

Dynamic Drive
Le code css

<style type="text/css">

.rssbutton{

background-color: #ff6600;

border: 1px #ff6600 outset;

padding: 0 2px;

color: white;

text-decoration: none;

font: bold 10px Verdana;

}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{

color: white;

}

.cssbutton{

background-color: #d1ec4c;

border: 2px #d1ec4c outset;

padding: 1px 4px;

color: black;

text-decoration: none;

font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

}

.cssbutton:visited{

color: black;

}

.cssbutton:hover{

border-style: inset;

background-color: #e3f48e;

padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/

}

.cssbutton:active{

color: black;

}

</style>

Le code html

<p>

<a href="votre lien ici"class="rssbutton">RSS</a>

<a href="votre lien ici" class="rssbutton">XML</a>

</p>

<p><a href="votre lien ici" class="cssbutton">Dynamic Drive</a></p>

CSS Triangle Flèche DIV

2011-07-15T15:51:00.001+02:00

CSS Triangle Flèche DIV

Une caractéristique subtile
de CSS qui a été exploité
pour faire quelque chose
d'intéressant bordures CSS et l'utiliser
pour créer des triangles CSS pur.
Ces triangles ont l'avantage d'être
extrêmement léger
(aucune image utilisée)
et évolutive pour démarrer. La technique
fonctionne en utilisant le fait que les 4 bordures
CSS d'un élément
de répondre à un angle; lorsque les dimensions de l'élément est
mis à 0, l'effondrement des 4 frontières et toucher un de l'autre
, créant ainsi l'apparence de quatre triangles:

Voici le CSS utilisée pour créer la DIV-dessus:

# Triangles {margin: 3em; largeur: 0; / * dimensions ensemble de DIV à 0 pour son effondrement des frontières et toucher un de l'autre * / height: 0; border-color: rouge bleu vert jaune; / * haut, droite, bas, et de bordure gauche * / border-style: solid; border-width: 50px; / * largeur de chaque frontière * /}

balisage
<div id="triangles"> </ div>

Pour afficher simplement un triangle spécifique puis, vous devez définir la frontière en couleurs de toutes les frontières, mais le côté souhaité transparente.
L'exemple suivant ajoute un triangle en CSS à un DIV pour produire un regard bulle qui peut être utilisé pour afficher les commentaires, citations etc Chaque flèche est ajoutée à la DIV, sans majoration utilisé par voie de CSS Generated Content . Le résultat sont régulièrement injectés DIV avec des améliorations progressives CSS qui dégradent ainsi dans les navigateurs moins capables.
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{

width:600px;

min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/

background: black;

color:white;

padding:5px;

position:relative;

word-wrap:break-word;

-moz-border-radius:5px; /*add some nice CSS3 round corners*/

-webkit-border-radius:5px;

border-radius:5px;

margin-bottom:2em;

}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/

content:'';

display:block;

position:absolute;

top:-20px; /*should be set to -border-width x 2 */

left:30px;

width:0;

height:0;

border-color: transparent transparent black transparent; /*border color should be same as div div background color*/

border-style: solid;

border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/

content:'';

display:block;

position:absolute;

top:100%; /*should be set to 100% */

left:30px;

width:0;

height:0;

border-color: black transparent transparent transparent; /*border color should be same as div div background color*/

border-style: solid;

border-width: 10px;

}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/

content:'';

display:block;

position:absolute;

top:10px;

left:-20px; /*should be set to -border-width x 2 */

width:0;

height:0;

border-color: transparent black transparent transparent; /*border color should be same as div div background color*/

border-style: solid;

border-width: 10px;

}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/

content:'';

display:block;

position:absolute;

top:10px;

left:100%; /*should be set to 100% */

width:0;

height:0;

border-color: transparent transparent transparent black; /*border color should be same as div div background color*/

border-style: solid;

border-width: 10px;

}

</style>

Le code html

<div class="uparrowdiv">

This is a test

</div>

<div class="downarrowdiv">

This is a test

</div>

<div class="leftarrowdiv">

This is a test

</div>

<div class="rightarrowdiv">

This is a test

</div>

Trames d'image en utilisant CSS3 border-image

2011-07-14T00:41:00.027+02:00

Trames d'image en utilisant CSS3 border-image

CSS3 permet de spécifier une image en tant que bordure d'un élément, au lieu de juste une couleur unie.Alors que sur la surface de cela ne semble pas particulièrement intéressant, la façon dont la propriété fonctionne, il est plus que celui qui rencontre l'oeil. Le border-image vous permet de spécifier la propriété d'une seule image à des fins puis les tranches de cette image pour créer l'effet frontière désirée. Oui, le CSS est désormais trancher. border-image est actuellement pris en charge dans tous les navigateurs modernes, à des degrés divers sauf IE (comme d'IE9). La syntaxe abrégée est:

border-image: url (image.png) 25 40 12 10 étirer;

Où:

URL : L'image qui devrait être utilisé comme l'image de bordure.
slicevalues : Jusqu'à quatre numéros qui indiquent où le navigateur devrait tranche de l'image:
- La 1ère valeur fixe le décalage de la première coupe horizontale du haut de l'image. Pour les unités de pixel, ne comprennent pas les "px" suffixe.
- La 2ème valeur fixe le décalage de la deuxième coupe verticale de la bordure droite de l'image.
- La valeur troisième fixe le décalage de la troisième coupe horizontale du bas de l'image.
- La valeur quatrième fixe le décalage de la quatrième coupe verticale de la bordure gauche de l'image.
étirer : Comment les tranches doivent être orientés à l'intérieur des frontières de l'élément. Les valeurs valides sont "étirer", "répéter", "rond", ou "espace".

Pour slicevalues , si un seul nombre est défini, la même valeur sera utilisée pour toutes les 4 coupes. Si deux nombres sont définis, le premier est utilisé pour les coupes haut et en bas, et la seconde le coupe droite et à gauche. Peu importe, 4 coupes sont faites à l'image au total, et le navigateur se retrouve avec 9 tranches qu'il utilise pour rassembler l'image de bordure d'un élément. Chaque tranche est utilisé pour remplir les bords correspondants de la frontière de l'élément, avec la tranche du centre couvrant l'élément lui-même (et devrait être rendue transparente dans la plupart des cas).
Ce poste n'est pas à propos d'une description détaillée de la frontière de l'image - qui devra être pour un autre poste. Pour ce poste, ce que je veux démontrer, c'est comment utiliser cette propriété pour ajouter facilement des trames d'image à conteneurs sur votre page. D'abord, créer l'image que vous souhaitez utiliser comme cadre; ici j'ai fouetté deux cadres simples pour illustrer la technique:

Exemple 1:

Notez que les deux images ci-dessus ont un intérieur

transparent pour le contenu qu'ils peuvent m

ontrer à travers cadrage.

Maintenant, au cœur de la matière à ajouter

une bordure d'image à un élément,

de définir les frontières de l'image

propriété avec slicevalues qui coupent l'image

comme vous le souhaitez. Également définir

une largeur de bordure de propriété écho

de ces valeurs. Assez parlé, à quelques exemples

dès maintenant! Notez que les exemples ci-dessous

ne fonctionne pas sous IE (comme d'IE9):

Le code CSS:

. IMAGEBORDER {

border-width: 20px;

-moz-border-image: url (frame.gif) 20 étirer; / * version de Mozilla * /

-webkit-border-image: url (frame.gif) 20 étirer; / * Webkit Version * /

-o-border-image: url (frame.gif) 20 étirer; / * Opera version * /

ms-border-image: url (frame.gif) 20 étirer; / * syntaxe IE quand il prend en charge cette prop * /

border-image: url (frame.gif) 20 étirer; / * Version standard * /

}

Balisage:

<div class="imageborder" style="width:50%;min-height:150px">

texte contenu ici ...

</ div>

Exemple2:

Balisage

Exemple3

Le code CSS:

. Imageborder2 {

border-width: 30px 25px;

-moz-border-image: url (frame2.png) 25 30 étirer;

-webkit-border-image: url (frame2.png) 25 30 étirer;

-o-border-image : url (frame2.png) 25 30 étirer;

-ms-border-image: url (frame2.png) 25 30 étirer;

border-image: url (frame2.png) 25 30 étirer;

Balisage:

<div class="imageborder2" style="width:470px;height:300px;background:url

(ocean_thumb.jpg) centre centre no-repeat">

</ div>

Élégant boutons de soumission

2011-07-14T00:30:00.015+02:00

Élégant boutons de soumission

La plupart des gens seraient d'accord de l'apparence par défaut des boutons submit est plutôt terne et sans attrait. L'utilisation de CSS et une image de joli dégradé de fond, il est facile de transformer un bouton de formulaire à partir d'un canard pour un cygne.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le css

<style type="text/css">

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;

background:url(lien d'image ici media/formbg.gif) repeat-x left top;

}

</style>

Le code html

<form>
<input type="text" style="width: 200px; border: 1px solid gray" /> <input type="submit" class="formbutton" value="Submit" />
</form>

CSS sans tableaux Formulaire

2011-07-14T00:24:00.000+02:00

CSS sans tableaux FormulaireC'est une forme tableless CSS
que vous pouvez utiliser comme modèle pour la mise en œuvre de votre propre forme légère. Il utilise une combinaison de marges flotteur et négatif pour créer une mise en page à deux colonnes pour la forme. Un problème avec le formulaire est IE6 de trois bug jogging pixel , qui est abordé dans la démo manuellement, en compensant les cases jogging avec une marge supplémentaire.Vous pouvez appliquer une correction plus poussée, mais il va augmenter la taille du code. IE7 ne souffre pas de bug 3 pixels.

Démo:

Le CSS:

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

<style type="text/css">

.cssform p{

width: 300px;

clear: left;

margin: 0;

padding: 5px 0 8px 0;

padding-left: 155px; /*width of left column containing the label elements*/

border-top: 1px dashed gray;

height: 1%;

}

.cssform label{

font-weight: bold;

float: left;

margin-left: -155px; /*width of left column*/

width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/

}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/

width: 180px;

}

.cssform textarea{

width: 250px;

height: 150px;

}

/*.threepxfix class below:

Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.

to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html

* html .threepxfix{

margin-left: 3px;

}

</style>

Le code HTML:

<form id="myform" class="cssform" action="">

<p>

<label for="user">Name</label>

<input type="text" id="user" value="" />

</p>

<p>

<label for="emailaddress">Email Address:</label>

<input type="text" id="emailaddress" value="" />

</p>

<p>

<label for="comments">Feedback:</label>

<textarea id="comments" rows="5" cols="25"></textarea>

</p>

<p>

<label for="comments">Sex:</label>

Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />

</p>

<p>

<label for="comments">Hobbies:</label>

<input type="checkbox" name="hobby" /> Tennis<br />

<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />

<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />

</p>

<p>

<label for="terms">Agree to Terms?</label>

<input type="checkbox" id="terms" class="boxes" />

</p>

<div style="margin-left: 150px;">

<input type="submit" value="Submit" /> <input type="reset" value="reset" />

</div>

</form>

Formulaire html css

2011-07-14T00:19:00.000+02:00

CSS sans tableaux sous forme d'entreprise

Ce modèle est un élégant tableless forme CSS avec un look résolument d'entreprise et se sentent. Les éléments forme la plus couramment utilisée avec les légendes correspondantes sont ajoutées pour vous lever et aller vite. Structurellement le formulaire CSS est composé de deux "colonnes" - une gauche stylisée "légende" colonne, plus une colonne DIV droit enfermant le champ de formulaire réel. Les deux colonnes sont flottait "gauche" et ensuite mis dans un «rangée» DIV qui égalise hauteurs des deux colonnes «divergentes de sorte que le plus haut gagne en.

Démo:

Le code css

<style type="text/css">

.feedbackform{

padding: 5px;

}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/

width: 550px; /*width of form rows*/

overflow: hidden;

padding: 5px 0;

}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */

float: left;

width: 150px; /*width of label (left column)*/

text-transform: uppercase;

border-bottom: 1px solid red;

margin-right: 15px; /*spacing with right column*/

}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */

float: left;

margin-bottom: 10px; /* space following the field */

}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */

width: 250px;

}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */

width: 300px;

height: 150px;

}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/

margin-top: 5px; /*space above buttonsdiv*/

}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */

width: 80px;

background: #e1dfe0;

}

</style>

Le code html

<form class="feedbackform">

<div class="fieldwrapper">

<label for="username" class="styled">Your Name:</label>

<div class="thefield">

<input type="text" id="username" value="" size="30" />

</div>

<div class="fieldwrapper">

<label for="email" class="styled">Email address:</label>

<div class="thefield">

<input type="text" id="email" value="" size="30" /><br />

<span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span>

</div>

<div class="fieldwrapper">

<label for="somehighschool" class="styled">education:</label>

<div class="thefield">

<ul style="margin-top:0;">

<li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li>

<li><input type="radio" id="highschool" name="education" value="" /> <label for="highschool">Highschool graduate</label></li>

<li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li>

<li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>

<li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li>

</ul>

</div>

<div class="fieldwrapper">

<label for="html" class="styled">Skills:</label>

<div class="thefield">

<ul style="margin-top:0;">

<li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li>

<li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li>

<li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li>

<li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li>

</ul>

<span style="font-size: 80%">* Please check all that apply.</span>

</div>

<div class="fieldwrapper">

<label for="agegroup" class="styled">Department:</label>

<div class="thefield">

<select id="agegroup">

<option value="2.1">HR department</option>

<option value="3">Sales</option>

<option value="4.1">Customer Service/ Support</option>

<option value="5.2">Accounting</option>

</select>

</div>

<div class="fieldwrapper">

<label for="about" class="styled">About yourself:</label>

<div class="thefield">

<textarea id="about"></textarea>

</div>

<div class="buttonsdiv">

<input type="submit" value="Submit" style="margin-left: 150px;" /> <input type="reset" value="Reset" />

</div>

</form>

Agrandisseur CSS Smart Image

2011-07-13T23:29:00.000+02:00

Agrandisseur CSS Smart Image

Cette agrandisseur polyvalent CSS image en fonction vous permet d'afficher les miniatures d'image qui redimensionner à leurs dimensions d'origine lorsque la souris les survole. Une seule image est nécessaire dans chaque cas. Le code CSS fonctionne d'une manière qui nie la nécessité de manuellement à spécifier les dimensions de chaque image agrandie, vous permet d'économiser beaucoup de temps. Une description textuelle peut également être affiché sous l'image agrandie. Cool!

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com
Le code css

<style type="text/css">

/* smart image enlarger starts here */

/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {

float: left;

clear: none; /* set to left or right if needed */

padding-bottom: 5px; /* space between thumbs. Don't change this to margin */

padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */

}

.ienlarger a {

display:block;

text-decoration: none;

/* add cursor:default; to this rule to disable the hand cursor */

}

.ienlarger a:hover{ /* don't move this positioning to normal state */

position:relative;

}

.ienlarger span img {

border: 1px solid #FFFFFF; /* adds a border around the image */

margin-bottom: 8px; /* pushes the text down from the image */

}

.ienlarger a span { /* this is for the large image and the caption */

position: absolute;

display:none;

color: #FFCC00; /* caption text colour */

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px; /* caption text size */

background-color: #000000;

font-weight: bold;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 13px;

padding-left: 10px;

}

.ienlarger img { /* leave or IE puts a border around links */

border-width: 0;

}

.ienlarger a:hover span {

display:block;

top: 50px; /* means the pop-up's top is 50px away from thumb's top */

left: 90px; /* means the pop-up's left is 90px far from the thumb's left */

z-index: 100;

/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add

right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */

/* If you want the pop-up open above the thumb, remove the top: 50px; and add

bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

/* add cursor:default; to this rule to disable the hand cursor only for the large image */

}

.resize_thumb {

width: 150px; /* enter desired thumb width here */

height : auto;

}

/* smart image enlarger ends here */

</style>

ous pouvez traduire les commentaires de votre css, le

note:

modifier et le traduire a votre langue via ce lien

<img src="votre lien de votre image

ici--> http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />

vous pouvez ajouter un text avec un lien</span></a></div>

Le code html

<div class="ienlarger"><a href="http://www.votre lien ici.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" voter lienclass="resize_thumb" /><span>

<img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />

Some text can go here.</span></a></div>

<div class="ienlarger"><a href="http://www.votre lien ici.com/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>

<img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />

Some text can go here.</span></a></div>

<div class="ienlarger"><a href="http://www.votre lien ici.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>

<img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />

Some text can go here.</span></a></div>

<div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>

<img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />

Some text can go here.</span></a></div>

<br style="clear:left" />

2011-07-13T15:14:00.001+02:00

2011-07-13T01:25:00.001+02:00

Simply beautiful.

asunurin

Dynamic Drive
Dynamic Drive

My-Valentine
My-Valentine

2011-07-13T01:03:00.001+02:00

Bulles d'image en utilisant CSS3 transformer et transitions

2011-07-13T00:32:00.003+02:00

Bulles d'image en utilisant CSS3 transformer et transitions
widget facebook twiter rss ...vous pouvez ajouter des foto a votre widget

CSS3 est de transformer et de transition, les propriétés permettent de manipuler des éléments dans une variété de façons en utilisant seulement CSS. CSS transformer est utilisé pour redimensionner, faire pivoter ou même biaiser un élément sans perturber le contenu autour de lui, tandis que la transition est utilisé pour animer des propriétés CSS dans la vue. Les deux propriétés sont pris en charge dans les versions modernes de Safari, Chrome, Mozilla 3.5 + et Opera 9.5 + à des degrés divers. Après cette brève introduction de la route, les utilisations suivantes de CSS3 transformer et de transition, les propriétés de "gonflent" une image lorsque la souris survole, et il reviendra à son état original quand est sorti de:

/*noter :

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<ul class="bubblewrap">

<li><a href="http://awweb.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3xvuzWrnHvCAe-cyotA2cqkk5aK0ZpT9Cz8qelgG2IEC0aGxmrvDsBpbHav3joVOnMKEh3XhuXJZZqaBdo-HOB0z-3M5TBY8q83HcnuVhbaPCs18mTtczvNJkWIlX4onYAjOTUhnYMQ3/s200/stumbleupon.png" title="Add to Stumbleupon" width="181" /></a></li>

</ul>

Bulles d'image en utilisant CSS3 transformer et transitions

2011-07-13T00:30:00.001+02:00

Bulles d'image en utilisant CSS3 transformer et transitions

CSS3 est de transformer et de transition, les propriétés permettent de manipuler des éléments dans une variété de façons en utilisant seulement CSS. CSS transformer est utilisé pour redimensionner, faire pivoter ou même biaiser un élément sans perturber le contenu autour de lui, tandis que la transitionest utilisé pour animer des propriétés CSS dans la vue. Les deux propriétés sont pris en charge dans les versions modernes de Safari, Chrome, Mozilla 3.5 + et Opera 9.5 + à des degrés divers. Après cette brève introduction de la route, les utilisations suivantes de CSS3 transformer et de transition, les propriétés de "gonflent" une image lorsque la souris survole, et il reviendra à son état original quand est sorti de:

/*noter :

<ul class="bubblewrap">

</ul>

Galerie d'images CSS3 Hover

2011-07-12T23:26:00.001+02:00

Galerie d'images CSS3 Hover

Une galerie d'image élégante qui tire parti de CSS3 animation, des ombres, et les « transformer »la propriété d'ajouter instantanément un effet lisse planent à ses images, par lequel l'élargissement de l'image et se rapproche de l'utilisateur.

L'effet hover fonctionne mieux actuellement dans Google Chrome, Safari 4 + et Opera 9.5 +. Dans FF 3.6, l'animation CSS est ignorée, alors que dans IE, tout l'effet n'est pas visible.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

Le code html

<div class="hovergallery">
<img src="votre lien de l'image ici-https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22l8YjXwaWo7X9S0EXnAIWfgjfmnxqDb7BFdQaA2edYLtt3ABMwgRNWJT_gN5T2l0r0SjejcF8csk89rCjxdmI8DA-c7RcHHJzBSqo83OkXT7JmugOfmWLEGzS-eUeRbXGcTUhgQoEHtY/s200/BCute.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3fCG8_ZU-n5ZBY00_KcaHXfVuc8st0fPuTXOcWH_-315pnDrcXvk22G80dldT2fmEAQMlVuqR-I-iGXHMThru-PFiCkl4123yCdMB-oK86TpGZ1V6YUm-z1HYXp0E8K4tRH6V73s2UHlP/s200/BeMagazine.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicYkMTV6Nj6mDfCrrqBVne9fFy1pNNf1uGCTJEiUu25y3zc69J-rTQA7Yyg6OGWh5DWakLHRH7gpNM0CjvAcKKHitWgfYPcuCTtaWxHxI8gUQTxKfsVVxxpXnHJWwPnDXbkTucvLPFix02/s200/Christmas-V2.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLvn1ZwEF4qlnok_K_RcB6-pqF2RVm2zzayKzF8K1iK23X44kLhCiqsfcfnTQps-kMiPO7RApCW14fYfEwHHgQml_MUk8M1toKlMvYNFaDyteaNsyp_iasc3qsZiR95-CLQPa48yVq1oZ/s200/Echo-History.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzR1g83FdTzbwwjiK1JF2nJ0wke3mL9eu1azUhfd2EBb8dXRlyWPT_dhJHVVYpykqdJzbagm1vfXA6fajH4qXaQu22kDoar8IGCdTZeuel3O46yw_q_8wLVveizmBheweqx6gaiKxOAESd/s200/coldblue.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9m-nQJ_hkpV4lYtuCKbhfFwjFLowwlnhvJubDl-hnT5aJ9EI7yYEDKbehBO8Aataeg3sNcCwMmjJNAVsPoBNV0IgZkuqpF0j2lBMcWNy7anAuK19znVCPeT_xi5oxS9LRg7iNf7rhHHF/s200/Graffiti-Art.JPG" />
</div>

Menu biseau vertical

2011-07-12T22:51:00.001+02:00

Menu biseau vertical

Ce CSS crée un "3 états" menu vertical sur une liste ordinaire. Quand la souris passe sur le menu, l'élément de menu jusqu'à biseaux. En outre, dans les navigateurs modernes comme Firefox (pas IE6), en cliquant sur le menu crée un effet de dépression alors que la souris est maintenu enfoncé.
L'effet de biseau est sans douleur créée en utilisant le border-style: attribut d'emblée. Il n'est pas nécessaire de manuellement la couleur du 4 frontières de l'élément de menu.

/*noter :vous pouvez traduire les commentaires de votre CSS, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

.bevelmenu{

list-style-type: none;

margin: 0;

padding: 0;

width: 180px;

}

.bevelmenu li a{

display: block;

width: 100%;

padding: 2px 4px;

text-decoration: none;

font-weight: bold;

background-color: #FFF2BF;

border: 2px solid #FFF2BF;

text-decoration:none;

}

.bevelmenu li a:hover{

color: black;

background-color: #FFE271;

border-style: outset;

}

html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */

border-style: inset;

}

</style>

Le code html

<ul class="bevelmenu">

<li><a href="votre lien ici" >votre nom page</a></li>

</ul>

Bouton MENU vertical

2011-07-12T22:17:00.000+02:00

Bouton MENU vertical
En donnant à chaque lien du menu une crête frontalière contrastant avec les couleurs de fond en haut / gauche et droite / bas, le résultat est un menu du bouton légèrement biseautés.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

.buttonmenu{

list-style-type: none;

margin: 0;

padding: 0;

width: 180px;

}

.buttonmenu li a{

color: white;

display: block;

width: 100%;

padding: 2px 4px;

text-decoration: none;

font-weight: bold;

border: 1px solid;

border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/

background-color: #704968;

text-decoration:none;

}

.buttonmenu li a:visited{

color: white;

}

.buttonmenu li a:hover, .buttonmenu li a:active{

color: black;

background-color: #CDB4C8;

}

</style>

Le code html

<ul class="buttonmenu">
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
</ul>

Menu armature de fil

2011-07-12T21:32:00.000+02:00

Menu armature de fil
Ceci est un menu vertical CSS avec un simple cadre autour des éléments de menu. Il s'agit de "minimaliste" de style vous permet de personnaliser son style encore comme bon vous semble.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

.wireframemenu{
border: 1px solid #C0C0votre lien C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}

</style>

Le code html

<div class="wireframemenu">
<ul>
<li><a href="votre lien ici">le nom de votre page</a></li>
<li><a href="votre lien ici">CSS Library</a></li>
<li><a href="votre lien ici">Forums</a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
<li><a href="votre lien ici">Favicon Creator</a></li>
<li><a href="votre lien ici">Button Maker</a></li>
</ul>
</div>

Menu bleu Blocs

2011-07-12T01:39:00.001+02:00

Menu bleu Blocs

C'est une jolie «blocs» du menu CSS avec un effet hover accompagnent. Nous avons ajouté quelques modifications de notre propre à la CSS pour créer une largeur de menu dans tous

les navigateurs.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

#blueblock{

width: 180px;

border-right: 1px solid #000;

padding: 0 0 1em 0;

margin-bottom: 1em;

font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

font-size: 90%;

background-color: #90bade;

color: #333;

}

* html #blueblock{ /*IE 6 only */

w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */

}

#blueblock ul{

list-style: none;

margin: 0;

padding: 0;

border: none;

}

#blueblock li {

border-bottom: 1px solid #90bade;

margin: 0;

}

#blueblock li a{

display: block;

padding: 5px 5px 5px 8px;

border-left: 10px solid #1958b7;

border-right: 10px solid #508fc4;

background-color: #2175bc;

color: #fff;

text-decoration: none;

width: 100%;

}

html>body #blueblock li a{ /*Non IE6 width*/

width: auto;

}

#blueblock li a:hover{

border-left: 10px solid #1c64d1;

border-right: 10px solid #5ba3e0;

background-color: #2586d7;

color: #fff;

}

</style>

Le code html

<div id="blueblock">
<ul>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
</ul>
</div>

JJ bleu Blocs Menu

2011-07-12T01:28:00.000+02:00

JJ bleu Blocs Menu
C'est notre interprétation de la recherche d'un bloc menu vertical, inspiré par l'original de menu blocs bleus et basé sur les CSS utilisée par le menu vertical de notre site soeur CSS disque . Il supporte l'insertion d'en-têtes de menu pour agir en tant que diviseurs entre des groupes de liens du menu.

Noter: Vous pouvez Traduire les commentaires Votre sélection de css, le modificateur et le translate your language via une CE privilège http://translate.google.com

Le code css

Le code html

<div id="ddblueblockmenu">

<div class="menutitle">titre menu Dynamic Drive</div>

<ul>

<li><a href="votre lien ici">votre page</a></li>

<li><a href="votre lien ici">What's Revised</a></li>

<li><a href="votre lien ici">Help Forums</a></li>

</ul>

<div class="menutitle">titre menu CSS Library</div>

<ul>

<li><a href="votre lien ici">Horizontal CSS Menus</a></li>

<li><a href="votre lien ici">Vertical CSS Menus</a></li>

<li><a href="votre lien ici">Image Effects</a></li>

<li><a href="votre lien ici">Form Effects</a></li>

<li><a href="votre lien ici">Boxes & containers</a></li>

<li><a href="votre lien ici" style="border-bottom-color: black">Links & Buttons</a></li>

</ul>

</div>

Menu Marker image

2011-07-12T00:29:00.000+02:00

Menu Marker image

Ce code CSS crée un menu vertical sur des listes ordinaires, en utilisant une image de flèche pour remplacer le marqueur HTML par défaut. L'image est appliquée comme une image de fond, avec une différente s'affiche lorsque la souris passe sur les liens.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

.markermenu{
width: 170px; /*width of menu*/
}

.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}

.markermenu ul li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}

* html .markermenu ul li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}

/* Holly Hack for IE \*/
* html .markermenu ul li { height: 1%; }
* html .markermenu ul li a { height: 1%; }
/* End */

</style>

Le code html

<div class="markermenu">

<ul>

<li><a href="votre lien ici" >le nom de votre page ici</a></li>

<li><a href="votre lien ici">le nom de votre page ici</a></li>

<li><a href="votre lien ici" style="border-bottom-width: 0">le nom de votre page ici</a></li>

</ul>

</div>

Glossy Menu Vertical

2011-07-09T20:32:00.002+02:00

Glossy Menu Vertical
voir aussi
GLOSSY MENU HORIZONTAL

C'est un menu vertical CSS qui utilise un mince,
l'image de fond de répéter que les changements
lorsque la souris survole un lien.
L'image est brillante regardant avec un tire
t à la base pour créer une séparation
entre les liens de Nice.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

Le code html

<ul class="glossymenu">
<li><a href="votre lien cici " >votre nom de page ici</a></li>
<li><a href="votre lien cici " >votre nom de page ici</a></li>
<li><a href="votre lien cici " >votre nom de page ici</a></li>
<li><a href="votre lien cici " >votre nom de page ici</a></li>
<li><a href="votre lien cici " >votre nom de page ici</a></li>
<li><a href="votre lien cici" style="border-bottom-width: 0">votre nom de page ici</a></li>
</ul>

SuckerTree verticale Menu (v1.1)

2011-07-09T20:05:00.001+02:00

SuckerTree verticale Menu (v1.1)

8 novembre 06: problème de rendu fixe dans IE7, auquel s'ajoute un soutien pour la détection automatique de la largeur des sous-menus. Pas plus la configuration de la "gauche" attributs!
C'est une vertical, principalement en CSS (avec une touche de JavaScript) multi-niveaux du menu. Il soutient que de nombreux niveaux de sous que vous désirez, ainsi que de multiples menus Suckertree sur la même page. Le CSS et JavaScript adopte automatiquement à votre code HTML dans chaque cas.
L'astuce pour Suckertree est un petit morceau de JavaScript adoptables qui rampe les niveaux intérieurs d'un menu de la liste et affecte le spectacle appropriée / cacher les comportements à eux. Ceci diffère de menus Suckerfish , qui utilise simplement JavaScript afin de compenser les lacunes d'IE quand il s'agit de CSS, de sorte que le menu est plus rigide et nécessite des modifications manuelles à la CSS comme le nombre de niveaux dans votre menu change.
noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com
Le code css

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com*/

.suckerdiv ul{

margin: 0;

padding: 0;

list-style-type: none;

width: 160px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

.suckerdiv ul li{

position: relative;

}

/*Sub level menu items */

.suckerdiv ul li ul{

position: absolute;

width: 170px; /*sub menu width*/

top: 0;

visibility: hidden;

}

/* Sub level menu links style */

.suckerdiv ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: black;

text-decoration: none;

background: #fff;

padding: 1px 5px;

border: 1px solid #ccc;

border-bottom: 0;

}

.suckerdiv ul li a:visited{

color: black;

}

.suckerdiv ul li a:hover{

background-color: yellow;

}

.suckerdiv .subfolderstyle{

background: url(media/arrow-list.gif) no-repeat center right;

}

/* Holly Hack for IE \*/

* html .suckerdiv ul li { float: left; height: 1%; }

* html .suckerdiv ul li a { height: 1%; }

/* End */

</style>

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

if (window.addEventListener)

window.addEventListener("load", buildsubmenus, false)

else if (window.attachEvent)

window.attachEvent("onload", buildsubmenus)

</script>

Le code html

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="votre lien ici a la place de #">le nom de votre page a la place de Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Portes coulissantes menu vertical

2011-07-09T19:55:00.000+02:00

Portes coulissantes menu vertical

Cette swaps bien rembourrées menu vertical entre deux images de fond selon que la souris est sur ou en dehors d'un élément de menu. Pour assurer une transition en douceur entre parfaitement le changement d'image (en particulier dans IE), il utilise la technique de portes coulissantes et une image de fond unique qui fusionne les deux milieux en elle.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

Le code html

<ul class="slidedoormenu">
<li><a href="votre lien ici">» Dynamic Drive</a></li>
<li><a href="votre lien ici" >» CSS Examples</a></li>
<li><a href="votre lien ici">» JavaScript Reference</a></li>
<li><a href="votre lien ici">» DOM Reference</a></li>
<li><a href="votre lien ici">» CSS Drive</a></li>
<li class="lastitem"><a href="votre lien ici/">» Coding Forums</a></li>
</ul>

Menu urbain Side Gris

2011-07-09T19:23:00.001+02:00

Menu urbain Side Gris

Ceci est le menu latéral nonchalante

grisâtre qui s'harmonise bien avec

la plupart des modèles. Les en-tête

s de menu sont H3 balises avec

une image de fond non répétant

que sa balle, tandis que

es liens du menu sont

tous liste en fonction.

Une seule image utilisée (2 parfums au choix): ou
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com*/

Le code css

<style type="text/css">

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com*/

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

<div class="urbangreymenu">

<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="votre lien ici">Horizontal CSS Menus</a></li>
<li><a href="votre lien ici">Vertical CSS Menus</a></li>
<li><a href="votre lien ici/">Image CSS</a></li>
<li><a href="votre lien ici">Form CSS</a></li>
<li><a href="votre lien ici">DIVs and containers</a></li>
<li><a href="votre lien ici">Links & Buttons</a></li>
<li><a href="votre lien ici">Other</a></li>
<li><a href="votre lien ici">Browse All</a></li>
</ul>

<h3 class="headerbar">JavaScript Kit</h3>
<ul>
<li><a href="votre lien ici" >Free JavaScripts</a></li>
<li><a href="votre lien ici">JavaScript tutorials</a></li>
<li><a href="votre lien ici">JavaScript Reference</a></li>
<li><a href="votre lien ici">DHTML & CSS</a></li>
<li><a href="votre lien ici">Web Design</a></li>
<li><a href="votre lien ici">Free Java Applets</a></li>
</ul>

</div>

Green Arrow menu vertical simple

2011-07-07T01:11:00.003+02:00

Green Arrow menu vertical

Green Arrow Menu est un menu liste verticale qui utilise une image de fond unique pour créer trois états distincts, en décalant l'image verticalement pour révéler un style différent. Le dernier état est l'utilisateur appliquée, en donnant à l'élément désiré d'une classe CSS " . sélectionnés ".

*/noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">
*/noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
.arrowgreen{ width: 180px; /*width of menu*/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px;}
.arrowgreen ul{ list-style-type: none; margin: 0; padding: 0;} .arrowgreen li a{ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(media/arrowgreen.gif) 100% 0; height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/ padding: 4px 0 4px 10px; line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/ text-decoration: none;} .arrowgreen li a:link, .arrowgreen li a:visited { color: #5E7830;}
.arrowgreen li a:hover{ color: #26370A; background-position: 100% -32px;}
.arrowgreen li a.selected{ color: #26370A; background-position: 100% -64px;}
</style>

Remarque: Le chemin de l'image référencée dans le CSS ci-dessus présume
que vous utilisez la première image verte.
Si vous utilisez le second, n'oubliez pas de mettre à jour le
chemin de l'image en conséquence

Le code html

<div class="arrowgreen">

<ul>

<li><a href="votre lien ici title="Home">Home</a></li>

<li><a href="votre lien ici" class="selected" title="CSS">CSS Library</a></li>

<li><a href="votre lien ici" title="Whois">DD Whois</a></li>

<li><a href="votre lien ici" title="Forums">Forums</a></li>

<li><a href="votre lien ici" title="Tools">Webmaster Tools</a></li>

<li><a href="votre lien ici" title="JavaScript">JavaScript</a></li>

</ul>

</div>