ZonaW » Recursos de CSS

Generador de código CSS 3

ZonaW — Fri, 20 Apr 2012 06:50:45 +0000

No es sencillo encontrar un generador de código CSS3 tan completo como lo es css3maker.

Con esta herramienta podremos generar código CSS3 simplemente modificando los parámetros de los diferentes componentes con los que podemos trabajar, entre los que se encuentran: bordes redondeados, degradados, trasformaciones, animaciones y transiciones CSS, selector de colores RGBA, sombra en: texto y cajas y rotación y seleción de tipografía @Font Face.

Como es puede ver el la imagen, a medida que seleccionemos un componente para trabajar, en la parte inferior se nos informará de la compatibilidad entre los diferentes navegadores y navegadores móviles.

Por último, en la parte derecha aparecerá el código listo para copiar en nuestra hoja de estilos CSS o descargar en un fichero .zip para posteriores usos.

Sin duda una página imprescindible en tu lista de herramientas CSS3.

Selectores de CSS3

ZonaW — Fri, 30 Mar 2012 11:24:35 +0000

La API de Selectors describen la forma de seleccionar elementos dentro de la página, con el fin de aplicar un determinado estilo. La API está compuesta con los selectores de las versiones 1 y 2 de CSS, ahora con la llegada de la nueva versión de CSS3 se suman aún más selectores a la lista.

En el libro de “Estudio sobre Internet Explorer 9 y los nuevos estandares web”, ya adelantaban cuales serían algunos de los selectores de los que ahora podemos hacer uso, estos se pueden clasificar en tres categorías:

1.- Pseudo-clases estructurales

Estos selectores permiten seleccionar además de las clases e ID, elementos basandonós en su posición dentro del documento:

:root: selecciona la raíz del documento.
:nth-child(n): selecciona elementos que son el n-ésimo hijo de sus padres.
:nth-last-child(n): selecciona elementos que son el n-ésimo hijo de sus padres, empezando a contar por el final.
:nth-of-type(n): selecciona elementos que son el n-ésimo hermano de un tipo.
:nth-last-of-type(n): igual que el anterior, pero contando desde el final.
:last-child: selecciona elementos que son el último hijo de sus padres.
:first-of-type: selecciona elementos que son el último hermano de su tipo.
:last-of-type: selecciona elementos que son el último hermano de su tipo.
:only-of-type: selecciona elementos que son el único hermano de su tipo.
:only-child: selecciona elementos que son el único hijo de sus padres.
:empty: selecciona elementos que no tienen hijos, incluidos nodos de texto.

Gracias a los selectores se hace posible un código HTML más sencillo y unas hojas de estilo CSS más completas. Este es un ejemplo de su uso:




Primera fila
Segunda fila
Tercera fila
Cuarta fila

2.- Pseudo-clases de estado del elemento

Estas clases permiten seleccionar elementos de la interfaz gráfica dependiendo del estado:

:enabled: selecciona elementos que están activados.
disabled: selecciona elementos que están desactivados.
:checked: selecciona elementos que están marcados.
:indetermined: selecciona elementos cuyo estado no está determinado.

3.- Otros

Los siguientes son selectores que no pertenecen a ninguna de las anteriores categorías:

:target: selecciona un elemento que se corresponde con un enlace con nombre (named archor) dentro de la página.
:not(s): selecciona los elementos que no cumplen un selector simple pasado como parámetro.
:selection: selecciona cualquier parte de la página que haya sido resaltada por el usuario.

Códigos cortos de colores

ZonaW — Wed, 29 Feb 2012 09:56:56 +0000

Aunque pueda parecer ridículo, en ocasiones ahorrar un par de caracteres en una misma palabra dentro de nuestro código, puede resultar muy beneficioso para nuestro site. Es por esto por lo que es interesante conocer pequeños trucos para ahorrar tiempo de carga en nuestra página y de paso, también ahorrar algo de ancho de banda en nuestro servidor.

Un truco que muchos diseñadores ya conoceran es el de los códigos de colores. No es más que una lista de 16 colores, los cuales no son necesarios ser escritos en hexadecimal, ya que los navegadores permiten que esten escritos en texto plano.

Estos son los 16 colores:

white: #fff
yellow: #ff0
red: #ff0
fuchsia: #f0f
silver: #c0c0c0
gray: #808080
olive: #808000
purple: #800080
maroon: #800000
aqua: #f00
lime: #0f0
teal: #008080
green: #008000
blue: #00f
navy: #000080
black: #000

Esto no es todo, ya que todavía se pueden acortar más, si nos fijamos en estos 9 colores, escritos en forma de texto aún son más cortos que su versión en hexadecimal, por lo que, se podrían utilizar de forma óptima escritos por su nombre:

red
silver
gray
olive
purple
maroon
teal
green
navy

