Responsive solution

Groundwork – A Responsive Front-End Framework

Good references for photoshop tuto

Best Free Photoshop Tutorials around the World

Css timeline

Responsive CSS Timeline with 3D Effect

Sweet image zoom effects

Sweet image zoom effects:
Using transition, box-sizing: border-box and border-width on hover.

Make Cool Effect with CSS3 Animation Libraries

Make Cool Effect with CSS3 Animation Libraries: When it comes to animation, flash is being replaced by Javascript and CSS3. With CSS2, we can't really do much with it other than changing the size, animating from x to y using Javascript. However, with CSS3 which supports different transition, 3D transforms, it opens out so much possibilities. With the help of Javascript, it can go even further.

14 Free CSS / HTML Pricing Tables

14 Free CSS / HTML Pricing Tables: Pricing tables are usually important part of business website that offers products or services. So if you are looking for the free pricing tables for your commercial project, then here is a collection of modern and stylish Tables With HTML and CSS.

A Bunch Of CSS Animation Effects For Lists: Liffect

Liffect is a web-based generator that provides lots of different effects for list elements.
It makes use of CSS animations and requires jQuery for applying the delay in effects.
There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.

The website allows us to define the duration + delay and generates the necessary CSS rules instantly.
Liffect is a must-bookmark not only for copy-pasting the effects but it is also a nice reference.
Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.

Professional XHTML Admin Template ($15 Discount With The Code: WRD.)

SSLmatic – Cheap SSL Certificates (from $19.99/year)

30 Inspiring Large Background Images in Web Design

30 Inspiring Large Background Images in Web Design: Designing a large background website is a great option for immediate impression and great visual appeal. High-quality large photographs and abstract illustrations can have a huge impact on the look of a website. There are a few important things to consider when designing a large image websites.

Mastering CSS Gradients in Under an Hour

Mastering CSS Gradients in Under an Hour:
If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?
Well, it’s time to kill those 1px wide images, my friend.
If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.
Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.
So, let’s rock!

Basic syntax

The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, we have at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!).
We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).
This is the basic syntax:

#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** real example **/

background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );

background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );

background: -o-linear-gradient( top left, red, #c10000, #ae0000 );

background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );

background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );

background: linear-gradient( top left, red, #c10000, #ae0000 );
}

This CSS will get this result:

So, here are the items explained:

• Background: Just like you set background image or colors you’ll set gradients as a separate item
• vendor -: We can use “-o” for opera, “-moz” for Firefox, “-webkit” for safari and chrome, “-khtml” for Konqueror and “-ms” for IE
• type: Here we can use “linear” or “radial”
• start / position: This is a X/Y coordinate which tells the browser either the direction (top means that it’ll be top to bottom, and left that it’ll be left to right) or the exact start point (like 600px 300px will invert the example above because the start point will be the bottom right)
• shape: If you use radial gradient you can set it as “circle” or leave it blank so the gradient will be ellipsis-shaped
• size: If you are using radial gradients you can set where the gradient extends to. You can use: closest-side,  closest-corner, farthest-side, farthest-corner, contain, cover to set the gradient position.
• Color1: This is the first color. It’ll be the color in the start point you set above
• Colors 2,3,4..: You can add as many colors as you want and they’ll be evenly distributed in the element’s background unless you declare a position.
• Position (for colors): If you don’t want an even distribution you can add your own rules for positioning colors.

Here is an example making use of color positions:

#wd {

background: -moz-linear-gradient( top left, white, black 25% );

background: -webkit-linear-gradient( top left, white, black 25% );

background: -o-linear-gradient( top left, white, black 25% );

background: -khtml-linear-gradient( top left, white, black 25% );

background: -ms-linear-gradient( top left, white, black 25% );

background: linear-gradient( top left, white, black 25% );
}

You can see the result and an outlined area, about those 25% / 75% portions so you can have a better idea on how the browser calculates those values:

Multiple gradients

Let’s dig a little deeper and see more cool stuff you can do. You can start doing advanced stuff and playing with shape combinations to create new effects.
The syntax is pretty simple, all you’ve got to do is separate multiple declarations with commas. Notice that the “z-index” of the gradients will be reversed and the first item will be at the top.
If you set the color to transparent, you can use a background color if you want. Otherwise the color of the top element will hide all the others.
Ok, let’s play with some code now:

#wd {

background:

-moz-linear-gradient( top left, white, transparent 25% ),

-moz-linear-gradient( bottom right, white, transparent 25% ),

