Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje19-06-2009, 16:57 (UTC)    
Título del mensaje: [Tutorial CSS] Tutorial de css 2 by [Tw*]

En este tutorial enseñaremos a crear css desgin y a modificar css enchos por otros.

1. colores y fondo

Como agregar colores a las letras y al fondo

la propiedad 'color'

Ejemplo:
Los titulos de la web en color azul:

El elemento <h1> tiene que colocarse antes del texto que esta como titulo. El código siguiente se establece despues del texto que esta como titulo </h1>.


Luego colocar el siguiente codigo en tu css este codigo sirve para cambiar el color del titulo para modificar el color solo tienes que modificar lo que esta de color verde.
Cita:


h1 {
color: #6eacec;
}



Resultado:



1.2:La propiedad 'background-color'

La propiedad background-color es el color de fondo de los elementos.

Ejemplo:
En este ejemplo colocaremos color de fondo al titulo de la web:
Cita:


h1 {
color: #6eacec;
background-color: #cccccc;
}



Resultado:



1.3 Imágenes de fondo [background-image]

La propiedad CSS background-image se usa para insertar una imagen de fondo.

Ejemplo:

Para el ejemplo de la imagen de fondo, vamos a usar la imagen que ves más abajo. Tambien bien puedes usar otra imagen.



Para insertar la imagen como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body>.

Cita:

body {
background-color: #FFCC66;
background-image: url("http://www.fileden.com/files/2008/3/24/1833523/default.jpg");
}


Resultado:





2: como agregar un header(encabezado) al diseño:

Primero tenemos que pegar el codigo siguiente en nuestro css:

Cita:

#header {
width: 863px;
position: relative;
height: 142px;
background: #fff url(Url de la imagen) no-repeat center top;
padding: 0;
}


Luego tenemos que colocar el siguiente codigo en texto por encima de la pagina:

Cita:

<!--header -->
<div id="header">

</div>


otra forma mas facil para colocar un header es esta:

colocar este codigo en texto por encima de la pagina:

Cita:

<center> <img src="Url de la imagen" border="0"> </center>


Resultado:


3:Como crear un menu horizontal:

Primeros introduciremos en siguiente codigo en nuestro css:

Cita:

/* Menu */
#menu {
clear: both;
margin: 0 auto; padding: 0;
background: url(Url de la imagen de Fondo del menu) repeat-x 0 0;
font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
height: 32px;
width: 839px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #FFF;
text-decoration: none;
}
#menu ul li.last a {
padding-right: 20px;
}
#menu ul li a:hover {
color: #cccccc;
}
#menu ul li#current a {
color: #ccc;
}



Luego introduciremos el siguiente codigo en texto por encima de la web:

Cita:

<!-- menu -->
<div id="menu">
<ul>
<li id="current"><a href="Url">Nombre</a></li>
<li><a href="Url">Nombre</a></li>
<li><a href="Url">Nombre</a></li>
<li><a href="Url">Nombre</a></li>
<li><a href="Url">Nombre</a></li>
<li class="last"><a href="Url">Nombre</a></li>
</ul>
</div>



Resultado:




4: como crear una caja de texto rapido y funcional en html para css con fieldset.

Primero tienen que introducir estos codigos donde se les indican:

Texo por encima de la pagina
Cita:

<fieldset>
<img src="Imagen que comienza en la caja de texto" border="0" />
<table background=imagen de fondo de la caja de texto height=100 width= 733>
<tr>
<td>


Texto por debajo de la pagina
Cita:

</td>
</tr>
</table>
<img src="imagen de fin de la caja de texto " border="0" />
</fieldset>


Luego introducir el siguiente codigo css en tu css:

Cita:

fieldset {
background-color: ;
border-color : ;
border-style : ;
border-width : 0px;
width: 712px;
left: 230px;
position: absolute;
top: 251px;
}


Imagenes:

Imagen de comienzo de la caja de texto:


Imagen de fondo de la caja de texto


Imagen final de la caja de texto



Resultado:


Esta imcompleto pronto termino
______________


Ultima edición por team-webmaster el Vie Jun 19, 2009 2:07 pm; editado 10 veces
Mensaje19-06-2009, 17:40 (UTC)    
Título del mensaje:

Esta exelente exelente con este tuto Talvelz volvamos a los tiepos en que pwg
era un mundo de Creaciones y no Adaptaciones

Espero Que Cambie eso ... Que ya nadie confia en su Toque grafico ?

Bueno Esta exelente este tutorial gracias por aportar :D

Realmente Exelente 10 / 10


Editado:
Puedo usar esta imagen para cosas de mi web ? [img]ttp://www.fileden.com/files/2008/3/24/1833523/titulotutorial.png[/img] Me ha gustado mucho jajaj


Ultima edición por designstudios el Vie Jun 19, 2009 1:41 pm; editado 1 vez
Mensaje19-06-2009, 17:44 (UTC)    
Título del mensaje:

designstudios escribió:

