Regresar a la página www.ComoCrearTuWeb.com
Página 1 de 3 123 ÚltimoÚltimo
Resultados 1 al 15 de 38

Tema: Tutorial CSS3 - By olukarak (Actualizado el: 19/09/10)

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20

    Tutorial CSS3 - By olukarak (Actualizado el: 02/09/2011)

    Tutorial sobre algunas opciones de CSS3.

    Redondear esquinas sin usar imagenes.
    Código:
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    Bien explico:
    La primera linea es para redondearlo en Firefox.
    La segunda es para redondear en Opera.
    La tercera redondea en Safari y Chrome.
    Va en direccion de las agujas del reloj: superior izquierdo, superior derecho, inferior derecho, inferior izquierdo.

    Internet Explorer tendra esta funcion apartir de la V9 (ya funciona en la beta).

    NOTAS: Estos codigos deben ir entre los {} de los estilos css del div en el que redondearemos las esquinas.
    Los div no tienen por que tener definidos bordes para ser redondeados.

    Cambiar la opacidad <-- NUEVO!
    Esto lo que hace es cambiar la opacidad de un elemento haciendolo mas o menos transparente.
    El nivel de opacidad esta comprendido entre 0 y 1; siendo asi 0 el 0%, el 0.5 el 50% y el 1 el 100%.

    Por ejemplo, para cambiar a la opacidad del 100% (valor por defecto) al 25% deberiamos poner en sus estilos lo siguiente:
    Código:
    opacity: 0.25;
    Este codigo no funciona en los navegadores IE7 y anteriores pero eso lo podemos corregir poniendole un filtro para IE quedando el codigo de la siguiente forma:
    Código:
    opacity: 0.25;
    filter: alpha(opacity=25);
    Poner sombra y relieve interno a textos
    Internet Explorer no soportara este codigo en su version 9 (seguramente tampoco en las proximas ).

    SOMBRA
    Código:
    text-shadow: 3px 3px 4px #000000;
    Este codigo sombrea los textos.
    Con esto le indicamos 3px de sombra a la derecha, 3px de sombra a la izquierda, 4px de desenfoque y color negro.

    RELIEVE INTERNO
    Código:
    text-shadow: 0px 1px 0 #FFFFFF;
    Ahora lo que hace es un relieve interno.
    Le damos 0px de sombra por la derecha, 1px de sombra por abajo y 0px de desenfoque.
    El color es blanco, teniendo en cuenta que el texto sea negro, para que se note el cambio. Podeis modificarlo.

    NOTA: Acepta, en los dos casos, colores rgb y rgba (explicado despues).

    Sombrear divs
    Internet Explorer tendra esta funcion apartir de la V9 (ya funciona en la beta).

    Código:
    box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
    Primera linea para Opera, segunda para Safari y Chrome y la tercera para Firefox.
    Definimos primero 3px para derecha, despues 3px para abajo, 4px de difusion y el color lo escribo en rgba (explicado en el siguiente punto), aunque tambien acepta rgb, hexadecimal... entre otros.

    Colores RGBA (Red Green Blue Alpha)
    Asta ahora CSS nos dejaba usar solo RGB. Teniendo en cuenta que: rgb(0, 0, 0) era negro y rgb(250, 250, 250) era blanco.
    Ahora agregaron el valor A = Alpha (Transparencia).

    Un RGBA tiene la siguiente forma:
    Código:
    rgba(0, 0, 0, 0.3);
    Los primeros tres numeros indican rojo, verde y azul. El cuarto numero es el de la transparencia (teniendo en cuenta que 1 es 100% opaco y 0 100% transparente).
    Definiendo un 0.3 le damos un 30% de su opacidad al color negro (definido en formato RGB).

    Definir varios fondos a la vez
    Internet Explorer, de momento, no acepta esto en su version 9 BETA.

    Oooh siiiiiiiii! por fiiiiiiiin! el de tiempo que llevaba esperando esto :D
    Ahora con CSS3 podemos definir varios fondos para un div, una tabla, un body... lo que te venga en gana ;D
    Se puede hacer de una manera muy simple:
    Código:
    background: url(fondo1) center no-repeat,
    url(fondo2) bottom left repeat-x,
    url(fondo3) top right repeat-y;
    Pueden agregar todos los background que les de la gana.

    EJEMPLO
    Guarden el siguiente codigo como un archivo html y abranlo desde algun navegador que no sea Internet Explorer, lo cual no es raro...
    Código:
    <html>
    <head>
    <style type="text/css">
    .multifondo {
    width: 400px;
    height: 400px;
    background: url(http://blog.the-evangelist.info/osx/...refox_logo.png) bottom right no-repeat,
    url(http://www.clementepuerta.es/imagene...me-4%20150.gif) bottom left no-repeat,
    url(http://www.readwriteweb.es/blog-cont...Logo-Opera.jpg) top left no-repeat,
    url(http://es.wilogo.com/blog/wp-content...ogo_safari.png) top right no-repeat,
    url(http://www.codigogeek.com/wp-content...do-150x150.png) center no-repeat;
    }
    </style>
    </head>
    <body>
    <div class="multifondo"></div>
    </body>
    </html>
    Encajar palabras largas en un box
    Saben que, como pasa en CCTW, cuando escribes algun codigo o algo dentro de una caja con ancho limitado una palabra muy larga, esta se adapta a su tamano o, simplemente, se sale de la caja.

    Microsoft creo el codigo hace tiempo para IE (si ya se que parece absurdo), aun cuando no era oficial. El codigo lo que hacia era que si una palabra es muy larga, cuando llegaba al final del box se hacia un enter automaticamente. Como era algo util lo han incluido en el CSS3 como oficial (esto parece un sueno).
    Con esto puedo decir que este codigo FUNCIONA EN TODOS LOS NAVEGADORES (todos quiere decir todos, incluyendo IE).

    Simplemente en el box donde quereis aplicar esta regla escriban:
    Código:
    word-wrap: break-word;
    Para quitar esa norma simplemente sustituyan break-word por normal (son los dos valores posibles).

    Ahora cualquier font ES COMPATIBLE!
    Apartir de la V9 de IE (ya disponible en la BETA) IE no necesita un codigo especial ni una fuente .eot, cualquiera sirve (como en los demas).

    Otra cosa util... O dios mio!!! Es compatible con IE desde la V4 Aunque se complica un poco (na mas que un poquitin he) la cosa para IE, podemos usarlo perfectamente.

    Asta ahora solo podiamos usar en la web unos pocos formatos de texto, que seguro (o casi) eran compatibles en TODOS los navegadores. Estos formatos eran muy feos y muchas veces, simplemente, teniamos que usar flash o imagenes. Ahora con CSS3 podemos usar cualquier formato a la perfeccion, sin preocuparnos de si el otro lo tiene o no lo tiene

    Esto se hace definiendo el @font-face:
    Código:
    @font-face {
    font-family: 'Nombre de font';
    /* Para IE (NO ES NECESARIO APARTIR DE LA V9 BETA) */ src: url('fuentes/fuente.eot');
    /* Para los demas */ src: local('Nombre de font'), url('fuentes/fuente.ttf u .otf') format('truetype u opentype');
    }
    En este caso, SIEMPRE, ANTES TIENE QUE IR DEFINIDO PARA IE.
    Si os fijais IE solo acepta un formato .eot (apartir de la V9 BETA acepta todos los font), mientras que los demas aceptan .ttf (truetype) y .otf (opentype).
    El codigo local('Nombre de font') comprueba si la fuente ya esta instalada, si no, la carga del server. Es obligatorio que este.
    No creo que haga falta explicar nada mas... aparte de como convertir a .eot.

    IMPORTANTE: Las fonts siempre deben ir alojadas en algun servidor desde donde puedan usarse directamente (no valen cosas como MU, RS, etc).

    Convertir a .eot
    Si es una fuente OpenType (.otf), primero debes convertirla a TrueType (.ttf). Puedes usar: http://fontforge.sourceforge.net
    Despues, de .ttf la puedes pasar a .eot con esto: http://code.google.com/p/ttf2eot

    *************************************************
    Espero que useis todas las nuevas funciones que trae CSS3, ya que no son nada del otro mundo... Vamos, que son faciles. :)
    Última edición por olukarak; 02/09/2011 a las 06:34
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  2. #2
    Moderador CCTW Habitante
    Fecha de Ingreso
    12 ago, 07
    Ubicación
    Galicia (España)
    Mensajes
    3,421
    Poder de Reputación
    33
    Lo pongo como tema fijo ;)

    Buen trabajo :)

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Actualize el tema poniendo dos tutos mas que seran de gran utilidad, seguro.

    Definir varios fondos a la vez.
    Encajar palabras largas en un box.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    23 ene, 08
    Ubicación
    En algun lugar de un gran pais
    Mensajes
    220
    Poder de Reputación
    16
    que bueno tuto.. Gracias!

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Por fin alguien que no solo lee, tambien agradece... jaja
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18
    Bueno amigo después de leer el tuto solo digo....
    Esta genial, será de ayuda para futuros trabajos pero deberías quitar lo de redondear div ya que si lo analizamos si no funciona en todos los exploradores cual es el chiste solo termina causando conflictos y la web no se vera = en todos los navegadores.
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    En la version IE 9 prometen esa compatibilidad.
    Otra cosa, es culpa de Microsoft que IE sea una m... debemos hacer las webs segun los estandares, sin fijarnos si se vera mejor o peor en IE. Ahora bien, la web debe ser accesible desde IE tambien... Si el grupo de Microsoft ve que IE esta dejando de usarse por compatibilidad lo haran como dios manda
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  8. #8
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Actualize! Agregue el tuto:

    Ahora cualquier font ES COMPATIBLE!

    Este es una funcion que sera de muchisima utilidad, estoy convencido :D
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18
    jo nada mal esta nueva función de verdad es la mas útil, ahora google podrá leer mis menú sin problemas ya que los remplazare las imágenes por letras nada mal jeje xD

    Y sobre lo de las curvas, la verdad es que si no lo lee en todos los exploradores de = manera causara mal aspecto a un grupo de usuarios, y seria un gran problema adaptar con otro estilo para ie ya que se debería no solo cambiar los estilos si no asta el diseño del Index.
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  10. #10
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Aun asi no quitare nada del post. Va sobre CSS3 y el CSS3 se queda. Ademas, como dije en la proxima version de IE deben incluirlo.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  11. #11
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Me baje el IE 9 BETA... Debo decir que:
    1) Es una mierda.
    2) Es compatible con el redondeado y sombreado de bordes.
    3) El text-shadow no estara disponible para IE.
    4) Acepta fonts del tipo .ttf y .otf.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  12. #12
    Esto empieza a ser un vicio... Habitante Avatar de gjulian
    Fecha de Ingreso
    29 ene, 09
    Ubicación
    Sevilla
    Mensajes
    558
    Poder de Reputación
    15
    Te agradeceria que explicaces mejor como poner el word-wrap: break-word; en el textarea ,ya que yo lo he entroducido y no me da resultado
    Código:
    <textarea name="texto" cols="30" rows="10" word-wrap=" break-word" wrap="VIRTUAL" style="text-align:center"></textarea>
    .
    Lo de los multibackground, BUENA COSA.
    Se agradece el post.
    Saludos
    Lo mejor de caerse al tropezar, es volverse a levantar.

  13. #13
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Cita Iniciado por gjulian
    Te agradeceria que explicaces mejor como poner el word-wrap: break-word; en el textarea ,ya que yo lo he entroducido y no me da resultado
    Código:
    <textarea name="texto" cols="30" rows="10" word-wrap=" break-word" wrap="VIRTUAL" style="text-align:center"></textarea>
    .
    Lo de los multibackground, BUENA COSA.
    Se agradece el post.
    Saludos
    Perdona la tardanza. No pude entrar a CCTW por un tiempo :( Bueno la cosa esque ese es un CSS. Lo tienes que poner en los estilos. Tambien sirve con divs.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

  14. #14
    Me va gustando esto... Habitante
    Fecha de Ingreso
    31 oct, 10
    Mensajes
    143
    Poder de Reputación
    11
    Vaya vaya, no estoy nada puesto en css3, pero leyendo un tuto tan bueno, parece que se invita a investigar, jeje.

    Buen tuto olukarak.
    Saludos.

    PD: IE a la hoguera.... , que pena que todavía hay gente que lo utiliza... si no, otro gallo cantaría...
    www.webtocrator.com - Aprende diseño y programación web.
    Foro de Webtocrator.
    Webtocrator en Facebook.

  15. #15
    Esto empieza a ser un vicio... Habitante Avatar de olukarak
    Fecha de Ingreso
    28 jul, 10
    Ubicación
    Marte
    Mensajes
    1,868
    Poder de Reputación
    20
    Cita Iniciado por LotUvIroS
    PD: IE a la hoguera.... , que pena que todavía hay gente que lo utiliza... si no, otro gallo cantaría...
    Esque "El Puertas" se cree que porque haya creado una mierda sistema que la mayoria nos vemos obligados a usar porque les paga a empresas que no saquen cosas pa linux y que la mayoria de programadores solo se interesen en crear cosas pa windows..... Si no tambien cantaria otro gallo con el SO. Bueno pues por creerse eso se cree que el puede cambiar los estandares tan buenos que hay a algo mal hecho, como siempre de su parte, pa que todos lo usen.
    Tutorial de CSS3: http://www.comocreartuweb.com/consul...el-19-09-10%29

    Se borrarán los mensajes cuyo título no explique la duda: http://www.comocreartuweb.com/consul...titulo-la-duda!!

    Cómo preguntar en CCTW: http://www.comocreartuweb.com/consul...guntar-en-CCTW

Temas Similares

  1. Respuestas: 48
    Último Mensaje: 23/08/2011, 15:27
  2. olukarak con spam todo se puede ^_^
    Por codomodragon en el foro Off-Topic
    Respuestas: 16
    Último Mensaje: 30/12/2010, 22:06

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •