Caja de texto para mostrar Tips con estilo

El siguiente ejemplo ha sido tomado desde la página de Visual Studio de Microsoft 

Esta es una caja de texto para mostrar "Tips" en una publicación o artículo de nuestro blog o página web.


Ejemplo:

 Tip   ѧղժɾѳiժɱɑղiɑςѳ

 At any time after installation, you can install workloads or components that you didn't install initially. If you have Visual Studio open, go to Tools > Get Tools and Features... which opens the Visual Studio Installer. Or, open Visual Studio Installer from the Start menu. From there, you can choose the workloads or components that you wish to install. Then, choose Modify.

---

Aquí se ubica el estilo de manera directa
Estilo

---

<!-- Agregar este link de carga en la plantilla del blog -->


<link href="/Content/glyphicons.css" rel="stylesheet" type="text/css"/>

Bloque para Notas dentro de una publicación

El siguiente, es un bloque para agregar una nota dentro de una publicación. Este ha sido tomado desde la página de instrucciones de Adobe Photoshop

Cómo hacer degradados lineales para fondos con CSS

La propiedad repeating-linear-gradient permite crear patrones de líneas intercaladas.

Degradado lineal ejemplo 1

• Prueba 1
• Prueba 2

Contenedor con efecto de nieve

Este modelo ha sido tomado desde Vagacode Vagacode | Animaciones con CSS 
Animaciones con CSS


Las transiciones son la forma de cambiar una o varias propiedades de una etiqueta con un efecto visual tal que ese cambio no se realiza de manera instantánea sino que demora un cierto tiempo y por lo tanto, parece estar animado. Una animación con CSS es algo similar... Leer más» 

Efecto en capas en la propiedad text-shadow

Este diseño ha sido extraído desde CodePen

Código HTML y el CSS de este diseño en capas

Roses

Este sería el código HTML base

<div>Roses</div>

Así se le daría los estilos CSS directo con style

<div style="
     font-size: 10rem;
     text-align: center;
     height: 40vh;
     line-height: 40vh;
     color: #fcedd8;
     background: #e24d5c;
     font-family: 'Niconne', cursive;
     font-weight: 700;
     text-shadow: 3px 3px 0px #eb452b, 6px 6px 0px #efa032, 9px 9px 0px #46b59b, 12px 12px 0px #017e7f, 15px 15px 0px #052939, 18px 18px 0px #c11a2b, 21px 21px 0px #c11a2b, 24px 24px 0px #c11a2b, 27px 27px 0px #c11a2b;
     ">Roses</div>

element.style {
    font-size: 10rem;
    text-align: center;
    height: 40vh; /*Se aplica la unidad "vh" (Viewport height) en este caso para adaptarlo a diferentes pantallas*/
    line-height: 40vh;
    color: #fcedd8;
    background: #e24d5c;
    font-family: 'Niconne', cursive;
    font-weight: 700;
    text-shadow: 3px 3px 0px #eb452b,
                 6px 6px 0px #efa032,
                 9px 9px 0px #46b59b, 
                 12px 12px 0px #017e7f,
                 15px 15px 0px #052939, 
                 18px 18px 0px #c11a2b, 
                 21px 21px 0px #c11a2b, 
                 24px 24px 0px #c11a2b,
                 27px 27px 0px #c11a2b;
}

NOTA: Visitar DevCode DevCode
Unidades VH VW de CCS3 

Unidades VH y VW de CSS3


En este tutorial vamos a conocer y veremos un ejemplo con las unidades vh y vw, que introdujo la versión 3 de CSS... Leer más»  para más información sobre las unidades vh y vw en CSS3

Tooltip con CSS

Tooltip-ms1

CSS: TOOLTIPS ANIMADOS PARA BLOGGER  

CSS: TOOLTIPS ANIMADOS PARA BLOGGER

 Tooltiptc
Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...Leer más» 

Tooltip-ms2

CSS: TOOLTIPS ANIMADOS PARA BLOGGER  

CSS: TOOLTIPS ANIMADOS PARA BLOGGER

 Tooltiptc
Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...Leer más» 

Caja

Una caja contenedora con estilo. Esta es una base.

Estilo para las imágenes dentro de un post

Tomado desde Ciudad Blogger

Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo usamos el siguiente código dentro del post:

<table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://URL de la imagen de fondo" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. <img style="float:right; margin:5px 5px 5px 5px;cursor:pointer; cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0" alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table>

Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. y aquí continua el texto de la entrada.Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica en el código. Si no desean una imagen encima entonces eliminan esa etiqueta. Imagen encima En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el borde lo dejan en cero como está. El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding. La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la derecha; left, a la izquierda o center si la quieren centrada. El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto). Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una foto muy

Imágenes de fondos para DIVs y blockquotes

Hoja de papel rota

Hoja de papel con esquinas levantadas

*

**

***

---

/***/
//***//

---

Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus...

 Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus...
 Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit mus potenti, libero quam parturient senectus...
 Lorem ipsum

***

Fade Overlay

Hello World

Agregar script visualizador de codigo a blogger.

Agregar script visualizador de codigo a blogger. Artículo tomado desde 

Hola betas este es mi segundo tutorial, como siempre voy a empezar tratando de explicar de qué va todo. Imaginen que tienen un blog en donde van a compartir código Css o algún otro código y desean que se vea ordenado con las variables de otro color y todo lo demás, más o menos como la siguiente imágen. ​ Para eso existe un script llamado SyntaxHighlighter creado por Alex Gorbatchev y es de licencia libre así que cualquiera puede usarlo. Los lenguajes de programación que soporta entre otros son: css, php, java, etc, pueden ver la lista completa en el siguiente enlace: