Ejemplo 3 Ejemplo de banner Código CSS body { text-align:center; } #principal { display:block; width:500px; margin:50px auto; padding: 15px; text-align:center; border:29px solid ; border-image: url("imagen.jpg") 30 2 repeat; /*border-image-source: url("imagen.jpg") border-image-slice:30; border-image-repeat:repeat; border-image-width:1 1 1 1; text-align:justify;*/ /*background:linear-gradient( posicion a la que va (to right, 90deg), color inicio,color final)*/ /*background:radial-gradient(color inicio,color final)*/ background: linear-gradient( to right, red 60%, gold 90%); /*border-radius:10px; da un borde redondeado,2 valores, esquinas en diagonal;4 valores esquinas en sentido agujas del reloj; 10px/40px redondeo tipo elipse*/ border-radius: 10px 40px; /*box-shadow:color offset-x offset-y blur-radius spread-radius inset;*/ box-shadow: rgb(150,150,150) 5px 5px 10px; /*text-shadow:*/ text-shadow: rgba(250,250,150,.5) 3px 3px 2px; outline:2px dashed #004449; outline-offset:15px; /*herramientas transform transform:scale(0.7,-0.5); transform:rotate(25deg); transform:skew(20deg); transform:translate(50px,30px);*/ transform: skew(20deg) scale(0.7,0.7) rotate(25deg) translate(50px,30px); } #principal:hover{ transform:rotate(-15deg); /*herramienta transition:propidad-css duración tiempo retardo ;*/ transition:transform 1s ease 0.5s; } #titulo { font: bold 36px verdana,sans-serif; }