Texto con el efecto light [Css3]

Hola en este vídeo les muestro como hacer un texto con efecto light o de luz muy bonito y muy fácil con #Css3.

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒
Peengler Code

Hermoso blockquote burbuja con borde [Css3]

Hola en este vídeo les muestro Blockquote en forma de burbuja con un borde bastante chulo y tan solo se uso #Css3 espero que les guste.

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒
Peengler Code

►Descargar archivo por Mega: http://j.gs/Cn7l
►Descargar archivo por Mediafire: http://j.gs/Cn7m

Blockquote perspective/perspectiva [Css3]

Hola en este vídeo les muestro como hacer un blockquote con perspectiva lo cual lo hace ver más interesante solo usando #Css3 si es de tu gusto espero que no tengas ningún inconveniente al aplicar en tu sitio web.

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒

Peengler Code

►Descargar archivo por Mega: http://j.gs/Cn7c
►Descargar archivo por Mediafire: http://j.gs/Cn7d

Blockquote con estilo de cuaderno/notebook [Css3]

Hola en este vídeo les muestro como hacer un blockquote con lineas de fondo aparentando a un cuaderno con #Css3

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒

Peengler Code

►Descargar archivo por Mega: http://j.gs/Cmsa
►Descargar archivo por Mediafire: http://j.gs/Cmsb

3 simples blockquote responsive [Css3]

Hola en este vídeo les muestro 3 simples blockquotes que los puedes usar en tu página web o blog sin ningún problema con #Css3

El elemento blockquote permite a los autores insertar citas en forma de bloques de contenido.

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒
Peengler Code

▶ Descargar Archivo por mega: http://j.gs/Cmp0
▶ Descargar Archivo por mediafire: http://j.gs/Cmp1

Instalar fuentes compatible con todos los navegadores en tu Página web o Blog

Hola en este post les explico un poco acerca de las fuentes, sus formatos, como descargarlas e instalarlas y varias recomendaciones que debes tener en cuenta a la hora de utilizarlas en tu sitio web.

Muchos dirán bueno yo siempre uso las fuentes de Google Fonts y no digo que no lo hagas solo que si quieres usar alguna fuente que no encuentres en Google Fonts pues este es el momento de que te enteres como descargar en instalar estas fuentes a nuestro proyecto/pagina web/blog o como quieras decirlo.

Digamos que te gusto algunas de estas fuentes pero que no las encuentras en google fonts.

Pack de fonts

Paginas para descargar fuentes

Aquí es donde te recomiendo paginas para descargar fuentes. Ten en cuenta que algunos son gratuitos y en otros deberás pagar.

Megafuentes

dafont.com (el que más uso)

fuentesgratis


new.myfonts.com

www.urbanfonts.com

www.freepremiumfonts.com

Tipos de fuentes

Algo que debes tener en cuenta es que las fuentes poseen un formato, entre ellos:

TrueType (TTF)

TTF permite la gestión más básica de derechos digitales que especifica con un texto incrustado si el autor permite el uso del archivo en sitios web.

OpenType (OTF)

Las fuentes OTF contienen los datos de pantalla y fuentes de impresora en un solo componente. Además tiene capacidades como el soporte para múltiples plataformas.

Embedded Open Type (EOT)

Las fuentes EOT fueron diseñadas para ser utilizadas en la web con la finalidad de proteger el copyright que no hace TTF y OTF. Utiliza una herramienta para crear una fuente de las fuentes existentes OTF TTF. La compresión y los subconjuntos hace que los archivos de fuente sean más pequeños. Utiliza el cifrado para una mayor protección.

Web Open Font Format (WOFF)

Basicamente es OTF o TTF pero con metadatos y compresión, además de estar apoyada con los principales navegadores. Su compresión permite cargar más rápido y los metadatos permiten incluir los datos de la licencia en el archivo de fuentes.

Scalable Vector Graphics (SVG)

Estas fuentes tienen atributos como si fueran un vectorial. El mayor inconveniente de las fuentes SVG es la falta de la información extra de la fuente para representar tamaños pequeños con calidad y legibilidad. Las SVG no son buenas para el cuerpo del texto. En la selección del texto, no permite hacerlo en caracteres individuales, palabras; sólo se puede seleccionar toda la fila o párrafo de texto.

¿Cuál elegir?

Personalmente yo elijo todas, para que sea compatible con cualquier navegador y no solo por el navegador sino que ademas por nuestro idioma que posee acentuación entre otros caracteres que no posee el ingles u otro idioma, se recomienda OpenType(OTF) ya que contiene hasta 65.636 glifos, permitiendo crear caracteres especiales dentro de la misma fuente, sin tener que recurrir a crear archivos adicionales, así como las ligaduras, las fracciones, versalitas o escrituras no latinas. Es decir, para poder en todo momento tener los símbolos que siempre nos fallan, así como el del euro, la «ñ», viñetas, etc. Debemos tener mucho cuidado al saber que nos descargamos, e intentar que sea OTF para disponer de un mayor número de glifos.

En este vídeo les muestro como Descargar e instalar fuentes para nuestros proyectos con #Css se hizo uso de paginas para convertir dicha fuente a formato: .ttf, .otf, .eot, .woff y .svg.

Paginas para convertir fuentes a cualquier formato

▶Convertidor online para fuentes: https://onlinefontconverter.com/

▶Convertidor online para fuentes(Opción 2): http://www.font2web.com/

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒
Peengler Code

Footer siempre abajo! con [ Css3 ] fácil y rápido!

Hola en este vídeo les muestro como situar el footer siempre abajo de la pagina muy fácil y solo con #Css3

Aunque no lo creas este problema es tan común como cuando empezamos aprender a diseñar/maquetar nuestro sitio web «En cualquier sentido». Y esto se debe a que nuestras paginas por no tener un tamaño especifico para el contenido, es decir, puede ser largo o corto y pasa lo que ya sabemos, que el footer/pie de pagina no se ubica donde debe estar «abajo», normalmente se visualiza algo como.

Footer que no se ubica abajo del todo

Yo tambien tuve ese problema, y aquí les vengo con una solución y de manera sencilla por css, de esta forma podemos evitar que el footer aparezca a mitad de la página si el contenido es muy corto. En pocas palabras esto es lo que haremos.

El antes y el después

Abajo les dejo un vídeo en donde les enseño como solucionarlo fácil y rápido!

▒▓█╬► Suscribete a mi canal de youtube ◄╬█▓▒
Peengler Code