soy Kseso y esto EsCSS

Marcos y molduras puro Css sin marcado extra (single element)

Marcos o contornos realizados en puro css sin elementos superfluos que parecen más complejos de lo que en realidad son.

Marcos y molduras puro Css sin marcado extra (single element)

·Por Kseso ✎ 2
Marcos y molduras puro Css sin marcado extra o añadido

A falta de otros entretenimientos más provechosos y con más enjundia, un par tres demos de uso creativo de pseudoelementos y alguna otra propiedad básica de Css para lograr marcos, molduras o contornos de cajas que parecen un poco más complejas de lo que en realidad son.

Como verás en el código html las demos sólo contienen un elemento, el texto que ves marcado como h1. El resto son pseudoelementos ya disponibles en el documento, posicionados a conveniencia y complementado con los colores de los bordes.

De momento tres ejemplos para que veas que sólo es necesario un poco de imaginación para estas florituras Css. A ver si con algo de suerte lo complemento con los vuestros.

Empecemos con uno sencillo, en el que lo más reseñable es el borde con doble aserrado (interior y exterior). Como ves es la vieja conocida outline declarada a los elementos html y body.

See the Pen Marcos y molduras Css by Kseso (@Kseso) on CodePen

border-radius al interior y a 90 grados

En este segundo marco o contorno, lo llamativo es el efecto que se crea con el recorte de las esquinas hacia el interior y en ángulo de 90 grados del elemento exterior junto a las líneas rectas y esquinas a escuadra del interior que sobresalen del primero.

See the Pen Marcos y Molduras Css single element by Kseso (@Kseso) on CodePen

Esos efectos de las cuatro esquinas símplemente son los cuatro pseudoelementos del html y del body colocados sobre el borde del body y jugando con el color en los bordes superpuestos al contorno.

Las dos figuras en rombo de los laterales son los dos pseudoelementos del h1 posicionados y con una ligera rotación.

Y con ellos hemos terminado los pseudoelementos. Sin embargo quedan otras dos figuras: los círculos ubicados en los bordes superior e inferior y ya no quedan más elementos cuyos pseudos estén sin emplear. O quizás no.

Efectivamente, queda otro elemento que siempre está presente en los documentos html. El head que también tiene disposibles sus correspondientes pseudos. Y esos son los utilizados para crear los círculos.

Para hacerlos visibles sólo se necesita declarar al 'head' como elemento de bloque y un par de declaraciones complementarias más. Como hacerlo static para facilitar la colocación de sus pseudos tomando como referente no a él sino al 'html'. Este punto lo puedes ampliar en éste artículo del blog.

También notarás que queda oculto con la propiedad visibility para poder revertirla en sus seudoelementos.

head { display: block; visibility: hidden; position: static; width: 0; }

Óvalos y rectángulos

Y como no hay dos sin tres, uno más para terminar. Este no te lo cuento, ya queda de tu parte echarle un ojo al Css asociado.

See the Pen dhCaf by Kseso (@Kseso) on CodePen

Nota

Si observas los códigos verás mucho número mágico en los valores Css. Estas realizaciones son sólo a efectos de mostrar las posibilidades de Css en unas condiciones muy concretas. No tienen intención de asegurar el correcto comportamiento en cualquier circunstancia o situación.

Artículo publicado originalmente en Octubre de 2013.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso