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"/>

Creando un nombre

Aquí va el nombre

Rhaycira

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

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

Corrección en el texto y título del tooltip

Corrección

HTML

<span class="tooltip-ms3">Vagacode<a href="http://wiii.me/vagacode/animaciones-con-css">&nbsp;<i class="fa fa-external-link" style="color: #fff;" aria-hidden="true"></i></a><span class="emergente-ms3" style=""><a href="http://wiii.me/vagacode/animaciones-con-css" title="Vagacode | Animaciones con CSS" target="_blank"><h2 class="emergente-ms3" style="color: #26a69a;
    font-family: merienda;
    font-weight: bold;
    background: rgba(46,74,117,0.03);
    height: 90px;">Vagacode | Animaciones con CSS</h2>&nbsp;<br>
<br>
</a>Animaciones con CSS<br>
<br>
<br>
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...<a href="http://wiii.me/vagacode/animaciones-con-css" target="_blank" title="Vagacode | Animaciones con CSS">Leer más»&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a></span></span>

Sustituyo esto <h2 class="emergente-ms3"</h2> por <span id="name-title"></span>, dándole los estilos de la etiqueta <h2>

Tooltip con el conflicto entre el CSS de .main-inner .widget h2 y la <h2>

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» 

Tooltip con el nuevo HTML <span id="name-title"></span>

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» 

Este es el CSS.

CSS

#name-title {
display: block;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
color: #26a69a;
font-weight: bold;
font-family: merienda;
font-size: 14px;
height: 90px;
}

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

Twitter comienza a mostrar programación de tuits en su versión Web App

Desde el mes de noviembre 2019, en Hipertextual nos informaban sobre esta nueva y esperada característica en Twitter, algo que muchos deseabamos desde hacía mucho tiempo. Lo que en noviembre 2019 Twitter había anunciado como una prueba, ya en este momento comienza a verse, y no como tal, sino como una funcionalidad.

Nuevas imágenes de fondos para Androidmaniaco blog en formato .jpg

**