domingo, 24 de agosto de 2014

<!DOCTYPE html
<html>
<head>
  <title></title>
</head>
<body>
<table>
  <tr>
     <td>Email</td>
     <td>
         <input type="email" value placeholder="ejemplo@dominio.com">
     </td>
  </tr>
</table>
</body>
</html>

Veamos la implementacion de este ejemplo:


<!DOCTYPE html
<html>
<head>
  <title></title>
</head>
<body>
<table>
  <tr>
     <td>Fecha</td>
     <td>
         <input type="date">
     </td>
  </tr>
</table>
</body>
</html>

Veamos la implementacion de este ejemplo:


<!DOCTYPE html
<html>
<head>
  <title></title>
  <style type="text/css">
   [required]{
 box-shadow: 0 0 10px 1px #818181;
   }
  </style>
</head>
<body>
<table>
  <tr>
     <td>Nombre</td>
     <td>
         <input type="text" required>
     </td>
     <td>Apellido</td>
     <td>
         <input type="text" required>
     </td>
</tr>
</table>
</body>
</html>

Veamos la implementacion de este ejemplo:




<!DOCTYPE html
<html>
<head>
  <title></title>
</head>
<body>
<table>
  <tr>
     <td>Encuestas</td>
     <td>
         <input type="range" min="0" max="10" value="5" step="5">
     </td>
  </tr>
</table>
</body>
</html>

Veamos la implementacion de este ejemplo:



sábado, 16 de agosto de 2014

Manejo de etiquetas de audio en HTML5

Ahora es muy sencillo realizar esta operación gracias a la evolución de HTML. 

Para introducir el audio directamente en HTML5 solo debemos insertar las siguientes Etiquetas:
<html>
      <audio>
      </audio>
</html>
Es muy importante colocar un comentario dentro de las etiquetas de audio, este comentario saldrá cuando el navegador que estemos utilizando no soporte HTML5.
<html>
    <audio>
        parce..tu navegador no soporta audio HTML5
    </audio>
</html>
Ahora colocaremos la dirección de donde esta situado nuestro audio con la propiedad src y le diremos que deseamos que nuestro reproductor tenga los controles por defecto.
<html>
     <audio src="carpeta_musica/audio.mp3" controls="controls">
             parce..tu navegador no soporta audio HTML5
     </audio>
</html>
y listo con estas simples lineas ya tendremos nuestro audio reproduciéndose en nuestra pagina.

viernes, 15 de agosto de 2014

Manejo de etiquetas de vídeo en HTML5

Ahora es muy sencillo realizar esta operación gracias a la evolución de HTML. 

Para introducir el vídeo directamente en HTML5 solo debemos insertar las siguientes Etiquetas:
<html>
      <video>
      </video>
</html>
Es muy importante colocar un comentario dentro de las etiquetas de vídeo, este comentario saldrá cuando el navegador que estemos utilizando no soporte HTML5.
<html>
    <video>
        parce..tu navegador no soporta video HTML5
    </video>
</html>
Ahora colocaremos la dirección de donde esta situado nuestro vídeo con la propiedad src y le diremos que deseamos que nuestro reproductor tenga los controles por defecto.
<html>
     <video src="carpeta_video/video.mp4" controls="controls">
             parce..tu navegador no soporta video HTML5
     </video>
</html>
y listo con estas simples lineas ya tendremos nuestro vídeo reproduciéndose en nuestra pagina.

si no declaramos mas parámetros nuestro vídeo tendrá un tamaño y escala por defecto, si deseamos modificar el tamaño de nuestro reproductor solo debemos escribir los siguientes parámetros:

<html>
   <video src="carpeta_video/video.mp4" controls="controls" width=300 height=150>
       parce..tu navegador no soporta video HTML5
   </video>
</html>

con esto modificaremos el tamaño de nuestro reproductor de vídeo en HTML5

miércoles, 13 de agosto de 2014

Que es SAMBA ?

