Contenido

Las Meninas en 3D gracias a CSS

15 dic

+ 4

Román Cortes nos vuelve a mostrar el potencial de CSS, primero fué un Homer Simpson mediante CSS Art y ahora nos muestras Las Meninas de Velázquez como nunca las habíamos visto, en 3D con un efecto similar al ofrecidor por Parallax pero sin Javascript

meninas_css
(Ver Imagen)

Via / Demo

Emile, el framework JS para animaciones CSS de 55 líneas

1 dic

+ 1

Emile es una de esas maravillas que con tan solo 55 líneas nos permite disponer de efectos CSS con Javascript en nuestras aplicaciones.

<!-- Cargamos la librería -->
script src="emile.js"></script>

<!-- Definimos los elementos -->
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

<!-- definimos los efectos -->
<script>
// Aplicamos el efecto al elemento #test2
  emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
      // Aplicamos el efecto al elemento #test1
      emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
        duration: 4000, easing: bounce
      });
    }
  });
  // Función que cambia la posición del elemento
  function bounce(pos) {
    if (pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
</script>

El proyecto lo podeis descargar desde github.com y ver el ejemplo de uso que nos incluye.

CssDispatcher, maneja tus CSS como un profesional

11 oct

+ 5

Isra, nos muestra una librería en PHP que ha desarrollado para ayudarnos a trabajar con CSS de una forma muy cómoda y profesional.

$styles = new CssDispatcher; 

$styles->add(new Css('ie-hacks.css.php'));
$styles->add(new Css('general.css.php')); 

$styles->render();

CssDispatcher, se encarga de procesar los ficheros .css permitiendo así que podamos incluir código PHP en nuestras hojas de estilos, además de unir y comprimir todas las hojas de estilo que necesitemos en nuestro proyecto.

$styles = new CssDispatcher; 

// Este CSS solo se enviará cuando sea Internet Explorer 6
$styles->add(new Css('ie-hacks.css.php', Css::UA_IE6));
$styles->add(new Css('general.css.php')); 

$styles->render();

Además, nos permite condicionar nuestro CSS dependiendo del navegador que nos visita. De esta forma, podemos cargar un fichero, o no, dependiendo si el navegador que nos visita es el especificado previamente.

CSScaffold, framework CSS en PHP

9 oct

+ 6

CSScaffold es un framework CSS con el que podemos extender las posibilidades de nuestros CSS desde PHP. Básicamente se trata de un script PHP que recoge los ficheros .CSS a tratar y mediante una nomenclatura (que veremos más adelante) nos genera unos ficheros CSS que cualquier navegador podrá interpretar.

scaffold-diagram
(Ver Imagen)

// Ejemplo de uso:
<link href="/scaffold/index.php?request=/css/master.css" />

Continua —>

Crea un lightbox únicamente con CSS

8 sep

+ 5

Carsonified publica un artículo explicativo de como conseguir un efecto lightbox usando únicamente CSS. Basado en una implementación de CSSPlay, desarrolla esta versión compatible con los principales navegadores actuales. [Demo]

3 técnicas de hacer crop con CSS

8 sep

+ 1

Alen Grakalic publica en CSSGlobe un artículo sobre 3 formas de hacer crop con CSS. Un interesante artículo que muestra las capacidades del lenguaje y de los diferentes caminos de los que disponemos para conseguir lo mismo.

¿Que es crop?

Llamamos crop al recorte selectivo de una imagen. Este recorte no afecta ni al ancho ni al alto de la imagen, y únicamente se encargar de mostrar nuestra selección al usuario.

800px-Image_cropping_aspect_ratios
(Ver Imagen)

Como vemos en la imagen, sacada de la Wikipedia, esta técnica la usamos cada día al ver la televisión, ya que para no perder el ratio de la imagen y así no deformar los objetos que visualizamos se realiza un crop adaptando la imagen sin perder la relación de aspecto de la imagen.

Técnica 1: Márgenes negativo

Esta primera técnica, basada en el uso de márgenes negativos simula el efecto crop sobre la imagen, haciendo que la imagen se oculte sobre una capa superior.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 border:1px solid #ccc;
 }

 /* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
 margin:-20px -15px -40px -55px;
 }

Ver una demo.

Técnica 2: Position absolute

Similar a la anterior, aunque en este caso usamos la propiedad position, para hacer que el elemento flote detrás del elemento padre y así se oculte, mostrando la porción de la imagen que deseemos mostrar.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 position:relative; /* IMPORTANTE */
 border:1px solid #ccc;
 width:150px;
 height:90px;
 }
 /* Ocultamos parte de la imagen */
.crop img{
 position:absolute;
 top:-20px;
 left:-55px;
 }

Ver una demo.

Técnica 3: Usando la propiedad clip

