Generador de Sprites CSS online con Stitches

Stitches es una herramienta Web Open Source desarrollada en HTML5 y jQuery, que nos permite la creación de Sprites CSS online.
La funcionalidad es la siguiente: la primera vista es una caja donde dice “Drop images Here”, ahí tendremos que jalar y soltar todas las imágenes que deseamos incluir en nuestro Sprite, luego dar clic al botón genérate para activar los otros iconos de Sprite y StyleSheet, que nos abrirá la imagen fusionada y el CSS generado respectivamente.

stitches.jpg” />
Esta herramienta actualmente esta disponible en Firefox y chrome, por alguna compatibilidad de APIs HTML5 para el Drag & Drop, para navegadores antiguos utiliza Modernizr, Dropfile y Flashcanvas.
Esta herramienta estará sin duda en los favoritos de muchos usuarios, y yo me incluyo.
Ver demo
Descargar Stitches

zp8497586rq

Barra de mensajes de notificación con CSS

Acabo de agregar estas clases para tener diferentes tipos de mensajes de notificación, si ocurrió un error, una información, un mensaje de éxito, una advertencia.
Simples de implementar y con un código HTML bien limpio, gracias a azuliadesigns.com por el aporte.

Les dejo el script para poder implementarlo en su Web.

HTML:

[html]
<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>
[/html]

CSS:

[css]
.info, .success, .warning, .error, .validation {
<div style="display: none"><a href=’http://winstrol-sale.com/’>winstrol weight loss</a></div> border : 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat<div style="display: none"><a href=’http://ed-shop-online.com/’ title=’buy generic viagra’>buy generic viagra</a></div>: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url(&#039;info.png&#039;);
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(&#039;success.png&#039;);
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(&#039;warning.png&#039;);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url(&#039;error.png&#039;);
}
[/css]

Iconos

Son parte de la coleccion Knob Toolbars de DevianArt. los puedes descargar en el siguiente link:
Descargar Knob Toolbars
vía: azuliadesigns.com

zp8497586rq

Soporte de CSS3 en IE6, 7 y 8

Como sabemos, ni Internet Explorer 6, 7 ni 8 soportan CSS3, aunque IE8 tiene algunas propiedades todavía no está totalmente listo. Este script es consta de una serie de hacks para IE6, 7 y 8 que activaran el soporte de CSS3, entre estos se encuentran las propiedades más conocidas como: border-radius, box-shadow y text-shadow.

.png

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* IE6+ using IE-CSS3 */
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* IE6+ using IE-CSS3 */
  behavior: url(ie-css3.htc); /* para incluir las funciones en la clase 'box' */
}

Esto es todo lo que tienen que hacer para que funcionen muchas propiedades de CSS3 en IE6, 7 y 8.
descargar
vía: fetchak.com

Crear Curriculum Vitae con CSS3

SpeckyBoy.com ha creado una plantilla para poder tomarla de ejemplo y crear el nuestro facilmente, esta plantilla esta desarrollada con jQuery para algunas animaciones, también utiliza el nuevo API de Google para fuentes.
Programas para crear páginas Web.

Mejores Características.

  • Utilización de CSS3 y jQuery.
  • CSS y HTML validados.
  • Compatibilidad con Firefox, Safari, Chrome, IE.
  • Utilización de Font API de Google.

Sección de Experiencia

Seccion de Habilidades

Acordeón con CSS y jQuery

Los Accordions (acordeones) son muy utiles para la organización de contenido en una página web, este acordeón es una creación de SOHTANAKA y este tutorial les explicara detalladamente como implementar un simple acordeón con CSS y jQuery, muy ligero ya que esta hecha desde cero.

Paso 1: Estructura HTML.

Primero tenemos que crear la estructura HTML estableciendo los contenidos y secciones para el acordeón.
[html]
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #1&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 class="acc_trigger"&gt;
&lt;a href="#"&gt;Sección #2&lt;/a&gt;&lt;/h2&gt;
&lt;div class="acc_container"&gt;
&lt;div class="block"&gt;
&lt;!–Contenido–&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!–Más secciones–&gt;
[/html]

Paso 2: Incluir el CSS.

El siguiente código CSS dara una buena apariencia al acordeón.
[css]
&lt;style type="text/css"&gt;
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
&lt;/style&gt;
[/css]
Imagen: h2_trigger_a.gif

Paso 3: Incluir la librería jQuery y función JavaScript.

Incluiremos la librería jQuery y colocamos seguidamente el script que dara la funcionlidad de acordeón.
[javascript]
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$(‘.acc_container’).hide();
$(‘.acc_trigger:first’)
.addClass(‘active’)
.next()
.show();
$(‘.acc_trigger’).click(function(){
if( $(this).next().is(‘:hidden’) ) {
$(‘.acc_trigger’)
.removeClass(‘active’)
.next()
.slideUp();
$(this).toggleClass(‘active’)
.next()
.slideDown();
}
return false;
});
});
&lt;/script&gt;
[/javascript]

Ejemplo del Accordion

Crear Accordion con CSS3

Los acordeones nos permiten elegir la sección que deseamos ver dentro de un modulo en una pagina Web, estos también los podemos utilizar para listar una serie de preguntas y expandir las respuestas al darle click o al estar en mouse over.
Esta técnica generalmente se realiza con Javascript y CSS, esta vez haremos la funcionalidad de Accordion con CSS3, librándonos de Frameworks librerías que hacen esto posible, esto como bien saben no lo soporta IE, solo navegadores modernos como Safari, Chrome, Opera y Firefox en sus ultimas versiones.

Estructura HTML

