CSS Tooltip Generator

http://kushagragour.in/lab/hint/

http://csstooltip.com/

http://www.cssportal.com/css-tooltip-generator/

Converts CSS to Stylus.

css2stylus

Repository	https://github.com/dciccale/css2stylus.js.git (git)
Homepage	http://css2stylus.com

Install the module

$ npm install -g css2stylus

Convert any css file:

$ css2stylus myfile.css

Video de referencia 

Styling checkboxes and radio buttons using CSS

http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/#download

Pure CSS collapsible tree menu

http://www.thecssninja.com/css/css-tree-menu

Selectores de CSS 3

La futura versión CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas de selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicación detallada se puede encontrar en el módulo de selectores de CSS 3.

En primer lugar, CSS 3 añade tres nuevos selectores de atributos:

• elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
• elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
• elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
• De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:

  /* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */
  a[href^="mailto:"] { ... }
   
  /* Selecciona todos los enlaces que apuntan a una página HTML */
  a[href$=".html"] { ... }
   
  /* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" */
  h1[title*="capítulo"] { ... }

  Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", que generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y selecciona el elemento2 que es hermano de elemento1 y se encuentra detrás en el código HTML. En el selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de otro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.
  Si se considera el siguiente ejemplo:

  h1 + h2 { ... }  /* selector adyacente */
  h1 ~ h2 { ... }  /* selector general de hermanos */
   
  <h1>...</h1>
  <h2>...</h2>
  <p>...</p>
  <div>
    <h2>...</h2>
  </div>
  <h2>...</h2>

  El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya que es el único que cumple que es hermano de <h1> y se encuentra justo detrás en el código HTML. Por su parte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la página salvo el segundo. Aunque el segundo <h2> se encuentra detrás de <h1> en el código HTML, no son elementos hermanos porque no tienen el mismo elemento padre.
  Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan :: en vez de : delante del nombre de cada pseudo-elemento:
  • ::first-line, selecciona la primera línea del texto de un elemento.
  • ::first-letter, selecciona la primera letra del texto de un elemento.
  • ::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
  • ::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
  CSS 3 añade además un nuevo pseudo-elemento:
  • ::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
  Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
  • elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
  • elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
  • elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
  • elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
  • elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
  • elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
  Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:

  li:nth-child(2n+1) { ... }   /* selecciona todos los elementos impares de una lista */
  li:nth-child(2n)   { ... }   /* selecciona todos los elementos pares de una lista */
   
  /* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */
  p:nth-child(4n+1) { ... }
  p:nth-child(4n+2) { ... }
  p:nth-child(4n+3) { ... }
  p:nth-child(4n+4) { ... }

  Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la posición de las imágenes en función de la posición de la imagen anterior:

  img:nth-of-type(2n+1) { float: right; }
  img:nth-of-type(2n)   { float: left;  }

  Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector:

  :not(p) { ... }  /* selecciona todos los elementos de la página que no sean párrafos */
  :not(#especial) { ... }  /* selecciona cualquier elemento cuyo atributo id no sea "especial" */

  Aunque todavía faltan muchos años hasta que la versión CSS 3 sustituya a la actual versión CSS 2.1, los navegadores que más se preocupan por los estándares (Opera, Safari y Firefox) incluyen soporte para varios o casi todos los selectores de CSS 3.
  
  Referencia :http://librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html

Recursos CSS3

Recursos CSS3

CSS avanzado

http://zoomzum.com/css3-tools-presentation-frameworks-and-cheat-sheets/


http://robertnyman.com/css3/



Safari CSS Visual Effects Guide

http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html#//apple_ref/doc/uid/TP40008032-CH01-SW1

Todas las propiedades estándar de Css (nivel 1, 2 y 3)

Todas las propiedades estándar de Css (nivel 1, 2 y 3), selectores y valores, reglas @ y @Medias - See more at: http://ksesocss.blogspot.com/2012/05/todas-las-propiedades-estandar-de-css.html#sthash.WHT8SxZa.dpuf

http://ksesocss.blogspot.com/2012/05/todas-las-propiedades-estandar-de-css.html

Todas y cada una de las propiedades estándar (status: "recomendación" por el W3c) de los 3 niveles de Css: Css1, Css2.1 y Css3. A continuación todos los selectores, incluidos los del documento "Selectors level 4", las reglas de reglas @Rule, las propiedades @Media queries y los distintos tipos de valores y unidades utilizadas en ellos.
Con enlaces al documento oficial, o traducción reconocida como tal (sidar.org).
Quedan para una ampliación del artículo las parejas "propiedad: 'palabra clave'" o "propiedad: 'cadena texto'". - See more at: http://ksesocss.blogspot.com/2012/05/todas-las-propiedades-estandar-de-css.html#sthash.WHT8SxZa.dpuf

CSS3 RGB & RGBA

A guide to using css3 ‘RGB’ & ‘RGBA’, giving us not only the ability to set RGB color/colour but also apply a level of opacity.

CSS 3 RGB

The HSL declaration sets color/colour using Red (R), Green (G) and Blue (B).

Cross Brower Compatability
RGBA is currently better supported in FireFox, Google Chrome and Safari, also not requiring any prefix.
All articles in the CSS3 will be updated to show future support & development.

CSS3 RGB

The above RGB example uses the following CSS 3

0. CSS 3 RGB
1. div.L1 { background:rgb(60, 80, 100); height:20px; }
2. div.L2 { background:rgb(60, 100, 100); height:20px; }
3. div.L3 { background:rgb(60, 120, 100); height:20px; }
4. <br />
5. div.L4 { background:rgb(25, 50, 100); height:20px; }
6. div.L5 { background:rgb(25, 50, 150); height:20px; }
7. div.L6 { background:rgb(25, 50, 200); height:20px; }

An example for those on alternative browsers not seeing the different levels of opacity…

CSS 3 RGBA

Alpha allows us the ability to set a level of opacity. An element with opacity/alpha value of 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color or object is against its background.

The above RGBA example is set in another layer containing a background texture and each layer uses the following CSS 3

0. CSS 3 RGBA
1. div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
2. div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
3. div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
4. div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
5. div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }

An example for those on alternative browsers not seeing the different levels of opacity…

The Zen Elements CSS3 Series

• CSS3: Introduction
• CSS3: Border Image
• CSS3: Border Color
• CSS3: Border Radius
• CSS3: Box Shadow
• CSS3: Font Face
• CSS3: Gradients
• CSS3: HSL & HSLA
• CSS3: Multiple Column
• CSS3: Multiple Images
• CSS3: Opacity
• CSS3: RGB & RGBA
• CSS3: Text Shadow
• CSS3: Transform
• CSS3: Transition

CSS3 AVANZADO

EL Futuro de CSS3

Video 1: http://expertoencss3.com/tutorial/video-1?setuser=1199
Video 2: http://expertoencss3.com/tutorial/video2-css3
Video 3: http://expertoencss3.com/tutorial/vid3-css3

Hoy es el turno del CUARTO VIDEO.
En este nuevo video se muestran cosas literalmente INCREIBLES que se
pueden realizar con esta nueva tecnología CSS3.
Desde Iconos Perfectos, hasta Galería de Imágenes Animadas.

Míralo tú mismo y sorpréndete, en el siguiente enlace:

http://expertoencss3.com/tutorial/video4-experto-css3



http://graphicpeel.com/cssiosicons