BlogDesign

Hoy tengo este tutorial para ustedes donde voy a explicarles qué son las  transformaciones CSS y cómo poder aplicarlas a ciertos elementos en nuestro blog.

¡Hola! Ya pasó mucho tiempo desde mi última publicación, ya que estuve ocupado todo este tiempo. Hoy les traigo esta idea extraída de Ayuda Bloggers  en la que, utilizando la propiedad  text-shadow , similaremos un efecto de blur. Ejemplo 1: Texto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. El HTML: <div class="blur-texto"...

Hoy les traigo esta idea que les será muy prática. Utilizando la propiedad  background-clip  podremos aplicar un fondo a las palabras de un texto o al título de nuestro blog. Veamos un ejemplo: beach y en un texto: Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Para aplicar este truco al título de nuestro blog que se encuentra en el Header, agregamos este CSS en a nuestra plantilla: .Header .title { background:url( url-imagen ); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; } También podemos agregar background-size: ancho alto ; para ajustar el tamaño deseado del fondo. Para aplicar los estilos a un texto determinado. El HTML es el siguiente: <span class=" ejemplo "> Texto </span> Y los estilos: . ejemplo { background:url( url-imagen ); font-size: 15px; /* Tamaño del texto */ -webkit-background-clip: text; -moz-background-clip: text; background-cli...

Utilizando las Animaciones CSS, vamos a crear este efecto de fila de hormigas en los bordes de los contenedores. Ejemplo: Hola, soy un recuadro con animación de fila de hormigas. El HTML es sólo: <div class="fila-hormigas"> Contenido: Texto, Imágen, etc. </div> Y, seguido de eso, se agregan los estilos <style> .fila-hormigas { display:block; width:180px; /* Ancho del contenedor */ padding:20px; background:#F4A460;  /* Fondo del contenedor */ border: 1px dashed #000 ;  /* Grosor del borde */ /* Color del borde  */  -moz-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */  -webkit-animation: antImg 0.3s linear infinite forwards;  /* Velocidad de la animación */  -o-animation: antImg 0.3s linear infinite forwards;  /* Velocidad de la animación */  -ms-animation: antImg 0.3s linear infinite forwards;  /* Velocidad de la animación */  animation: antImg 0.3s lin...