BlogDesign

Volví a Blogger después de tanto tiempo. Una pena haber dejado abandonado blogdesign  y retomar muy pocas veces el hábito de indagar acerca de las novedades en el CSS y el diseño web. Ahora ya casi iniciando los años universitarios, me gustaría volver a escribir acerca de ésto que un tiempo me apasionó y aún me sigue sorprendiendo y fue clave en la elección de mi carrera. Hace unos días ingresé a mi cuenta de Codepen tras intentos e intentos de acertar con mi usuario y contraseña. Quedé sorprendido de las ingenuidades que publicaba hace años, y mi interés sobre cómo pude lograr todo eso a través de la programación volvió a despertar. El último pen de mi propiedad se titula "Simulating collision with CSS". A continuación insertado. See the Pen Simulating collision with CSS by Lucas Maidana ( @LucasMaidana ) on CodePen . Lo que quise demostrar era cómo simular el evento de colisión (que seguido vemos en vídeo juegos) sólo utilizando CSS y sin recurrir a otros lenguajes má...

Hace no mucho tiempo Blogger lanzó un nuevo gadget: el formulario de contacto. Podemos optar por utilizarlo como gadget o en una página estática . Ya que es fácil acceder al código de este gadget lo podemos personalizar a gusto modificando el HTML y añadiendo CSS. HTML El formulario consta de dos entradas de texto, una para el nombre y otra para el correo electrónico, un textarea para ingresar el mensaje y un input de tipo submit para enviarlo todo. Para darle un toque más profesional, vamos a suprimir los textos "Nombre" "Correo electrónico" "Mensaje" por un placeholder en el interior de cada cuadro de texto. Para que entiendas aquí te muestro la diferecia. Formulario original Para lograr esto, debemos modificar el HTML del gadget. Primero nos dirigimos a la parte de la plantilla donde se encuentra el widget, lo expandimos, expandimos el includable y encontraremos algo como esto: <b:widget id='ContactForm1' locked='false' title=...

Esto lo vi en Google Play, la tienda virtual de Google para aplicaciones Andriod. La descripción de la aplicación se puede mostrar u ocultar con un botón en la esquina inferior derecha. Esto es muy útil para mostrar resúmenes que pueden ser extendidos a gusto del lector. En Google Play usan javascript pero se logra el mismo resultado utilizando sólo CSS. Lo que hacemos es camuflar un input de tipo checkbox en forma de botón utilizando la etiqueta label. Cuando el input esta activado, el contenido se exapande. Como no es posible utilizar transiciones con la propiedad height , utilizamos max-height . See the Pen SlideToogle con CSS :checked by Lucas Maidana ( @LucasMaidana ) on CodePen . Fuentes Slidetoogle sólo con CSS en el blog de Emilio Cobos, de aquí sacamos cómo realizar la transición utilizando la propiedad max-height . Efecto de texto con CSS en el blog de Emilio Cobos. Aquí explica cómo lograr el efecto de continuidad del texto.

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active { ...

La llegada de Windows 8 realmente nos sorprendió a todos. A mí en especial me atrajo mucho el diseño de esta nueva plataforma. Nos enseña una nueva manera de utilizar los colores en recuadros, sin necesidad de tantos degradados, imágenes y texto muy llamativo. Y como llevar este diseño al CSS no es tan complicado, me tomé tiempo para personalizar los comentarios de Blogger a la manera del nuevo Windows. Lo logré basándome en capturas de Windows 8 y el código fuente que podemos encontrar inspeccionando el messenger de Outlook. La mensajería en Windows 8. El messenger de Outlook. Puedes ver en este blog de pruebas cómo quedarán los comentarios. Lo que hice fue lo siguiente: Agrandar los avatares y colocar un borde izquierdo. Aplicar el fondo a los bloques de los comentarios, y una pequeña pestaña para que parezca un globo de diálogo. En las respuestas impares, cambiamos la posición de los avatares hacia la derecha para dar la idea de un diálogo entre quien realizó...

Buenas :) En este tutorial veremos cómo aplicar un efecto fade al cargar el blog . Desde otro punto de vista también podemos decir que creamos una ventana de carga que oculta el contenido del blog hasta que éste se cargue por completo. El truco es muy sencillo  sólo creamos un contenedor que oculte todo el blog, y con Javascript (mejor dicho: jQuery) le ordenamos que desaparezca, luego de finalizar la carga, y que aparezca, al ingresar a un enlace. La idea y gran parte del código lo obtuve de esta entrada de Ciudad Blogger , pero tuve que modificar algunas cosas para que no sea el body quien se oculte, sino que la ventana de carga se pose sobre el mismo para ocultarlo. Antes de empezar, debes tener instalado en tu plantilla jQuery , pegando la siguiente línea antes de </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> En caso de ya tenerlo, no pegues nada ;) Ahora continuemos con el HT...

Y con ustedes, ¡la primer plantilla de BlogDesign! Ya me había llegado el momento y decidí iniciar mi carrera como 'diseñador de plantillas' :) Se trata de una plantilla para Blogger que puedes descargar y utilizarla en tu blog. El aspecto es relamente sencillo. Sin muchos colores, sin fuentes raras y simple organización. Una plantilla que no le vendrá muy mal a los blogs que no deseen llamar mucho la atención. Aquí más características: Buscador a un lado del título del blog. Contenedores con fondo blanco, un pequeño borde, y bordes redondos. Algunas (no muchas) funciones son configurables desde el Diseñador de plantillas. Las entradas se muestran de manera completa en la página principal. Plantilla simplista sin mucho código, lo que hace fácil la edición. Aquí te muestro una vista previa de cómo quedan los comentarios: Y aquí los enlaces al demo y descarga: Demo           Descarga Para instalar la plantilla investiga en este post de Oloblogge...