BlogDesign

Vengo a contarles cómo hice una barra de carga (o loader) con animaciones CSS . La iniciativa surgió hace unas semanas en Twitter a partir del challenge de @AndreusCafe :  Ustedes saben que me encanta CSS, y por sobre todo las cosas creativas. Así que, este desafío consiste en hacer un pequeño loader en CSS. No hay definiciones ni requerimientos técnicos. Simplemente un pequeño componente gráfico de carga en CSS; uds eligen el estilo. pic.twitter.com/rqsivfSp3d — Andrés (@AndreusCafe) November 27, 2020 Me surgió la idea de hacer un spinner y barra de progreso a la vez, ya que no me decidía por cuál opción ir. El desafío fue escribir los keyframes para que la animación sea cíclica y lo más fluida posible. Tomé lápiz y papel para esquematizar las líneas de tiempo y pude tener una visión de lo que quería lograr y lo que debería plasmar en mi código. Por un lado, tenemos la animación rotate que hace girar la barra. Primero espera, luego gira 180º, vuelve a esperar y vuelve a g...

¡Hola! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o links, y deben tener en cuenta los distintos estados de los mismos. Este es un ejemplo de dos tipos de botones y sus estados. El proceso lógico es empezar por los estilos del botón en su estado inicial y después desarrollar los estados mediante las pseudoclases correspondientes. Lo recomendable es que si estás replicando una interfaz de un wireframe o estás utilizando un UI kit, respetes todos los colores y estilos acordados. En cambio, si estás programando tu propia UI y sólamente querés que tus botones queden funcionales, te voy a mostrar cómo podés alivianarte mucho el trabajo. Obviamente también suponemos que no vas a usar una librería UI. Lo que lleva mucho tiempo al momento de estilizar los botones es buscar los colores correctos para los distintos estados, y se complica más aún si no tenés conocimientos sobre colores en UI. Y todavía más complicado si queremos tener botones con degradado ...

Cafecito es una plataforma de crowdfunding que busca unir a creadores de contenido, ONGs o proyectos con gente que quiera aportar a lo que hacen. Si tenés un blog en Blogger y te gustaría dar la posibilidad a tus lectores de apoyar tu contenido con pequeños aportes monetarios, entonces esta nueva plataforma argentina te va a ayudar mucho. Crearte una cuenta en Cafecito es muy sencillo y es importante que vincules tu Mercado Pago para recibir por ahí los pagos. En unos segundos ya podés compartir el link de tu perfil con tus lectores. También podés incluir un botón como éste en tus publicaciones o incluso insertarlo dentro de un gadget HTML/JavaScript. Buscá el código HTML para insertar tu botón en Perfil 👉 Editar perfil 👉 Botones Además, tenés varios colores para elegir el que mejor se adapte a la paleta de colores de tu blog.

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...

