Close



Tema: [Tutorial] DreamWeaver: Sombras, Bordes Redondeados en Textos & Div's (Box)  (Leído 7589 veces)

0 Usuarios y 1 Visitante están viendo este tema.

"Makin' love in my sex dreams♥"
Héroe
*
1708 Mensajes
309 Temas
1139821 coins
0 puntos
Actividad
0%
Medallas Totales: 25
Cuarto Aniversario Tercer Aniversario Coleccionista de Premios Nivel 5
Mi inventarionombreamostrarvip.gif2-invasor.png2-invasor.png2-invasor.pngnombreamostrarvip.gif2-facebook.png
* KAMV
Mensaje Iniciador
18 de Nov de 2011, 09:43 am
Sumamente fácil es usar DreamWeaver ¿Que Explicaré Hoy?

  1 Cómo Ponerle Sombra a un Texto
  2 Cómo Ponerle Bordes Redondeados a un Box (Div's)
  3 Cómo Ponerle Sombra a un Box (Div's)
  4 Cómo Aplicarle un Fondo a un Box (Div's)
 
5 Cómo Ponerle Margen a un Box (Div's)
  6 Cómo Crear una Div
  7 Cómo Quitarle Bordes a una Tabla
  8 Cómo Ponerle Fondo a una Tabla
  9 Cómo Aplicarle Estilos a Campos de Formularios
10 Cómo crear una Marquesina <marquee> </marquee>

¡EMPIEZO!

 1 Cómo ponerle sombra a un Texto:

Mostrar Contenido
Esto es Sumamente Sencillo, Si lo que deseas es que tu Texto tenga una Sombra... Puedes aplicarle este código CSS a tu Regla:
Código HTML.
  1.    {
  2.    text-shadow: 0.1em 0.1em 0.2em #000;
  3.    }


 2 Cómo ponerle border redondeados a un Box (Div's):

Mostrar Contenido
Si deseas que tu Div no se vea tan Sencilla de esa Forma Cuadrada, puedes aplicarle un estilo para que queden redondeadas... Puedes aplicarle este código CSS a tu Regla:
Código HTML.
  1.    {
  2.  -moz-border-radius: 5px;
  3.    }

 ¿Que Significa el "-moz" el -moz se una para Mozilla Firefox para que pueda ser Visulizado en ese Explorador, puedes agregarle tambien este código:
Código HTML.
  1.  {
  2.  -webkit-border-radius: 5px;
  3.  }
  4.  
El "-webkit" es para Google Chrome, Safari u Opera. Si quieres que sea Visto sin Problemas en todos los Navegadores, pon este código:

 
Código HTML.
  1.  {
  2.     -moz-border-radius: 5px;
  3.  -webkit-border-radius: 5px;
  4.  }
  5.  
Con solo esos dos Código podra ser Visualizado en Mozilla, Safari, Chrome, Opera etc...
Si deseas poner los Bordes más redondeados cambiale a la regla el "5px" por un número mayor

  3 Cómo Ponerle Sombra a un Box (Div's)

Mostrar Contenido
Si deseas que tu Div no se vea tan Sencilla, quieres que tenga un poco de Sombra... Puedes aplicarle este código CSS a tu Regla:
 
Código HTML.
  1.  {
  2.  -moz-boz-shadow: 1px 1px 2px #000;
  3.  }

 Ya Debes de Saber que significa el "-moz" y ya sabes que lo puedes cambiar e incluso poner los dos códigos para que sea visualizado en todos los Exploradores
Nuevamente te dejo el código completo para todos los exploradores
 
Código HTML.
  1.  {
  2.  -moz-box-shadow: 1px 1px 2px #000;
  3.     -webkit-box-shadow: 1px 1px 2px #000;
  4.  }
  5.  
- Con solo esos dos Código podra ser Visualizado en Mozilla, Safari, Chrome, Opera etc...
 Si deseas ponerle más los Bordes más sombrala juega con el código "1px 1px 2px" cambiale los números, vas guardando y vas vizualizando en tu explorador de preferencia

  4 Cómo Aplicarle un Fondo a un Box (Div's)

Mostrar Contenido
Si deseas que tu Box no sea de su Color Transparente tienes la Opción de Aplicarle tanto cómo un Color de Fondo o simplemente una imágen... Puedes aplicarle este código CSS a tu Regla:
 
Código HTML.
  1.  {
  2.  background-color: #FFF;
  3.  }

 Ese código es para seleccionar un color cómo tal. Si lo que deseas que ponerle un imágen te dejo este código:
 
Código HTML.
  1.  {
  2.    background-image:url(aquí dirección de la imágen)
  3.  }
  4.  
- En (aquí dirección de la imágen) coloca la ruta donde posees la imágen que deas ponerle cómo fondo


- Cómo ven en la imágen yo tengo cómo estilo Aplicado el siguiente:
Código HTML.
  1.  {
  2.  background-image:url(Lady-GaGa-Bad-Romance.png);
  3.  -moz-border-radius: 9px;
  4.  }
  5.  

5 Cómo Ponerle Margen a un Box (Div's)

Mostrar Contenido
A lo que nosotros creamos una Div, el Texto lo podemos notar que está muy pegado a los bordes... Puedes aplicarle este código CSS a tu Regla para que quede ajustado el texto::
 
Código HTML.
  1.  {
  2.   padding: 3px;
  3.   margin: 0px;
  4.  }

 Ese Código es para que quede El texto Ajustado y no pegue de los bordes del Box (Div)
 
 - Si deseas que quede más Ajustado el Texto más Centrado pues puedes cambiarle ese "3px" a ún número más alto, Ve Jugando con el Código vas Guardando y Visualizalo para que veas cual es su función
 

  6 Cómo Crear una Div

Mostrar Contenido
Lo más Fácil del mundo es crear una Div (xD)
Para Insertar una Div en tu Web, ubicate en la pestaña "Código" de DreamWeaver e inserta el Siguiente código
 
Código HTML.
  1. <div>Aquí tu Texto</div>

 Ese Código es para insertar un Box (Div)
 
 - Si lo que deseas es aplicarle una Clase a esa Div, pues lo primero que debes de hacer es Crear una Regla CSS, Ya vimos Anteriormente cómo Aplicarle sombra a un Texto, Cómo ponerle borde a las Div's etc... Ahora sólo falta aplicarle una Clase a la Div, Siempre y cuando se lo desees aplicar. El Código es el Siguiente:

 
Código HTML.
  1.  <div class="xxx">Aquí tu Texto</div>
En las "xxx" Coloca el nombre de la Regla CSS que le deseas aplicar.
 

  7 Cómo Quitarle Bordes a una Tabla

Mostrar Contenido
En este paso veremos cómo quitarle bordes a una tabla en DreamWeaver...
 A lo que nosotros en Dw insertamos una tabla, se crea con bordes cómo veremos en la Siguiente imágen:



- Te Dejo el Código de la Tabla lista sin Bordes:
 
Código HTML.
  1.  <table width="200" border="0">
  2.   <tr>
  3.     <th scope="col">&nbsp;</th>
  4.   </tr>

 Ese Código es para insertar una Tabla sin Bordes
 

 8 Cómo Ponerle Fondo a una Tabla

Mostrar Contenido
Si lo que deseamos es aplicarle un Fondo a nuestra tabla puedes usar esete código listo para Aplicarle el fondo o simplemente un color

Aplicarle Color: (Código Completo sin bordes)

Código HTML.
  1.  <table width="200" border="0" bgcolor="#00FF33">
  2.   <tr>
  3.     <th scope="col">&nbsp;</th>
  4.   </tr>

Quedaría de esta Manera: (NOTA: La Tabla es sólo el color Verde Fluorescente o Fosforescente, cómo le quieran llamar)

 
 
 Tabla de fondo cómo imágen: (Código completo sin Bordes)
 
Código HTML.
  1.  <table width="200" border="0" background="Lady-GaGa-Bad-Romance.png">
  2.   <tr>
  3.     <th scope="col">&nbsp;</th>
  4.   </tr>

- Quedaría de esta manera:



- Eso es Todo para una Tabla Con Fondo
 

  9 Cómo Aplicarle Estilos a Campos de Formularios

Mostrar Contenido
Si queremos crear un Formulario de Contacto por Ejemplo primero te explicaré cuales son los Campos...

Campo de Texto:

 Su código es:
Código HTML.
  1.   Nombre:
  2.   <input type="text" name="textfield" id="textfield" />
  3.  

 Aplicarle Color: (Código Completo sin bordes)
 
 
Código HTML.
  1.  <table width="200" border="0" bgcolor="#00FF33">
  2.  <tr>
  3.  <th scope="col">&nbsp;</th>
  4.  </tr>
  5.  </table>

Area de Texto (textarea):



Su código es:
Código HTML.
  1.  Descripción:
  2.   <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
  3.  
Existen mas campos de formulario pero te expliqué esos 2 para que vallas teniendo una idea sobre las clases de los Formulario y sus Estilos CSS

 Si queremos que el campo de Formulario tenga bordes Redondeados e incluso sombra debes aplicarle una clase, con los mismos códigos CSS que expliqueé en los primero 4 pasos... Sólo creas una Nueva Regla le aplicas esos stilos de bordes redondeados, sombras etc... y le aplicas la clase al campo de formulario.

- Te dejaré un código CSS completo para un campo de formulario:

 Tabla de fondo cómo imágen: (Código completo sin Bordes)
 
Código HTML.
  1.    .form_text {
  2.     background-color: #FFF;
  3.     -moz-box-shadow: 1px 1px 2px #000;
  4.     -moz-border-radius: 3px;
  5.     padding: 2px;
  6. }

- Y el código del campo del Formulario con su Clase aplicada es el siguiente:

 
Código HTML.
  1.  <form id="form1" name="form1" method="post" action="">
  2.   Nombre:
  3.   <input name="textfield" type="text" class="form_text" id="textfield" />
  4. </form>

 - Quedaría de esta manera:

 

Vamos al Ultimo Tuto que es cómo crear una Marquesina
 

10 Cómo crear una Marquesina <marquee> </marquee>

Mostrar Contenido
Marquesina es una etiqueta de HTML5 que sirve para que un texto se mueva de derecha a izquierda o de Arriba Abajo o ambos.

 Para insertar una Marquesina usaremos el siguiente código:
 
Código HTML.
  1. <marquee bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 >Bienvenido a mi Tuto de KM.
  2. </marquee>

 Ejemplo de una Marquesina:
¡Bienvenido a mi Tuto de KM Super Explicado! :D xD!
- Eso es todo para poner una Marquesina en nuestra Web!
 

Tema Creado 100% por mi =$ xD
¡Gracias! ¡Espero que les sirva de mucho ¡Me esforzé pero lo hice con la intención de ayudarlos!

Acepto +1...
NOTA: Si van a comentar cosas que no tienen sentido de verdad no comenten se agradece... Me esforzé sacando imágen y escribiendo pero... Espero que Aprendan

¡PD: Muchos dicen que es muy Dificil los Lengajes eb y aprenderlos, pero recuerden que si te propones aprenderlo y deseas saberlo de pies a cabeza lo puedes lograr y si necesitas algo de aprendizaje par Algo existen los Tutoriales que te sirvend e gran utilidad...

¡Suerte Kekomunder@s!


Fuente: Mi Cabeza e imaginación
I stand here waiting for
You to bang the gong.

To crash the critic saying, is it right... or is it wrong?
If only fame had an I.V baby could I bear.
Being away from you I, found the vein put it in her
APPLAUSE

Pop Culture wasn't Art now
Art's in Pop, culture in me
"<3"
Héroe
*
1733 Mensajes
249 Temas
20 coins
0 puntos
Actividad
0%
Medallas Totales: 24
Tercer Aniversario Segundo Aniversario Manos Rápidas
Mi inventario1-firefox.pngnene.pngdrac.gif3-Habbo.png1-GTA.png2-facebook.png
* Ayoub_007
Respuesta #1
18 de Nov de 2011, 10:11 am
Gracias Xd No Savia Como Uarlo Buen Tuto Salu2...
♥ I LOVE KEKOMUNDO ♥
"Cada vez aprendiendo más"
Avanzado Nivel 2
*
179 Mensajes
33 Temas
2963 coins
0 puntos
Actividad
0%
Medallas Totales: 16
Coleccionista de Premios Nivel 4 Coleccionista de Premios Nivel 3 Tercer Aniversario
* ElMargen98
Respuesta #2
18 de Nov de 2011, 11:07 am
Excelentes Tutoriales, Muchísimas gracias.
Héroe
*
1875 Mensajes
329 Temas
980 coins
0 puntos
Actividad
2.33%
Medallas Totales: 30
Coleccionista de Premios Nivel 6 Cuarto Aniversario Manos Rápidas
Mi inventariohtml.pngJS.pngnombreamostrarvip.gifphp.pngTarjeta.png
* petardo12
Respuesta #3
18 de Nov de 2011, 12:21 pm
Poner sombra en Div's tambie se puede utilizar:

box-shadow: 0px 0px 6px #color;
Dejar la macoña tu debes.
"Makin' love in my sex dreams♥"
Héroe
*
1708 Mensajes
309 Temas
1139821 coins
0 puntos
Actividad
0%
Medallas Totales: 25
Cuarto Aniversario Tercer Aniversario Coleccionista de Premios Nivel 5
Mi inventarionombreamostrarvip.gif2-invasor.png2-invasor.png2-invasor.pngnombreamostrarvip.gif2-facebook.png
* KAMV
Respuesta #4
18 de Nov de 2011, 12:22 pm
Poner sombra en Div's tambie se puede utilizar:

box-shadow: 0px 0px 6px #color;

Exactamente! :D
"Hey, yo también necesito vacaciones"
Ex-Rango
*
5101 Mensajes
1022 Temas
191 coins
0 puntos
Actividad
11.33%
Medallas Totales: 41
Coleccionista de Premios Nivel 7 5000 Mensajes Cuarto Aniversario
Mi inventario1-GoogleChrome.png1-GoogleChrome.png1-GoogleChrome.png1-GoogleChrome.png1-GoogleChrome.pngdrac.gif
* Megatrends
Respuesta #5
18 de Nov de 2011, 12:53 pm
Para los que quieren hacer una sombra blanca y quede sumergida" como los sub-foros de Km pongan esto:


Código: [Seleccionar]
text-shadow: 0 1px 0 #FCF9F9;o
Código: [Seleccionar]
text-shadow: 0 1px 0 #fff;O para poner una sombra mas sexye
Código: [Seleccionar]
text-shadow: 0 1px 0 #000;
Las sombras que utilizaste en el tutorial son realmente feas nunca elegiria eso, igualmente gracias por facilicar codes.
"Because of Yes!"
User Único
*
1347 Mensajes
226 Temas
9319758 coins
0 puntos
Actividad
3%
Medallas Totales: 32
Cuarto Aniversario Coleccionista de Premios Nivel 6 Tercer Aniversario
Mi inventarioildom.pngFilefolder.gifcalabaza.gifmurcielago.pngscream.pngbruja.png
* Jose.Manu98
Respuesta #6
18 de Nov de 2011, 12:58 pm
Gran tutorial, directo a mis favoritos.
"Makin' love in my sex dreams♥"
Héroe
*
1708 Mensajes
309 Temas
1139821 coins
0 puntos
Actividad
0%
Medallas Totales: 25
Cuarto Aniversario Tercer Aniversario Coleccionista de Premios Nivel 5
Mi inventarionombreamostrarvip.gif2-invasor.png2-invasor.png2-invasor.pngnombreamostrarvip.gif2-facebook.png
* KAMV
Respuesta #7
25 de Nov de 2011, 08:51 am
¡Gracias! Pronto Aporto más Códigos & en CSS
  • 7589 Visitas
  • 1 Favoritos


xx
Bordes redondeados para Internet EXPLORER ?

Iniciado por keciii

0 Respuestas
100 Vistas
último mensaje 07 de Jul de 2013, 11:47 pm
por keciii
xx
En dreamweaver 8 o cs5

Iniciado por Godoy97

4 Respuestas
231 Vistas
último mensaje 12 de Sep de 2011, 01:48 pm
por NiHiiilista
xx
Dreamweaver CS5

Iniciado por Danieljarto

2 Respuestas
535 Vistas
último mensaje 17 de Oct de 2011, 07:30 pm
por pangeador
 

¡'Adblock' detectado!

¡Ops!, parece que estás usando Adblock.

Para poder usar KekoMundo con normalidad, debes desactivarlo. ¿Cómo?

1. Haz click sobre el icono de adblock

2. Desactívalo para KekoMundo :-)

3. ¡Listo! Gracias por ayuda a KekoMundo

4. Recarga la página

5. Saber más ...

ir arriba