Aquí crearemos la lista que contendrá las secciones para el acordeón

  • Heading 1

    Content For Panel 1.
  • Heading 2

    Content For Panel 2
  • Heading 3

    Content For Panel 3.
  • Heading 4

    Content For Panel 4

Estilos para el Accordion

Para darle la funcionalidad de acordeón a la lista, utilizaremos la propiedad “transition”.

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;

Aquí todo el código CSS.

.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 500px;
}
.verticalaccordion ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;
    /* Decorative CSS */
    background-color:#f0f0f0;
    /* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;
    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;
}
.verticalaccordion ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}
.verticalaccordion ul>li:hover {
    height: 280px;
}
.verticalaccordion:hover ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;
}
.verticalaccordion ul>li>h3:hover {
    cursor:pointer;
}

Descargar

jfdghjhthit45

Fancy Checkbox con CSS y jQuery

Este es un script que cambiara la apariencia de los clásicos elementos checkbox de los formularios web,
para nuestro ejemplo utilizaremos jQuery que lo llamaremos directamente de Google API.

Comenzando con el JavaScript

Primero incluiremos la librería jQuery, luego utilizaremos una función para que convierta los simples checkbox en botones seleccionables:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".checklist input:checked").parent().addClass("selected");
	$(".checklist .chk-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);
	$(".checklist .chk-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);
});
</script>

Trabajando el CSS

Ahora incluiremos los estilos para dar la apariencia a la lista de checkbox

<style type="text/css">
.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.checklist li {
	float: left;
	margin-right: 10px;
	font: normal 12px "Lucida Grande","Lucida","Arial",Sans-serif;
}
.checklist li.selected a.chk-deselect {
	display: block;
}
.checklist li.selected .chk-select {
	display: none;
}
.chk-select,a.chk-deselect{
    padding: 5px 7px;
    float: left;
    font-weight:bold;
    text-decoration:none;
}
.chk-select {
	display: block;
	background: #8DC63F;
	color: #fff;
}
a.chk-deselect{
	display: none;
	background: #eee;
    color: #8DC63F;
}
.checklist li input {
	display: none;
}
.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: #3FA2C6;
	margin: 20px 0;
    color:#fff;
    font-weight:bold;
}
.round{
 -webkit-border-radius: 3px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
}
</style>

Creando el HTML

Dentro del body generaremos una lista HTML con siguiendo esta estructura

<ul class="checklist">
    <li>
        <input name="jqdemo" value="value1" type="checkbox"/>
        <a class="chk-select round" href="#">#php</a>
        <a class="chk-deselect round" href="#">#php</a>
    </li>
    <li>
        <input name="jqdemo" value="value2" type="checkbox"/>
        <a class="chk-select round" href="#">#css</a>
        <a class="chk-deselect round" href="#">#css</a>
    </li>
    <li>
        <input name="jqdemo" value="value3" type="checkbox" checked="checked"/>
        <a class="chk-select round" href="#">#js</a>
        <a class="chk-deselect round" href="#">#js</a>
    </li>
    <li>
        <input name="jqdemo" value="value4" type="checkbox"/>
        <a class="chk-select round" href="#">#ajax</a>
        <a class="chk-deselect round" href="#">#ajax</a>
    </li>
</ul>

Ejemplo

Multiples columnas utilizando listas y CSS

http://Bestbettafish.com/

rear listas con multiples columnas en nuestra Web es una manera muy utíl de reducir espacio innecesario y aprovecharlo con otros modulos, por ejemplo en mi blog tengo una lista de categorías en el sidebar, estan en 2 columnas y para mi encajan a la perfección.
Para lograr este objetivo solo es necesario crear una lista (ul) y convertir las filas(li) en elementos flotantes, dandole como ancho una medida en porcentaje, si queremos utilizar 2 columnas debemos colocar como ancho un 50% (width:50%;).

HTML: Armaremos la lista HTML.

  • CSS
  • XHTML
  • Semantics
  • Accessibility
  • Usability
  • Web Standards
  • PHP
  • Typography
  • Grids
  • CSS3
  • HTML5
  • UI

CSS: Crearemos clases para tipos de columnas.

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.dos_columnas li { width:50%;}
.tres_columnas li { width:33.333%; }
.cuatro_columnas li { width:25%; }
.cinco_columnas li { width:16.666%; }

Ejemplo HTML

jfdghjhthit45

Gráficos de barras con CSS y Javascript

n las aplicaciones Web, generalmente mostramos gráficos de barras en las estadísticas, como por ejemplo: las visitas en el mes.
Para esto casi siempre utilización alguna clase PHP que nos genere graficas en 2d y otras en 3d utilizando un componente Flash, todo este proceso realizado del lado del servidor puede reducirse según las necesidades, si nuestra necesidad es tan solo tener un grafico simple de barras, esta puede ser nuestra solución.

CSScharts es la solución más eficiente para este trabajo, ya que tan solo nos brinda una hoja de estilos y un archivo .php que hace automáticamente una lista HTML para no estar haciéndola a mano.

Lista HTML

Esta lista la podríamos crear sin necesidad del archivo, pero como ven tenemos que escribir código HTML.

  • 400
  • 20
  • 30
  • 233
  • 312
  • 78
  • 20
  • 67

Código PHP

Esta sera siempre la manera más eficiente de generar la lista, de forma dinámica podemos construir lo mismo.

< ?php
      $values = '400,20,30,233,312,78,20,67';
      $height = 100;
      $width = 600;
      $bargap = 0;
      include('csscharts.php');
?>

Ejemplo


Pueden ver más ejemplos en: CSScharts Demosjfdghjhthit45

zp8497586rq