Marzo 4th, 2013

Operaciones matemáticas con css

Es es sueño de un programador cuando trabaja haciendo maquetación css. Poder hacer calculos en nuestro archivo css como si de php se tratara.
Y lo mejor, es que se puede hacer y nos permite trabajar en distintas medidas (px, em, %) y funciona incluso con IE 9.

Se usa de forma sencilla, con cualquier propiedad css que admita medida, del tipo que sean (tamaño, tiempo..) y aunque actualmente es mejor usarla con el prefijo del navegador -webkit, -moz, etc está bastante bien adoptado por los navegadores de escritorio, aunque siempre hay navegadors moviles que dificultan.

Se utiliza de la siguiente forma:

/* De forma estándar */
width: calc(#valores#);
/* con prefijo para navegadores */
width: -webkit-calc(#valores#);
width: -moz-calc(#valores#);

Podremos aplicar cálculos como el siguiente:

width: calc(100% - 30px);

Y realizar las cuatro operaciones matemáticas básicas:

width: calc(50px * 2);
width: calc(50px / 2);
width: calc(50px + 2px);
width: calc(50px - 2px);

Con esta nueva función, evitamos utilizar javascript en muchos casos donde sólo tratamos de maquetar nuestra web.

Más información | W3C Calc

Noviembre 9th, 2012

Selectores en jquery

Seleccionar todos los tags/elementos:

Todos los elementos ("*")

Seleccionar todos los elementos que estan en proceso de animación:
Extensiones jQuery

:animated Selector

Selecciona los elementos que tienen el atributo especificado con un valor ya sea igual a una cadena determinada o que comience con esa cadena seguida de un guión (-):

Atributo contiene prefijo seleccionado [name|="value"]

Seleccionar elementos que contengan el valor específico, aunque sea parte de una subcadena:

Atributo contiene palabra seleccionada [name*="value"]

Selecciona los elementos que tienen el atributo especificado con un valor que contenga una determinada palabra, delimitado por espacios:

Atributo contiene palabra seleccionada [name~="value"]

Seleccionar los elementos que finalicen con la palabra especificada:

Atributo finaliza con selector [name$="value"]

Selecciona los elementos que tienen el atributo especificado con un valor exactamente igual a un cierto valor:

Atributo igual a selector [name="valor"]

Seleccionar elementos que o bien no tienen el atributo especificado, o tienen el atributo especificado, pero no con un determinado valor:
Atributo, extensiones jQuery

Atributo no [nombre!="Valor"] Igual Selector

Selecciona los elementos que tienen el atributo especificado con un valor comenzando exactamente con una cadena dada:

Atributo comienza con selector de [nombre^="valor"]

Selecciona todos los elementos del botón y elementos de tipo botón:
Forma desuso, Extensiones jQuery

:button Selector

Selecciona todos los elementos de tipo checkbox:
Forma desuso, Extensiones jQuery

:checkbox Selector

Coincide con todos los elementos que están marcados:

:checked Selector

Selecciona todos los elementos secundarios directos especificados por “niño” de los elementos especificados por el “padre”:

Niño Selector ("padre > hijo")

Selecciona todos los elementos con la clase dada:

Selector de Clase (".clase")

Seleccione todos los elementos que contienen el texto especificado:

:contains() Selector

Selecciona todos los elementos que son descendientes de un ancestro determinado:

Descendiente Selector ("descendientes ancestro")

Selecciona todos los elementos que son discapacitados:

:disabled Selector

Selecciona todos los elementos con el nombre de etiqueta dado:

Elemento Selector ("elemento")

Seleccione todos los elementos que no tienen hijos (incluidos los nodos de texto):

:empty Selector

Selecciona todos los elementos que están habilitados:

:enabled Selector

Seleccione el elemento en el índice n en el juego completo:

:eq() Selector

Selecciona los elementos, incluso cero indexados. Ver también impar:
Extensiones Básicas filtro, jQuery

:even Selector

Selecciona todos los elementos del tipo de archivo:
Extensiones Básicas filtro, jQuery

:file Selector

Selecciona todos los elementos que forman el primer hijo de su padre:

:first-child Selector

Selecciona el primer elemento coincidente:
Extensiones Básicas filtro, jQuery

:first Selector

Selecciona el elemento si está actualmente enfocada:

:focus Selector

Seleccionar todos los elementos en un índice mayor que el índice en el juego completo:
Extensiones Básicas filtro, jQuery

:gt() Selector

Selecciona los elementos que tienen el atributo especificado, con cualquier valor:

Tiene un atributo con el texto [nombre], ej: input[type]

Selecciona los elementos que contienen al menos un elemento que coincida con el selector especificado:
Filtro de contenido, extensiones jQuery

:has() Selector

Selecciona todos los elementos que son cabeceras, como h1, h2, h3 y así sucesivamente:
Extensiones Básicas filtro, jQuery

:header Selector

Selecciona todos los elementos que están ocultos:
Extensiones jQuery, Visibilidad Filtro

:hidden Selector

Selecciona un solo elemento con el atributo id indicado:

Selector de ID ("#id")

Selecciona todos los elementos de imagen tipo:
Forma desuso, Extensiones jQuery

:image Selector

Selecciona todo input, textarea, select y elementos del botón:
Forma desuso, Extensiones jQuery

:input Selector

Selecciona todos los elementos que son el último hijo de su padre:

:last-child Selector

Selecciona el último elemento coincidente:
Extensiones Básicas filtro, jQuery

:last Selector

Seleccionar todos los elementos en un índice menor que el índice en el juego completo:
Extensiones Básicas filtro, jQuery

:lt() Selector

Seleccionar elementos que coincidan con todos los filtros de atributos:

Selector multiple de atributos [name="valor"][name2="valor2"]

Selecciona los resultados combinados de todos los selectores específicos:

Selector múltiple ("selector1, selector2, selectorN")

Selecciona todos los elementos siguientes que coinciden con “next” que son inmediatamente precedido por un hermano “prev”:

Selector adyacente siguiente ("prev + next")

Selecciona todos los elementos del mismo nivel que siguen después de la “prev” elemento, tienen el mismo padre, y que coincida con el filtro “hermanos” selector:

Hermanos Siguiente Selector ("prev ~ hemanos")

Selecciona todos los elementos que no coinciden con el selector dado:

:not() Selector

Selecciona todos los elementos que constituyen el enésimo hijo de su padre:

:nth-child () Selector

Selecciona elementos extraños, cero indexados. Ver también incluso:
Extensiones Básicas filtro, jQuery

:odd Selector

Selecciona todos los elementos que son el único hijo de su padre:

:only-child Selector

Seleccionar todos los elementos que son los padres de otro elemento, incluidos los nodos de texto:
Filtro de contenido, extensiones jQuery

:parent Selector

Selecciona todos los elementos de tipo contraseña:
Forma desuso, Extensiones jQuery

:password Selector

Selecciona todos los elementos de la radio tipo:
Forma desuso, Extensiones jQuery

:radio Selector

Selecciona todos los elementos de reposición tipo:
Forma desuso, Extensiones jQuery

:reset Selector

Selecciona todos los elementos que están seleccionados:
Forma, Extensiones jQuery

:selected Selector

Selecciona todos los elementos de tipo a presentar:
Forma desuso, Extensiones jQuery

:submit Selector

Selecciona todos los elementos de tipo text:
Forma desuso, Extensiones jQuery

:text Selector

Selecciona todos los elementos que son visibles:
Extensiones jQuery, Visibilidad Filtro

:visible Selector

Diciembre 30th, 2009

Homer Simpson en Css

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(
-

Visto en Roman Cortes

Marzo 16th, 2009

Columnas con la misma altura

El problema que planteo es el siguiente: tu creas tu layout con tres columnas y luego quieres que tus columnas, aunque dos de ellas no tengan contenido, lleguen siempre hasta la altura de la que más contenido tenga. Normalmente obtienes algo así:

Comlumnas css

¡No se alargan las columnas como quieres!, es debido a que lo normal, es que las columnas se expandan según el contenido que tengan. Una opción rápida y chapuzas, sería poner un display:block a cada columna con el height deseado. Pero ¿Y si este es el layout general?, ¡entonces tendríamos que cambiarlo a todas nuestras páginas internas!, vamos una locura y algo muy feo..

¿La solución?

Asignar a las tres columnas, un padding bajo muy grande (32768px es el número máximo de pixeles posibles) y a su vez un margin negativo igual de grande. A su vez, deberemos crear un contenedor global que oculte lo que sobra.

#izquierda, #central, #derecha {
    padding-bottom: 32768px;
    margin-bottom: -32768px
}
#contenedor {overflow: hidden}

Desventajas

  • Requiere de un contenedor div extra
  • Si vas a usar anclas en la misma página ( <a name=”seccion”></a> ) y este ancla estiviera dentro de esta columna, el contenido que esté antes de ese ancla desaparecerá y permanecerá invisible.
  • Me da un poco de rabia no haberlo encontrado antes :)

Febrero 6th, 2009

Esquinas Redondeadas

Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas.

Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones:

    border-radius (estándar css)
    -moz-border-radius (cuando se trataba de mozilla,
         aunque desde la versión 3.0 ya lo hacemos
         con la instrucción anterior)
    -webkit-border-radius (safari y chrome)

El problema de hacerlo de este modo, es el de siempre, el maldito Internet Explorer, que ni en su versión 8 implementa estos estándares.
Una solución para tener las esquinas redondeadas en todos los navegadores, incluido Internet Explorer es usar JQuery Corners.
jQuery Corners es un plugin que nos permite realizar esquinas redondeadas de una manera bastante sencilla, sin imágenes o maquetación adicional y engorrosa en el código. Simplemente se define una clase y se aplica a un elemento HTML. Veamos como hacerlo:


- Primero descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas y :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>



- Luego define la clase la cuál creará las esquinas redondeadas de la siguiente forma:

<script type="text/javascript">
<!--
$(document).ready( function(){
$('.redondas').corners();
});
// -->
</script>



- Y por último simplemente aplica la clase a cualquier elemento HTML, como por ejemplo a un típico selector DIV:

<div class="redondas">
Contenedor con esquinas redondeadas.
</div>

Esta es la forma más básica de usar el script aunque posee varias opciones de configuración, como puede ser el radio de curvatura general o para cada una de las esquinas o también podemos aplicar el script a botones de un formulario. Todas estas las podemos consultar en el sitio oficial de jQuery Corners
Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Links | jQueryjQuery Corners

Octubre 17th, 2008

Cajas de Igoogle

Llevo bastante tiempo intentando lograr hacer el efecto de arrastrar y soltar de las cajas de igoogle, hay poquísima información en la red respecto a cómo se consigue crear este efecto, a pesar de que es algo muy interesante a nivel de diseño.

Cajas Igoogle

¿Como he conseguido lograr el efecto? La base de todo es la clase prototype que podeis descargar desde ese link. Prototype es un framework hecho en JavaScript que se sirve para ayudar a un desarrollo sencillo y dinámico de aplicaciones web (como cualquier framework) con el uso de técnicas Ajax.
Luego mediante CSS, y definiendo las capas en el init() de javascript (se encuentr todo en el fichero index.html) podremos adaptarlo como queramos.

Enlaces |DemoPrototype

Octubre 13th, 2008

Estructurar una web con css

Cuando maquetamos una web, lo primero siempre es tener una estructura definida bien sólida 2 columnas -3 filas, 4 filas- 2 columna,.. etc. Siempre he defendido el trabajo sin tablas, y si eres iniciado y crear estas filas y columnas te cuesta, puedes optar por descargártelas desde  este link. Los chicos de IronMyers se han molestado en crear una serie de plantillas con muchas combinaciones.

estructuras

Como verás, el código quedará más limpio y estructurado, con la consecuente perdida de peso en nuestro site que nos ayudará a que cargue más rápido.

Junio 4th, 2008

Errores Típicos al trabajar con CSS

Para hacer las cosas bien al trabajar con CSS tenemos un abanico de opciones tan grandes como nuestro dominio del lenguaje, pero para que las cosas salgan mal hay una cantidad enorme de errores que podemos cometer.

Aquí dejo 5 de los errores más comunes al manejar css, al que agrego otro propio de nuestro lenguaje.
No cerrar los corchetes.

Mientras definimos los atributos de cada elemento, nuestro código se llena de un mar de corchetes abriendo y cerrando, por lo que dejar uno abierto es sumamente fácil y causará que todo el código abajo de él no trabaje debidamente. Para evitar este error hay que ser muy ordenado con nuestro código y para encontrar este corchete abierto el firebug es una estupenda herramienta.

#conteneiner {
    width: 100%;margin:0 auto;
    /* Falta el corchete de cierre, todo
       el código siguiente no tendrá efecto */
}
#header {
    background-color: #fff;
    font-size: 0.8em;
}