-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-webkit-linear-gradient( top left, white, transparent 25% ),

-webkit-linear-gradient( bottom right, white, transparent 25% ),

-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-o-linear-gradient( top left, white, transparent 25% ),

-o-linear-gradient( bottom right, white, transparent 25% ),

-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-khtml-linear-gradient( top left, white, transparent 25% ),

-khtml-linear-gradient( bottom right, white, transparent 25% ),

-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-ms-linear-gradient( top left, white, transparent 25% ),

-ms-linear-gradient( bottom right, white, transparent 25% ),

-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

linear-gradient( top left, white, transparent 25% ),

linear-gradient( bottom right, white, transparent 25% ),

radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;            }

And this will be your final result:

Cool Effects

As you can see, gradients combinations can lead to awesome results. Here we’ll see a few practical (ok, some of them quite experimental) examples that you can use and even make them better.

Subtle lighting effect

This effect is pretty easy to use, especially for featured images. It gives a subtle elliptical shadow for your elements without additional markup, you can just include it in your images. Oh, and it works pretty well for hovers also.
Here is the CSS to achieve the effect (and also correct positioning for elements):

img {

margin: 0 -60px;

padding: 25px 60px 40px;

background: -moz-radial-gradient( center center, contain, black, white 90% );

background: -webkit-radial-gradient( center center, contain, black, white 90% );

background: -o-radial-gradient( center center, contain, black, white 90% );

background: -khtml-radial-gradient( center center, contain, black, white 90% );

background: -ms-radial-gradient( center center, contain, black, white 90% );

background: radial-gradient( center center, contain, black, white 90% );
}

And this is the effect applied to one o four images:

CSS Background Patterns

There are quite a few highly experimental CSS patterns out there, but there are a few that you can actually use, especially the ones which rely on gradients that end smoothly.
Here is an example on how to apply a subtle background pattern that you can easily integrate in your site:

body {

background:

-moz-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-webkit-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-o-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-khtml-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-ms-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

radial-gradient( center center, contain, #757575, transparent ),

black;
}

And this will be the rendered result:

It’ll Blow your mind – CSS Painting

If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.
Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.
Here is the code I used to do a simple scared face to show to your IE users:

#wd {

position: relative;

width: 450px;

height: 400px;

margin: 20px auto;

background:

-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

border-radius: 50%;

}

#wd:after {

content: "Are you using IE??";

position: absolute;

top: 225px;

left: 315px;

padding: 5px 10px;

width: 150px;

font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */

background: white;

border: 2px solid #E19B92;

border-radius: 4px 4px 4px 4px;

}

And this is the rendered result:

Compatibility notes

There are 2 important final notes on this. First is on old Webkit rules (which still in use for many old versions including mobile). They are slightly different than the ones presented here:

#wd {

background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );

/* example */

background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}

And we have also Microsoft filters for IE. They are better explained in this Microsoft’s guide.

So, what do you think about it?

Can you think of new uses for those CSS gradients? Let us know using the comments section!

How Colors Help Make Websites Successful

How Colors Help Make Websites Successful:
If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!
You might not realize how important colours are in web design. If a website is green, it might as well be blue; it doesn’t matter. And while I thought this myself for a long time, I recently came to the conclusion that the color is actually going to make a huge difference and express something different to your audience. There are psychological effects behind each color and tone, therefore I decided to tell you more about them today.

Human senses get excited about lots of stuff. One of the most effective ways to excite somebody is to project a red hue color onto the walls of their room. It’s been done before by scientists and they came with a clear conclusion. A person who lives in a red room has a higher heart rate and blood pressure than a person living in a blue room. This is because red symbolizes excitement, we all know this. There is a reason why fast food companies choose red as their main or secondary color. Good examples are Coca-Cola, McDonald’s, Burger King or Pepsi (although blue is their main color).

Colors Stimulate Senses

Colors can stimulate and excite people, increase their appetite, make them feel warm or make them feel tranquil. Red simply makes you excited according to those who study chromodynamics. Coke’s website is red – it gives you a feel of a lazy, hot summer day – just when you feel the need to drink Coke.

Image Source: StockLogos
There’s more to colors in web design than just the emotional factor. People tend to gamble more under red light conditions than under blue light. This is the main reason behind cities like Las Vegas using a lot of red lights. Colors have impact on performance. Red lights make people act quicker and feel more powerful, which is not always beneficial, while blue makes people think more before acting. There is a reason STOP signs are red – you need to act right away and stop the vehicle you drive, otherwise you are in danger.

Mixing Colors

Mixing colors is beneficial if done the right way. Mixing very complementary colors is also something people do, but it should only be done occasionally. It shouldn’t be overdone because it has a bad effect on people’s eyes. You can think of a black website with pink text. Now that’s an image I would like to get out of my head as soon as possible :).
There is a very good trick behind using complementary colors together. Drawing a thin neutral white, gray or black line around the two colored shapes will make the eyes see both colors separately. Just look at the Pepsi logo below: red and blue are separated by not only a thin layer of white, but by a quite big one. This white shape blends red and blue better then if they would be placed right on top of each other.

Image source: Pepsi

Colors and Cultures

Moreover, colors mean something else in different parts of the world. While red means luck in China, it means a lack of it in Germany. Huge corporations with lots of financial resources will use large amounts of money to study the effects different colors have on different cultures, before entering a new market. Many think it is impossible, but clients can be lost because of using the wrong colors.
And while huge corporations usually hire experts to do this research for them, the results are not always good. Every designer (and every person in general) has a tendency to like colors or combinations of colors and to use them in different situations because it’s what they personally like. I myself love red and black together, pretty obviously because I’ve been supporting Italian outfit A.C. Milan for almost ten years now. This is not such a good asset when working with colors is your way of earning a salary. It is crucially important for designers to tear all their personal favorites apart and only focus on the clients and their needs.

Colors for a Website

Picking a color for a website means much more then picking your favorite color and turning it into a layout. It means picking the right color in order to get the desired response from your audience. If you know your audience well and figured out which color works best for them, you are already halfway there in the creation process. It is also quite unlikely to pick a color that will fit every visitor of your website, therefore it is even more important to be able to determine which color and tone works best for most users you target.

Image source: 123RF Stock Photos
According to different sources, half of the people visiting a website don’t come back because of the color of the design. The first thing people need to recognize when they see your site are the brand colors. If you have multiple colors and they can’t see the most dominant, it means you should consider a redesign.

• If you have a blue color scheme, people will likely give you a better response when in a good mood. If you want a clean, white design, it’s fine too. But if you want to make it exciting, use bright red or orange here and there. White and green work great together, and if you want to be stylish and modern without using intense colors, go for white and gray. Such a combination illustrates something glamorous, sleek, fresh and clean. Just look at the classy example below.

• If you like darker shades, pretty much everything works well with black as long as black is not the dominant color. A website with a black background can be fancy and look good, but is not easy to read. The two simplest combinations you can go for are black and white or black and a bright gray. Although a very powerful contrast, black and orange work really well together, but might require white for balance.
• If you want to combine both black and white with a color, then they work really well with blue; make sure white is dominant, otherwise you need a very bright blue to dominate. Don’t give black a lot of emphasis in this combination. You can see a good example below. The second example is quite poor and shows how this combination can be put into practice. Not only is the design outdated, but the colors make it even more difficult to bear.

• Black and white work very well with red too, but make sure red is not dominant, as then it gets too powerful and creates an unbearable contrast with black. You can see two good examples below.

• A third combination I would recommend is black, white and green, and you can see down below why.

Image source: Website Templates Online

Conclusion

Using the right color in your designs is crucial and I am sure you can see why. Although it might sound wrong, by using the right color in accordance to your audience will increase the likelihood of them doing what you want them to do. But wrong or right, this is what all designers work for, sending a message to an audience and then hoping to get a response from them. If you understand how color psychology works and which color fits your audience, you are a step closer to launching a successful website.

Mastering CSS Gradients in Under an Hour

Mastering CSS Gradients in Under an Hour

Css2Less - Convertissez vos CSS en LESS

Css2Less - Convertissez vos CSS en LESS: Css2Less permet de convertir les feuilles de styles CSS en fichiers LESS d'un simple copier/coller.

Stylish Image Hover Effects with Adipoli jQuery Plugin

Stylish Image Hover Effects with Adipoli jQuery Plugin:


Adipoli is a simple jQuery plugin used to bring stylish image hover effects. There are over 20 transition effects (popout, sliceDown, sliceUp, fold, boxRain, boxRainGrow and etc…) you can choose from. You can also select the start effects, like transparent, normal, overlay and grayscale. It is released under MIT License.

Requirements: jQuery Framework
Demo: http://jobyj.in/adipoli/
License: MIT License

CSS3 Shadows

CSS3 Shadows:
Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches.

Deux types d’ombres existent en CSS :

