Foros del Web » Creando para Internet » CSS »

Aprendiendo CSS3

Estas en el tema de Aprendiendo CSS3 en el foro de CSS en Foros del Web. Hola, hoy les intentare explicar un poco mas acerca del CSS3 y como utilizarlo, las nuevas funciones, etc. Para empezar debemos aclarar que CSS3 no ...
  #1 (permalink)  
Antiguo 25/04/2010, 13:39
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Aprendiendo CSS3

Hola, hoy les intentare explicar un poco mas acerca del CSS3 y como utilizarlo, las nuevas funciones, etc.

Para empezar debemos aclarar que CSS3 no lo acepta IE .

Algunas de las propiedades que veremos hoy seran:

* Text-shadow
* Box-shadow
* Border-radius (Esquinas Redondeadas)
* @font-face


1. Text-shadow:
El Text-shadow es la propiedad quizas mas usada ya que es muy sencilla de usarse y la mas practica.

El codigo es:

Código:
text-shadow: 2px 2px 5px #000;
El primer valor es la distancia horizontal de la sombra, el segundo la vertical y el tercero al radio del desenfoque y el ultimo al color de la sombra.
Navegadores que soportan text-shadow: Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

2. Box-shadow:
La propiedad box-shadow se utiliza de una manera muy similar a text-shadow, pero añade sombras a los elementos en su conjunto y no al texto dentro de ellos:

Código:
box-shadow: 5px 5px 10px 10px #000;
Los dos primeros valores son el desplazamiento de la sombra, el tercero el radio de desenfoque, y el cuarto valor del radio de propagación. El último valor es, por supuesto, el color de sombra.
Navegadores que soportan box-shadow: Safari 3.1+, FireFox 3.5, Chrome 1.0+

3. Border-radius:

Porque todo el mundo le gusta las esquinas redondeadas, la especificación CSS3 contiene el popular frontera de radio. Mozilla y Webkit requieren sus prefijos estándar, así que para añadir esquinas redondeadas con un radio de 10px a un elemento, utilice la siguiente:

Código:
-moz-border-radius: 10px; /* For FireFox */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

Navegadores que soportar border-radius: Safari 3.1+, FireFox 2.0, FireFox 3.0+, Chrome 1.0+

4. @font-face:
Aunque técnicamente no son una propiedad, la declaración de CSS3 font-face ha estado recibiendo bastante la atención en los últimos tiempos. Håkon Wium Lie, el proponente original de la CSS, escribió un artículo de lectura obligada para todos los A List Apart sobre @font-face. Esencialmente, esto permite a los desarrolladores incorporar fuentes en sus páginas que pueden ser convocadas por el simple propiedad font-family.

Para incrustar una fuente, sólo tiene que añadir una declaración @font-face de la siguiente manera:


Código:
@font-face {
      font-family: "Nombre de mi fuentet";
      src: url(Font.otf) format("opentype");
}
Esto le indica al navegador que cada vez que el tipo de letra "Nombre de mi fuente" se utiliza, tire de ella de "Font.otf." Simple y genial, de verdad. Así entonces para usar nuestra fuente, que acabamos de declarar, como lo haríamos con cualquier otra fuente:


Código:
h1 { font-family: "Nombre de mi fuente", sans-serif; }
Navegadores que soportan @font-face: Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+

CSS3 trae un poco de materia impresionante a la mesa, y ahora es el momento de empezar a usarlo. A medida que la comunidad de desarrollo web se vuelve más y más sobre CSS3 emocionados, los navegadores Mozilla y Webkit son rápidamente añadiendo más y más apoyo para nuevas propiedades, declaraciones y selectores. Así que toma ventaja de esto!
  #2 (permalink)  
Antiguo 26/04/2010, 00:14
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 7 años, 7 meses
Puntos: 154
Respuesta: Aprendiendo CSS3

Muy buena explicacion, quiero hacerte una consulta...dices que IE no interpreta CSS 3, existen hacks o algunos tricks para poder usar CSS3 con IE?
  #3 (permalink)  
