fmoreno web site

Amigos y lectores que seguramente no suman mas de 3, en esta ocasión quiere compartirles un ejemplo y una plugin, pero la razón es lo  más importante, desde hace unas semanas me estoy actualizando en cuestiones de desarrollo web, en especifico HTML5, CSS3 y  JavaScript.

Sin embargo tal y como muchos de ustedes la mejor forma de reafirmar lo aprendido es escribiendo, asi que busque una manera de poder probar codigo y algunas cosas aqui mismo en el blog, que en realidad aunque casi no escribo es una manera simple de  ayudarme a mi auto estudio, tomando en cuenta que desde hacia mas de 10 años que no programaba ni veia codigo es algo interesante y motivante de nuevo

Asi que para empezar hice la instalación dentro de mi wordpress de un plugin que me permite manejar las hojas de estilo de cada post de manera independiente, este es.

The CSS Plus Plugin

Aqui pueden encontrar la liga http://wordpress.org/plugins/css-plus/, este CSS Plugin puede ser una muy buena opción para compartir ejemplos sin necesidad de modificar todas las hojas del tema, o los Child que en algún momento pueden llegar a ser muy complejor.

Ahora pensaremos en un ejemplo simple para probarlo.

Que les parece poner una banda en la esquina superior izquierda  que nos diga algo asi como  » 100% Geek». Asi que usaremos nuestro CSS Plus Plugin, para este primer ejemplo.

<div class="ribbon">
		<a href="#"> 100% Geek </a>
	</div>

Este es el codgo que deberemos poner en nuestro post para llamar la clase RIBBON.

Esta seria nuestra hoja de estilo a aplicar.

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: -40px;
  top: 30px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-box-shadow: 0 0 10px #888;
     -moz-box-shadow: 0 0 10px #888;
          box-shadow: 0 0 10px #888;

}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 5px #444; 
}

Como veran de acuerdo a lo que hemos establecido en nuestra hoja de estilo la posición de la bandita roja es absoluta, por lo que aparecera en el post, sin embargo si la hacen fixed y van modificando los valores de left y top la pueden acomodar de acuerdo a como les aparece en esta pagina.

Espero les haya agradado el ejemplo y  el uso del CSS Plus Plugin. Y les comparto la liga de donde pueden tener al creador del codigo como sus ejemplos

https://github.com/simonwhitaker/github-fork-ribbon-css