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.
Podéis observar el código CSS necesario para generar la Caja nº 1
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}
Vía: Tutorialshock