Editado:
Puedo usar esta imagen para cosas de mi web ? Me ha gustado mucho jajaj



si esta bn
______________
Mensaje19-06-2009, 21:55 (UTC)    
Título del mensaje:

Buen tutorial !
Mensaje19-06-2009, 21:59 (UTC)    
Título del mensaje:

Gúau, Bueno,
Me gústo.
Lo que pasa, demasíado explícito.
______________

Entra en Www.encantadosdelmanga.es.tl
Mensaje20-06-2009, 01:07 (UTC)    
Título del mensaje:

Exelente tuto TW

10/10

Muy util para todos los usuarios, y una mejor ayuda para los que ya sabemos...
Mensaje20-06-2009, 03:00 (UTC)    
Título del mensaje:

Mensaje18-09-2009, 18:35 (UTC)    
Título del mensaje: me encanto

me encanto yo digo que 10/10
Mensaje18-09-2009, 18:43 (UTC)    
Título del mensaje:

Gracias espero que este tutorial te ayude en algo
______________
Mensaje18-09-2009, 19:55 (UTC)    
Título del mensaje:

designstudios escribió:
Esta exelente exelente con este tuto Talvelz volvamos a los tiepos en que pwg
era un mundo de Creaciones y no Adaptaciones

Espero Que Cambie eso ... Que ya nadie confia en su Toque grafico ?

Bueno Esta exelente este tutorial gracias por aportar :D

Realmente Exelente 10 / 10


Editado:
Puedo usar esta imagen para cosas de mi web ? [img]ttp://www.fileden.com/files/2008/3/24/1833523/titulotutorial.png[/img] Me ha gustado mucho jajaj


pues parece que no :S , en mi taller lo unico que me piden es
"haceme una imagen como la de este usuario " o haceme una plantilla como la de este otro usuario "

es que creo que no tienen ganas de trabajar , ven algo que les gusta y quieren que se los haga otro ,estan mal acostumbrados quedamos muy pocos webmaster verdaderos que creeamos 100% todo nuestro contenido nosotros mismos,
vale mil veces mas algo hecho por nosotros mismos aunque no este super diez que algo genialmente hecho por otro....

y TW eres uno de ellos pero a ti las cosas ademas de hacerlas tu te salen genialmente de diez jeje

buenisimo tutorial haber si se ponen manos a la obra y empezamos a crear otra vez en vez de recrear, como dices tu colega

saludos


100/100 y eso que aun te falta jaja ^^
______________
Mensaje18-09-2009, 20:12 (UTC)    
Título del mensaje:

Esta exelente el tutorial, 10/10. Bien explicado y muy últil.

Saludos!
______________
Mensaje18-09-2009, 20:29 (UTC)    
Título del mensaje:

Gracias.


Megustaria que los usuarios fueran originales y no copia ahora casi todos los usuarios piden que le creen cosas parecidas a otras web por ejemplo: quiero un encabezado como el de team-webmaster, las letras las quiero como el de ivanswebs ect...

los diseños echos por uno son mejores que echos por otros yo cuando comense pwg yo no sabia nada y mis diseños no eran buenos yo reconosco que mis primeros diseños no tenian ni 5pts de calificacion. pero a muchos usuarios le gustaban mis design.
______________
Mensaje18-09-2009, 20:30 (UTC)    
Título del mensaje:

me gusto el tutorial
cuando te lo pedi lo isiste super men..

pero gracias almenos porque no me ayudaste.

eres un buen amigo
Mensaje18-09-2009, 22:13 (UTC)    
Título del mensaje:

Este tutorial...
No me gusto....








Me Encanto!!

Explica todo de forma muy ordenada!
Felicidades!

Si en el foro estuviera el sistema de puntajes te daría muchos :D

Saludos!
______________
¡Último Momento!:
* Shinox Ayuda ya no brinda ayuda webmaster.
* Shinox Ayuda ya no adapta plantillas profesionales.
* Shinox Ayuda ofrece plantillas profesionales exclusivas para miembros.
Ir a Shinox Ayuda.
Mensaje18-09-2009, 22:26 (UTC)    
Título del mensaje:

team-webmaster escribió:
Gracias.


Megustaria que los usuarios fueran originales y no copia ahora casi todos los usuarios piden que le creen cosas parecidas a otras web por ejemplo: quiero un encabezado como el de team-webmaster, las letras las quiero como el de ivanswebs ect...

los diseños echos por uno son mejores que echos por otros yo cuando comense pwg yo no sabia nada y mis diseños no eran buenos yo reconosco que mis primeros diseños no tenian ni 5pts de calificacion. pero a muchos usuarios le gustaban mis design.


claro porque eran tuyos, eso cuenta al final de todo , hay tantos usuarios que adaptaron sus diseños y no son conocidos o pocos activos en el foro, muchos otros tienen diseños ICEBLUe como el bacan, didy etc y sin embargo les encanta a la gente . eso es lo que cuenta el esfuerzo

sigue asi tw
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group