@URL d'importation (https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz) ; .transition (@time : .5s, @range : tous, @ease : atténuation) { -moz-transition : @range @time @ease ; -webkit-transition : @range @time @ease ; -o-transition : @range @time @ease ; transition : @range @time @ease ; } .transition-délai (@time: .4s) { -webkit-transition-delay : @time ; -moz-transition-délai : @heure ; -o-transition-délai : @heure ; -délai de transition : @time ; } .border-radius(@radius) { -moz-border-radius :@rayon ; -webkit-border-radius :@rayon ; border-radius : @rayon ; } .gradient (@coler1 : #fff, @coler2 : #ccc) { arrière-plan : @coler1 ; arrière-plan : -moz-linear-gradient(@coler1, @coler2) ; arrière-plan : -webkit-linear-gradient(@coler1, @coler2) ; arrière-plan : -o-linear-gradient(@coler1, @coler2) ; } .box-shadow(@dims:0 0 10px, @color:#000) { box-shadow : @dims @color ; // Opéra, FFX4 -moz-box-shadow :@dims @color ; // FFX3.5 -webkit-box-shadow :@dims @color ; //Safari/Chrome/WebKit .ie7 { filtre : e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); } } .inset(@dims:1px 1px 1px, @color:#fff) { box-shadow : @dims @color ; // Opéra, FFX4 -moz-box-shadow :@dims @color ; // FFX3.5 -webkit-box-shadow :@dims @color ; //Safari/Chrome/WebKit } corps { largeur : 100 % ; arrière-plan : url (http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) répéter #fefefe ; } .bouton { marge : 40px automatique ; taille de police : 72px ; famille de polices : 'Yanone Kaffeesatz', Arial, sans empattement ; décoration de texte : aucune ; texte-ombre : 1px 1px 0px #fff ; poids de la police : 400 ; couleur : #666 ; bordure : 1px solide #ccc ; curseur : pointeur ; rembourrage : 20px 70px 30px ; position : relative ; haut : 50px ; arrière-plan : #eee ; largeur : 300 pixels ; bloc de visualisation; aligner le texte : centrer ; .encart ; .border-radius(5px); .transition; &:hover{ couleur : #333 ; arrière-plan : #eeffff ; .transition;} } .modalbg { position : fixe ; famille de polices : Arial, Helvetica, sans empattement ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : rgba(0,0,0,0) ; indice z : 99999 ; .transition(2s); .transition-delay(.2s); bloc de visualisation; événements de pointeur : aucun ; .dialogue { largeur : 400 pixels ; position : relative ; haut : -1000px ; marge : 10 % automatique ; rembourrage : 5px 20px 13px 20px ; .border-radius(10px); .pente; .boîte ombre; } } .modalbg :cible { bloc de visualisation; événements de pointeur : auto ; arrière-plan : rgba(4, 10 ,30, .8); .transition(); .dialogue { haut : -20px ; .transition(.8s); .transition-délai ; } } .fermer { arrière-plan : #606061 ; couleur : #FFFFFF ; hauteur de ligne : 25 px ; position : absolue ; droite : -12px ; aligner le texte : centrer ; haut : -10px ; largeur : 24px ; décoration de texte : aucune ; font-weight : gras ; -webkit-bordure-rayon : 12 px ; -moz-bordure-rayon : 12 px ; rayon de bordure : 12 px ; .boîte ombre; .transition; .transition-delay(.2s); &: survolez { fond : #00d9ff ; .transition; } } .petits caractères { style de police : italique ; taille de police : 10 px ; couleur : #646 ; } une { couleur : #333 ; décoration de texte : aucune ; } //HTML Ouvrez-le!