Es un servidor SMB libre, desarrollado por Andrew Tridgell y que en la actualidad es mantenido por un grupo de personas de todo el mundo, como casi todos los proyectos distribuidos bajo la Licencia Publica General de GNU. Samba es capaz de ejecutarse en una gran cantidad de variantes Unix, como Linux, Solaris, SunOS, HP-UX, ULTRIX, Unix de Digital, SCO Open Server y AIX por nombrar tan sólo algunas. Con Samba podremos hacer que nuestro sistema Linux actúe como servidor SMB dentro de la red.

¿Cómo funciona este servicio?

Samba es en sí un paquete muy complejo, que brinda a los usuarios Linux de un sin fin de posibilidades a la hora de interactuar con equipos Windows y Linux que estén coexistiendo en redes heterogéneas.

¿Cuáles son los beneficios al instalar un servidor Samba en Linux?

  • Compartir uno o más sistemas de archivos.
  • Compartir impresoras, instaladas tanto en el servidor como en los clientes.
  • Samba permite compartir entre máquinas Windows y Linux recursos.
  • Siendo un recurso una carpeta o la impresora.
¿Software Requerido?
  • Samba
  • Samba-client
  • Samba-common
Instalación de Samba

Para llevar a cabo la instalación se necesitaran los siguientes paquetes:
  • samba
  • samba-client
  • samba-common

Para instalarlos haga uso de la terminal como se muestra a continuación:

   yum install -y samba samba-client samba-common

Configuración de Samba
Los ficheros que modificaremos serán:

    /etc/samba/lmhosts

    /etc/samba/smb.conf

Fichero /etc/samba/smb.conf#

La configuracion basica de Samba se hara sobre el fichero localizado en:

    /etc/samba/smb.conf



Configuracion de parametros globales#

1.-Con la ayuda de algun editor de textos busque la siguiente linea

    
    workgroup = MYGROUP

En esta linea puedes especificar un nombre para el grupo de usuarios que podrán hacer uso de este recurso Ejemplo:

    workgroup = Desarrollo

2.-Busque la siguiente linea

    server string = Samba Server Version %v

En esta linea puedes poner un mensaje de bienvenida para el Servidor Samba Ejemplo:

   server string = Servidor Samba Desarrollo

3.-Busque la siguiente linea

   netbios name = MYSERVER

En esta linea deberas especificar el nombre que tiene asignado el equipo. Su nombre debe ser igual al especificado en el fichero /etc/samba/lmhosts Ejemplo:

   netbios name = servidor.empresa

4.-Busque la siguiente linea

interfaces = lo eth0 192.168.12.2/24 192.168.13.2/24

Esta linea especifica desde que segmentos de red escuchara peticiones el servidor Samba, cualquier otra interfaz no listada aqui sera ignorada Ejemplo:

interfaces = lo eth0 192.168.1.1/24 10.10.1.1

5.-Busque la siguiente linea

hosts allow = 127. 192.168.12. 192.168.13.

Esta linea especifica desde que segmentos de red escuchara peticiones el servidor Samba Ejemplo:

     hosts allow = 192.168.12.2.

Note el punto al final de la línea
Configuracion de los recursos compartidos#

La configuracion de las recursos que compartiremos deben ir especificados al final del fichero

    /etc/samba/smb.conf

Y deben seguir la siguiente estructura:

    [nombreDescriptivoDelRecursoCompartido]

     comment = Comentarios 
     path = rutaDelREcurso
     public = yes
     writable = yes
     printable = no
     write list = desarrollo

Iniciar, detener o reiniciar el servidor Samba#

Para iniciar el servidor samba por primera vez solo deberá teclear en terminal el siguiente comando:

    /etc/init.d/smb start

