Noticias

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

0 Usuarios y 1 Visitante están viendo este tema.
DesconectadoAntwoord
Héroe
*
Enviar MP
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  :
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 HTML5.
  1.    {
  2.    text-shadow: 0.1em 0.1em 0.2em #000;
  3.    }


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

Spoiler  :
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 HTML5.
  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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  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  :
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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  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  :
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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  1.   Nombre:
  2.   <input type="text" name="textfield" id="textfield" />
  3.  

 Aplicarle Color: (Código Completo sin bordes)
 
 
Código HTML5.
  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 HTML5.
  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 HTML5.
  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 HTML5.
  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  :
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 HTML5.
  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

DesconectadoAyoub007
Héroe
*
Enviar MP
*
Gracias Xd No Savia Como Uarlo Buen Tuto Salu2...
♥ I LOVE KEKOMUNDO ♥

DesconectadoBobDead();
Avanzado Nivel 2
*
Enviar MP
*
  • Cada vez aprendiendo más
Excelentes Tutoriales, Muchísimas gracias.

Enviar MP
Poner sombra en Div's tambie se puede utilizar:

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

DesconectadoAntwoord
Héroe
*
Enviar MP
Poner sombra en Div's tambie se puede utilizar:

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

Exactamente! :D

DesconectadoDesfasado

Ex-Rango


*
Enviar MP
*
  • Hey, yo también necesito vacaciones
  • Sexo: Femenino
  • País ar
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.

DesconectadoStraxy
User Único
*
Enviar MP
Gran tutorial, directo a mis favoritos.

DesconectadoAntwoord
Héroe
*
Enviar MP
¡Gracias! Pronto Aporto más Códigos & en CSS


xx
Bordes redondeados para Internet EXPLORER ?

Iniciado por keciii

0 Respuestas
152 Vistas
Último mensaje Julio 07, 2013, 09:47:25 pm
por keciii
xx
Como hacer que mi background cambie de color sin actualizar la pagina?

Iniciado por Jere:3

3 Respuestas
343 Vistas
Último mensaje Julio 18, 2014, 07:12:26 pm
por Tr01L91
xx
Dreamweaver CS5

Iniciado por Danieljarto

2 Respuestas
604 Vistas
Último mensaje Octubre 17, 2011, 05:30:33 pm
por pangeador
xx
En dreamweaver cs5.5

Iniciado por Godoy97

2 Respuestas
174 Vistas
Último mensaje Octubre 07, 2011, 11:47:51 pm
por Godoy97
xx
En dreamweaver 8 o cs5

Iniciado por Godoy97

4 Respuestas
282 Vistas
Último mensaje Septiembre 12, 2011, 11:48:10 am
por NiHiiilista
xx
¿que diferencia hay entre id y class? [css]

Iniciado por Ventus

7 Respuestas
305 Vistas
Último mensaje Enero 07, 2013, 07:12:11 am
por TheYaoming