Utilizando estos códigos y comprimiendo nuestras hojas de estilo CSS podemos reducir la carga de nuestra página y ahorrarnos unos cuantos MB/mensuales de ancho de banda. Recordar también el artículos de ayuda consejos para mejorar el tiempo de carga de una web.

Cambiar el cursor del ratón

ZonaW — Thu, 19 Jan 2012 11:31:58 +0000

Aunque parezca que es una práctica que ya no se lleva a cabo, cambiar el cursor o puntero del ratón puede servirnos en más de una ocasión para mejorar la accesibilidad en nuestra página, así como señalar por ejemplo, cuando existe un enlace con el puntero de la mano, cunado se muestre algún mensaje de ayuda con el puntero de una interrogación o simplemente punteros con flechas de todo tipo.

Para conseguir adaptar el puntero o cursor del ratón a cada situación nos bastará con añadir un estilo en nuestra hoja de CSS para forzar a nuestro navegador y que de este modo no se rija por las normas convencionales de los punteros, sino con lo indicado en la hoja de estilos.

Hay dos posibilidades de cambiar el cursor en nuestra web, para todo el documento o para partes del documento determinadas.

Cambiar el cursor del ratón a todo el do cumento:


Cambiar el cursor del raton

Cambiar el cursor del ratón a algunas partes dentro de un documento:


Cambiar el cursor del raton



pointer (mano)
move (cruz con flecha)
help (signo de pregunta)
default (flecha)
crosshair (cruz)
text (I-beam)
wait (reloj de arena)
nw-resize (flecha al noroeste)
ne-resize (flecha al noreste)
se-resize (flecha hacia el sudeste)
ne-resize (flecha hacia el sudoeste)
n-resize (flecha hacia arriba)
s-resize (flecha hacia abajo)
e-resize (flecha a la derecha)
w-resize (flecha a la izquierda)

Recordar que también se puede personalizar el puntero del ratón mediante, una imagen o gif animado.

Evitar caché mientras editas CSS

ZonaW — Mon, 09 Jan 2012 10:57:38 +0000

El siguiente truco, le será de gran utilidad a diseñadores o maquetadores, que una gran cantidad del tiempo después de realizar los cambios solicitados tienen que refrescar la página y vaciar la memoria caché para ver correctamente los cambios de diseño efectuados.

Con el siguiente truco se consigue prevenir la cache de los archivos CSS de nuestra web en php. Basta con añadir un parámetro al archivo CSS, como en el ejemplo, donde se añade fecha y hora con minutos y segundos para conseguir siempre un valor diferente.

” rel=”stylesheet” />

Alertas estilo de notificaciones Toast de Android

ZonaW — Thu, 29 Dec 2011 09:29:13 +0000

Si eres usuario del sistema operativo de teléfonos móviles Android te habrás encontrado en más de una ocasión, cuando una operación es realizada con éxito con las notificaciones emergentes llamadas Toast. Un ejemplo de esto es el sistema de avisos que recibimos al activar una alarma, que nos notifica cuántas horas de sueño podremos tener antes de que suene.

A continuación aprenderemos a realizar un sistema de alertas tipo Toast utilizando HTML y CSS.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

#toast{
position: fixed;
top: 20px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;

/*The good stuff */
-webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
-moz-transition: opacity 0.5s ease-out; /* FF4+ */
-ms-transition: opacity 0.5s ease-out; /* IE10? */
-o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
transition: opacity 0.5s ease-out;

}

[browser css keyword]: [property to animate] [duration] [easing method]

Para finalizar, cambia el valor de la propiedad a la que has añadido un transform, y el navegador se encargará del resto. Por eso, para que el mensaje emergente se desvanezca, habrá que configurar la opacidad en 0.

Finalmente, un poco de Javascript:

function hideToast(){
    var alert = document.getElementById("toast");
    alert.style.opacity = 0;

}

Lo bueno del concepto, es que este tipo de notificaciones simplifican el proceso de la configuración de opciones. Normalmente, en otros entornos virtuales, simplemente se nos informa de que el cambio ha sido realizado y luego debemos volver manualmente a la pantalla principal de opciones.

En cambio, con estas alertas emergentes, recibes la confirmación a través de un sólo mensaje que a su vez, nos envía de regreso a la pantalla anterior.

Las transiciones CSS nos permiten alterar una propiedad de CSS durante un determinado periodo de tiempo.

Puedes ver un ejemplo de este tipo de alertas con estilo de notificaciones Toast de Android en Toast Demo.

Animaciones con CSS

ZonaW — Tue, 29 Nov 2011 10:33:49 +0000

Animate.css es posiblemente lo que muchos diseñadores estaban buscando. Una web donde se agrupan diferentes efectos en CSS3 disponibles para descargar.

A pesar de que por ahora sólo son compatibles con las versiones de navegadores más avanzadas de: Safari, Firefox o Chrome, para Internet Explorer estas animaciones estarán disponibles en su versión 10 y los usuarios de Opera podrán disfrutar de ellas a partir de la versión 12 de su navegador.

