CSS3 Metro stilikoner - handledning med gratis hämta tillstånd (2 / 2 steg)
Steg 2: CSS koder för CSS3 Metro stilar ikoner
----------------------------------------------------------------------------------------------------------------------------------------------------------
kroppen {
bakgrundsfärg: #dbdbdb;
-webkit-text-size-adjust: none;
}
.demo {
marginal: 40px auto 0;
bredd: 360px;
färg: #fff;
}
.icon-artiklar-1 li {
Float: left;
bredd: 37px;
höjd: 37px;
marginal: 10px 10px 50px 0;
bakgrundsfärg: #00aec7;
animering: moveF_Right 500ms lätthet;
övergången: alla 200ms linjär;
}
moveF_Right {
0% {
omforma: translateX(100%);
}
100% {
omforma: translateX(0%);
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
Följande CSS koder tillhör ikonerna i den första raden
-------------------------------------------------------------------------------------------------------------------------------------------------------
.icon-artiklar-1 jag [klass ^ = "ikon-"]
{position: släkting;
topp: 14px;
vänster: 19px;
Visa: inline-block;
bredd: 20px;
höjd: 20px;
}
.icon-artiklar-1 jag [klass ^ = "ikon-"]: före,
.icon-artiklar-1 jag [klass ^ = "ikon-"]: efter {
position: absolute;
innehåll: '';
bredd: 0;
höjd: 0;
}
.icon-artiklar-1 i.icon-kollade: efter {
topp: 2px;
vänster:-5px;
bredd: 0;
höjd: 6px;
Box-shadow: 0 0 0 2px #fff;
omforma: rotate(-45deg); / ** /
}
.icon-artiklar-1 i.icon-kollade: före {
topp:-4px;
vänster: 3px;
bredd: 0;
höjd: 14px;
Box-shadow: 0 0 0 2px #fff;
omforma: rotate(45deg);
}
.icon-artiklar-1 i.icon-close: före {
topp: 4px;
vänster:-8px;
bredd: 14px;
Box-shadow: 0 0 0 2px #fff;
omforma: rotate(-45deg);
}
.icon-artiklar-1 i.icon-close: efter {
topp: 4px;
vänster:-8px;
bredd: 14px;
Box-shadow: 0 0 0 2px #fff;
omforma: rotate(45deg);
}
.icon-artiklar-1 i.icon-square: efter {
topp: 0;
vänster:-3px;
bredd: 5px;
höjd: 5px;
Box-shadow: 0 0 0 3px #fff;
}
.icon-artiklar-1 i.icon-plus: före {
topp: 4px;
vänster:-8px;
bredd: 14px;
Box-shadow: 0 0 0 2px #fff;
omforma: rotate(90deg);
}
.icon-artiklar-1 i.icon-plus: efter,
.icon-artiklar-1 i.icon-minus: efter {
topp: 4px;
vänster:-8px;
bredd: 14px;
Box-shadow: 0 0 0 2px #fff;
}
.icon-artiklar-1 i.icon-runda: efter {
topp: 4px;
vänster: 0;
Box-shadow: 0 0 0 6px #000,0 0 0 8px #fff;
border-radius: 50%.
}
.icon-artiklar-1 i.icon-skiva: efter {
topp: 4px;
vänster: 0;
Box-shadow: 0 0 0 3px #fff, 0 0 0 6px #00aec7, 0 0 0 8px #fff;
border-radius: 50%.
}
.icon-artiklar-1 li:hover {
omforma: scale(2,2);
bakgrundsfärg: #005d6a;
z-index: 5;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
Därefter är följande ikoner skapade med hjälp av
--------------------------------------------------------------------------------------------------------------------------------------------------------
.icon-artiklar-2 li {
position: släkting;
Float: left;
bredd: 100px;
höjd: 100px;
text-align: center;
marginal: 10px 10px 0 0;
bakgrundsfärg: #00aec7;
animering: moveF_Right 500ms lätthet;
overflow: hidden;
}
.icon-artiklar-2 li: före,
.icon-artiklar-2 li: efter {
position: absolute;
}
.icon-artiklar-2 li:hover: före {
topp: 0;
vänster: 0;
innehåll: '';
bredd: 100%.
höjd: 100%.
bakgrundsfärg: rgba(255,255,255,.2);
z-index: 1;
}
.icon-artiklar-2 li:hover: efter {
topp: 20px;
vänster: 0;
font-weight: bold;
innehåll: attr(data);
bredd: 100%.
line-height: 30px;
z-index: 2;
bakgrundsfärg: #005d6a;
animering: moveF_Right 500ms lätthet;
}
.icon-artiklar-2 jag [klass ^ = "ikon-"]: före {
font-family: 'icomoon';
talar: none;
font-weight: normala;
-webkit-teckensnittsutjämning: kantutjämnade;
font-size: 36px;
line-height: 100px;
font-style: normala;
}
.icon-krom: före {
innehåll: '\e0c6';
}
.icon-firefox: före {
innehåll: '\e0c9';
}
.icon-IE: före {
innehåll: '\e0ca';
}
.icon-apple: före {
innehåll: '\e0cc';
}
.icon-opera: före {
innehåll: '\e0cf';
}
.icon-android: före {
innehåll: '\e0d1';
}
.icon-twitter: före {
innehåll: '\e0a2';
}
.icon-dribbble: före {
innehåll: '\e03d';
}
.icon-facebook: före {
innehåll: '\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'),
URL('fonts/icomoon.ttf') format('truetype');
font-weight: normala;
font-style: normala;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------