Ir al contenido principal

Texto con borde

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS?
SI ES POSIBLE

NOTA: Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox.

Para lograrlo, debemos aplicar la propiedad text-shadow para lograr muchas sombras del mismo color simulando un sólo borde.

A <div class="texto1">Texto</div> le aplicaremos:
.texto1 {
color:white;   /* Color del texto */
text-shadow: 1px 1px 0 blue,
                  -1px -1px blue,
                   1px -1px blue,
                  -1px 1px blue,
                   0 1px blue,
                   1px 0 blue,
                  -1px 0 blue,
                   0 -1px blue;
}

Puedes cambiar blue por el color que desees.

Aquí mas ejemplos.

borde


.texto2 {
color:#AAFFB1;
background:#AAFFB1;
padding:20px 80px;
text-shadow: 1px 1px 0 #2F7235, -1px -1px #2F7235, 1px -1px #2F7235, -1px 1px #2F7235, 0 1px #2F7235, 1px 0 #2F7235, -1px 0 #2F7235, 0 -1px #2F7235;
}

texto


.texto3 {
color:black;
background:#aaa;
padding:20px 80px;
text-shadow: 1px 1px 0 white, -1px -1px white, 1px -1px white, -1px 1px white, 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white, -25px 0 #bbb, 25px 0 #b8b8b8;
}

BLOG


.texto3 {
color:black;
background:#aaa;
padding:20px 80px;
text-shadow: 1px 1px 0 white, -1px -1px white, 1px -1px white, -1px 1px white, 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white, -25px 0 #bbb, 25px 0 #b8b8b8;
}

cinco


.texto3 {
color:black;
background:#aaa;
padding:20px 80px;
text-shadow: 1px 1px 0 white, -1px -1px white, 1px -1px white, -1px 1px white, 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white, -25px 0 #bbb, 25px 0 #b8b8b8;
}
Invitame un café en cafecito.app
Etiquetas:

Comentarios

Publicar un comentario

Más leído

Galería de Imágenes Simple, con Javascript y CSS

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle...
31 comentarios
seguir »

Ventana flotante con botón cerrar

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ posi...
16 comentarios
seguir »

Tabs, menú de contenidos con pestañas. Versión CSS

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

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" />     ...
16 comentarios
seguir »

Efecto biselado con CSS

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más ef...
Publicar un comentario
seguir »

Botón circular 3D realista con CSS

Añade borde a tus textos con CSS utilizando la propiedad 'text-shadow'.

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 { ...
Publicar un comentario
seguir »