15 Generadores de CSS3 Online

Hoy les traigo una colección de generadores online de CSS3. Ideal para gente vaga o con poco sentido del diseño como yo jejeje ya que con un par de clicks pueden crear botones css3, degradados css3, bordes redondeados y un montón de cosas más. Los animo a probarlos!!
Read more

5 Shortcodes útiles y faciles de implementar para WordPress

Hoy les traigo 5 shortocodes de WordPress poco comunes y super útiles que van a dejarlos con la boca abierta!!
Más adelante les voy a explicar como englobar todas estas funciones o shortcodes dentro de un plugin para no llenar nuestro functions.php de shortcodes.

Los shortcodes que vamos a ver son : Mostrar un snapshot de una página web , Añadir un botón de donaciones de Paypal, Ofuscar direcciones de email, Generar contenido privado y Mostrar solo en los feeds de RSS.

Read more

Centrar menu con submenu de ancho variable con CSS

Si en el artículo anterior les explique una forma de centrar menus de ancho dinámico , ahora les explico como hacer lo mismo cuando el menu tiene un submenu o dropdowns. Para ellos tan solo hay que cambiar algunas reglas.

Read more

Centrar menu con ancho variable solo con CSS

Cuando tenemos un menu y no sabemos el width del mismo se complica un poco a la hora de centrarlo en nuestras webs. A veces no sabemos el width porque ni siquiera controlamos los elementos del menu , sino que estos son añadidos a gusto y piacere del usuario como en el caso de usar WordPress Nav menus.

Hay varias soluciones para este problema pero la que más me gusta a mí es la siguiente:

Read more

Optimizador online de CSS

Hoy encontre una herramienta muy útil y creo que merece la pena compartirla. Es un optimizador de CSS online que ademas de ordenar y comprimir optimiza nuestro CSS.
Por ejemplo si tenemos las siguientes reglas:

1
2
3
4
5
6
7
8
9

p {
    background:#000000;
    margin: 10px;
}
a { color:black;}
p {
   padding-left:10px;
   color:#444444;
}

Lo convierte en :

1
2
3
4
5
6
7
8
9
10

p {
background:#000;
padding-left:10px;
color:#444;
margin:10px
}
 
a {
color:#000
}

Interesante no? Pueden acceder al optimizador de CSS en http://floele.flyspray.org/csstidy//css_optimiser.php?lang=en

Saludos

Los mejores blogs de programación y diseño web

Hoy cuando me levante se me ocurrió hacer una lista con los mejores blogs  o webs sobre diseño web , programación , maquetación css, javascript  y frameworks, etc .  Como esto de “los mejores blogs” es muy amplio y según  el parecer de cada uno la lista va a ser totalmente diferente me parece mejor hacer directamente una lista abierta donde cada uno pueda agregar la web que le parezca. Así que si conoces alguna web interesante o querés presentar la tuya deja un comentario con el link .

Otra cosa que pensé es dividirlos en categorías pero como la mayoría  ocupan varias categorías es mejor que cada uno ponga al lado los principales temas  que se tratan y simplemente los dividimos en 2 grandes grupos. Páginas en Ingles y en Español

Español

Timersys <—- JQuery ,PHP , tutoriales , recursos y mucho más @Damian Logghe

Anieto2K <—- Desarollo web, wordpress, fotografía ,etc @Andres Nieto

CSSBlog Es <—- CSS 100% y monton de recursos @Pedro Corchero Murga

Foros del web <—- Impresionante comunidad con miles de miembros activos dispuestos a ayudarte @Forosdelweb

LibrosWeb <—- Manuales completamente gratis de programación y diseño web.

Todo Tutoriales Web <—- Recursos y trucos para foroactivo, diseño, etc @Carlos

Ingles

WoorkUp <—- Recursos , tutoriales y artículos muy buenos @Antonio Lupetti

Smashing Magazine <—- Excelente web con miles de recursos gráficos @Smashing Mag

Nettuts+ <—- Página super completa con tutoriales y ejemplos de todos @nettuts

Ahora por favor colaboren que entre todos podemos hacer una buena lista. Saludos!!

JcubeiT – Plugin JQuery para hacer cubos con HTML5

Buenas tardes!! Como ven sigo experimentando y haciendo plugins para JQuery.

Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS.

Su utilización es muy sencilla, tan solo necesitamos 3 objetos ( las caras visibles del cubo) dentro de un objeto contenedor. Dichos objetos pueden ser links , imágenes, otros divs, etc

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Una vez que tenemos nuestra estructura HTML armada debemos aplicar el plugin de la siguiente forma:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

Y voila!! Tendremos un cubo perfecto con el cual podremos hacer un poco más original nuestros diseños.

El plugin posee algunos valores por defecto que se pueden cambiar pasando opciones.

• size:’200px’
• background: ‘#666′
• border: true
• borderColor: ‘#000′
• rounded: false

Podemos cambiar estos valores pasando las opciones como se suele hacer en JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//o simplemente
$('.cube').JcubeiT({ size:'100px' , border: false});

Jugando con las opciones podremos crear por ejemplo una barra de menu más original

Pueden ver el ejemplo online o descargarse el código desde la página oficial de JQuery

ENGLISH

Hello!As you see im still experiencing and doing plugins for JQuery

Today I did a pretty funny one based on the explanations of lanrat about how to build a cube using new CSS properties.

Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a container object. Such objects could be links, images, other divs, etc.

1
2
3
4
5

<div class="cube">
<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
</div>

Once we have our HTML structure we have to apply the plugin like this:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jcubeit.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   $('.cube').JcubeiT();
 
						   });
</script>

And voila! We will have a perfect cube to be a little more original in our designs.

The plugin has some defaults values that can be changed via the options var.

• size:’200px’
• background: ‘#666′
• border: true
• borderColor: ‘#000′
• rounded: false

We may change these values from the options as is usually done in JQuery

1
2
3
4
5

var opciones={ size:'100px' , border: false};
$('.cube').JcubeiT(opciones);
 
//or just
$('.cube').JcubeiT({ size:'100px' , border: false});

Playing with the options we can create for example a more original menu bar

You can check the online demo or download the plugin from JQuery