Para evitar el problema de incompatibilidades en los navegadores que no soportan aún animaciones CSS, podremos utilizar Animate.css conjuntamente con jQuery y Modernizr. De esta forma conseguiremos que todos nuestros usuarios puedan ver correctamente nuestra web.

Para implementar las animaciones en nuestro site, seleccionamos la que queremos utilizar, descargamos el fichero .CSS (nos permiten descargar todas, seleccionar por tipo o descargar sólo una de ellas) y añadimos la/las clases específicas directamente en nuestra hoja de estilos CSS.

Trucos CSS (Parte 4)

ZonaW — Sun, 06 Nov 2011 23:59:35 +0000

Asignar transparencia – opacidad en todos los navegadores

El siguiente código asigna transparencia u opacidad a elementos del diseño con la gran ventaja de funcionar en todos los navegadores:

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Con el siguiente código conseguiremos añadir un estilo especial para diferentes enlaces externos de nuestra web. Una de las ideas más extendidas es la de añadir un icono al lado de los enlaces para marcar que ese enlace nos sacará de la página actual (demostración)

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Estilo del enlace dependiendo de una palabra predefinida

Similar al código anterior, nos permite decorar los enlaces dependiendo del texto que contenga la URL con un determinado color y diseño (demostración)

a[href*="zonaw"] {
color: #08E303;
}

Tabs animados solo utilizando CSS

El siguiente código nos permite construir un menú animado con una sección de tabs o pestañas, sin necesidad de recurrir a utilizar jQuery en nuestra página (demostración)

Código para pegar donde deseas que aparezcan las pestañas:



 
 
 Recursos

 
 Contenido para el tab Recursos
 
 

 
 
 Para

 
 Contenido para Para

 
 
 

 
 
 Webmasters

 
 Contenido para Webmasters

Código para pegar en nuestra hoja de estilo CSS:

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Trucos CSS (Parte 3)

ZonaW — Thu, 03 Nov 2011 09:10:31 +0000

Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Un truco muy común entre diseñadores es el de utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, para facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Eliminar la linea de color que rodea los elementos input

Los navegadores WebKit (Safari, Chrome) tienen por defecto que los elementos input de un formulario cambien de color en el borde cuando se situa el ratón sobre el elemento. Para evitar esto copia y pega el siguiente código CSS:

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Animar una lista de enlaces

Hay ocasiones en las que no es posible utilizar jQuery en nuesto proyecto, limitando mucho los “efectos” de nuestra página. Con el siguiente código, conseguirás que al pasar el cursor por encima de cada enlace de una lista, cada uno de ellos se mueve un poco a la derecha: (demostración)

#listaanimada li a {
 cursor: pointer;
 -webkit-transition: padding-left 280ms ease-out;
 -moz-transition: padding-left 280ms ease-out;
}

#listaanimada li a:hover {
 padding-left: 20px;
}

Hacks CSS dependiendo del navegador

Para hacer que los estilos se vena correctamente en todos los navegadores, existen algunos hacks para hacer código CSS dependiendo de cada navegador:

/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }

Estilo del enlace dependiendo de extensión del archivo enlazado

Con el siguiente código puedes poner diferentes estilos cuando enlazas los archivos a los que previamente le apliques los estilos: .jpg, .pdf, .zip, etc. (demostración)

a[href$=".jpg"] {
 color: red;
}
a[href$=".pdf"] {
 color: grey;
}
a[href$=".zip"] {
 color: green;
}

Trucos CSS (Parte 2)

ZonaW — Fri, 28 Oct 2011 07:04:26 +0000

Letra capital

Como en los libros antiguos, con el siguiente código puedes hacer que la primera letra de un párrafo sea más grande que las demás (demostración)

p:letra-capital{
display:block;
margin:5px 0 0 5px;
float:left;
color:#4F96D2;
font-size:65px;
font-family:Georgia;
}

Cambiar el color de la selección de texto

Con este código conseguirás cambiar el color de la selección de texto, por defecto el texto se convierte en color blanco y el fondo en color azul, muy útil para conseguir darle un diseño más adapatado a nuestra web. (demostración)

/* webkit, opera, IE9 */
::selection { background:#3483C8; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#3483C8; color #fff; }

Enlaces que gradualmente se desvanecen

Copia y pega el siguiente código CSS para conseguir el efecto al poner el ratón sobre el enlace h1 se desvanezca. (demostración)

h1 {
    font-size:25px;
    font-weight:bold;
    color: #262626;
    opacity: 1.0;
    -webkit-transition: opacity 0.5s linear;
}
h1 a {
    color: #262626;
}
h1:hover {
    opacity: 0.8;
}

Mover 1px el enlace al hacer clic

Con el siguiente código CSS, conseguirás que al hacer click sobre el enlace, el texto dentro de el se mueva hacia abajo 1px: (demostración)

a:active {
     position: relative;
     top: 1px;
}

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, iPads, Android, pantallas grandes):

/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}