Igualmente existen opciones ya sea para reiniciar, detener, recargar o conocer el status en el que se encuentra el servidor Samba. Estas opciones pueden ser consultadas en la siguiente tabla:

  • start Inicia el servicio
  • stop Detiene el servicio
  • restart Reinicia el servicio.-La diferencia con reload radica en que al ejecutar un restart este mata todos los procesos relacionado con el servicio y los vuelve a generar de nueva cuenta.
  • reload Recarga el servicio.-La diferencia con restart radica en que al ejecutar un reload este solamente carga las actualizaciones hechas al fichero de configuración del servicio sin necesidad de matar los procesos relacionados con el mismo, por lo que podría entenderse que hace el cambio en caliente.
  • condrestart Reinicio Condicional.- Solamente se inicia si el servicio se encuentra ejecutándose.
  • status Da a conocer el estado en el que se encuentra el servicio 

Como alternativa también podemos ocupar el siguiente comando para iniciar el servidor samba

     service smb start

Y de igual manera podemos usar las opciones antes descritas en la tabla anterior. Recuerde que estos comandos se ejecutan como root.

A continuación veremos un vídeo donde realizaremos de forma practica la instalación y alguna de las configuraciones de SAMBA.



Que es HTTP ?


Es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1. HTTP define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema petición-respuesta entre un cliente y un servidor. Al cliente que efectúa la petición (un navegador web o un spider) se lo conoce como "user agent" (agente del usuario). A la información transmitida se la llama recurso y se la identifica mediante un localizador uniforme de recursos (URL). Los recursos pueden ser archivos, el resultado de la ejecución de un programa, una consulta a una base de datos, la traducción automática de un documento, etc.

HTTP es un protocolo sin estado, es decir, que no guarda ninguna información sobre conexiones anteriores. El desarrollo de aplicaciones web necesita frecuentemente mantener estado. Para esto se usan las cookies, que es información que un servidor puede almacenar en el sistema cliente. Esto le permite a las aplicaciones web instituir la noción de "sesión", y también permite rastrear usuarios ya que las cookies pueden guardarse en el cliente por tiempo indeterminado.

Instalando el servidor web apache

La instalación del servidor web apache es relativamente sencilla , solo debe teclear en terminal el siguiente comando.

     yum install -y httpd

Archivos de configuración del servidor web Apache

La configuración del servidor web apache se realizara sobre dos ficheros distintos, uno de configuración general del servidor web apache y otro para indicarle al servidor apache los dominios virtuales que deben ser cargados al sistema. El fichero de configuración principal de apache lo encontramos en la siguiente ruta:

     /etc/httpd/conf/

La carpeta donde deberán ser añadidos los ficheros de configuración de los dominios virtuales sera en la siguiente ruta:

       /etc/httpd/conf.d/

Configuración del fichero httpd.conf 
La ubicación de este fichero lo encontramos en:

       /etc/httpd/conf/httpd.conf

El contenido del fichero “httpd.conf” esta compuesto por un gran numero de secciones es por ello que solo describiremos las mas relevantes del mismo, usted podrá habilitar o deshabilitar cada una de las funciones que describiremos según su necesidad.

En este archivo de configuración podremos realizar las siguientes modificaciones entre otras que podemos realizar.

Directiva ServerRoot

Esta directiva le indica al servidor web la ubicación donde se almacenan los ficheros de configuración de apache. El valor por defecto es:

     ServerRoot “/etc/httpd”

Si usted quisiera ubicar estos ficheros en otra ruta diferente solo deberá especificarla, aunque no es recomendable

Directiva Timeout

Esta directiva indica el número de segundos antes de que se cancele un conexión por falta de respuesta. Su valor por defecto es 120

    Timeout 120

Directiva KeepAlive

Esta directiva indica si se permiten o no las conexiones persistentes, es decir más de una petición por conexión. Puede tomar los valores de “On” u “Off”.

     KeepAlive On|Off

Directiva MaxKeepAliveRequests

Esta directiva indica el máximo número de peticiones que se permiten en conexiones persistentes. Un valor 0 permite un número ilimitado. Se recomienda dejar
esta valor elevado para obtener un mayor rendimiento. Por ejemplo100

      MaxKeepAliveRequests 100

Directiva KeepAliveTimeout

