Close

Ingresar

Por favor, ingresa o regístrate.




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

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

  • Speechless

  • Héroe del Foro

  • Desconectado
  • *
  • Texto personal

  • Makin' love in my sex dreams♥
  • 1708
  • 1139821
  • Premios

  • Tercer Aniversario Coleccionista de Premios Nivel 5 Coleccionista de Premios Nivel 4
  • Actividad

  • 0%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • KAMV
    • ¡AndressMarquez en Facebook!
    • ¡Soy @AndrexMarquez en Twitter!
    • Ver Perfil
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:

Spoiler  : Mostrar
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):

Spoiler  : Mostrar
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)

Spoiler  : Mostrar
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)

Spoiler  : Mostrar
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)

Spoiler  : Mostrar
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

Spoiler  : Mostrar
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

Spoiler  : Mostrar
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

Spoiler  : Mostrar
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

Spoiler  : Mostrar
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>

Spoiler  : Mostrar
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

  • Ayoub007

  • Héroe del Foro

  • Desconectado
  • *
  • Texto personal

  • <3
  • 1733
  • 20
  • Premios

  • Segundo Aniversario Manos Rápidas Coleccionista de Premios Nivel 5
  • Actividad

  • 0%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • Ayoub_007
    • ¡Ayoub Ranbouk en Facebook!
    • ¡Soy @AyouubRanbouk en Twitter!
    • ¡Soy Ayoub1063 en Youtube!
    • Ver Perfil
Gracias Xd No Savia Como Uarlo Buen Tuto Salu2...
♥ I LOVE KEKOMUNDO ♥

  • BobDead();

  • Avanzado Nivel 2


  • Desconectado
  • *
  • Texto personal

  • Cada vez aprendiendo más
  • 179
  • 2963
  • Premios

  • Super Combinación Combinación Creador de Temas
  • Actividad

  • 0%
  • + Info
    Nick de registro

  • ElMargen98
    • Ver Perfil
Excelentes Tutoriales, Muchísimas gracias.

  • [B]asshunter.-

  • Héroe del Foro

  • Desconectado
  • *
  • 1868
  • 920
  • Premios

  • Cuarto Aniversario Manos Rápidas Usuario Linux
  • Actividad

  • 3.33%
  • + Info
    Inventario

  •           
  • Nick de registro

  • petardo12
    • ¡GonzayMaari en Facebook!
    • ¡Ir al perfil del usuario en Google+!
    • ¡Soy @GonzaHouse en Twitter!
    • ¡Soy HPixelARG en Youtube!
    • Ver Perfil HabboSecurity
Poner sombra en Div's tambie se puede utilizar:

box-shadow: 0px 0px 6px #color;
Dejar la macoña tu debes.

  • Speechless

  • Héroe del Foro

  • Desconectado
  • *
  • Texto personal

  • Makin' love in my sex dreams♥
  • 1708
  • 1139821
  • Premios

  • Tercer Aniversario Coleccionista de Premios Nivel 5 Coleccionista de Premios Nivel 4
  • Actividad

  • 0%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • KAMV
    • ¡AndressMarquez en Facebook!
    • ¡Soy @AndrexMarquez en Twitter!
    • Ver Perfil
Poner sombra en Div's tambie se puede utilizar:

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

Exactamente! :D

  • El Dorado

  • Ex-Rango


  • Desconectado
  • *
  • Texto personal

  • Hey, yo también necesito vacaciones
  • 5078
  • 704189
  • Premios

  • Coleccionista de Premios Nivel 7 5000 Mensajes Cuarto Aniversario
  • Actividad

  • 29%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • Megatrends
    • Ver Perfil
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.

  • Straxy

  • User Único

  • Desconectado
  • *
  • Texto personal

  • Because yes!
  • 1291
  • 9319438
  • Premios

  • Coleccionista de Premios Nivel 6 Tercer Aniversario Manos Rápidas
  • Actividad

  • 0%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • Jose.Manu98
    • ¡Soy @TheStrax en Twitter!
    • ¡Soy TheStraxYT en Youtube!
    • Ver Perfil
Gran tutorial, directo a mis favoritos.



Dije que te aceptaría incondicionalmente, no tienes porqué cambiar ni un poco.





  • Speechless

  • Héroe del Foro

  • Desconectado
  • *
  • Texto personal

  • Makin' love in my sex dreams♥
  • 1708
  • 1139821
  • Premios

  • Tercer Aniversario Coleccionista de Premios Nivel 5 Coleccionista de Premios Nivel 4
  • Actividad

  • 0%
  • + Info
    Inventario

  •                   
  • Nick de registro

  • KAMV
    • ¡AndressMarquez en Facebook!
    • ¡Soy @AndrexMarquez en Twitter!
    • Ver Perfil
¡Gracias! Pronto Aporto más Códigos & en CSS


xx
Bordes redondeados para Internet EXPLORER ?

Iniciado por keciii

0 Respuestas
80 Vistas
Último mensaje 07 de Jul de 2013, 11:47 pm
por keciii
xx
Dreamweaver CS5

Iniciado por Danieljarto

2 Respuestas
508 Vistas
Último mensaje 17 de Oct de 2011, 07:30 pm
por pangeador
xx
En dreamweaver cs5.5

Iniciado por Godoy97

2 Respuestas
131 Vistas
Último mensaje 08 de Oct de 2011, 01:47 am
por Godoy97
 

¡'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
SimplePortal 2.3.5 © 2008-2012, SimplePortal