menu.css
À propos du fichier
- Type de fichier
- Fichier CSS de 12 Ko (text/plain)
- Confidentialité
- Fichier public, envoyé le 7 novembre 2014 à 23:38, depuis l'adresse IP 90.45.x.x (France)
- Sécurité
- Ne contient aucun Virus ou Malware connus - Dernière vérification: 25 heures
- Statistiques
- La présente page de téléchargement a été vue 1258 fois depuis l'envoi du fichier
- Page de téléchargement
-
Aperçu du fichier
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Source Sans Pro", sans-serif;
color: #2c3e51;
background-color: #2c3e51;
}
a {
color: #e84a64;
text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
header {
position: relative;
height: 200px;
background: white;
text-align: center;
margin-bottom: 1em;
padding-top: 3em;
}
header #cd-logo {
margin-bottom: 3em;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
@media only screen and (min-width: 768px) {
header {
margin-bottom: 4em;
}
}
@media only screen and (min-width: 1170px) {
header {
height: 400px;
padding-top: 11em;
}
header #cd-logo {
position: absolute;
top: 40px;
left: 5%;
}
header h1 {
font-size: 40px;
font-size: 2.5rem;
font-weight: 300;
}
}
#cd-nav ul {
/* mobile first */
position: fixed;
width: 90%;
max-width: 400px;
right: 5%;
bottom: 20px;
border-radius: 0.25em;
box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
background: white;
visibility: hidden;
/* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
overflow: hidden;
z-index: 1;
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
}
#cd-nav ul.is-visible li:nth-child(1) {
/* list items animation */
-webkit-animation: cd-slide-in 0.2s;
-moz-animation: cd-slide-in 0.2s;
animation: cd-slide-in 0.2s;
}
#cd-nav ul.is-visible li:nth-child(2) {
-webkit-animation: cd-slide-in 0.3s;
-moz-animation: cd-slide-in 0.3s;
animation: cd-slide-in 0.3s;
}
#cd-nav ul.is-visible li:nth-child(3) {
-webkit-animation: cd-slide-in 0.4s;
-moz-animation: cd-slide-in 0.4s;
animation: cd-slide-in 0.4s;
}
#cd-nav ul.is-visible li:nth-child(4) {
-webkit-animation: cd-slide-in 0.5s;
-moz-animation: cd-slide-in 0.5s;
animation: cd-slide-in 0.5s;
}
#cd-nav ul.is-visible li:nth-child(5) {
-webkit-animation: cd-slide-in 0.6s;
-moz-animation: cd-slide-in 0.6s;
animation: cd-slide-in 0.6s;
}
#cd-nav li a {
display: block;
padding: 1.6em;
border-bottom: 1px solid #eff2f6;
}
#cd-nav li:last-child a {
border-bottom: none;
}
@media only screen and (min-width: 1170px) {
#cd-nav ul {
/* the navigation moves to the top */
position: absolute;
width: auto;
max-width: none;
bottom: auto;
top: 36px;
background: transparent;
visibility: visible;
box-shadow: none;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
}
#cd-nav li {
display: inline-block;
}
#cd-nav li a {
opacity: 1;
padding: .4em;
margin-left: 1.6em;
border-bottom: none;
}
#cd-nav li a:hover {
color: #00bd9b;
}
#cd-nav.is-fixed ul {
/* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
position: fixed;
width: 90%;
max-width: 400px;
bottom: 20px;
top: auto;
background: white;
visibility: hidden;
box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
#cd-nav.is-fixed ul li {
display: block;
}
#cd-nav.is-fixed ul li a {
padding: 1.6em;
margin-left: 0;
border-bottom: 1px solid #eff2f6;
}
#cd-nav ul.has-transitions {
/* this class is used to bring back transitions when the navigation moves at the bottom right */
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul.is-visible {
/* this class is used to bring back the navigation animation - as on touch devices */
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
}
#cd-nav ul.is-hidden {
/* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
}
.cd-nav-trigger {
position: fixed;
bottom: 20px;
right: 5%;
width: 44px;
height: 44px;
background: white;
border-radius: 0.25em;
box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
z-index: 2;
}
.cd-nav-trigger span {
/* the span element is used to create the menu icon */
position: absolute;
display: block;
width: 20px;
height: 2px;
background: #e84a64;
top: 50%;
margin-top: -1px;
left: 50%;
margin-left: -10px;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
content: '';
position: absolute;
left: 0;
background: inherit;
width: 100%;
height: 100%;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s, background 0s;
-moz-transition: -moz-transform 0.3s, background 0s;
transition: transform 0.3s, background 0s;
}
.cd-nav-trigger span::before {
top: -6px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.cd-nav-trigger span::after {
bottom: -6px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.cd-nav-trigger.menu-is-open {
box-shadow: none;
}
.cd-nav-trigger.menu-is-open span {
background: rgba(232, 74, 100, 0);
}
.cd-nav-trigger.menu-is-open span::before, .cd-nav-trigger.menu-is-open span::after {
background: #e84a64;
}
.cd-nav-trigger.menu-is-open span::before {
top: 0;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-nav-trigger.menu-is-open span::after {
bottom: 0;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
@media only screen and (min-width: 1170px) {
.cd-nav-trigger {
/* the the menu triger is hidden by default on desktop devices */
visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
.is-fixed .cd-nav-trigger {
visibility: visible;
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation: cd-bounce-in 0.3s linear;
-moz-animation: cd-bounce-in 0.3s linear;
animation: cd-bounce-in 0.3s linear;
}
}
#cd-gallery-items li {
margin-bottom: 1.5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
}
#cd-gallery-items li img {
width: 100%;
display: block;
border-radius: 0.25em;
}
@media only screen and (min-width: 768px) {
#cd-gallery-items li {
width: 48%;
float: left;
margin-bottom: 2em;
margin-right: 4%;
}
#cd-gallery-items li:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (min-width: 1170px) {
#cd-gallery-items li {
width: 31%;
float: left;
margin-bottom: 2.5em;
margin-right: 3.5%;
}
#cd-gallery-items li:nth-child(2n) {
margin-right: 3.5%;
}
#cd-gallery-items li:nth-child(3n) {
margin-right: 0;
}
}
@-webkit-keyframes cd-slide-in {
0% {
-webkit-transform: translateX(100px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes cd-slide-in {
0% {
-moz-transform: translateX(100px);
}
100% {
-moz-transform: translateY(0);
}
}
@keyframes cd-slide-in {
0% {
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes cd-bounce-in {
0% {
-webkit-transform: scale(0);
}
60% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-in {
0% {
-moz-transform: scale(0);
}
60% {
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-in {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
60% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
Partager le fichier menu.css sur le Web et les réseaux sociaux:
Télécharger le fichier menu.css
