Generar cajas de texto con CSS3 y HTML5

Como se está viendo en estos últimos meses, CSS3 y HTML5 están demostrando que ahora es posible “diseñar” sin utilizar programas gráficos y confiando enteramente en el código.

En Tutorialshock nos ofrecen 15 tutoriales para diseñar cajas con bordes y dobleces en diferentes variaciones, donde se demuestra el poder del CSS3 combinado con un poco de imaginación.

15 ejemplos de texto generados con CSS3 y HTML5

Podéis observar el código CSS necesario para generar la Caja nº 1

Ejemplo Caja nº 1 - CSS3 y HTML5

1 /* This establishes the design of the boxes' paragraphs */
2 .box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
3 margin: 30px;
4 color: #aaa;
5 outline: none;
6 }
7
8 /* In this selector we specify  the width, height, borders, position, background color, color and shadow's dimensions */
9 .box1{
10 width: 300px;
11 margin: 40px;
12 min-height: 200px;
13 position:relative;
14 display: inline-block;
15 background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
16 border: 1px solid #ccc;
17 -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
18 -webkit-border-bottom-right-radius: 6px 50px;
19 }
20
21 /* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed at the bottom of this box, here's where we determine the measures, rotation and skew of the shadow itself */
22 .box1:before{
23 content: '';
24 width: 50px;
25 height: 100px;
26 position:absolute;
27 bottom:0; right:0;
28 -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
29 z-index:-1;
30 -webkit-transform: translate(-35px,-40px)
31 skew(0deg,30deg)
32 rotate(-25deg);
33 }
34
35 /* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed on top of the box, here's where we determine the measures, rotation and the skew of the shadow itself*/
36 .box1:after{
37 content: '';
38 width: 100px;
39 height: 100px;
40 top:0; left:0;
41 position:absolute;
42 display: inline-block;
43 z-index:-1;
44 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
45 -webkit-transform: rotate(2deg)
46 translate(20px,25px)
47 skew(20deg);
48}

Descargar cajas de texto generadas con CSS3 y HTML5

Vía: Tutorialshock

 

Facebook
Twitter
LinkedIn
TAMBIÉN PUEDE INTERESARTE
Después de duros meses de trabajo, hoy os presentamos, la nueva web de “El Enganche”. El objetivo era hacer algo diferente a nivel periodístico, algo que en España no…
Esta web utiliza cookies propias y de terceros para analizar nuestros servicios y mostrarle publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de sus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Más informaciónPersonalizar Cookies   
Privacidad