Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Estos snippets de código CSS te facilitan la vida

Estos snippets de código CSS te facilitan la vida 21.OCT.15

Alvaro José Rios Ch
Fundador WebBizarro

Cuando escribimos código CSS hay momentos en los que tenemos que recurrir a algunos trucos que nos permiten que nuestro código funcione en la mayoría de los navegadores, por eso veamos algunos snippets que nos facilitan la vida.

Transparencia via CSS

selector {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

Box Shadow

Outer

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

Inner

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

Min Height

Esta propiedad puede tener problemas en Internet Explorer por eso este snippet es muy útil.

#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

Importar tipografías con font-face

@font-face {
    font-family: GraublauWeb;
    src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
 
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}

h1 {
    font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

Centrar un div con width desconocido

.content {
    margin: 0 auto 8px;
    display: table;
    }
 
.content div {
    display: table-cell;
    }
 
<!--[if IE]>
.content {
    display: block;
    text-align: center;
    }
.content div {
    display: inline;
    zoom: 1;
}
<![endif]-->

Estilos para links dependiendo del tipo

/* external links */
a[href^="http://"]
{
    padding-right: 13px;
    background: url(external.gif) no-repeat center right;
}
 
/* emails */
a[href^="mailto:"]
{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]
{
    padding-right: 18px;
    background: url(acrobat.png) no-repeat center right;
}

Cambiar el estilo de la selección de texto

::selection
{
    color: white;
    background-color: red;
}
 
::-moz-selection  /* Firefox needs an extra attention for this */
{
    color: white;
    background-color: red;
}