La propiedad clip, fue concebida para este tipo de acciones. Se trata de hacer que elemento padre tenga un agujero de tamaño especificado sobre la imagen, mostrando así la parte de la imagen que deseemos mostrar.

// HTML
<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

// CSS
.crop{
 float:left;
 position:relative;
 width:150px;
 height:90px;
 border:1px solid #ccc;
 margin:.5em 10px .5em 0;
 }
.crop p{
 margin:0;
 position:absolute;
 top:-20px;
 left:-55px;
 clip:rect(20px 205px 110px 55px); /* Agujero rectángulo de medida específica */
 }

Ver una demo.

Conclusión

Tres técnicas que permite realizar la misma funcionalidad y que ofrecen la posibilidad de implementar fácilmente en cualquier aplicación web. ¿Tu por cual te decantas?

38 menús desplegables con jQuery y CSS

8 sep

+ 0

Impresionante listado de 38 menús desplegables desarrollados usando jQuery y CSS. ¿Necesitas alguno?

Minimiza y ordena tus CSS

7 sep

+ 5

Barry van Oudtshoorn, ha desarrollado un compactador de CSS que además nos permite ordenar alfabéticamente los atributos de nuestros CSS.

Para ello, ha seguido las especificaciones que Google propone en Minimize Payload Size haciendo que nuestro CSS sea más pequeño y, por consecuente, tarde menos en llegar al usuario final.

¿Que es lo que hace?

Usando un fichero CSS de base se le aplican una serie de transformaciones para obtener un fichero CSS nuevo complemente compactado.

  • Se eliminan todos los comentarios
  • Ordena todos las propiedades de cada selector alfabéticamente
  • Ordena todos los valores de cada propiedad alfabéticamente
  • Elimina todo espacio innecesario.

Comparación con YUI Compressor

css-compress
(Ver Imagen)

La compactación está a la altura de la ofrecida por YUI Compressor, aunque únicamente la supera (y por muy poco) en los casos con CSS gzipped.

YUIComparison
(Ver Imagen)
Via

Versión PHP

Aprovechando las vacaciones y que esto me irá bien para un proyecto que estoy desarrollando, me portado la función a PHP para poder usarla sin usar Java.

<?php
class StyleSheetCompressor {
 private $cssFile;
 private $selectors = array();

 function __construct($cssContent = '', $cleanComments = true){
 $this->cssFile = $cssContent;

 // Borramos comentarios
 if ($cleanComments)
 $this->cssFile = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $this->cssFile);

 $selectors = array();
 // Obtenemos todos los selectores
 $partes = explode("}", $this->cssFile);

 foreach($partes as $parte) {
 if (!empty($parte))
 array_push($this->selectors, new SelectorCSS($parte."}"));
 }
 }

 function get($cleanSpaces = true){
 $salida = '';
 foreach($this->selectors as $selector) {
 $salida .= $selector->get($cleanSpaces)."\n";
 }
 // Borramos saltos de linea, espacios,...
 if ($cleanSpaces)
 $salida = str_replace(array("\t", "\n", "\r"), '', $salida);

 return $salida;
 }
}

/*
 SelectorCSS
*/
class SelectorCSS{
 private $properties = array();
 private $selector;

 function __construct($selector = ''){
 $parts = explode("{", $selector);
 if (count($parts) < 2) {
 die("Selector " + selector +" incompleto");
 }
 $this->selector = trim($parts[0]);
 $contents = trim($parts[1]);
 if (strlen($contents) == 0) {
 die("Selector " + selector + "vacio");
 }

 if (substr($contents,strlen($contents) -1 ,1) != '}'){
 die("Selector "+selector+" no estáerrado");
 }

 $contents = substr($contents, 0, $contents - 2);

 $this->properties = explode(';', $contents);
 }

 function get(){
 $str = $this->selector.'{';
 natcasesort($this->properties);
 foreach($this->properties as $property) {
 if (!empty($property))
 $str .= $property.";";
 }
 $str .= '}';
 return $str;
 }

}

Para usar es muy sencillo, simplemente debemos indicar el contenido del fichero .css que deseemos compactar y ordenar sus propiedades. Al recibir el contenido del fichero podemos enviar uno o varios fichero concatenando el contenido de los mismos.

// Contenido del fichero styles.css
 $fileName = file_get_contents('styles.css');

 // Creamos un objeto al que le pasamos el contenido por parámetro
 $styleSheet = new StyleSheetCompressor($fileName);
 /* Parámetros:
    1: (String) Contenido del fichero
    2: (Bool) Limpiar comentarios (defecto: true)
 */
 // Obtenemos el contenido CSS
 echo $styleSheet->get(false);
 /*    Parámetros:
     1: (Bool) Eliminar saltos de línea (defecto: true)
 */

El objeto dispone de un método get() que devolverá el contenido compactado y ordenado, este contenido podemos cachearlo en un fichero estático o mostrarlo directamente.

