/ * _____ _ _ _ _ | _ _ | El | El | El | El | El | El | El | El | El | El | El | | __ __ _ | | _ ___ | | _ ___ _ __ ___ __ _ | | _ ___ ___ ___ | El | El | '_ \ / _` | __ / _ \ | __ / _ \ | '_ `_ \ / _` | __ / _ \ / _ \ / __ | _ | | _ | El | El | El | (_ | | || __ / | || (_) | | | | | | (_ | | || (_) | __ / \ __ \ \ ___ / | _ | | _ | \ __, _ | \ __ \ ___ | \ __ \ ___ / | _ | | _ | | _ | \ __, _ | \ __ \ ___ / \ ___ || ___ / Oh bien, bienvenido a la hoja de estilo de los sueños. Lo tiene todo. Clases , ID's, comentarios ... todo :) ¡Disfruta responsablemente! @Ihatetomatoes * / / * ============================= ============================================= Indicador de Chrome Frame == ================================================== ====================== * / .chromeframe {margen: 0.2em 0; fondo: #ccc; color: # 000; relleno: 0.2em 0;} / * ================================================ ========================== Autor ' s estilos personalizados =============================================== =========================== * / p {line-height: 1.33em; color: #CCC! importante; } h1 {color: #fff! importante; } # loader-wrapper {posición: fijo; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; índice z: 1000; } #loader {display: block; posición: relativa; izquierda: 50%; arriba: 50%; ancho: 150 px; altura: 150 px; margen: -75px 0 0 -75px; radio de borde: 50%; borde: 3px sólido transparente; color del borde superior: # 3498db; -webkit-animation: spin 2s lineal infinito; / * Chrome, Opera 15+, Safari 5+ * / animation: spin 2s linear infinite; / * Chrome, Firefox 16+, IE 10+, Opera * / z-index: 1001; } #loader: before {content: ""; posición: absoluta; arriba: 5px; izquierda: 5px; derecha: 5px; abajo: 5px; radio de borde: 50%; borde: 3px sólido transparente; color del borde superior: # 99ccff; / * # e74c3c -webkit-animation: girar 3s lineal infinito; / * Chrome, Opera 15+, Safari 5+ * / animation: spin 3s linear infinite; / * Chrome, Firefox 16+, IE 10+, Opera * /} #loader: después de {content: ""; posición: absoluta; arriba: 15px; izquierda: 15 px; derecha: 15px; abajo: 15px; radio de borde: 50%; borde: 3px sólido transparente; border-top-color: # 99ffff; / * # f9c922 -webkit-animation: spin 1.5s linear infinite; / * Chrome, Opera 15+, Safari 5+ * / animation: spin 1.5s linear infinite; / * Chrome, Firefox 16+, IE 10+, Opera * /} @ -webkit-keyframes spin {0% {-webkit-transform: rotate (0deg); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: rotar (0deg); / * IE 9 * / transform: rotar (0deg); / * Firefox 16+, IE 10+, Opera * /} 100% {-webkit-transform: rotate (360deg); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: rotar (360deg); / * IE 9 * / transform: rotar (360 grados); / * Firefox 16+, IE 10+, Opera * /}} @keyframes spin {0% {-webkit-transform: rotate (0deg); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: rotar (0deg); / * IE 9 * / transform: rotar (0deg); / * Firefox 16+, IE 10+, Opera * /} 100% {-webkit-transform: rotate (360deg); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: rotar (360deg); / * IE 9 * / transform: rotar (360 grados); / * Firefox 16+, IE 10+, Opera * /}} # loader-wrapper .loader-section {posición: fijo; arriba: 0; ancho: 51%; altura: 100%; fondo: # 222222; índice z: 1000; -webkit-transform: translateX (0); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: translateX (0); / * IE 9 * / transform: translateX (0); / * Firefox 16+, IE 10+, Opera * /} # loader-wrapper .loader-section.section-left {left: 0; } # loader-wrapper .loader-section.section-right {right: 0; } / * Cargado * /. cargado # loader-wrapper .loader-section.section-left {-webkit-transform: translateX (-100%); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: translateX (-100%); / * IE 9 * / transform: translateX (-100%); / * Firefox 16+, IE 10+, Opera * / -webkit-transition: todos 0.7s 0.3s cubic-bezier (0.645, 0.045, 0.355, 1.000); transición: todos 0.7s 0.3s cubic-bezier (0.645, 0.045, 0.355, 1.000); } .loaded # loader-wrapper .loader-section.section-right {-webkit-transform: translateX (100%); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: translateX (100%); / * IE 9 * / transform: translateX (100%); / * Firefox 16+, IE 10+, Opera * / -webkit-transition: todos 0.7s 0.3s cubic-bezier (0.645, 0.045, 0.355, 1.000); transición: todos 0.7s 0.3s cubic-bezier (0.645, 0.045, 0.355, 1.000); } .loaded #loader {opacity: 0; -webkit-transition: todos 0.3s facilidad de salida; transición: todos 0. 3s facilidad de salida; } .loaded # loader-wrapper {visibilidad: oculto; -webkit-transform: translateY (-100%); / * Chrome, Opera 15+, Safari 3.1+ * / -ms-transform: translateY (-100%); / * IE 9 * / transform: translateY (-100%); / * Firefox 16+, IE 10+, Opera * / -webkit-transition: todos 0.3s 1s facilidad de salida; transición: todos los 0.3s 1s facilitan; } / * JavaScript desactivado * / .no-js # loader-wrapper {display: none; } .no-js h1 {color: # 222222; } #content {margin: 0 auto; relleno inferior: 50px; ancho: 80%; ancho máximo: 978px; } / * =============================================== =========================== Clases de ayuda ===================== ================================================== === * / / * * Reemplazo de imagen * / .ir {background-color: transparent; borde: 0; desbordamiento: oculto; / * IE 6/7 fallback * / * text-indent: -9999px; } .ir: antes de {content: ""; monitor: bloquear; ancho: 0; altura: 150%; } / * * Esconderse de los lectores de pantalla y navegadores: h5bp.com/u * / .hidden {display: none! Important; visibilidad: oculta; } / * * Ocultar solo visualmente, pero tenerlo disponible para lectores de pantalla: h5bp.com/v * / .visuallyhidden {border: 0; clip: rect (0 0 0 0); altura: 1px; margen: -1px; desbordamiento: oculto; relleno: 0; posición: absoluta; ancho: 1px; } / * * Extiende la clase .visuallyhidden para permitir que el elemento sea enfocable * cuando se navega a través del teclado: h5bp.com/p * / .visuallyhidden.focusable: active, .visuallyhidden.focusable: focus {clip: auto; altura: auto; margen: 0; desbordamiento: visible; posición: estática; ancho: auto; } / * * Ocultar visualmente y de los lectores de pantalla, pero mantener el diseño * / .invisible {visibilidad: oculto; } / * * Clearfix: contiene flotantes * * Para navegadores modernos * 1. El contenido del espacio es una forma de evitar un error de Opera cuando el atributo * `contenteditable` se incluye en cualquier otro lugar del documento. * De lo contrario, hace que aparezca espacio en la parte superior e inferior de los elementos * que reciben la clase `clearfix`. * 2. El uso de `table` en lugar de` block` solo es necesario si se usa * `: before` para contener los márgenes superiores de los elementos secundarios. * / .clearfix: before, .clearfix: after {content: ""; / * 1 * / display: tabla; / * 2 * /} .clearfix: after {clear: both; } / * * Solo para IE 6/7 * Incluya esta regla para activar hasLayout y contener flotantes. * / .clearfix {* zoom: 1; } / * =============================================== =========================== EJEMPLO Consultas de medios para diseño receptivo. Estos ejemplos anulan los estilos primarios ('móvil primero'). Modificar según lo requiera el contenido. ================================================== ======================== * / @media solo pantalla y (min-width: 35em) {/ * Ajustes de estilo para viewports que cumplen con la condición * /} @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (resolución mínima: 120dpi) {/ * Ajustes de estilo para dispositivos de alta resolución * /} / * ========================================= ================================= Estilos de impresión. En línea para evitar la conexión HTTP requerida: h5bp.com/r ====================================== ==================================== * / @media print {* {background: transparent! important; color: # 000! importante; / * El negro imprime más rápido: h5bp.com/s * / box-shadow: none! Important; sombra de texto: ninguno! importante; } a, a: visitado {text-decoration: underline; } a [href]: después de {content: "(" attr (href) " } / * * No mostrar enlaces para imágenes o javascript / enlaces internos * / .ir a: after, a [href ^ = "javascript:"]: after, a [href ^ = "#"]: after { contenido: ""; } pre, blockquote {border: 1px solid # 999; salto de página dentro: evitar; } thead {display: table-header-group; / * h5bp.com/t * /} tr, img {page-break-inside: evitar; } img {max-width: 100%! important; } @page {margen: 0,5 cm; } p, h2, h3 {huérfanos: 3; viudas: 3; } h2, h3 {salto de página después: evitar; }} / * Ok, así que has llegado hasta aquí, eso significa que estás muy interesado en mi código. De todos modos, realmente no me importa. Esta es una excelente manera de aprender, así que realmente estás haciendo lo correcto :) Sígueme @ihatetomatoes * / } / * * No mostrar enlaces para imágenes o javascript / enlaces internos * / .ir a: after, a [href ^ = "javascript:"]: after, a [href ^ = "#"]: after { contenido: ""; } pre, blockquote {border: 1px solid # 999; salto de página dentro: evitar; } thead {display: table-header-group; / * h5bp.com/t * /} tr, img {page-break-inside: evitar; } img {max-width: 100%! important; } @page {margen: 0,5 cm; } p, h2, h3 {huérfanos: 3; viudas: 3; } h2, h3 {salto de página después: evitar; }} / * Ok, así que has llegado hasta aquí, eso significa que estás muy interesado en mi código. De todos modos, realmente no me importa. Esta es una excelente manera de aprender, así que realmente estás haciendo lo correcto :) Sígueme @ihatetomatoes * / }} / * Ok, así que has llegado hasta aquí, eso significa que estás muy interesado en mi código. De todos modos, realmente no me importa. Esta es una excelente manera de aprender, así que realmente estás haciendo lo correcto :) Sígueme @ihatetomatoes * / }} / * Ok, así que has llegado hasta aquí, eso significa que estás muy interesado en mi código. De todos modos, realmente no me importa. Esta es una excelente manera de aprender, así que realmente estás haciendo lo correcto :) Sígueme @ihatetomatoes * /