Un problema similar al anterior se presenta al listar los atributos de cada clase o selector, cada atributo debe terminar con un punto y coma. No terminar un atributo con el punto representará automáticamente la anulación del siguiente atributo, creándonos un dolor de cabeza para buscar porque no se aplica un color, un tipo de letra, etc.

#header {
    background-color: #fff
    /* Falta el punto y coma que termina un atributo
     , el siguiente atributo no será leido */font-size: 0.8em; */
}

Escribir mal el nombre de un selector o clase.
Todos tenemos malas pasadas con el teclado y escribir código no es la excepción. Hay que tener cuido al escribir correctamente el nombre de la clase o selector porque de otro modo simplemente es como si no existiera.

#header {
    /* la cabecera regularmente se escribe "#header",
       no "#haeder", esto hace imposible su lectura  */
    background-color: #fff;font-size: 0.8em;
}

Escribir mal el nombre de un atributo.

Muy similar al anterior, pero cometiendo el error de escribir mal un atributo, que provocará que simplemente no se aplique.

#header {
    background-color: #fff;fotn-size: 0.8em;
    /* El atributo "fotn-size" no existe y no
       podrá ser leído, el correcto es font-size */
}

Confundir el valor de los atributos.
Cada atributo tiene una cantidad de opciones predefinidas que no deben ser confundidas. Esto lo da la experiencia y después de consultar la literatura debida. Dar mal el valor a un atributo hará que sea reconocido.