• les box-shadow, les ombres ajoutées aux éléments de type bloc,
• les text-shadow, les ombres ajoutées au contenu textuel.

Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur.

La propriété box-shadow permet l’ajout d’ombres à un élément de type bloc ou en-ligne. C’est pourquoi dans nos exemples de code, sauf cas exceptionnel, nous utiliserons de manière totalement arbitraire la balise bloc : <div>.
Si vous bloquez sur la différenciation entre élément de type bloc et en-ligne, rendez-vous ici : Initiation au positionnement CSS

Syntaxe de box-shadow

Cette propriété d’ombrage est disponible nativement (sans préfixe) dans la plupart des navigateurs modernes, à savoir Internet Explorer 9+, Firefox 4.0+, Chrome 10+, Safari 5.1+ et Opera 10.5+, et nécessite des préfixes vendeurs pour  les anciennes version de Safari, Chrome et Firefox qui l'implémentaient à titre expérimental.

box-shadow: h-pos v-pos (blur) (spread) (color) (inset);

Voici le détail des valeurs attendues :

Valeur	Description	Unité
h-pos	Position horizontale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des X. (requise)	em, ex, ch, rem, in, pt, pc, cm, mm, px (peut être négative)
v-pos	Position verticale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des Y. (requise)	em, ex, ch, rem, in, pt, pc, cm, mm, px (peut être négative)
blur	Distance du flou, correspond à l’étendu du dégradé de la couleur opaque vers le transparent. (optionnelle - défaut : 0)	em, ex, ch, rem, in, pt, pc, cm, mm, px
spread	Taille de l’ombre. Permet de redimensionner l’ombre. (optionnelle - défaut : 0)	em, ex, ch, rem, in, pt, pc, cm, mm, px (peut être négative)
color	Couleur de l’ombre. Définit la couleur de votre ombre, voire son opacité grâce à la gestion de la couche Alpha. (optionnelle - défaut : #000 ou valeur de la propriété color)	Valeur de couleur
inset	Position interne de l’ombre. Permet de définir l’ombre comme étant une ombre interne et non une ombre portée. (optionnelle - défaut : vide)	Valeur : “inset” ou vide.

D'après la spécification du W3C, la couleur est optionnelle et peut être déterminée grâce à la propriété color de l'élément (cette propriété qui offre une couleur à votre texte). Cependant, Webkit n'affiche aucune ombre en l'absence de valeur de couleur dans la déclaration d'une ombre portée.

Il est possible de placer la valeur de la couleur avant ou après les valeurs de mesures (h-pos, v-pos, blur et spread), mais surtout pas au milieu de ces valeurs.

Compatibilité avec les navigateurs

Navigateurs	Versions
	Internet Explorer 9.0+
	Firefox 4.0+ Firefox 3.5 et 3.6 avec préfixe -moz-
	Chrome 10.0+ Chrome 4+ avec préfixe -webkit-
	Safari 5.1+ Safari 3.1+ avec préfixe -webkit-
	Opera 10.5+ Opera Mobile 11+
	Android 2.1+ avec préfixe -webkit-

Démonstrations

Les images étant plus parlantes que les mots, voici quelques exemples de codes et rendus graphiques. Le bloc choisi sera ce petit cadre gris auquel seront ajoutées différentes sortes d'ombrages. Voici la base du code pour créer cet élément :
En HTML

<div>Contenu</div>

En CSS

div {
   width: 200px;
   padding: 35px 20px;
   line-height: 1.5em;
   color: #444444;
   background-color: #ddd;
   background-image: linear-gradient(#E5E5E5, #CFCFCF);
}

Ombre portée

Ajouter une ombre portée à ce bloc est aisé : il suffit de compléter la feuille de style par cette ligne directement dans la déclaration de l'élément <div>.

box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 

L’utilisation de RGBA permet de s'assurer une bonne cohérence entre la couleur de l’ombre et celle du fond, notamment si ce dernier n’est pas de couleur unie.
Démonstration

Ombre interne

Cette ombre va permettre de voir une utilisation de la valeur inset. Voici la ligne de code nécessaire à sa réalisation.

box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;

Les informations nécessaires sont donc identiques à une ombre portée externe, il suffit de rajouter la valeur inset pour passer à une ombre interne.
Démonstration

Ombre portée et interne

Il est possible, comme beaucoup de propriétés en CSS3, de déclarer plusieurs ombres en une seule fois :

box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
            -1px 2px 20px rgba(255, 255, 255, 0.6) inset; 

Celles-ci sont simplement déclarées les unes à la suite des autres, séparées par une virgule.

Il est ainsi possible de créer des effets d’ombres extrêmement riches et fins en superposant et cumulant plusieurs ombres portées et internes.

Comme vous le montre cette exemple, l’ombre peut pendre la couleur que vous souhaitez, elle peut donc parfaitement servir à la création d’une zone lumineuse, un reflet, ou un halo.
Démonstration

Utilisation avancée

Détournement

Il est possible de pousser l'utilisation des ombres bien plus loin et de créer des effets de bordures spécifiques. En n'ayant pas la main sur le code HTML, ou bien en se contentant d'un simple conteneur, CSS prend le relais efficacement.

Voici le code utilisé pour cet effet de triple bordure :

div {
    padding: 26px;
    border: 1px solid #bbb;
    background: #F4F4F4;
    color: #777;
    box-shadow: 0 0 0 16px #fff inset,
                0 0 0 17px #DAD4D4 inset;
}

Démonstration
Cette méthode offre un simple ajout d'ombres internes très nettes, d'abord blanches sur 16px, puis gris clair sur 17px. L'ombre blanche étant au dessus de l'ombre grise, cet effet de bordure est obtenu.
Note : La première ombre déclarée se trouve au-dessus des autres ombres. Chaque ombre déclarée se place donc en dessous de la précédente.

Ombres et effets avancés

Voici quelques ressources de démonstrations destinées à présenter les possibilités offertes par box-shadow dans des utilisations avancées, notamment avec sa combinaison à d’autres propriétés.

• 
  Drop Shadows with CSS3 - par Divya Manian
• 
  CSS Drop shadows without images - par Nicolas Gallagher
• 
  Découvrez les mystères d'effets d'ombres avancés avec box-shadow - par Geoffrey Crofte
• 
  Démonstration d'une technique alternative d'ombres incurvées - par Geoffrey Crofte

Alternatives

La meilleure des alternatives pour les navigateurs ne comprenant pas box-shadow est encore d'accepter la dégradation gracieuse. Cependant, il est parfois nécessaire de trouver un paliatif. Voici deux scripts qui pourront vous aider :

• 
  CSS3Pie : permet de jouer avec CSS3 sur IE version inférieure à 9.
• 
  IE CSS3 : permet de rendre compatible les ombres portées avec IE version inférieure à 9.

40+ Impressive Website Footers for Your Inspiration

40+ Impressive Website Footers for Your Inspiration:
Designing a creative and appealing footer is crucial if you want to make each element of your web design as successful and efficient as possible. Although the footer of a web design appears at the end of the page yet it cannot be neglected. With an effective footer design, you can create a long-lasting impression on your visitors. Through a well designed footer, you can certainly grab the visitors’ attention.
We have previously posted many collections about Website Footers Designs as well but at the moment, we are presenting the most innovative and amazing examples of websites showing impressive footers. These footer designs prove that you can effectively utilize a website footer to provide that extra bit of improvement in the user’s experience. We hope you will like this collection. Do let us know your opinion about this compilation.

25 Excellent Examples of CSS In Background

25 Excellent Examples of CSS In Background:
In this article, there are 25 website examples pieced together, which have solid color CSS backgrounds, displaying the robustness of CSS. Backgrounds are key components of CSS and they may be colors or CSS gradients. However, here we have collected website.

Color Hexa

Color Hexa:
ColorHexa.com is a free color tool providing information about any color. Just enter your color value in any format (e.g. : hexadecimal, rgb, cmyk, hsl, lab, lch, luv, xyz, xyY, hunter lab, binary, wavelength) or simply use the eyedropper (left to the search input field), and colorHexa will provide detailed description, color shades, color schemes (complementary, split complementary, analogous, triadic, tetradic and monochromatic), HtmlCss codes, and automatically convert the color to rgb, cmyk, hsl, etc. For example, to convert or get any information about "red", you could directly type "red" or "ff0000" (with or without "#"), "rgb(255,0,0)", "rgb 100 0 0 %", "c:0, m:100, y:100, k:0", "hsl 0, 100, 50" and so on... (with or without commas, brackets, colons or semi-colons, that doesn't matter). Colorhexa also offers the ability to merge 2 (or more) colors together by simply separating them with a "+" in your query (e.g. : "blue + hsl 30 20 10 + red 200 green 30 blue 10"), or to create a gradient by separating the colors with the word "to" (e.g. : "ff0000 to rgb 0 100 30").