Trucos CSS (Parte 4)

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Asignar transparencia – opacidad en todos los navegadores

El siguiente código asigna transparencia u opacidad a elementos del diseño con la gran ventaja de funcionar en todos los navegadores:

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Con el siguiente código conseguiremos añadir un estilo especial para diferentes enlaces externos de nuestra web. Una de las ideas más extendidas es la de añadir un icono al lado de los enlaces para marcar que ese enlace nos sacará de la página actual (demostración)

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Estilo del enlace dependiendo de una palabra predefinida

Similar al código anterior, nos permite decorar los enlaces dependiendo del texto que contenga la URL con un determinado color y diseño (demostración)

a[href*="zonaw"] {
color: #08E303;
}

Tabs animados solo utilizando CSS

El siguiente código nos permite construir un menú animado con una sección de tabs o pestañas, sin necesidad de recurrir a utilizar jQuery en nuestra página (demostración)

Código para pegar donde deseas que aparezcan las pestañas:

<div class="tabs">

 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1">Recursos</label>

 <div class="content">
 <p>Contenido para el tab Recursos</p>
 </div>
 </div>

 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2">Para</label>

 <div class="content">
 <p>Contenido para Para</p>

 <img src="http://blog.adpv.com/wp-content/themes/Zengi/
images/logo_negro_ZonaW.png">
 </div>
 </div>

 <div class="tab">
 <input type="radio" id="tab-3" name="tab-group-1">
 <label for="tab-3">Webmasters</label>

 <div class="content">
 <p>Contenido para Webmasters</p>

 <img src="http://blog.adpv.com/wp-content/themes/Zengi/
images/logo_negro_ZonaW.png">
 </div>
 </div>

</div>

Código para pegar en nuestra hoja de estilo CSS:

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Sé la primera persona en comentar

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.