CSS-sombra: como facer

Sen a escuridade non hai luz sen sombra ningunha forma. Mesmo o básico ferramenta de maquillaxe para mulleres chamadas "a sombra". Se quere traer beleza para as súas páxinas, ten que poñer a énfase correcta - Agregar CSS-sombra onde ela é necesaria.

O material presentado a seguir han axudar a aprender a instalar a sombra ou para bloquear imaxes usando CSS-código.

CSS-sombra. sintaxe

De feito box-shadow, onde a caixa - un bloque e sombra - este é en si unha sombra.

O código escrito en clave:

{Box-shadow: 11px 22px 33px 44px # 333333;}.

Liña dinos que a unidade é definida por defecto cun raio de píxeles sombra. Os datos son desencriptados como segue:

• 11px - sombra desprazado respecto ao bloque no eixe X (valor positivo (20 P) desprazarase á sombra dereita, negativo (-37px) - á esquerda);
• 22px - desprazamentos de sombra con respecto ao eixe Y do bloque (chumbo valor positivo (5px) a un cambio de cor abaixo negativo (-17px) - arriba);
• 33px - este parámetro borrão, canto maior sexa o número, maior será o efecto;
• 44px - o raio das sombras, e é directamente proporcional;
• # 333333 - a cor, que é pintado na sombra.

Os tres últimos parámetros son opcionais e poden simplemente ser omitido na cadea, ie {box-shadow: 10px 13px; } - .. Tal liña non é incorrecta (cor da sombra é idéntica á cor do texto do bloque).

Así, creando sombras nas páxinas do seu sitio non é unha dificultade, pero moitos efectos mirando agradable que pode crear! Facer o seu fillo único, inimitable, xa que o proxecto é importante, cada detalle, cada detalle. Aquí, ao parecer, nada de especial, pero é moito máis interesante e atractivo.

Considero algúns exemplos ilustrativos, parece que un CSS-block sombra segundo a codificación:

1. {Box-shadow: 25px 25px;} - CSS-sombra compensar eixos 25 píxeles.
2. {Box-shadow: 25px 25px 10px;} - compensado CSS-sombra eixos 25 píxeles e borrar os bordos 10 píxeles.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-sombra compensar eixos 25 píxeles, borrão de bordos 10 píxeles e un raio predeterminado de 5 píxeles
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-sombra compensar eixos 25 píxeles, borrão de bordos 10 píxeles, especifique un radio de 5 píxeles e cores.

sombreamento

Para crear un máis belas, elegante e orixinais tons teñen efectos distintos. Podes facer a sombra interna. É o código suficiente para especificar os parámetros de "inserción", descrición máis detallada dos parámetros vai como de costume:

{Box-shadow: inset 4px 2px 6px # 9e9e9e;}.

É posible colocar baixo o bloque algunhas sombras con completamente diferentes parámetros no código, eles (as sombras) listaranse separados por comas:

{Box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 10px 5px # ffa500}.

sombra fotos

Ademais das unidades na web seguramente será imaxes, fotos, fondos - todos estes elementos tamén ollar moito máis interesante con sombras. Pode sacar fotos nos editores de pre-imaxe e cola-los nunha páxina xa con sombras. Pero, en primeiro lugar, que non sempre é posible por varias razóns, incluíndo por mor da falta de habilidade en traballar con gráficos, en segundo lugar, calquera manipulación da imaxe engádese a el, "peso", e tal imaxe pode moi ben abrandar páxina é cargada. Neste caso, pode facer unha imaxes CSS-sombra.

A solución máis sinxela e sintaticamente correcta para este problema - a creación da unidade, o fondo da súa imaxe vai Kotormo. Logo facer a sombra necesaria para a unidade e son exhibidos no background-image:

• .block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; Ancho: 480px; Altura: 360 pixels; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

Neste exemplo, creamos unha sombra interna sen desprazamento dos eixos, con raio borrão, cor definida, alto e ancho do bloque, eo fondo (fondo) nomeado kuartinku. Como resultado, temos unha imaxe da sombra interior.

Concordo para crear sombras usando CSS-code - é moi sinxelo, pero emocionante, e máis importante - exercicio útil.