css

Porcentaje de carga mediante CSS

ByLuis January 21, 2008

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

y estos estilos:

#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS

PHP

Añadir estilos y scripts a la administración de plugins en WordPress

ByLuis September 2, 2010

Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:

add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');

function incluir_css() {
  echo '';
}

function incluir_script() {
  echo '';
}

Así de sencillo.

css | XHTML

Paso a paso de un diseño web

ByLuis May 25, 2007

La gente de SitePoint han publicado un gran artÃculo en el que explican cÃ³mo hacer un diseÃ±o (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artÃculo cÃ³mo podÃa pasar de su forma de diseÃ±ar por tablas a diseÃ±ar sin tablas. Creo que con este artÃculo podrÃ¡ aprender la transiciÃ³n de forma muy sencilla y rÃ¡pida.
Empieza explicÃ¡ndonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseÃ±o. Dibujar los contenidos (cabecera, panel, contenido, pie de pÃ¡gina) y cÃ³mo crear la estructura de capas y sus estilos.
DespuÃ©s nos indica como aÃ±adir fondos y contenidos a las distintas partes de nuestra pÃ¡gina, como por ejemplo las imÃ¡genes con float. No solo se centra en lo estrictamente desarrollo, sino tambiÃ©n un poco en diseÃ±o. AÃ±ade imÃ¡genes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por Ãºltimo nos indica como dividir el contenido en rejillas para darle un aspecto mÃ¡s uniforme.
Breaking Out of the Box

css | PHP | XHTML

CAPTCHA DHTML y CSS con PHP

ByLuis March 12, 2008

Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.

La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas.
DHTML and CSS CAPTCHA

css

CSS Frame Generator: obtener la estructura CSS

ByLuis April 8, 2008

Buena herramienta que nos devuelve la estructura CSS básica que deberíamos usar para darle estilos a un HTML. Aunque no todos los estilos van a sernos necesarios, si es útil para obtener la estructura inicial y así poder trabajar con algo inicialmente.

Indicando un HTML obtendremos un CSS (vacío) como el siguiente:

#root {  }
#content {  }
#top {  }
#logo {  }
#logo a {  }
#top p.version {  }
#top div.balloon {  }
#top div.balloon h2 {  }
#top div.balloon p {  }
#top div.balloon p strong {  }
#top div.balloon p em {  }
#more.box {  }
#more.box h2 {  }
#more.box p {  }
#more.box ol.properties {  }

CSS Frame Generator

Vía / CSS Globe

Javascript

$fx(): librería javascript para animaciones

ByLuis January 16, 2009

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

Desarrollo web

Recursos para un sitio compatible con navegadores

ByLuis October 23, 2007

Uno de los mayores problemas con los que nos encontramos cuando estamos desarrollando una aplicaciÃ³n web es la compatibilidad con los diferentes navegadores, bueno, realmente la compatibilidad de estos navegadores con los estÃ¡ndares.

Para ayudarnos en esta lucha, nada mejor que esta serie de recursos:

Cross Browser CSS For Your Site: una guÃa para realizar CSS compatible con los diferentes navegadores, grandes consejos con ejemplos, no teorÃa.
Starting With CSS: Revisited: cada navegador tiene estilos por defecto para las etiquetas HTML, siendo estos algo diferentes entre ellos. Elimina el margin y el padding para empezar con todos los navegadores del mismo modo.
Two CSS Hacks For Identical Pages: dos consejos que podemos usar y un aviso de cÃ³mo empezar a escribir tu cÃ³digo.
CSS Hacks & Issues: una serie de consejos y trucos para librarse de los quirks de Internet Explorer.
Box Model Hack: hack para dibujar correctamente el modelo de caja en IE 5 y 5.5.
Eric Meyer On CSS: consejos para usar trucos con los navegadores y ocultar estilos.
/* Position Is Everything */: necesario para aquellos que quieran desarrollar su layout.
glish.com : CSS layout techniques: ejemplos de layouts de 3 columnas, 2 columnas y modelos fluidos.
100 Percent Cross Browser, Pure CSS Layouts: otro lugar donde encontrar layouts CSS.
Rendering Mode and Doctype Switching: esta pÃ¡gina te enseÃ±a que DOCTYPE usar para usar el “standards mode”.
Activating the Right Layout Mode Using the Doctype Declaration: tabla con una relaciÃ³n de los navegadores y el tratamiento que le dan al doctype.
In Search of the Holy Grail: creaciÃ³n de layouts.
Litmus Labs: CSSVista: aplicaciÃ³n que permite modificar tus CSS en Firefox y en IE.
Browser Shots: herramienta online que te devuelve pantallazos de una pÃ¡gina vista en diferentes navegadores.
IE NetRenderer: lo mismo pero para diferentes versiones de IE.

Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible

VÃa / dzone

Similar Posts