#header {
    background-color: #fff;
    font-size: 0.8em;
    vertical-align: center;
    /* La alineación vertical no permite "center"
     , en ella se usa el valor "middle" para alinear
       al centro verticalmente */
}

Acentos y caracteres del español en clases y selectores.

Como hablantes del español es muy tentador usar las palabras tal como las dicta el diccionario, pero para nuestra desgracia, los acentos y caracteres propios del español (como la ñ) son tomados como caracteres extraños en varios navegadores y por tanto, convertidos en sus equivalente, algo poco que resulta recomendable y que en muchos casos se traduce en que ni las clases, ni sus atributos sean aplicados.

#píe-de-página {
    /* Aunque nos gusten los acentos (¿si?)
     , su uso es muy poco recomendado */
     clear: both;font-size: 0.7em;
}

Estos son errores que seguramente la mayoría que ha trabajado con CSS ha cometido o cometerá alguna vez. La recomendación general es ser lo más organizado con el código, para que en verdad el código sea “poesía”.

Mayo 29th, 2008

Posicionamiento de imágenes por CSS (background)

background posicionamiento

Todo se resume en esto, los dos primeros parámetros numericos que pongas, uno será el desplazamiento horizontal y otro el vertical, no es una propiedad muy común y muchos no la conocen porque el dreamweaver no la desliza (son medidas y es lógico). Pero ayuda bastante a poner índices en nuestras <ul> o <dl> por ejemplo.

Abril 8th, 2008

Unos cuantos hacks css

Estoy totalmente en contra de los hacks css, siempre hay otro camino para conseguir el diseño que queramos (Por favor, no uses nunca tablas. ¡ese no es el camino!). Pero cuando no queda otro camino hay que usarlos, aquí dejo una lista de ellos.

_left barra delante de la propiedad
    ejemplo:( .menu{ left:40em;_left:30em;}).
    La barra solo actua en IE6.

.left punto delante de la propiedad
    ejemplo:( .menu{ left:40em;.left:30em;}).
    El punto actua tanto en IE6 e IE7.
.menu, x:-moz-any-link {left:40em}.
    Estilo solo para mozilla firefox 1.0 o superior.
@media screen and
    (-webkit-min-device-pixel-ratio:0)
        {.menu{ left:40em;.left:30em;}}.
            Solo para Safari y Opera

Intenta evitarlos, normalmente un hack lleva a otros problemas de proporciones. Pero si vez que no queda otro remedio…