PixelST
96 182 12 71

Generar cajas de texto con CSS3 y HTML5

15 ejemplos de texto generados 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

 

También puede interesarte...

¿Quieres un presupuesto?

Rellena el siguiente formulario y nos pondremos en contacto contigo...

Información sobre tu proyecto...

Información sobre tu proyecto...

* campos obligatorios
C/. Frigola 4 piso 3º pta 11
46980 - Paterna (Valencia)
96 182 12 71
626 928 764
PixelST - 2019 © - Todos los derechos reservados