Tips y trucos CSS: Códigos preformateados de estilos para tu web

1083339_97489970Cuando somos programadores web, podemos tener más o menos creatividad a la hora del diseño, y he de recalcar que un programador web no debe ser necesariamente diseñador web, y viceversa.

Los programadores a veces nos sentimos limitados con el diseño web, o no tendríamos toda la soltura que pueda tener un diseñador. Por eso he recopilado una serie de códigos CSS para ayudarnos con ciertos elementos HTML.

Esquinas redondeadas

Un recurso muy usado para dar un aspecto más moderno a nuestra web.

border-radius: 10px; 
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome, Safari */
-khtml-border-radius: 10px; /* Linux */

Sombreado

Un complemento muy usado junto con las esquinas redondeadas.

#divSombreado{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

Cambiar el color de la selección del texto

Podemos cambiar el color cuando seleccionamos con el puntero un texto.

::selection { background:#F00; color:#000; }
::-moz-selection { background:#F00; color #000; }

Letra capital

Poner la primera letra del párrafo gigante, como en los periódicos.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Responsive Design: Adaptar CSS a los diferentes dispositivos.

Con este código adaptamos diferentes estilos según la resolución del navegador que visualiza la web.

/* Smartphones (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Estilos a partir de aquí */
}
 
/* Smartphones (horizontal) ----------- */
@media only screen
and (min-width : 321px) {
/* Estilos a partir de aquí */
}
 
/* Smartphones (vertical) ----------- */
@media only screen
and (max-width : 320px) {
/* Estilos a partir de aquí */
}
 
/* iPads (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Estilos a partir de aquí */
}
 
/* iPads (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Estilos a partir de aquí */
}
 
/* iPads (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Estilos a partir de aquí */
}
 
/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Estilos a partir de aquí */
}
 
/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Estilos a partir de aquí */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos a partir de aquí */
}

Quitar borde de los inputs

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Imágenes estilo Polaroid

Un estilo bastante chulo para las imágenes con CSS. La imágen la pondremos en un enlace <a>.

/* Imagenes Polaroid */
 
  a.polaroid {
        display: block;
        margin: 0em auto 0 auto;
        text-decoration: none;
        color: #333;
        padding: 13px 13px 26px 13px;
        width: 200px;
        border: 1px solid #BFBFBF;
        background-color: white;
        z-index: 2;
        font-size: 0.8em;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);
        -webkit-transition: all 0.5s ease-in;
    }
 
    a.polaroid img{
        width:200px;
        -webkit-transition: all 0.5s ease-in;
 
    }
 
    a.polaroid:hover,
    a.polaroid:focus,
    a.polaroid:active {
        z-index: 999;
        -webkit-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        -moz-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        -webkit-transform: rotate(0deg) scale(1.5);
        -moz-transform: rotate(0deg) scale(1.5);
        transform: rotate(0deg) scale(1.5);
    }
 
    a.polaroid:hover img,
    a.polaroid:focus img,
    a.polaroid:active img{
        -webkit-transform: rotate(0deg) scale(1);
        -moz-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
 
    }
 
    .polaroid img {
        margin: 0 0 15px;
    }
 
    a img {
        border: none;
        display: block;
    }
 
  a.polaroid2 {
        display: block;
        margin: 0em auto 0 auto;
        text-decoration: none;
        color: #333;
        padding: 13px 13px 26px 13px;
        width: 200px;
        border: 1px solid #BFBFBF;
        background-color: white;
        z-index: 2;
        font-size: 0.8em;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        transform: rotate(10deg);
        -webkit-transition: all 0.5s ease-in;
    }
 
    a.polaroid2 img{
        width:200px;
        -webkit-transition: all 0.5s ease-in;
 
    }
 
    a.polaroid2:hover,
    a.polaroid2:focus,
    a.polaroid2:active {
        z-index: 999;
        -webkit-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        -moz-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
        -webkit-transform: rotate(0deg) scale(1.5);
        -moz-transform: rotate(0deg) scale(1.5);
        transform: rotate(0deg) scale(1.5);
    }
 
    a.polaroid2:hover img,
    a.polaroid2:focus img,
    a.polaroid2:active img{
        -webkit-transform: rotate(0deg) scale(1);
        -moz-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
 
    }
 
    .polaroid2 img {
        margin: 0 0 15px;
    }
 
    a img {
        border: none;
        display: block;
    }

 

¿Te ha gustado? Compártelo y Comenta! Puedes darme tu opinión o consultar tus dudas, de esta forma mantendremos la blogosfera viva.

    One Commentto Tips y trucos CSS: Códigos preformateados de estilos para tu web

    1. […] Trucos CSS http://soyautodidacta.com/2013/03/tips-y-trucos-css-codigos-preformateados-de-estilos-para-tu-web/ […]

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *

    © 2017 Soy Autodidacta | Design Theme by: D5 Creation | Powered by: WordPress