Antiguo 26/04/2010, 00:48
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Aprendiendo CSS3

Mira este hack, agrega algunas compatibilidades con CSS3 en IE 6, 7 y : http://fetchak.com/ie-css3/

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 26/04/2010, 08:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aprendiendo CSS3

bueno hablar de CSS3, no son solo esas propiedades, es muy extenso y aventurero e interesante, hablar de estoy hoy en dia, que esta lejos de ser un estandar esperemos que se acorte el tiempo :)...

Cita:
Mira este hack, agrega algunas compatibilidades con CSS3 en IE 6, 7 y : http://fetchak.com/ie-css3/
mmmmm.... Carlangueitor este htc... creo que lo "hicieron" con ietester... (supongo) ya que con el IE6 original y no emulador no funciona... (pero con IE7 y 8 si)

ipraetoriux
la mejor solucion (hasta ahora) es JS, o bien imagenes, para tener mayor compatibilidad con otros navegadores...
  #5 (permalink)  
Antiguo 26/04/2010, 08:46
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 11 años, 1 mes
Puntos: 8
Respuesta: Aprendiendo CSS3

Un link para mí bastante útil: http://www.newconcept.hu/data/articl...web_designers/

Se agradece la información OmarV

Un saludo.
  #6 (permalink)  
Antiguo 26/04/2010, 10:44
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Aprendiendo CSS3

Cita:
Iniciado por alexk Ver Mensaje
mmmmm.... Carlangueitor este htc... creo que lo "hicieron" con ietester... (supongo) ya que con el IE6 original y no emulador no funciona... (pero con IE7 y 8 si)
Se me paso probarlo, apenas lo vi. Estuve Buscando más opciones, y encontre este post con varias opciones para CSS3 y HTML 5: http://www.catswhocode.com/blog/10-w...modern-browser Incluyendo usar pseudoselectores Avanzados

También Encontre este que agrega algunas propiedades, principalmente transform: http://www.useragentman.com/blog/201...ms-even-in-ie/

PD: No se como Instlas todos los IE (yo tengo IE Tester) ya que la última vez que tuve Instalados IE6 e IE7, IE6 trabajaba como una versión entre la 6 y 7

Saludos
__________________
Grupo Telegram Docker en Español

Última edición por Carlangueitor; 26/04/2010 a las 11:02
  #7 (permalink)  
Antiguo 26/04/2010, 10:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aprendiendo CSS3

Cita:
PD: No se como Instlas todos los IE (yo tengo IE Tester) ya que la última vez que tuve Instalados IE6 e IE7, IE6 trabajaba como una versión entre la 6 y 7
jeje... pues esta herramienta es una maravilla... no es ningun emulador es el IE6 de fabrica.
Browser Sandbox – Run any browser from the web

cuando estaba en XP pues tenia el IE6 que viene con Win2, y me ponia el 8 sin actualizar el 6... y tenia los 3... pero me pase a Win7 y no podia hacer eso y mucho menos instalar Ietester nuse porque pero bueno...

Buenos links... probare el de HTML5 en IE6... que lo intente una vez y no lo consegui jeje... pero eso es otra historia.......
  #8 (permalink)  
Antiguo 28/04/2010, 13:15
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: Aprendiendo CSS3

Cita:
Iniciado por alexk Ver Mensaje
bueno hablar de CSS3, no son solo esas propiedades, es muy extenso y aventurero e interesante, hablar de estoy hoy en dia, que esta lejos de ser un estandar esperemos que se acorte el tiempo :)...
De hecho lo que se pretende hacer con este post es que la gente se valla familiarizando con el css3 no aprenderlo todo completamente.
  #9 (permalink)  
Antiguo 29/04/2010, 06:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Aprendiendo CSS3

Hola:

Cita:
Iniciado por OmarV Ver Mensaje
De hecho lo que se pretende hacer con este post es que la gente se valla familiarizando con el css3 no aprenderlo todo completamente.
valla = vaya. A ver, para que te vayas familiarizando un poco con el idioma.

Saludos.


Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:48.