Esta directiva indica el número de segundos de espera para la siguiente petición del mismo cliente con la misma conexión. Por ejemplo 15

     KeepAliveTimeout 15

Directiva Listen

Listen permite asociar Apache a una dirección y/o puerto específico además del predeterminado. Ejemplo:

     Listen 192.168.1.1:8080 
     Listen 80

Directiva Include

     Include conf.d/*.conf

Esta directiva indica al servidor web la ruta en donde se encuentran almacenados los ficheros de configuración adicionales de apache como por ejemplo los dominios virtuales. Es habitual dejar el fichero de configuración con las características globales que no se tienen que modificar en el fichero principal e incluir los ficheros que pueden estar sujetos a modificación en el directorio.

     /etc/httpd/conf.d

De esta forma para añadir o quitar algún fichero de configuración de apache sólo tenemos que borrarlo del directorio /etc/httpd/conf.d.

Directiva LoadModule

Esta directiva corresponde al soporte de Dynamic Shared Object (Objetos Dinámicos Compartidos). Son módulos que incorporan ciertas funcionalidades que se le incorporan al servidor Apache. Para que un módulo sea funcional tienen que estar construido como un DSO e incorporar la correspondiente directiva `LoadModule' antes de que se a utilizada. Los módulos compilados de forma estática no es necesario incluirlos. Ejemplo:
      
      LoadModule
      LoadModule
      LoadModule
      LoadModule
      LoadModule 
      auth_basic_module modules/mod_auth_basic.so
      auth_digest_module modules/mod_auth_digest.so
      authn_file_module modules/mod_authn_file.so
      authn_alias_module modules/mod_authn_alias.so
      authn_anon_module modules/mod_authn_anon.so

Directiva User

Esta directiva especifica qué usuario es el que ejecuta los procesos del servidor web y en consecuencia los permisos de lectura y escritura que se aplican sobre los recursos.

      User apache

Directiva Group

Esta directiva especifica qué grupo es el que ejecuta los procesos del servidor web y en consecuencia los permisos de lectura y escritura que se aplican sobre los recursos.

     Group apache

Directiva ServerAdmin 

Esta directiva especifica la persona a la que se le debe notificar los problemas referentes al portal web , esto a través de su cuenta de correo. Ejemplo:

     ServerAdmin administrador@tuDominio.net 

Directiva ServerName

Esta directiva especifica el nombre y puerto que el servidor utiliza para identificarse. Con una correcta configuración, este valor se puede determinar automáticamente, pero es recomendable especificarlo explíciatamente para evitar problemas durante el arranque.

       ServerName www.tuDominio.net:80

Directiva DocumentRoot

Esta directiva indica al servidor web la ruta en donde se encuentran almacenados los ficheros web de tu sitio principal.

      DocumentRoot "/var/www/html"


Realizando esto podemos ver el siguiente vídeo donde podremos ver de una forma practica lo anteriormente hablado.




Que es DHCP ?

es un protocolo de red que permite a los clientes de una red IP obtener sus parámetros de configuración automáticamente. Se trata de un protocolo de tipo cliente/servidor en el que generalmente un servidor posee una lista de direcciones IP dinámicas y las va asignando a los clientes conforme éstas van estando libres, sabiendo en todo momento quién ha estado en posesión de esa IP, cuánto tiempo la ha tenido y a quién se la ha asignado después.

Instalación servicio DHCP

Procederemos a instalar nuestro servidor DHCP mediante la descarga de los siguientes paquetes por lo que se recomienda que dichas descargas se hagan como root. Para ello teclearemos en consola lo siguiente:

   yum install -y dhcp

Una vez que se halla descargado e instalado el dhcp, este creara su fichero de configuración en la siguiente ubicación:

   /etc/dhcpd.conf

Configuracion del fichero dhcpd.conf

El primer paso para configurar el servidor de DHCP sera editar el fichero dhcp.conf al cual le añadiremos la información de nuestra LAN. El archivo de configuración puede contener tabulaciones o líneas en blanco adicionales para facilitar el formato. Las palabras clave no distinguen entre mayúsculas y minúsculas. Las líneas que empiezan con el simbolo numeral (#) se consideran comentarios.

Teniendo en cuenta esta información vamos ver un vídeo practico sobre la instalación y configuración de nuestro servicio DHCP.




Que es FTP ?

Es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

El servicio FTP es ofrecido por la capa de aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor y/o apropiarse de los archivos transferidos.

Instalación servicio FTP

Instalaremos nuestro servicio con las siguientes lineas de codigo:

     yum install -y vsftpd

Ahora verificaremos si nuestro servicio quedo instalado en nuestro servidor 

    rpm -qa | grep vsftpd

Teniendo nuestro servicio instalado vamos a iniciarlo puesto que no se a activado:

    service vsftpd restart

Con esto activamos nuestro servicio, como lo podemos verificar con la ayuda de la herramienta "nmap"

   nmap localhost

si no tenemos esta herramienta instalada solo debemos escribir 

  yum install -y nmap

Si por algún motivo no nos deja activar nuestro servicio deberemos desactivar el cortafuego "Sistema/Administración/Cortafuego".

Le damos en el botón inhabilitar y aplicar.

Con esto hemos desactivado nuestro cortafuego.

Ahora verificaremos nuestro servicio en otra maquina con un sistema operativo preferiblemente diferente a el de nuestro servidor. Para este ejemplo utilizaremos el sistema operativo Windows. con la ayuda de el programa "filezilla", el cual es un cliente FTP multiplataforma de código abierto y software libre.



Donde colocaremos en el espacio de Servidor la dirección IP de nuestro Servidor, en nombre de usuario colocaremos un usuario creado en nuestro servidor, la contraseña del usuario y en el campo del puerto es opcional si lo colocamos o no puesto que si nos vamos a conectar con el puerto de el servicio FTP y no lo hemos modificado el por defecto sabe que se conectara por el puerto 21.


Dejaremos un vídeo donde explicaremos de forma practica la instalación y la configuración de el servicio FTP.





Que es el servicio SSH ?

(Secure SHell, en español: intérprete de órdenes segura) es el nombre de un protocolo y del programa que lo implementa, y sirve para acceder a máquinas remotas a través de una red. Permite manejar por completo la computadora mediante un intérprete de comandos, y también puede redirigir el tráfico de Xpara poder ejecutar programas gráficos si tenemos un Servidor X (en sistemas Unix y Windows) corriendo.

Además de la conexión a otros dispositivos, SSH nos permite copiar datos de forma segura (tanto archivos sueltos como simular sesiones FTP cifradas), gestionar claves RSA para no escribir claves al conectar a los dispositivo.

Instalación y Configuración Servicio SSH

Lo primero que debemos realizar es la Instalación de nuestro servicio, abrimos una ventana terminal donde escribiremos las siguientes lineas de código:

    yum install ssh


Verificamos si nustro servicio quedo instalado 


   rpm -qa | grep ssh


Ahora verificamos si nuestro servicio ssh esta o no activo 


  ssh NombreUsuario@localhost

En "NombreUsuario" colocaremos nuestro usuario creado en nuestro servidor con el que deseamos comprobar el servicio SSH.


Una vez realizado esto iremos a otra maquina conectada a nuestra red, en este caso se utiliza una maquina con sistema operativo Windows, con ayuda de el programa Putty, realizaremos la conexión a nuestro servidor por medio de el servicio SSH.




En el espacio de Host Name colocaremos la dirección IP de nuestro servidor, en el puerto colocaremos el numero del puerto SSH que tengamos, que por defecto es el puerto 22, en tipo de conexión solo seleccionaremos SSH, seleccionamos Only on clean exit teniendo esto le daremos open,  después de esto debemos escribir el nombre de el usuario con el que deseemos ingresar y su respectiva contraseña, con esto terminamos la instalación de el servicio SSH.


CAMBIO DE NUMERO DE PUERTO SSH



Vamos a cambiar el numero de puerto que trae por defecto nuestro servicio ya instalado SSH, como sabemos el numero de puerto que trae es el 22 ahora lo vamos a cambiar por el numero de puerto 2222, lo primero que debemos de hacer es desactivar el Cortafuego, vamos realizarlo de modo gráfico "Sistema/Administración/Cortafuego"

Allí lo desactivaremos.



Ahora vamos a desactivar el Selinux, nos dirigimos a el directorio Selinux, en nuestra terminal escribiremos la siguientes lineas de código para poder modificar y desactivar nuestro Selinux en su archivo de configuración.

Abrimos el directorio

  cd  /etc/selinux/


Allí encontraremos el archivo de configuración 


  gedit config


Donde editaremos la linea de codigo que dice "SELINUX", que esta por defecto "enforcing", la dejaremos "disabled"



Otra forma sencilla de desactivarlo es escribiendo en nuestra terminal 


    setenforce 0


Ahora cambiaremos de numero de puerto a nuestro servicio SSH, escribimos de en la terminal la siguiente dirección de directorio:

   cd  /etc/ssh/


Alli editaremos el archivo "sshd_config"


   gedit  sshd_config



Buscamos la linea de código que dice "port 22" y solo cambiaremos el numero 22 por el 2222, guardamos los cambios. y reiniciamos el servicio SSH:


   service sshd restart



Ahora instalaremos una herramienta muy útil para poder verificar que puertos en nuestro servidor se encuentran abiertos. La instalamos:

  yum install nmap


Una vez instalado verificaremos que si nuestro servicio se encuentra activo y con esto tambien podemos verificar si tomo el cambio de numero de puerto que se realizo.


   nmap localhost


O tambien podemos escribir la dirección IP de nuestro servidor:


  nmap 192.168.0.15


Vamos a verificar con la ayuda de el programa putty instalado en Windows, si nos podemos conectar con el nuevo numero de puerto de nuestro servicio SSH. colocaremos lo mismo que en el ejercicio anterior de instalación solo que ahora no colocaremos el numero de puerto 22 sino que colocaremos nuestro nuevo numero de puerto 222.




Con esto hemos terminado la configuración de nuestro servicio SSH, que consistía en cambiar el numero de puerto que trae por defecto el servicio SSH.


Ahora veremos un vídeo donde realizaremos lo anterior:







martes, 12 de agosto de 2014

Lo primero que vamos hacer es colocar un borde solido a nuestro DIV . 
.estilo_div{
  background:#ff6600;
  border-radius:15px;
  height:100px;
  width:250;
}
Vista previa:


Ahora vamos a darle la propiedad [ border: solid ].
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  height:100px;
  width:250;
}
Lo primero es la propiedad llamada [ border ], lo segundo es decirle que nuestro borde va a ser solido [ border:solid ], despues le diremos que el grosor de nuestro borde queremos que sea de 10px [ border:solid 10px ] y por ultimo de decimos de que color queremos que se muestre nuestro borde [ border:solid 10px #ccc ].

Que nos arroja como resultado:


Ahora pasaremos a darle un aspecto mucho mejor a nuestro DIV con la propiedad [ box-shadow ] que nos trae CSS3. el cual nos da un aspecto de sombra a nuestro DIV.
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: 8px 8px 10px 0px #818181;
  height:100px;
  width:250;
}
Dándole esta propiedad a nuestro DIV le estamos diciendo que queremos colocar un [ box-shadow ] que significa "caja de sombra".
  1. El primer parámetro que le damos es la distancia en el eje X, en este caso le estamos diciendo que corra 15px en el eje X. 
  2. El segundo parámetro es la distancia en el eje Y , al igual que en el anterior le estamos diciendo que corra 15px en el eje Y. en este caso si queremos que la sombra corra hacia la izquierda o hacia arriba le anteponemos el signo negativo "-15px". 
  3. El tercer parámetro es opcional e indica el radio utilizado para difuminar la sombra. Si se utiliza el valor 0, la sombra se mostrara como un color solido.
  4. El cuarto parámetro también es opcional e indica el radio con el que se va a expandir nuestra sombra. si establecemos un valor positivo, nuestra sombra se expande en todas las direcciones, y si por el contrario colocamos un valor negativo nuestra sombra se comprimirá.
  5. la quinta propiedad es para darle el color que deseemos a nuestra sombra. 
Arrojando como resultado:



Otro ejemplo seria

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: 0px 20px 15px -15px #818181;
  height:100px;
  width:250;
}
Vista previa:


También podemos que nuestra sombra no se muestre en la parte externa de nuestro DIV sino que vamos a decirle a nuestra sombra que expanda en la parte interior de nuestro DIV, colocando una palabra clave llamada [ inset ].

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: inset 0px 0px 20px #818181;
  height:100px;
  width:250;
}
Vista previa:


Si deseamos que nuestra sombra tenga transparencia y no sea difuminada, podemos crear esta transparencia con la propiedad "RGBA", que es la misma "RGB" pero esta añade un canal alfa "A" de transparencia de color CSS3. En el siguiente ejemplo veremos como le daremos una sombra negra interna con una transparencia del 50% aplicando "RGBA" a nuestra sombra, en las posiciones 10px en el eje X y 10px en el eje Y.
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: inset 10px 10px RGBA(0,0,0,0.5);
  height:100px;
  width:250;
}
Vista previa:

Con CSS3 no solo podemos darle un solo color a nuestro DIV sino que también podremos definir múltiples sombras con diferentes colores cada una, esto lo podemos hacer definiendo diferentes sombras y separarlas con "comas" " , "

.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}
Vista previa:



Pero hay que recordar una cosa importante a la hora de la compatibilidad en los navegadores existentes puesto que todos no soportan esta propiedad de CSS3  ya que es nueva, para darle compatibilidad debemos anteponer propiedades según el navegador. 

Para Google Chrome y Safari debemos anteponer la propiedad [ -webkit- ]
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -webkit-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}
Para Mozilla Firefox debemos anteponer la propiedad [ -moz- ]
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}
Para Opera debemos anteponer la propiedad [ -o- ]
.estilo_div{
  background:#ff6600;
  border:solid 10px #ccc;
  border-radius:15px;
  -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue;
  height:100px;
  width:250;
}
Para este caso tomaremos nuestro ejemplo anterior a el cual le dimos como propiedades con una altura de 150px, un ancho de 250px y de color verde. Ahora le daremos la propiedad [ borde-radius ], la cual nos permite redondear las esquinas de nuestros div.

Teniendo en nustro archivo htlm, un div con una clase de nombre [ estilo_div ].
<html>
        <head>
        </head>
        <body>
           <div class="estilo_div"></div>
        </body>
</html>
Nos dirijimos a nuestro archivo .css que en nuestro caso se llama [ estilo.css ], endonde vamos a trabajar.
.estilo_div{
  background:#ff6600;
  height:100px;
  width:250;
}
Que nos arroja como resultado:


Ahora vamos a redondearle las esquinas a nuestro DIV con la propiedad [ borde-radius ]. si deseamos darle un borde redondeado igual a nuestras 4 esquinas de el div colo caremos una sola medida que este ejemplo le daromos 15px.
.estilo_div{
  background:#ff6600;
  border-radius:15px;
  height:100px;
  width:250;
}
Que nos arroja como resultado:

  
Ahora bien si deseamos  darle un borde redondeado diferente a nuestras 4 esqunas de el div, daremos 4 medidas diferentes: 15px 20px 30px 5px; las cuales nos darian.

15px : esquina superior izquierda.
20px : esquina suoperior derecha.
30px : esquina inferior derecha.
5px : esquina inferior izquierda.
.estilo_div{
  background:#ff6600;
  border-radius:15px 20px 30px 5px;
  height:100px;
  width:250;
}
 
-->