Hace unos días vimos cómo generar utilizando solamente CSS, el icono del sobre, representativo del correo o e-mail. Ahora veamos cómo hacerlo con el ícono RSS . Con el siguiente código podrás conseguir el icono, y podrás utilizarlo como botón o para decorar solamente. Lo malo de generar el icono es que no es fácil cambiar de tamaño, si necesitas hacerlo habrá muchos valores con los cuales tener que cambiar. HTML <div class="icono-rss"></div> CSS .icono-rss { width: 40px;   /* Ancho del icono */ height: 40px;   /* Alto del icono */ box-sizing: border-box; background: #FD7527;   /* Fondo del icono */ border: 1px solid #FF5D00;   /* Borde del icono */ border-radius: 5px;   /* Bordes redondos */ position: relative; box-shadow: inset 0 15px 10px -8px #FF9356, 0 2px 3px -1px rgba(0,0,0,.2);   /* Sombras */ } .icono-rss:before, .icono-rss:after { display: block; content: ""; position: absolute; bottom: 5px; left: 5px; } .icono-rss...

Como sabemos, el icono representativo del e-mail es el sobre de correo. Aunque muchas veces el arroba @ nos indica lo mismo. Hoy veremos cómo, utilizando solamente estilos CSS, crear un simple icono de sobre. HTML <div class='icono-email'></div> CSS .icono-email { background: white;   /* Fondo del icnono */ box-sizing: border-box; width: 40px;   /* Alto del icono */ height: 30px;   /* Ancho del icono */ border: 1px solid #777;   /* Borde del icono */ border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.095);   /* Sombra */ position: relative; } .icono-email:before, .icono-email:after { content: ""; width: 0; height: 0; position: absolute; top: 0; left: 0; } .icono-email:before { border: 19px solid transparent; border-top: 20px solid #777;  /* Color igual a color de borde */ } .icono-email:after { border: 18px solid transparent; border-top: 19px solid white;   /* Color igual a color de fondo */ left:1px...

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />     ...

Ayer, 23 de octubre de 2012, Oloman publica en su blog un post sobre un antiguo servicio que permitía presentar las etiquetas del blog como una nube, pero en tres dimensiones. Comenta sobre cómo solucionar los errores que ya hace tiempo pueden verse, cómo utilizarla de manera automática, o con enlaces personalizables y cómo personalizar a tu gusto esta nube de etiquetas. A continuación te dejo el link para que puedas aprovechar esta herramienta :D NUBE DE ETIQUETAS 3D: BLOGUMUS SIGUE FUNCIONANDO | Oloblogger

Hace tiempo encontré grandiosos efectos que se pueden lograr sólo con CSS, como un efecto vintage , en Ciudad Blogger y un filtro de escala de grises , en Oloblogger. Con estos métodos como base, se pueden lograr infinitas opciones para decorar las imágenes. Imagen de The Art of Matt Kaufenberg . Para lograr la textura utilizamos los CSS Patterns  con los cuales utilizamos un liviano trozo de base64, obtenemos grandes resultados. Acá te muestro el CSS de los ejemplos, y luego el HTML. Recuerda que puedes experimentar cambiando los colores, probando con las texturas y agregando lo que quieras para lograr todo lo que creas posible, esto sólo es una base para que obtengas tus propios resultados. Ejemplo 1 . clase-a-eleccion { width: 320px;   /* Ancho de la imagen */ height: 265px;   /* Alto de la imagen */ position: relative; float:left; } . clase-a-eleccion  img { padding:0; margin:0; width:100%; height:100%; } . clase-a-eleccion :before { content...

Habrás visto en algunos sitios algo parecido a esto que te voy a mostrar. Puedes aplicar este efecto a cualquier cosa y en realidad le dejará un buen toque de originalidad. Se trata de simular sombras que están detrás del elemento, que parecen ser páginas. Esto lo podés aplicar tanto en imágenes como en contenedores, como el cuerpo de entradas de tu plantilla. Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1 , que es el contenedor principal de las entradas. .imagen-sombra { box-shadow: 0 10px 0 -5px #E4E4E4,                      0 20px 0 -10px #D5D5D5; margin-bottom:15px; padding:0; } Debes reemplazar .imagen-sombra con un # seguido del ID del contenedor. Y en el HTML utilizamos (para una imagen) <img class='imagen-sombra' src=' url-imagen '/> Y ya lo obtenemos, pero si ...

Navegando por la web encontré este genial generador de fondos con efecto Parallax. Para comprender el aspecto de este efecto, mira este blog de pruebas . Es muy sencillo de aplicarlo en tu sitio, y para que no te sea tan dificil generar el código, acá te muestro el tutorial para utilizar este generador. Ingresa a Web Features - Parallax Background Builder  y elige la primera opción que permite crear un fondo general, es decir que se aplica al fondo principal. Para evitar conflictos con la imagen de fondo de tu blog, si es que la tienes, elige el color transparente para la capa del fondo. Para agregar más capas , utiliza el botón en la esquina: Se abrirá una ventana donde deberás insertar el URL de la imagen , o también puedes elegir una de la galería que te ofrece el generador. En la barra derecha, puedes elegir el modo de la imagen, puede ser pattern , para que la imagen se repita, o image , la imagen no se repite y puedes posicionarla hacia la izquierda o hacia el bottom...

Hoy les traigo unos muy llamativos menúes para usarlos en tu blog. Lo especial que tienen es que utilizan opacidad para el fondo lo que le otorga una apariencia más profesional. Para poder apreciar la opacidad de los botones, es imprescindible una imagen de fondo, o un textura o un patrón. Por lo que deberás empezar a buscar una buena imagen que además combine con la imagen de fondo de tu blog o los colores que utilizas. Puedes ver las demostraciones de cada ejemplo en este blog de pruebas . Debes pegar el código en un gadget HTML/Javascript, y luego ubicarlo debajo de la cabecera, no sé cómo se verán estos menúes en la sidebar ya que los diseñé de manera que sean horizontales. Ejemplo 1 <div id="contenedor-menu"> <div id="menu2"> <ul> <li><a href=" # "> seccion1 </a></li> <li><a href=" # "> seccion2 </a></li> <li><a href=" # "> seccion3 </a>...