ccc

CSS3: Sombreados, bordes, degradados y fuentes externas

#principal {
    ...
    border-radius:20px;
    box-shadow: #2C2961 5px 5px 10px;

    background: linear-gradient(30deg,red, blue); /* degradado lineal */
    background: radial-gradient(circle, red, yellow, green); /* degradado radial */
}


Importar fuente externa
- http://www.fontsquirrel.com/
- Descargar la fuente que se quiera y descomprimirla en una carpeta.
- En la web darle a "Generator" y en "Upload fonts" indicar la carpeta descomprima.
- Descargar las fuentes de esa letra para ser usadas en nuestra web.

#titulo {
    font: bold 36px "1942_report1942_report", verdana, sans-serif;
    text-shadow: #2C2961 3px 3px 5px;
}

@font-face {
    font-family: '1942_report1942_report';
    src: url('../fonts/1942-webfont.eot');
    src: url('../fonts/1942-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/1942-webfont.woff2') format('woff2'),
         url('../fonts/1942-webfont.woff') format('woff'),
         url('../fonts/1942-webfont.ttf') format('truetype'),
         url('../fonts/1942-webfont.svg#1942_report1942_report') format('svg');
    font-weight: normal;
    font-style: normal;
}


Crear bordes externos
outline: 2px dashed #000999;
outline-offset: 15px; 


Crear borde con una imagen
border: 10px solid transparent;
padding:5px;
border-image: url(border.png) 30 round;


No hay comentarios:

Publicar un comentario