Sentido Web » css

Hacer un botón de ‘Ver código fuente’

displaynone — Fri, 15 Oct 2010 08:15:34 +0000

Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.

Post original

Transparent Borders with background-clip

displaynone — Fri, 17 Sep 2010 18:04:31 +0000

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. You might think it would be as simple as this:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }Howe …

Post original

Adding Stroke to Web Text

displaynone — Sun, 12 Sep 2010 22:17:43 +0000

Fonts on the web are essentially vector based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that …

Post original

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

displaynone — Thu, 02 Sep 2010 08:02:14 +0000

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 '('wpurl').'/wp-content/plugins/miplugin/css/estilo.css" />';
}
 
function incluir_script() {
  echo '';
}

Así de sencillo.

Mastering the 960 Grid System

displaynone — Wed, 18 Aug 2010 23:03:21 +0000

We’re already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. If you’ve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you’ll be able …

Post original

Permitir que IE aplique estilos a las etiquetas HTML5

displaynone — Wed, 18 Aug 2010 14:57:41 +0000

El que los navegadores antiguos o IE no acepten etiquetas HTML5 no suele ser un problema a la hora de mostrarlas, el problema viene a la hora de aplicar estilos e IE que no le aplica los estilos, ya que IE ignora las etiquetas.

header { /* sus estilos */ }
section { /* sus estilos */ }
footer  { /* sus estilos */ }

Para ponerle solución, se puede crear un elemento dinamicamente antes de aplicar los estilos, y por arte de magia (o desesperación) tendrá los estilos al elemento.

html5shiv

Frame: Modular CSS Framework

displaynone — Mon, 16 Aug 2010 11:04:39 +0000

Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …

Post original

Peculiar: iconos realizados con CSS

displaynone — Wed, 11 Aug 2010 07:02:02 +0000

Peculiar es un paquete de iconos realizado sólo en CSS. Ha sido creado pensando en sitios y aplicaciones web que dependan de un número muy reducido de peticiones HTTP o que no necesiten o no puedan utilizar ninguna imagen. El paquete contiene 45 pict …

Post original

HTML5 Boilerplate

displaynone — Wed, 11 Aug 2010 06:44:23 +0000

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo … Post original

DLayer: script jQuery que nos ayuda a maquetar diseños

displaynone — Fri, 16 Jul 2010 21:12:44 +0000

Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.

La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.

Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.

Espero que os sea útil

jquery-dlayer