Creando un querySelector() para IE tan rápido como el nativo

29 ago

+ 2

Via Ajaxian descubro una solución para disponer de una versión rápida (casi como la nativa )  de querySelector() en Internet Explorer 4+. Muy similar a la propuesta por Dean Edwards en 2006.

/*@cc_on
 if (!document.querySelector)
 document.querySelector = function(selector) { 

 // Añadimos un nuevo tag <style />
 var head = document.documentElement.firstChild;
 var styleTag = document.createElement("STYLE");
 head.appendChild(styleTag); 

 // Creamos un array global
 document.__qsResult = []; 

 // Añadimos los elementos seleccionados mediante un SECE
 document.__qsResult.styleTag.styleSheet.cssText = selector + "{qs: expression(this.__qs?0:(function(t){document.__qsResult.push(t);t.__qs=0;})(this));}";

 // Recargamos la página. Sin esto el SECE no se ejecutará.
 window.scrollBy(0, 0); 

 // Limpiamos el nuevo elemento y devolvemos los resultados.
 head.removeChild(styleTag);
 return document.__qsResult;
 }
@*/

La mágia del script, que nos permite implementar una versión del Selectors API,  reside en los SECE (Single Execution CSS Expressions), pero ¿que son?

Single Execution CSS Expressions (SECEs)

En Internet Explorer (4.0+) tenemos una implementación que únicamente podremos usar en este navegador que nos permite ejecutar expression() en nuestros CSS.

 .post-body img { // Ejemplo Max-width para IE
   max-width:400px;
   width: expression(this.width > 400 ? 400: true);
 }

Ya lo llevamos usando mucho tiempo y lo hemos visto en varios ejemplos a lo largo de los últimos años.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Incluso nos permite cambiar (solo en IE) el color del fondo de un elemento cada hora par (8,10,…)

Pero unas mentes inquietas llegaron a sacarle más partido a esta curiosa implementación, haciendo que la capa de estética interactue directamente con la capa de funcionalidad.

<script>
function setOnetimeBgcolor(elem) {
  elem.style.backgroundColor = <some calculation>;
}
</script>
<style>
P {
  background-color: expression(setOnetimeBgcolor(this));
}
</style>

Esto me hace pensar en algo asi :D

<style>
/* Enviamos a la versión IE */
html {
 background-color: expression(location.href = 'index_ie_version.html';);
}
</style>

Aunque hará que nuestro CSS no valide según los estándares de la W3C.

Problemas

El propio John Resig contesta al artículo de Ajaxian y expone los problemas que podríamos encontrarnos con este sistema.

  • Las expresiones CSS de IE son conocidas por su excesiva sobrecarga
  • No hay una forma clara de abordar la gestión de errores. ¿Que sucede si se usa un selector no soportado?

Mejora la estética de tus Checkboxes con jQuery

27 ago

+ 8

Me encuentro un completo tutorial con el que podremos reemplazar el aspecto de los elementos <input type="checkbox" /> por otro mucho más atractivo.

prettychecks
(Ver Imagen)

Básicamente se trata de un HTML adaptado a la nueva estética, CSS que le dá ese elegante aspecto y unas líneas de jQuery (aunque puede ser cualquier framework, o ninguno de ellos).

HTML

<form>
	<fieldset>
		<label for="choices">
			<ul>
				<li>
					<input name="jqdemo" value="value1" type="checkbox" />
					<p>Here is the first selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" />
					<p>Here is the second selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" />
					<p>Here is the third selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo"value="value4" type="checkbox" />
					<p>Here is the fourth selection</p>
					<a href="#">Select</a>
					<a href="#">Cancel</a>
				</li>
			</ul>
		</label>
		<div style="clear: both;"></div>
		<button type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

Javascript

// jQuery
$(document).ready(function() {
 $(".checklist .checkbox-select").click(
  function(event) {
   event.preventDefault();
   $(this).parent().addClass("selected");
   $(this).parent().find(":checkbox").attr("checked","checked");
  }
 );

 $(".checklist .checkbox-deselect").click(
  function(event) {
   event.preventDefault();
   $(this).parent().removeClass("selected");
   $(this).parent().find(":checkbox").removeAttr("checked");
  }
 );
});

// MooTools
// No lo he podido probar
window.addEvent('domready', function() { 

 $$(".checklist .checkbox-select").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().addClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.attr("checked","checked");
   });
  }
 );

 $$(".checklist .checkbox-deselect").addEvent('click', function(event){
   event.preventDefault();
   this.getParent().removeClass("selected");
   this.getParent().getElements(":checkbox").each(function(el){
    el.removeAttr("checked");
   });
 });
});

El CSS y los Sprites los teneis en esta página. Si quereis verlo funcionando podeis verlo directamente desde aquí.