Paso 2: Los códigos CSS para los iconos de Metro de estilos CSS3
----------------------------------------------------------------------------------------------------------------------------------------------------------
{cuerpo}
color de fondo: #dbdbdb;
-webkit-texto-size-adjust: none;
}
{} .demo
margen: 40px auto 0;
width: 360px;
color: #fff;
}
.Icon-artículos-1 li {}
Float: left;
anchura: 37px;
altura: 37px;
margen: 50px de 10px 10px 0;
color de fondo: #00aec7;
animación: moveF_Right 500ms facilidad;
transición: 200ms todos lineal;
}
{moveF_Right}
{} 0%
transformar: translateX(100%);
}
100% {}
transformar: translateX(0%);
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
Los siguientes códigos CSS pertenecen a los iconos en la primera fila
-------------------------------------------------------------------------------------------------------------------------------------------------------
.Icon-artículos-1 i [clase ^ = 'icono-']
{posición: pariente;
parte superior: 14px;
izquierda: 19px;
Mostrar: inline-block;
anchura: 20px;
altura: 20px;
}
.Icon-artículos-1 i [clase ^ = 'icono-']: antes,
.Icon-artículos-1 i [clase ^ = 'icono-']: después de {}
posición: absoluto;
contenido: '';
anchura: 0;
altura: 0;
}
.Icon-artículos-1 i.icon-revisado: después de {}
Top: 2px;
izquierda:-5px;
anchura: 0;
altura: 6px;
Box-shadow: 0 0 2px 0 #fff;
transformar: rotate(-45deg); / ** /
}
.Icon-artículos-1 i.icon-revisado: antes de {}
parte superior:-4px;
izquierda: 3px;
anchura: 0;
altura: 14px;
Box-shadow: 0 0 2px 0 #fff;
transformar: rotate(45deg);
}
.Icon-artículos-1 i.icon-cierre: antes de {}
parte superior: 4px;
izquierda:-8px;
anchura: 14px;
Box-shadow: 0 0 2px 0 #fff;
transformar: rotate(-45deg);
}
.Icon-artículos-1 i.icon-cierre: después de {}
parte superior: 4px;
izquierda:-8px;
anchura: 14px;
Box-shadow: 0 0 2px 0 #fff;
transformar: rotate(45deg);
}
i.icon .icon-artículos-1-plaza: después de {}
Top: 0;
izquierda:-3px;
anchura: 5px;
altura: 5px;
Box-shadow: 0 0 0 3px #fff;
}
.Icon-artículos-1 i.icon-plus: antes de {}
parte superior: 4px;
izquierda:-8px;
anchura: 14px;
Box-shadow: 0 0 2px 0 #fff;
transformar: rotate(90deg);
}
.Icon-artículos-1 i.icon-plus: después,
.Icon-artículos-1 i.icon-menos: después de {}
parte superior: 4px;
izquierda:-8px;
anchura: 14px;
Box-shadow: 0 0 2px 0 #fff;
}
.Icon-artículos-1 i.icon-redondo: después de {}
parte superior: 4px;
izquierda: 0;
Box-shadow: 0 0 6px 0 000,0 # 0 8px 0 #fff;
radio frontera: 50%;
}
.Icon-artículos-1 i.icon-disco: después de {}
parte superior: 4px;
izquierda: 0;
Box-shadow: 0 0 0 3px #fff, 0 0 6px 0 #00aec7, 0 0 8px 0 #fff;
radio frontera: 50%;
}
li:hover .icon-artículos-1 {}
transformar: scale(2,2);
color de fondo: #005d6a;
z-index: 5;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
A continuación, los siguientes iconos se crean mediante
--------------------------------------------------------------------------------------------------------------------------------------------------------
.Icon-artículos-2 li {}
posición: pariente;
Float: left;
width: 100px;
altura: 100px;
texto-alinee: Centro;
margen: 10px 10px 0 0;
color de fondo: #00aec7;
animación: moveF_Right 500ms facilidad;
overflow: hidden;
}
.Icon-artículos-2 li: antes,
.Icon-artículos-2 li: después de {}
posición: absoluto;
}
.Icon-artículos-2 li:hover: antes de {}
Top: 0;
izquierda: 0;
contenido: '';
anchura: 100%;
altura: 100%;
color de fondo: rgba(255,255,255,.2);
z-index: 1;
}
.Icon-artículos-2 li:hover: después de {}
Top: 20px;
izquierda: 0;
font-weight: bold;
contenido: attr(data);
anchura: 100%;
line-height: 30px;
z-index: 2;
color de fondo: #005d6a;
animación: moveF_Right 500ms facilidad;
}
.Icon-artículos-2 me [clase ^ = 'icono-']: antes de {}
font-family: 'icomoon';
hablar: ninguno;
font-weight: normal;
suavizado de fuentes - webkit: alisado;
tamaño: 36px;
line-height: 100px;
estilo de fuente: normal;
}
.Icon-cromo: antes de {}
contenido: '\e0c6';
}
.Icon firefox: antes de {}
contenido: '\e0c9';
}
.Icon-IE: antes de {}
contenido: '\e0ca';
}
.Icon-apple: antes de {}
contenido: '\e0cc';
}
.Icon-ópera: antes de {}
contenido: '\e0cf';
}
.Icon-android: antes de {}
contenido: '\e0d1';
}
.Icon-twitter: antes de {}
contenido: '\e0a2';
}
.Icon dribbble: antes de {}
contenido: '\e03d';
}
.Icon-facebook: antes de {}
contenido: '\e049';
}
{
font-family: 'icomoon';
src:URL('fonts/icomoon.eot');
src:URL('fonts/icomoon.EOT?#iefix') format('embedded-opentype'),
URL('fonts/icomoon.svg#icomoon') format('svg'),
URL('fonts/icomoon.woff') format('woff'),
format('truetype') de URL('fonts/icomoon.ttf');
font-weight: normal;
estilo de fuente: normal;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------
