Étape 2: Codes CSS pour les icônes de métro de Styles CSS3
----------------------------------------------------------------------------------------------------------------------------------------------------------
{corps
background-color : #dbdbdb ;
-webkit-text-size-adjust : none ;
}
.demo {}
marge : 40px auto 0 ;
Largeur : 360px ;
couleur : #fff ;
}
icône-points-1 li {}
float : left ;
Largeur : 37px ;
hauteur : 37px ;
marge : 50px 10px 10px 0 ;
background-color: #00aec7 ;
Animation : moveF_Right 500ms facilité ;
transition : 200ms toutes linéaires ;
}
{moveF_Right}
{0 %
transformer : translateX(100%) ;
}
100 % {}
transformer : translateX(0%) ;
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
Les codes CSS suivants appartiennent aux icônes dans la première rangée
-------------------------------------------------------------------------------------------------------------------------------------------------------
icône-points-1 j’ai [classe ^ = « icône-»]
{position : relative ;
haut : 14px ;
gauche : 19px ;
afficher : inline-block ;
Largeur : 20px ;
hauteur : 20px ;
}
icône-points-1 j’ai [classe ^ = « icône-»]: avant,
icône-points-1 j’ai [classe ^ = « icône-»]: après {}
position : absolute ;
contenu: '' ;
Largeur: 0 ;
hauteur: 0 ;
}
icône-points-1 i.icon-vérifié : après {}
haut : 2px ;
gauche:-5px ;
Largeur: 0 ;
hauteur : 6px ;
box-shadow: 0 0 0 2px #fff ;
transformer : rotate(-45deg); / ** /
}
icône-points-1 i.icon-vérifié : avant {}
haut:-4px ;
gauche : 3px ;
Largeur: 0 ;
hauteur : 14px ;
box-shadow: 0 0 0 2px #fff ;
transformer : rotate(45deg) ;
}
icône-points-1 i.icon-fermeture : avant {}
haut : 4px ;
gauche:-8px ;
Largeur : 14px ;
box-shadow: 0 0 0 2px #fff ;
transformer : rotate(-45deg) ;
}
icône-points-1 i.icon-clôture : après {}
haut : 4px ;
gauche:-8px ;
Largeur : 14px ;
box-shadow: 0 0 0 2px #fff ;
transformer : rotate(45deg) ;
}
i.icon-place de l’icône-points-1: après {}
haut: 0 ;
gauche:-3px ;
Largeur : 5px ;
hauteur : 5px ;
box-shadow: 0 0 0 3px #fff ;
}
icône-points-1 i.icon-plus : avant {}
haut : 4px ;
gauche:-8px ;
Largeur : 14px ;
box-shadow: 0 0 0 2px #fff ;
transformer : rotate(90deg) ;
}
icône-points-1 i.icon-plus : après,
icône-points-1 i.icon-minus : après {}
haut : 4px ;
gauche:-8px ;
Largeur : 14px ;
box-shadow: 0 0 0 2px #fff ;
}
icône-points-1 i.icon-tour : après {}
haut : 4px ;
gauche: 0 ;
box-shadow: 0 0 0 6px 000,0 # 0 0 8px #fff ;
border-radius : 50 % ;
}
icône-points-1 i.icon-disque : après {}
haut : 4px ;
gauche: 0 ;
box-shadow: 0 0 0 3px #fff, 0 0 6px 0 #00aec7, 0 0 0 8px #fff ;
border-radius : 50 % ;
}
icône-points-1 li:hover {}
transformer : scale(2,2) ;
background-color: #005d6a ;
z-index: 5 ;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------
Ensuite, les icônes suivantes sont créées en utilisant
--------------------------------------------------------------------------------------------------------------------------------------------------------
icône-éléments-2 li {}
position : relative ;
float : left ;
Width : 100px ;
height : 100px ;
text-align : center ;
marge : 10px 10px 0 0 ;
background-color: #00aec7 ;
Animation : moveF_Right 500ms facilité ;
overflow : hidden ;
}
icône-éléments-2 li: avant,
icône-éléments-2 li: après {}
position : absolute ;
}
icône-éléments-2 li:hover : avant {}
haut: 0 ;
gauche: 0 ;
contenu: '' ;
Largeur : 100 % ;
hauteur : 100 % ;
background-color : rgba(255,255,255,.2) ;
z-index: 1 ;
}
icône-éléments-2 li:hover : après {}
haut : 20px ;
gauche: 0 ;
font-weight : bold ;
contenu : attr(data) ;
Largeur : 100 % ;
line-height : 30px ;
z-index: 2 ;
background-color: #005d6a ;
Animation : moveF_Right 500ms facilité ;
}
icône-éléments-2 j’ai [classe ^ = « icône-»]: avant {}
font-family: « icomoon » ;
parler : none ;
font-weight : normal ;
-webkit--lissage des polices : crénelées ;
font-size : 36px ;
line-height : 100px ;
font-style : normal ;
}
icône-chrome : avant {}
contenu: « \e0c6 » ;
}
icône-firefox : avant {}
contenu: « \e0c9 » ;
}
icône-IE: avant {}
contenu: « \e0ca » ;
}
icône-apple : avant {}
contenu: « \e0cc » ;
}
icône-opéra : avant {}
contenu: « \e0cf » ;
}
icône-android : avant {}
contenu: « \e0d1 » ;
}
icône-twitter : avant {}
contenu: « \e0a2 » ;
}
icône-dribbble : avant {}
contenu: « \e03d » ;
}
icône-facebook : avant {}
contenu: « \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 : normal ;
font-style : normal ;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------