From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/--_star_/index.html | 106 + files/es/web/css/-moz-binding/index.html | 110 + .../web/css/-moz-border-bottom-colors/index.html | 136 + .../es/web/css/-moz-border-left-colors/index.html | 144 + .../es/web/css/-moz-border-right-colors/index.html | 136 + files/es/web/css/-moz-border-top-colors/index.html | 140 + files/es/web/css/-moz-box-flex/index.html | 155 + files/es/web/css/-moz-box-ordinal-group/index.html | 66 + files/es/web/css/-moz-box-pack/index.html | 184 ++ files/es/web/css/-moz-cell/index.html | 10 + .../es/web/css/-moz-context-properties/index.html | 79 + files/es/web/css/-moz-float-edge/index.html | 78 + .../web/css/-moz-font-language-override/index.html | 6 + .../css/-moz-force-broken-image-icon/index.html | 56 + files/es/web/css/-moz-image-rect/index.html | 143 + files/es/web/css/-moz-image-region/index.html | 37 + files/es/web/css/-moz-orient/index.html | 156 + .../css/-moz-outline-radius-bottomleft/index.html | 19 + .../css/-moz-outline-radius-bottomright/index.html | 21 + .../web/css/-moz-outline-radius-topleft/index.html | 19 + .../css/-moz-outline-radius-topright/index.html | 19 + files/es/web/css/-moz-outline-radius/index.html | 158 + files/es/web/css/-moz-stack-sizing/index.html | 57 + files/es/web/css/-moz-text-blink/index.html | 95 + files/es/web/css/-moz-user-focus/index.html | 113 + files/es/web/css/-moz-user-input/index.html | 64 + files/es/web/css/-moz-user-modify/index.html | 132 + files/es/web/css/-moz-window-shadow/index.html | 52 + files/es/web/css/-ms-accelerator/index.html | 75 + files/es/web/css/-ms-overflow-style/index.html | 40 + files/es/web/css/-webkit-border-before/index.html | 137 + files/es/web/css/-webkit-box-reflect/index.html | 116 + .../es/web/css/-webkit-mask-attachment/index.html | 95 + files/es/web/css/-webkit-mask-box-image/index.html | 130 + files/es/web/css/-webkit-mask-clip/index.html | 101 + files/es/web/css/-webkit-mask-composite/index.html | 121 + files/es/web/css/-webkit-mask-image/index.html | 156 + files/es/web/css/-webkit-mask-origin/index.html | 100 + .../es/web/css/-webkit-mask-position-x/index.html | 132 + .../es/web/css/-webkit-mask-position-y/index.html | 132 + files/es/web/css/-webkit-mask-position/index.html | 118 + files/es/web/css/-webkit-mask-repeat-x/index.html | 136 + files/es/web/css/-webkit-mask-repeat-y/index.html | 137 + files/es/web/css/-webkit-mask-repeat/index.html | 132 + files/es/web/css/-webkit-mask/index.html | 124 + .../web/css/-webkit-overflow-scrolling/index.html | 85 + .../web/css/-webkit-print-color-adjust/index.html | 102 + .../web/css/-webkit-tap-highlight-color/index.html | 43 + .../es/web/css/-webkit-text-fill-color/index.html | 100 + .../web/css/-webkit-text-stroke-color/index.html | 129 + .../web/css/-webkit-text-stroke-width/index.html | 118 + files/es/web/css/-webkit-text-stroke/index.html | 142 + files/es/web/css/-webkit-touch-callout/index.html | 106 + files/es/web/css/@charset/index.html | 123 + .../css/@counter-style/additive-symbols/index.html | 129 + files/es/web/css/@counter-style/index.html | 200 ++ files/es/web/css/@counter-style/symbols/index.html | 144 + files/es/web/css/@document/index.html | 82 + .../es/web/css/@font-face/font-display/index.html | 96 + files/es/web/css/@font-face/font-family/index.html | 116 + files/es/web/css/@font-face/font-style/index.html | 134 + files/es/web/css/@font-face/index.html | 162 + files/es/web/css/@font-face/src/index.html | 245 ++ .../es/web/css/@font-face/unicode-range/index.html | 86 + files/es/web/css/@font-feature-values/index.html | 134 + files/es/web/css/@import/index.html | 118 + files/es/web/css/@keyframes/index.html | 178 ++ files/es/web/css/@media/altura/index.html | 82 + files/es/web/css/@media/color/index.html | 80 + files/es/web/css/@media/display-mode/index.html | 90 + files/es/web/css/@media/hover/index.html | 70 + files/es/web/css/@media/index.html | 360 +++ files/es/web/css/@media/pointer/index.html | 101 + .../web/css/@media/resoluci\303\263n/index.html" | 88 + files/es/web/css/@media/width/index.html | 124 + files/es/web/css/@namespace/index.html | 71 + files/es/web/css/@page/index.html | 129 + files/es/web/css/@supports/index.html | 138 + files/es/web/css/@viewport/height/index.html | 125 + files/es/web/css/@viewport/index.html | 159 + files/es/web/css/@viewport/width/index.html | 122 + files/es/web/css/_colon_-moz-broken/index.html | 25 + files/es/web/css/_colon_-moz-drag-over/index.html | 42 + files/es/web/css/_colon_-moz-first-node/index.html | 48 + files/es/web/css/_colon_-moz-focusring/index.html | 90 + .../_colon_-moz-full-screen-ancestor/index.html | 83 + .../web/css/_colon_-moz-handler-blocked/index.html | 23 + .../web/css/_colon_-moz-handler-crashed/index.html | 23 + .../css/_colon_-moz-handler-disabled/index.html | 23 + files/es/web/css/_colon_-moz-last-node/index.html | 48 + .../es/web/css/_colon_-moz-list-bullet/index.html | 46 + .../es/web/css/_colon_-moz-list-number/index.html | 45 + files/es/web/css/_colon_-moz-loading/index.html | 19 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 28 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 33 + .../css/_colon_-moz-lwtheme-brighttext/index.html | 24 + .../css/_colon_-moz-lwtheme-darktext/index.html | 25 + files/es/web/css/_colon_-moz-lwtheme/index.html | 26 + .../web/css/_colon_-moz-only-whitespace/index.html | 36 + .../es/web/css/_colon_-moz-placeholder/index.html | 122 + .../web/css/_colon_-moz-submit-invalid/index.html | 76 + files/es/web/css/_colon_-moz-suppressed/index.html | 19 + .../index.html | 19 + .../index.html | 25 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 113 + .../_colon_-moz-tree-cell-text(hover)/index.html | 19 + .../web/css/_colon_-moz-tree-cell-text/index.html | 30 + files/es/web/css/_colon_-moz-tree-cell/index.html | 38 + .../es/web/css/_colon_-moz-tree-column/index.html | 29 + .../css/_colon_-moz-tree-drop-feedback/index.html | 29 + files/es/web/css/_colon_-moz-tree-image/index.html | 34 + .../css/_colon_-moz-tree-indentation/index.html | 27 + files/es/web/css/_colon_-moz-tree-line/index.html | 28 + .../css/_colon_-moz-tree-progressmeter/index.html | 28 + .../web/css/_colon_-moz-tree-row(hover)/index.html | 19 + files/es/web/css/_colon_-moz-tree-row/index.html | 50 + .../web/css/_colon_-moz-tree-separator/index.html | 29 + .../es/web/css/_colon_-moz-tree-twisty/index.html | 33 + files/es/web/css/_colon_-moz-ui-invalid/index.html | 94 + files/es/web/css/_colon_-moz-ui-valid/index.html | 94 + .../web/css/_colon_-moz-user-disabled/index.html | 18 + .../web/css/_colon_-moz-window-inactive/index.html | 99 + .../css/_colon_-ms-input-placeholder/index.html | 111 + .../es/web/css/_colon_-webkit-autofill/index.html | 80 + files/es/web/css/_colon_active/index.html | 97 + files/es/web/css/_colon_any-link/index.html | 78 + files/es/web/css/_colon_any/index.html | 186 ++ files/es/web/css/_colon_blank/index.html | 54 + files/es/web/css/_colon_checked/index.html | 197 ++ files/es/web/css/_colon_default/index.html | 99 + files/es/web/css/_colon_defined/index.html | 115 + files/es/web/css/_colon_dir/index.html | 108 + files/es/web/css/_colon_disabled/index.html | 127 + files/es/web/css/_colon_empty/index.html | 106 + files/es/web/css/_colon_enabled/index.html | 103 + files/es/web/css/_colon_first-child/index.html | 133 + files/es/web/css/_colon_first-of-type/index.html | 114 + files/es/web/css/_colon_first/index.html | 97 + files/es/web/css/_colon_focus-visible/index.html | 128 + files/es/web/css/_colon_focus-within/index.html | 96 + files/es/web/css/_colon_focus/index.html | 114 + files/es/web/css/_colon_fullscreen/index.html | 170 ++ files/es/web/css/_colon_has/index.html | 98 + files/es/web/css/_colon_host/index.html | 95 + files/es/web/css/_colon_hover/index.html | 105 + files/es/web/css/_colon_in-range/index.html | 115 + files/es/web/css/_colon_indeterminate/index.html | 134 + files/es/web/css/_colon_invalid/index.html | 149 + files/es/web/css/_colon_lang/index.html | 101 + files/es/web/css/_colon_last-child/index.html | 127 + files/es/web/css/_colon_last-of-type/index.html | 113 + files/es/web/css/_colon_left/index.html | 80 + files/es/web/css/_colon_link/index.html | 105 + files/es/web/css/_colon_not()/index.html | 112 + files/es/web/css/_colon_nth-child/index.html | 188 ++ files/es/web/css/_colon_nth-last-child/index.html | 197 ++ .../es/web/css/_colon_nth-last-of-type/index.html | 97 + files/es/web/css/_colon_nth-of-type/index.html | 107 + files/es/web/css/_colon_only-child/index.html | 136 + files/es/web/css/_colon_only-of-type/index.html | 97 + files/es/web/css/_colon_optional/index.html | 91 + files/es/web/css/_colon_out-of-range/index.html | 116 + .../es/web/css/_colon_placeholder-shown/index.html | 97 + files/es/web/css/_colon_read-only/index.html | 100 + files/es/web/css/_colon_read-write/index.html | 99 + files/es/web/css/_colon_required/index.html | 91 + files/es/web/css/_colon_right/index.html | 78 + files/es/web/css/_colon_root/index.html | 64 + files/es/web/css/_colon_target/index.html | 214 ++ files/es/web/css/_colon_valid/index.html | 83 + files/es/web/css/_colon_visited/index.html | 120 + .../css/_doublecolon_-moz-color-swatch/index.html | 56 + .../css/_doublecolon_-moz-page-sequence/index.html | 82 + files/es/web/css/_doublecolon_-moz-page/index.html | 27 + .../css/_doublecolon_-moz-placeholder/index.html | 108 + .../css/_doublecolon_-moz-progress-bar/index.html | 55 + .../_doublecolon_-moz-range-progress/index.html | 115 + .../css/_doublecolon_-moz-range-thumb/index.html | 119 + .../css/_doublecolon_-moz-range-track/index.html | 119 + .../index.html | 79 + .../es/web/css/_doublecolon_-ms-browse/index.html | 97 + files/es/web/css/_doublecolon_-ms-check/index.html | 114 + files/es/web/css/_doublecolon_-ms-clear/index.html | 113 + .../es/web/css/_doublecolon_-ms-expand/index.html | 25 + .../web/css/_doublecolon_-ms-fill-lower/index.html | 88 + .../web/css/_doublecolon_-ms-fill-upper/index.html | 88 + files/es/web/css/_doublecolon_-ms-fill/index.html | 106 + .../es/web/css/_doublecolon_-ms-reveal/index.html | 72 + files/es/web/css/_doublecolon_-ms-thumb/index.html | 44 + .../css/_doublecolon_-ms-ticks-after/index.html | 84 + files/es/web/css/_doublecolon_-ms-track/index.html | 48 + files/es/web/css/_doublecolon_-ms-value/index.html | 31 + .../index.html | 100 + .../index.html | 96 + .../index.html | 85 + .../css/_doublecolon_-webkit-meter-bar/index.html | 103 + .../index.html | 91 + .../index.html | 106 + .../index.html | 103 + .../index.html | 96 + .../index.html | 96 + .../_doublecolon_-webkit-progress-bar/index.html | 112 + .../index.html | 112 + .../_doublecolon_-webkit-progress-value/index.html | 111 + .../css/_doublecolon_-webkit-scrollbar/index.html | 37 + .../index.html | 40 + .../_doublecolon_-webkit-slider-thumb/index.html | 38 + files/es/web/css/_doublecolon_after/index.html | 182 ++ files/es/web/css/_doublecolon_backdrop/index.html | 132 + files/es/web/css/_doublecolon_before/index.html | 231 ++ files/es/web/css/_doublecolon_cue/index.html | 113 + .../web/css/_doublecolon_first-letter/index.html | 135 + .../es/web/css/_doublecolon_first-line/index.html | 122 + files/es/web/css/_doublecolon_marker/index.html | 91 + .../es/web/css/_doublecolon_placeholder/index.html | 152 + files/es/web/css/_doublecolon_selection/index.html | 94 + .../web/css/_doublecolon_spelling-error/index.html | 70 + files/es/web/css/actual_value/index.html | 36 + files/es/web/css/align-content/index.html | 261 ++ files/es/web/css/align-items/index.html | 169 + files/es/web/css/align-self/index.html | 137 + files/es/web/css/all/index.html | 219 ++ files/es/web/css/angle/index.html | 139 + files/es/web/css/animation-delay/index.html | 125 + files/es/web/css/animation-direction/index.html | 167 + files/es/web/css/animation-duration/index.html | 127 + files/es/web/css/animation-fill-mode/index.html | 233 ++ .../web/css/animation-iteration-count/index.html | 126 + files/es/web/css/animation-name/index.html | 134 + files/es/web/css/animation-play-state/index.html | 134 + .../web/css/animation-timing-function/index.html | 141 + files/es/web/css/animation/index.html | 127 + files/es/web/css/appearance/index.html | 1556 ++++++++++ files/es/web/css/at-rule/index.html | 73 + files/es/web/css/attr()/index.html | 246 ++ files/es/web/css/auto/index.html | 49 + files/es/web/css/azimuth/index.html | 70 + files/es/web/css/backdrop-filter/index.html | 145 + files/es/web/css/backface-visibility/index.html | 270 ++ files/es/web/css/background-attachment/index.html | 133 + files/es/web/css/background-blend-mode/index.html | 150 + files/es/web/css/background-clip/index.html | 171 ++ files/es/web/css/background-color/index.html | 141 + files/es/web/css/background-image/index.html | 135 + files/es/web/css/background-origin/index.html | 88 + files/es/web/css/background-position-x/index.html | 128 + files/es/web/css/background-position/index.html | 132 + files/es/web/css/background-repeat/index.html | 250 ++ files/es/web/css/background-size/index.html | 235 ++ files/es/web/css/background/index.html | 138 + files/es/web/css/basic-shape/index.html | 208 ++ files/es/web/css/blend-mode/index.html | 417 +++ files/es/web/css/block-size/index.html | 151 + files/es/web/css/border-block-color/index.html | 86 + files/es/web/css/border-block-end-color/index.html | 138 + files/es/web/css/border-block-end-style/index.html | 139 + files/es/web/css/border-block-end-width/index.html | 91 + files/es/web/css/border-block-end/index.html | 144 + .../es/web/css/border-block-start-color/index.html | 90 + .../es/web/css/border-block-start-style/index.html | 92 + .../es/web/css/border-block-start-width/index.html | 91 + files/es/web/css/border-block-start/index.html | 98 + files/es/web/css/border-block-style/index.html | 90 + files/es/web/css/border-block-width/index.html | 87 + files/es/web/css/border-block/index.html | 96 + files/es/web/css/border-bottom-color/index.html | 117 + .../web/css/border-bottom-left-radius/index.html | 264 ++ .../web/css/border-bottom-right-radius/index.html | 264 ++ files/es/web/css/border-bottom-style/index.html | 102 + files/es/web/css/border-bottom-width/index.html | 113 + files/es/web/css/border-bottom/index.html | 117 + files/es/web/css/border-collapse/index.html | 98 + files/es/web/css/border-color/index.html | 112 + files/es/web/css/border-end-end-radius/index.html | 98 + .../es/web/css/border-end-start-radius/index.html | 98 + files/es/web/css/border-image-outset/index.html | 138 + files/es/web/css/border-image-repeat/index.html | 123 + files/es/web/css/border-image-slice/index.html | 159 + files/es/web/css/border-image/index.html | 199 ++ files/es/web/css/border-inline-color/index.html | 86 + .../es/web/css/border-inline-end-color/index.html | 90 + .../es/web/css/border-inline-end-style/index.html | 92 + .../es/web/css/border-inline-end-width/index.html | 91 + files/es/web/css/border-inline-end/index.html | 98 + .../web/css/border-inline-start-color/index.html | 90 + .../web/css/border-inline-start-style/index.html | 92 + .../web/css/border-inline-start-width/index.html | 91 + files/es/web/css/border-inline-start/index.html | 98 + files/es/web/css/border-inline-style/index.html | 90 + files/es/web/css/border-inline-width/index.html | 88 + files/es/web/css/border-inline/index.html | 94 + files/es/web/css/border-left-color/index.html | 73 + files/es/web/css/border-left/index.html | 120 + files/es/web/css/border-radius/index.html | 320 ++ files/es/web/css/border-right/index.html | 109 + files/es/web/css/border-spacing/index.html | 104 + .../es/web/css/border-start-end-radius/index.html | 98 + .../web/css/border-start-start-radius/index.html | 98 + files/es/web/css/border-style/index.html | 242 ++ files/es/web/css/border-top-color/index.html | 105 + files/es/web/css/border-top-left-radius/index.html | 252 ++ .../es/web/css/border-top-right-radius/index.html | 256 ++ files/es/web/css/border-top/index.html | 151 + files/es/web/css/border-width/index.html | 101 + files/es/web/css/border/index.html | 117 + files/es/web/css/bottom/index.html | 86 + files/es/web/css/box-shadow/index.html | 178 ++ files/es/web/css/box-sizing/index.html | 119 + files/es/web/css/calc()/index.html | 199 ++ files/es/web/css/caret-color/index.html | 151 + files/es/web/css/cascade/index.html | 202 ++ files/es/web/css/child_combinator/index.html | 119 + files/es/web/css/class_selectors/index.html | 128 + files/es/web/css/clear/index.html | 239 ++ files/es/web/css/clip-path/index.html | 179 ++ files/es/web/css/clip/index.html | 148 + files/es/web/css/color/index.html | 260 ++ files/es/web/css/color_value/index.html | 1416 +++++++++ files/es/web/css/column-count/index.html | 95 + files/es/web/css/column-span/index.html | 99 + files/es/web/css/columnas_css/index.html | 112 + files/es/web/css/comentarios/index.html | 49 + .../web/css/comenzando_(tutorial_css)/index.html | 40 + files/es/web/css/como_iniciar/index.html | 5 + .../css/como_iniciar/por_que_usar_css/index.html | 106 + .../es/web/css/como_iniciar/que_es_css/index.html | 145 + files/es/web/css/content/index.html | 58 + .../index.html" | 91 + files/es/web/css/css_animations/index.html | 136 + files/es/web/css/css_animations/tips/index.html | 150 + .../usando_animaciones_css/index.html | 351 +++ .../border-image_generador/index.html | 2615 ++++++++++++++++ .../border-radius_generator/index.html | 1601 ++++++++++ .../web/css/css_background_and_borders/index.html | 154 + .../using_css_multiple_backgrounds/index.html | 56 + .../herramienta_para_seleccionar_color/index.html | 3220 ++++++++++++++++++++ files/es/web/css/css_colors/index.html | 119 + files/es/web/css/css_containment/index.html | 124 + .../aligning_items_in_a_flex_container/index.html | 231 ++ .../backwards_compatibility_of_flexbox/index.html | 112 + .../casos_de_uso_tipicos_de_flexbox/index.html | 133 + .../conceptos_basicos_de_flexbox/index.html | 227 ++ .../es/web/css/css_flexible_box_layout/index.html | 118 + .../index.html | 190 ++ .../usando_las_cajas_flexibles_css/index.html | 375 +++ files/es/web/css/css_flow_layout/index.html | 43 + files/es/web/css/css_fonts/index.html | 148 + .../auto-placement_in_css_grid_layout/index.html | 613 ++++ .../box_alignment_in_css_grid_layout/index.html | 703 +++++ .../index.html" | 722 +++++ .../css_grid_layout_and_accessibility/index.html | 169 + files/es/web/css/css_grid_layout/index.html | 251 ++ .../index.html | 597 ++++ .../relacion_de_grid_layout/index.html | 642 ++++ .../basic_concepts/index.html | 71 + .../dimensionamiento/index.html | 89 + .../floating_and_positioning/index.html | 206 ++ files/es/web/css/css_logical_properties/index.html | 172 ++ .../margins_borders_padding/index.html | 298 ++ files/es/web/css/css_modelo_caja/index.html | 165 + .../index.html" | 66 + .../mastering_margin_collapsing/index.html | 96 + files/es/web/css/css_motion_path/index.html | 78 + .../agregando_z-index/index.html | 179 ++ .../apilamiento_y_float/index.html | 144 + .../index.html | 132 + .../index.html | 137 + .../index.html | 183 ++ .../el_contexto_de_apilamiento/index.html | 231 ++ .../css_positioning/entendiendo_z_index/index.html | 47 + .../stacking_without_z-index/index.html | 141 + files/es/web/css/css_positioning/index.html | 115 + .../es/web/css/css_properties_reference/index.html | 314 ++ .../es/web/css/css_reglas_condicionales/index.html | 99 + files/es/web/css/css_transforms/index.html | 145 + .../css_transforms/using_css_transforms/index.html | 225 ++ files/es/web/css/css_transitions/index.html | 60 + files/es/web/css/css_types/index.html | 64 + files/es/web/css/css_writing_modes/index.html | 52 + files/es/web/css/cursor/index.html | 322 ++ .../index.html | 39 + files/es/web/css/descendant_combinator/index.html | 97 + files/es/web/css/direction/index.html | 54 + files/es/web/css/display/index.html | 647 ++++ files/es/web/css/elemento_reemplazo/index.html | 19 + files/es/web/css/env()/index.html | 27 + files/es/web/css/especificidad/index.html | 239 ++ files/es/web/css/filter-function/blur()/index.html | 40 + .../css/filter-function/brightness()/index.html | 45 + files/es/web/css/filter-function/index.html | 65 + files/es/web/css/filter-function/url/index.html | 32 + files/es/web/css/filter/index.html | 1194 ++++++++ files/es/web/css/fit-content/index.html | 119 + files/es/web/css/flex-basis/index.html | 280 ++ files/es/web/css/flex-direction/index.html | 158 + files/es/web/css/flex-flow/index.html | 135 + files/es/web/css/flex-grow/index.html | 194 ++ files/es/web/css/flex-shrink/index.html | 185 ++ files/es/web/css/flex-wrap/index.html | 121 + files/es/web/css/flex/index.html | 208 ++ files/es/web/css/float/index.html | 241 ++ files/es/web/css/font-family/index.html | 61 + files/es/web/css/font-size-adjust/index.html | 60 + files/es/web/css/font-size/index.html | 69 + files/es/web/css/font-style/index.html | 152 + .../es/web/css/font-variant-alternates/index.html | 155 + files/es/web/css/font-variant/index.html | 47 + files/es/web/css/font-weight/index.html | 181 ++ files/es/web/css/font/index.html | 123 + files/es/web/css/frequency/index.html | 161 + files/es/web/css/gradiente/index.html | 100 + files/es/web/css/grid-auto-columns/index.html | 209 ++ files/es/web/css/grid-auto-rows/index.html | 204 ++ files/es/web/css/grid-column-gap/index.html | 157 + files/es/web/css/grid-gap/index.html | 251 ++ files/es/web/css/grid-template-areas/index.html | 233 ++ files/es/web/css/grid-template-columns/index.html | 188 ++ files/es/web/css/grid-template-rows/index.html | 215 ++ files/es/web/css/grid/index.html | 237 ++ files/es/web/css/height/index.html | 231 ++ .../herramientas/cubic_bezier_generator/index.html | 320 ++ files/es/web/css/herramientas/index.html | 28 + files/es/web/css/hyphens/index.html | 148 + files/es/web/css/id_selectors/index.html | 85 + files/es/web/css/image-rendering/index.html | 108 + files/es/web/css/image/index.html | 209 ++ files/es/web/css/ime-mode/index.html | 50 + files/es/web/css/index.html | 113 + files/es/web/css/inherit/index.html | 64 + files/es/web/css/inheritance/index.html | 66 + files/es/web/css/initial/index.html | 46 + files/es/web/css/inline-size/index.html | 97 + files/es/web/css/inset-block-end/index.html | 99 + files/es/web/css/inset-block-start/index.html | 99 + files/es/web/css/inset-block/index.html | 97 + files/es/web/css/inset-inline-end/index.html | 99 + files/es/web/css/inset-inline-start/index.html | 99 + files/es/web/css/inset-inline/index.html | 97 + files/es/web/css/inset/index.html | 96 + files/es/web/css/integer/index.html | 16 + .../web/css/introducci\303\263n/boxes/index.html" | 334 ++ .../cascading_and_inheritance/index.html" | 124 + .../web/css/introducci\303\263n/color/index.html" | 363 +++ .../introducci\303\263n/how_css_works/index.html" | 127 + "files/es/web/css/introducci\303\263n/index.html" | 93 + .../web/css/introducci\303\263n/layout/index.html" | 383 +++ .../los_colon_estilos_de_texto/index.html" | 155 + .../web/css/introducci\303\263n/media/index.html" | 394 +++ .../css/introducci\303\263n/selectors/index.html" | 415 +++ files/es/web/css/isolation/index.html | 158 + files/es/web/css/justify-content/index.html | 222 ++ files/es/web/css/layout_cookbook/index.html | 77 + files/es/web/css/layout_mode/index.html | 31 + files/es/web/css/left/index.html | 144 + files/es/web/css/length/index.html | 332 ++ files/es/web/css/line-height/index.html | 125 + files/es/web/css/linear-gradient()/index.html | 261 ++ files/es/web/css/list-style-image/index.html | 72 + files/es/web/css/list-style-position/index.html | 97 + files/es/web/css/list-style-type/index.html | 117 + files/es/web/css/list-style/index.html | 82 + files/es/web/css/margin-block-start/index.html | 99 + files/es/web/css/margin-block/index.html | 108 + files/es/web/css/margin-bottom/index.html | 139 + files/es/web/css/margin-inline-end/index.html | 98 + files/es/web/css/margin-inline-start/index.html | 96 + files/es/web/css/margin-inline/index.html | 96 + files/es/web/css/margin-right/index.html | 26 + files/es/web/css/margin/index.html | 214 ++ files/es/web/css/max-block-size/index.html | 178 ++ files/es/web/css/max-height/index.html | 94 + files/es/web/css/max-inline-size/index.html | 94 + files/es/web/css/max-width/index.html | 158 + files/es/web/css/media_queries/index.html | 107 + files/es/web/css/min()/index.html | 120 + files/es/web/css/min-block-size/index.html | 94 + files/es/web/css/min-height/index.html | 72 + files/es/web/css/min-inline-size/index.html | 95 + files/es/web/css/min-width/index.html | 80 + files/es/web/css/minmax()/index.html | 214 ++ files/es/web/css/mozilla_extensions/index.html | 616 ++++ files/es/web/css/normal/index.html | 10 + files/es/web/css/number/index.html | 8 + files/es/web/css/object-fit/index.html | 164 + files/es/web/css/object-position/index.html | 150 + files/es/web/css/opacity/index.html | 216 ++ files/es/web/css/order/index.html | 172 ++ files/es/web/css/outline-color/index.html | 152 + files/es/web/css/outline-offset/index.html | 136 + files/es/web/css/outline-style/index.html | 263 ++ files/es/web/css/outline-width/index.html | 176 ++ files/es/web/css/outline/index.html | 128 + files/es/web/css/overflow-y/index.html | 138 + files/es/web/css/overflow/index.html | 118 + files/es/web/css/padding-block-end/index.html | 96 + files/es/web/css/padding-block-start/index.html | 96 + files/es/web/css/padding-block/index.html | 96 + files/es/web/css/padding-bottom/index.html | 135 + files/es/web/css/padding-inline-end/index.html | 96 + files/es/web/css/padding-inline-start/index.html | 96 + files/es/web/css/padding-inline/index.html | 96 + files/es/web/css/padding-top/index.html | 135 + files/es/web/css/padding/index.html | 178 ++ files/es/web/css/perspective/index.html | 196 ++ files/es/web/css/porcentaje/index.html | 126 + files/es/web/css/position/index.html | 305 ++ .../css/preguntas_frecuentes_sobre_css/index.html | 118 + files/es/web/css/primeros_pasos/index.html | 39 + files/es/web/css/pseudo-classes/index.html | 135 + files/es/web/css/pseudoelementos/index.html | 86 + files/es/web/css/quotes/index.html | 86 + files/es/web/css/radial-gradient()/index.html | 299 ++ files/es/web/css/referencia_css/index.html | 246 ++ .../css/referencia_css/mix-blend-mode/index.html | 611 ++++ files/es/web/css/repeat()/index.html | 147 + files/es/web/css/resize/index.html | 194 ++ "files/es/web/css/resoluci\303\263n/index.html" | 151 + files/es/web/css/resolved_value/index.html | 38 + files/es/web/css/right/index.html | 93 + files/es/web/css/rtl/index.html | 22 + files/es/web/css/scroll-behavior/index.html | 165 + files/es/web/css/selectores_atributo/index.html | 241 ++ files/es/web/css/selectores_css/index.html | 164 + .../index.html | 67 + .../css/selectores_hermanos_adyacentes/index.html | 135 + .../css/selectores_hermanos_generales/index.html | 117 + files/es/web/css/shorthand_properties/index.html | 155 + .../index.html" | 402 +++ files/es/web/css/specified_value/index.html | 43 + files/es/web/css/syntax/index.html | 81 + files/es/web/css/text-decoration-color/index.html | 148 + files/es/web/css/text-decoration-line/index.html | 100 + files/es/web/css/text-decoration-style/index.html | 200 ++ files/es/web/css/text-decoration/index.html | 202 ++ files/es/web/css/text-emphasis-color/index.html | 103 + files/es/web/css/text-emphasis/index.html | 178 ++ files/es/web/css/text-orientation/index.html | 104 + files/es/web/css/text-overflow/index.html | 308 ++ files/es/web/css/text-shadow/index.html | 197 ++ files/es/web/css/text-transform/index.html | 499 +++ files/es/web/css/texto_css/index.html | 123 + files/es/web/css/time/index.html | 84 + files/es/web/css/top/index.html | 138 + files/es/web/css/transform-function/index.html | 191 ++ .../web/css/transform-function/rotate()/index.html | 79 + .../css/transform-function/rotate3d()/index.html | 121 + .../web/css/transform-function/scale()/index.html | 122 + .../css/transform-function/translate()/index.html | 146 + .../css/transform-function/translatey()/index.html | 117 + .../css/transform-function/translatez()/index.html | 126 + files/es/web/css/transform-origin/index.html | 262 ++ files/es/web/css/transform-style/index.html | 74 + files/es/web/css/transform/index.html | 240 ++ files/es/web/css/transiciones_de_css/index.html | 700 +++++ files/es/web/css/transition-delay/index.html | 388 +++ files/es/web/css/transition-duration/index.html | 341 +++ files/es/web/css/transition-property/index.html | 92 + files/es/web/css/transition/index.html | 128 + files/es/web/css/tutorials/index.html | 61 + files/es/web/css/type_selectors/index.html | 84 + files/es/web/css/universal_selectors/index.html | 106 + files/es/web/css/user-select/index.html | 138 + .../web/css/using_css_custom_properties/index.html | 267 ++ files/es/web/css/valor_calculado/index.html | 30 + files/es/web/css/valor_inicial/index.html | 26 + files/es/web/css/var()/index.html | 134 + files/es/web/css/vertical-align/index.html | 161 + files/es/web/css/visibility/index.html | 80 + files/es/web/css/white-space/index.html | 421 +++ files/es/web/css/widows/index.html | 113 + files/es/web/css/width/index.html | 404 +++ files/es/web/css/writing-mode/index.html | 247 ++ files/es/web/css/z-index/index.html | 127 + files/es/web/css/zoom/index.html | 141 + 580 files changed, 88108 insertions(+) create mode 100644 files/es/web/css/--_star_/index.html create mode 100644 files/es/web/css/-moz-binding/index.html create mode 100644 files/es/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/es/web/css/-moz-border-left-colors/index.html create mode 100644 files/es/web/css/-moz-border-right-colors/index.html create mode 100644 files/es/web/css/-moz-border-top-colors/index.html create mode 100644 files/es/web/css/-moz-box-flex/index.html create mode 100644 files/es/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/es/web/css/-moz-box-pack/index.html create mode 100644 files/es/web/css/-moz-cell/index.html create mode 100644 files/es/web/css/-moz-context-properties/index.html create mode 100644 files/es/web/css/-moz-float-edge/index.html create mode 100644 files/es/web/css/-moz-font-language-override/index.html create mode 100644 files/es/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/es/web/css/-moz-image-rect/index.html create mode 100644 files/es/web/css/-moz-image-region/index.html create mode 100644 files/es/web/css/-moz-orient/index.html create mode 100644 files/es/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/es/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/es/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/es/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/es/web/css/-moz-outline-radius/index.html create mode 100644 files/es/web/css/-moz-stack-sizing/index.html create mode 100644 files/es/web/css/-moz-text-blink/index.html create mode 100644 files/es/web/css/-moz-user-focus/index.html create mode 100644 files/es/web/css/-moz-user-input/index.html create mode 100644 files/es/web/css/-moz-user-modify/index.html create mode 100644 files/es/web/css/-moz-window-shadow/index.html create mode 100644 files/es/web/css/-ms-accelerator/index.html create mode 100644 files/es/web/css/-ms-overflow-style/index.html create mode 100644 files/es/web/css/-webkit-border-before/index.html create mode 100644 files/es/web/css/-webkit-box-reflect/index.html create mode 100644 files/es/web/css/-webkit-mask-attachment/index.html create mode 100644 files/es/web/css/-webkit-mask-box-image/index.html create mode 100644 files/es/web/css/-webkit-mask-clip/index.html create mode 100644 files/es/web/css/-webkit-mask-composite/index.html create mode 100644 files/es/web/css/-webkit-mask-image/index.html create mode 100644 files/es/web/css/-webkit-mask-origin/index.html create mode 100644 files/es/web/css/-webkit-mask-position-x/index.html create mode 100644 files/es/web/css/-webkit-mask-position-y/index.html create mode 100644 files/es/web/css/-webkit-mask-position/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat/index.html create mode 100644 files/es/web/css/-webkit-mask/index.html create mode 100644 files/es/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/es/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/es/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/es/web/css/-webkit-text-fill-color/index.html create mode 100644 files/es/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/es/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/es/web/css/-webkit-text-stroke/index.html create mode 100644 files/es/web/css/-webkit-touch-callout/index.html create mode 100644 files/es/web/css/@charset/index.html create mode 100644 files/es/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/es/web/css/@counter-style/index.html create mode 100644 files/es/web/css/@counter-style/symbols/index.html create mode 100644 files/es/web/css/@document/index.html create mode 100644 files/es/web/css/@font-face/font-display/index.html create mode 100644 files/es/web/css/@font-face/font-family/index.html create mode 100644 files/es/web/css/@font-face/font-style/index.html create mode 100644 files/es/web/css/@font-face/index.html create mode 100644 files/es/web/css/@font-face/src/index.html create mode 100644 files/es/web/css/@font-face/unicode-range/index.html create mode 100644 files/es/web/css/@font-feature-values/index.html create mode 100644 files/es/web/css/@import/index.html create mode 100644 files/es/web/css/@keyframes/index.html create mode 100644 files/es/web/css/@media/altura/index.html create mode 100644 files/es/web/css/@media/color/index.html create mode 100644 files/es/web/css/@media/display-mode/index.html create mode 100644 files/es/web/css/@media/hover/index.html create mode 100644 files/es/web/css/@media/index.html create mode 100644 files/es/web/css/@media/pointer/index.html create mode 100644 "files/es/web/css/@media/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/@media/width/index.html create mode 100644 files/es/web/css/@namespace/index.html create mode 100644 files/es/web/css/@page/index.html create mode 100644 files/es/web/css/@supports/index.html create mode 100644 files/es/web/css/@viewport/height/index.html create mode 100644 files/es/web/css/@viewport/index.html create mode 100644 files/es/web/css/@viewport/width/index.html create mode 100644 files/es/web/css/_colon_-moz-broken/index.html create mode 100644 files/es/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/es/web/css/_colon_-moz-first-node/index.html create mode 100644 files/es/web/css/_colon_-moz-focusring/index.html create mode 100644 files/es/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/es/web/css/_colon_-moz-last-node/index.html create mode 100644 files/es/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/es/web/css/_colon_-moz-list-number/index.html create mode 100644 files/es/web/css/_colon_-moz-loading/index.html create mode 100644 files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme-darktext/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme/index.html create mode 100644 files/es/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/es/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/es/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/es/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell-text/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-column/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-drop-feedback/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-image/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-indentation/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-line/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-progressmeter/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-row(hover)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-row/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-separator/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-twisty/index.html create mode 100644 files/es/web/css/_colon_-moz-ui-invalid/index.html create mode 100644 files/es/web/css/_colon_-moz-ui-valid/index.html create mode 100644 files/es/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/es/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/es/web/css/_colon_-ms-input-placeholder/index.html create mode 100644 files/es/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/es/web/css/_colon_active/index.html create mode 100644 files/es/web/css/_colon_any-link/index.html create mode 100644 files/es/web/css/_colon_any/index.html create mode 100644 files/es/web/css/_colon_blank/index.html create mode 100644 files/es/web/css/_colon_checked/index.html create mode 100644 files/es/web/css/_colon_default/index.html create mode 100644 files/es/web/css/_colon_defined/index.html create mode 100644 files/es/web/css/_colon_dir/index.html create mode 100644 files/es/web/css/_colon_disabled/index.html create mode 100644 files/es/web/css/_colon_empty/index.html create mode 100644 files/es/web/css/_colon_enabled/index.html create mode 100644 files/es/web/css/_colon_first-child/index.html create mode 100644 files/es/web/css/_colon_first-of-type/index.html create mode 100644 files/es/web/css/_colon_first/index.html create mode 100644 files/es/web/css/_colon_focus-visible/index.html create mode 100644 files/es/web/css/_colon_focus-within/index.html create mode 100644 files/es/web/css/_colon_focus/index.html create mode 100644 files/es/web/css/_colon_fullscreen/index.html create mode 100644 files/es/web/css/_colon_has/index.html create mode 100644 files/es/web/css/_colon_host/index.html create mode 100644 files/es/web/css/_colon_hover/index.html create mode 100644 files/es/web/css/_colon_in-range/index.html create mode 100644 files/es/web/css/_colon_indeterminate/index.html create mode 100644 files/es/web/css/_colon_invalid/index.html create mode 100644 files/es/web/css/_colon_lang/index.html create mode 100644 files/es/web/css/_colon_last-child/index.html create mode 100644 files/es/web/css/_colon_last-of-type/index.html create mode 100644 files/es/web/css/_colon_left/index.html create mode 100644 files/es/web/css/_colon_link/index.html create mode 100644 files/es/web/css/_colon_not()/index.html create mode 100644 files/es/web/css/_colon_nth-child/index.html create mode 100644 files/es/web/css/_colon_nth-last-child/index.html create mode 100644 files/es/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/es/web/css/_colon_nth-of-type/index.html create mode 100644 files/es/web/css/_colon_only-child/index.html create mode 100644 files/es/web/css/_colon_only-of-type/index.html create mode 100644 files/es/web/css/_colon_optional/index.html create mode 100644 files/es/web/css/_colon_out-of-range/index.html create mode 100644 files/es/web/css/_colon_placeholder-shown/index.html create mode 100644 files/es/web/css/_colon_read-only/index.html create mode 100644 files/es/web/css/_colon_read-write/index.html create mode 100644 files/es/web/css/_colon_required/index.html create mode 100644 files/es/web/css/_colon_right/index.html create mode 100644 files/es/web/css/_colon_root/index.html create mode 100644 files/es/web/css/_colon_target/index.html create mode 100644 files/es/web/css/_colon_valid/index.html create mode 100644 files/es/web/css/_colon_visited/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-clear/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-expand/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-reveal/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-ticks-after/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-track/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-scrollbar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_after/index.html create mode 100644 files/es/web/css/_doublecolon_backdrop/index.html create mode 100644 files/es/web/css/_doublecolon_before/index.html create mode 100644 files/es/web/css/_doublecolon_cue/index.html create mode 100644 files/es/web/css/_doublecolon_first-letter/index.html create mode 100644 files/es/web/css/_doublecolon_first-line/index.html create mode 100644 files/es/web/css/_doublecolon_marker/index.html create mode 100644 files/es/web/css/_doublecolon_placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_selection/index.html create mode 100644 files/es/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/es/web/css/actual_value/index.html create mode 100644 files/es/web/css/align-content/index.html create mode 100644 files/es/web/css/align-items/index.html create mode 100644 files/es/web/css/align-self/index.html create mode 100644 files/es/web/css/all/index.html create mode 100644 files/es/web/css/angle/index.html create mode 100644 files/es/web/css/animation-delay/index.html create mode 100644 files/es/web/css/animation-direction/index.html create mode 100644 files/es/web/css/animation-duration/index.html create mode 100644 files/es/web/css/animation-fill-mode/index.html create mode 100644 files/es/web/css/animation-iteration-count/index.html create mode 100644 files/es/web/css/animation-name/index.html create mode 100644 files/es/web/css/animation-play-state/index.html create mode 100644 files/es/web/css/animation-timing-function/index.html create mode 100644 files/es/web/css/animation/index.html create mode 100644 files/es/web/css/appearance/index.html create mode 100644 files/es/web/css/at-rule/index.html create mode 100644 files/es/web/css/attr()/index.html create mode 100644 files/es/web/css/auto/index.html create mode 100644 files/es/web/css/azimuth/index.html create mode 100644 files/es/web/css/backdrop-filter/index.html create mode 100644 files/es/web/css/backface-visibility/index.html create mode 100644 files/es/web/css/background-attachment/index.html create mode 100644 files/es/web/css/background-blend-mode/index.html create mode 100644 files/es/web/css/background-clip/index.html create mode 100644 files/es/web/css/background-color/index.html create mode 100644 files/es/web/css/background-image/index.html create mode 100644 files/es/web/css/background-origin/index.html create mode 100644 files/es/web/css/background-position-x/index.html create mode 100644 files/es/web/css/background-position/index.html create mode 100644 files/es/web/css/background-repeat/index.html create mode 100644 files/es/web/css/background-size/index.html create mode 100644 files/es/web/css/background/index.html create mode 100644 files/es/web/css/basic-shape/index.html create mode 100644 files/es/web/css/blend-mode/index.html create mode 100644 files/es/web/css/block-size/index.html create mode 100644 files/es/web/css/border-block-color/index.html create mode 100644 files/es/web/css/border-block-end-color/index.html create mode 100644 files/es/web/css/border-block-end-style/index.html create mode 100644 files/es/web/css/border-block-end-width/index.html create mode 100644 files/es/web/css/border-block-end/index.html create mode 100644 files/es/web/css/border-block-start-color/index.html create mode 100644 files/es/web/css/border-block-start-style/index.html create mode 100644 files/es/web/css/border-block-start-width/index.html create mode 100644 files/es/web/css/border-block-start/index.html create mode 100644 files/es/web/css/border-block-style/index.html create mode 100644 files/es/web/css/border-block-width/index.html create mode 100644 files/es/web/css/border-block/index.html create mode 100644 files/es/web/css/border-bottom-color/index.html create mode 100644 files/es/web/css/border-bottom-left-radius/index.html create mode 100644 files/es/web/css/border-bottom-right-radius/index.html create mode 100644 files/es/web/css/border-bottom-style/index.html create mode 100644 files/es/web/css/border-bottom-width/index.html create mode 100644 files/es/web/css/border-bottom/index.html create mode 100644 files/es/web/css/border-collapse/index.html create mode 100644 files/es/web/css/border-color/index.html create mode 100644 files/es/web/css/border-end-end-radius/index.html create mode 100644 files/es/web/css/border-end-start-radius/index.html create mode 100644 files/es/web/css/border-image-outset/index.html create mode 100644 files/es/web/css/border-image-repeat/index.html create mode 100644 files/es/web/css/border-image-slice/index.html create mode 100644 files/es/web/css/border-image/index.html create mode 100644 files/es/web/css/border-inline-color/index.html create mode 100644 files/es/web/css/border-inline-end-color/index.html create mode 100644 files/es/web/css/border-inline-end-style/index.html create mode 100644 files/es/web/css/border-inline-end-width/index.html create mode 100644 files/es/web/css/border-inline-end/index.html create mode 100644 files/es/web/css/border-inline-start-color/index.html create mode 100644 files/es/web/css/border-inline-start-style/index.html create mode 100644 files/es/web/css/border-inline-start-width/index.html create mode 100644 files/es/web/css/border-inline-start/index.html create mode 100644 files/es/web/css/border-inline-style/index.html create mode 100644 files/es/web/css/border-inline-width/index.html create mode 100644 files/es/web/css/border-inline/index.html create mode 100644 files/es/web/css/border-left-color/index.html create mode 100644 files/es/web/css/border-left/index.html create mode 100644 files/es/web/css/border-radius/index.html create mode 100644 files/es/web/css/border-right/index.html create mode 100644 files/es/web/css/border-spacing/index.html create mode 100644 files/es/web/css/border-start-end-radius/index.html create mode 100644 files/es/web/css/border-start-start-radius/index.html create mode 100644 files/es/web/css/border-style/index.html create mode 100644 files/es/web/css/border-top-color/index.html create mode 100644 files/es/web/css/border-top-left-radius/index.html create mode 100644 files/es/web/css/border-top-right-radius/index.html create mode 100644 files/es/web/css/border-top/index.html create mode 100644 files/es/web/css/border-width/index.html create mode 100644 files/es/web/css/border/index.html create mode 100644 files/es/web/css/bottom/index.html create mode 100644 files/es/web/css/box-shadow/index.html create mode 100644 files/es/web/css/box-sizing/index.html create mode 100644 files/es/web/css/calc()/index.html create mode 100644 files/es/web/css/caret-color/index.html create mode 100644 files/es/web/css/cascade/index.html create mode 100644 files/es/web/css/child_combinator/index.html create mode 100644 files/es/web/css/class_selectors/index.html create mode 100644 files/es/web/css/clear/index.html create mode 100644 files/es/web/css/clip-path/index.html create mode 100644 files/es/web/css/clip/index.html create mode 100644 files/es/web/css/color/index.html create mode 100644 files/es/web/css/color_value/index.html create mode 100644 files/es/web/css/column-count/index.html create mode 100644 files/es/web/css/column-span/index.html create mode 100644 files/es/web/css/columnas_css/index.html create mode 100644 files/es/web/css/comentarios/index.html create mode 100644 files/es/web/css/comenzando_(tutorial_css)/index.html create mode 100644 files/es/web/css/como_iniciar/index.html create mode 100644 files/es/web/css/como_iniciar/por_que_usar_css/index.html create mode 100644 files/es/web/css/como_iniciar/que_es_css/index.html create mode 100644 files/es/web/css/content/index.html create mode 100644 "files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" create mode 100644 files/es/web/css/css_animations/index.html create mode 100644 files/es/web/css/css_animations/tips/index.html create mode 100644 files/es/web/css/css_animations/usando_animaciones_css/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-image_generador/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/es/web/css/css_background_and_borders/index.html create mode 100644 files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html create mode 100644 files/es/web/css/css_colors/index.html create mode 100644 files/es/web/css/css_containment/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html create mode 100644 files/es/web/css/css_flow_layout/index.html create mode 100644 files/es/web/css/css_fonts/index.html create mode 100644 files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 "files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" create mode 100644 files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/es/web/css/css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html create mode 100644 files/es/web/css/css_logical_properties/basic_concepts/index.html create mode 100644 files/es/web/css/css_logical_properties/dimensionamiento/index.html create mode 100644 files/es/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/es/web/css/css_logical_properties/index.html create mode 100644 files/es/web/css/css_logical_properties/margins_borders_padding/index.html create mode 100644 files/es/web/css/css_modelo_caja/index.html create mode 100644 "files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" create mode 100644 files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html create mode 100644 files/es/web/css/css_motion_path/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/index.html create mode 100644 files/es/web/css/css_properties_reference/index.html create mode 100644 files/es/web/css/css_reglas_condicionales/index.html create mode 100644 files/es/web/css/css_transforms/index.html create mode 100644 files/es/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/es/web/css/css_transitions/index.html create mode 100644 files/es/web/css/css_types/index.html create mode 100644 files/es/web/css/css_writing_modes/index.html create mode 100644 files/es/web/css/cursor/index.html create mode 100644 files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html create mode 100644 files/es/web/css/descendant_combinator/index.html create mode 100644 files/es/web/css/direction/index.html create mode 100644 files/es/web/css/display/index.html create mode 100644 files/es/web/css/elemento_reemplazo/index.html create mode 100644 files/es/web/css/env()/index.html create mode 100644 files/es/web/css/especificidad/index.html create mode 100644 files/es/web/css/filter-function/blur()/index.html create mode 100644 files/es/web/css/filter-function/brightness()/index.html create mode 100644 files/es/web/css/filter-function/index.html create mode 100644 files/es/web/css/filter-function/url/index.html create mode 100644 files/es/web/css/filter/index.html create mode 100644 files/es/web/css/fit-content/index.html create mode 100644 files/es/web/css/flex-basis/index.html create mode 100644 files/es/web/css/flex-direction/index.html create mode 100644 files/es/web/css/flex-flow/index.html create mode 100644 files/es/web/css/flex-grow/index.html create mode 100644 files/es/web/css/flex-shrink/index.html create mode 100644 files/es/web/css/flex-wrap/index.html create mode 100644 files/es/web/css/flex/index.html create mode 100644 files/es/web/css/float/index.html create mode 100644 files/es/web/css/font-family/index.html create mode 100644 files/es/web/css/font-size-adjust/index.html create mode 100644 files/es/web/css/font-size/index.html create mode 100644 files/es/web/css/font-style/index.html create mode 100644 files/es/web/css/font-variant-alternates/index.html create mode 100644 files/es/web/css/font-variant/index.html create mode 100644 files/es/web/css/font-weight/index.html create mode 100644 files/es/web/css/font/index.html create mode 100644 files/es/web/css/frequency/index.html create mode 100644 files/es/web/css/gradiente/index.html create mode 100644 files/es/web/css/grid-auto-columns/index.html create mode 100644 files/es/web/css/grid-auto-rows/index.html create mode 100644 files/es/web/css/grid-column-gap/index.html create mode 100644 files/es/web/css/grid-gap/index.html create mode 100644 files/es/web/css/grid-template-areas/index.html create mode 100644 files/es/web/css/grid-template-columns/index.html create mode 100644 files/es/web/css/grid-template-rows/index.html create mode 100644 files/es/web/css/grid/index.html create mode 100644 files/es/web/css/height/index.html create mode 100644 files/es/web/css/herramientas/cubic_bezier_generator/index.html create mode 100644 files/es/web/css/herramientas/index.html create mode 100644 files/es/web/css/hyphens/index.html create mode 100644 files/es/web/css/id_selectors/index.html create mode 100644 files/es/web/css/image-rendering/index.html create mode 100644 files/es/web/css/image/index.html create mode 100644 files/es/web/css/ime-mode/index.html create mode 100644 files/es/web/css/index.html create mode 100644 files/es/web/css/inherit/index.html create mode 100644 files/es/web/css/inheritance/index.html create mode 100644 files/es/web/css/initial/index.html create mode 100644 files/es/web/css/inline-size/index.html create mode 100644 files/es/web/css/inset-block-end/index.html create mode 100644 files/es/web/css/inset-block-start/index.html create mode 100644 files/es/web/css/inset-block/index.html create mode 100644 files/es/web/css/inset-inline-end/index.html create mode 100644 files/es/web/css/inset-inline-start/index.html create mode 100644 files/es/web/css/inset-inline/index.html create mode 100644 files/es/web/css/inset/index.html create mode 100644 files/es/web/css/integer/index.html create mode 100644 "files/es/web/css/introducci\303\263n/boxes/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/color/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/how_css_works/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/layout/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/media/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/selectors/index.html" create mode 100644 files/es/web/css/isolation/index.html create mode 100644 files/es/web/css/justify-content/index.html create mode 100644 files/es/web/css/layout_cookbook/index.html create mode 100644 files/es/web/css/layout_mode/index.html create mode 100644 files/es/web/css/left/index.html create mode 100644 files/es/web/css/length/index.html create mode 100644 files/es/web/css/line-height/index.html create mode 100644 files/es/web/css/linear-gradient()/index.html create mode 100644 files/es/web/css/list-style-image/index.html create mode 100644 files/es/web/css/list-style-position/index.html create mode 100644 files/es/web/css/list-style-type/index.html create mode 100644 files/es/web/css/list-style/index.html create mode 100644 files/es/web/css/margin-block-start/index.html create mode 100644 files/es/web/css/margin-block/index.html create mode 100644 files/es/web/css/margin-bottom/index.html create mode 100644 files/es/web/css/margin-inline-end/index.html create mode 100644 files/es/web/css/margin-inline-start/index.html create mode 100644 files/es/web/css/margin-inline/index.html create mode 100644 files/es/web/css/margin-right/index.html create mode 100644 files/es/web/css/margin/index.html create mode 100644 files/es/web/css/max-block-size/index.html create mode 100644 files/es/web/css/max-height/index.html create mode 100644 files/es/web/css/max-inline-size/index.html create mode 100644 files/es/web/css/max-width/index.html create mode 100644 files/es/web/css/media_queries/index.html create mode 100644 files/es/web/css/min()/index.html create mode 100644 files/es/web/css/min-block-size/index.html create mode 100644 files/es/web/css/min-height/index.html create mode 100644 files/es/web/css/min-inline-size/index.html create mode 100644 files/es/web/css/min-width/index.html create mode 100644 files/es/web/css/minmax()/index.html create mode 100644 files/es/web/css/mozilla_extensions/index.html create mode 100644 files/es/web/css/normal/index.html create mode 100644 files/es/web/css/number/index.html create mode 100644 files/es/web/css/object-fit/index.html create mode 100644 files/es/web/css/object-position/index.html create mode 100644 files/es/web/css/opacity/index.html create mode 100644 files/es/web/css/order/index.html create mode 100644 files/es/web/css/outline-color/index.html create mode 100644 files/es/web/css/outline-offset/index.html create mode 100644 files/es/web/css/outline-style/index.html create mode 100644 files/es/web/css/outline-width/index.html create mode 100644 files/es/web/css/outline/index.html create mode 100644 files/es/web/css/overflow-y/index.html create mode 100644 files/es/web/css/overflow/index.html create mode 100644 files/es/web/css/padding-block-end/index.html create mode 100644 files/es/web/css/padding-block-start/index.html create mode 100644 files/es/web/css/padding-block/index.html create mode 100644 files/es/web/css/padding-bottom/index.html create mode 100644 files/es/web/css/padding-inline-end/index.html create mode 100644 files/es/web/css/padding-inline-start/index.html create mode 100644 files/es/web/css/padding-inline/index.html create mode 100644 files/es/web/css/padding-top/index.html create mode 100644 files/es/web/css/padding/index.html create mode 100644 files/es/web/css/perspective/index.html create mode 100644 files/es/web/css/porcentaje/index.html create mode 100644 files/es/web/css/position/index.html create mode 100644 files/es/web/css/preguntas_frecuentes_sobre_css/index.html create mode 100644 files/es/web/css/primeros_pasos/index.html create mode 100644 files/es/web/css/pseudo-classes/index.html create mode 100644 files/es/web/css/pseudoelementos/index.html create mode 100644 files/es/web/css/quotes/index.html create mode 100644 files/es/web/css/radial-gradient()/index.html create mode 100644 files/es/web/css/referencia_css/index.html create mode 100644 files/es/web/css/referencia_css/mix-blend-mode/index.html create mode 100644 files/es/web/css/repeat()/index.html create mode 100644 files/es/web/css/resize/index.html create mode 100644 "files/es/web/css/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/resolved_value/index.html create mode 100644 files/es/web/css/right/index.html create mode 100644 files/es/web/css/rtl/index.html create mode 100644 files/es/web/css/scroll-behavior/index.html create mode 100644 files/es/web/css/selectores_atributo/index.html create mode 100644 files/es/web/css/selectores_css/index.html create mode 100644 files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html create mode 100644 files/es/web/css/selectores_hermanos_adyacentes/index.html create mode 100644 files/es/web/css/selectores_hermanos_generales/index.html create mode 100644 files/es/web/css/shorthand_properties/index.html create mode 100644 "files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" create mode 100644 files/es/web/css/specified_value/index.html create mode 100644 files/es/web/css/syntax/index.html create mode 100644 files/es/web/css/text-decoration-color/index.html create mode 100644 files/es/web/css/text-decoration-line/index.html create mode 100644 files/es/web/css/text-decoration-style/index.html create mode 100644 files/es/web/css/text-decoration/index.html create mode 100644 files/es/web/css/text-emphasis-color/index.html create mode 100644 files/es/web/css/text-emphasis/index.html create mode 100644 files/es/web/css/text-orientation/index.html create mode 100644 files/es/web/css/text-overflow/index.html create mode 100644 files/es/web/css/text-shadow/index.html create mode 100644 files/es/web/css/text-transform/index.html create mode 100644 files/es/web/css/texto_css/index.html create mode 100644 files/es/web/css/time/index.html create mode 100644 files/es/web/css/top/index.html create mode 100644 files/es/web/css/transform-function/index.html create mode 100644 files/es/web/css/transform-function/rotate()/index.html create mode 100644 files/es/web/css/transform-function/rotate3d()/index.html create mode 100644 files/es/web/css/transform-function/scale()/index.html create mode 100644 files/es/web/css/transform-function/translate()/index.html create mode 100644 files/es/web/css/transform-function/translatey()/index.html create mode 100644 files/es/web/css/transform-function/translatez()/index.html create mode 100644 files/es/web/css/transform-origin/index.html create mode 100644 files/es/web/css/transform-style/index.html create mode 100644 files/es/web/css/transform/index.html create mode 100644 files/es/web/css/transiciones_de_css/index.html create mode 100644 files/es/web/css/transition-delay/index.html create mode 100644 files/es/web/css/transition-duration/index.html create mode 100644 files/es/web/css/transition-property/index.html create mode 100644 files/es/web/css/transition/index.html create mode 100644 files/es/web/css/tutorials/index.html create mode 100644 files/es/web/css/type_selectors/index.html create mode 100644 files/es/web/css/universal_selectors/index.html create mode 100644 files/es/web/css/user-select/index.html create mode 100644 files/es/web/css/using_css_custom_properties/index.html create mode 100644 files/es/web/css/valor_calculado/index.html create mode 100644 files/es/web/css/valor_inicial/index.html create mode 100644 files/es/web/css/var()/index.html create mode 100644 files/es/web/css/vertical-align/index.html create mode 100644 files/es/web/css/visibility/index.html create mode 100644 files/es/web/css/white-space/index.html create mode 100644 files/es/web/css/widows/index.html create mode 100644 files/es/web/css/width/index.html create mode 100644 files/es/web/css/writing-mode/index.html create mode 100644 files/es/web/css/z-index/index.html create mode 100644 files/es/web/css/zoom/index.html (limited to 'files/es/web/css') diff --git a/files/es/web/css/--_star_/index.html b/files/es/web/css/--_star_/index.html new file mode 100644 index 0000000000..06106e8c7d --- /dev/null +++ b/files/es/web/css/--_star_/index.html @@ -0,0 +1,106 @@ +--- +title: 'Propiedades personalizadas (--*): variables CSS' +slug: Web/CSS/--* +translation_of: Web/CSS/--* +--- +
{{CSSRef}}
+ +

Los nombres de las propiedades que tiene el prefijo --, como --ejemplo-nombre, representan las propiedades personalizadas que contienen un valor que puede ser usado en otras declaraciones usando la función {{cssxref("var")}}.

+ +

Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.

+ +

{{CSSInfo}}

+ +

Sintaxis

+ +
--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaración-valor>
+
Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.
+
+ +
+

Nota: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — --mi-color se tratará como una propiedad personalizada separada de --Mi-color.

+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p id="firstParagraph">Este párrafo debe tener un fondo azul y un texto amarillo.</p>
+<p id="secondParagraph">Este párrafo debe tener un fondo amarillo y un texto azul.</p>
+<div id="container">
+  <p id="thirdParagraph">Este párrafo debe tener un fondo verde y un texto amarillo.</p>
+</div>
+ +

CSS

+ +
:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 500, 130)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Initial definition.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.custom-property")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/-moz-binding/index.html b/files/es/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..0280bb44b8 --- /dev/null +++ b/files/es/web/css/-moz-binding/index.html @@ -0,0 +1,110 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - No estándar(2) + - Referencia CSS + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS -moz-binding CSS es usada por las aplicaciones basadas en Mozilla para adjuntar una asociación o enlace XBL a un elemento del DOM

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* <uri> value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Valores

+ +
+
<uri>
+
La URI del enlace XBL (incluyendo el identificador de fragmento).
+
none
+
No se aplica ninguna asociación o enlace XBL al elemento.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-bottom-colors/index.html b/files/es/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..75dea0131a --- /dev/null +++ b/files/es/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-bottom-colors")}} establece una lista de colores para el borde inferior.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. En tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Valores de <color> múltiples */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-left-colors/index.html b/files/es/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..81eb29d51f --- /dev/null +++ b/files/es/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,144 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En aplicaciones de Mozilla, como Firefox, la propiedad CSS {{cssxref("-moz-border-left-colors")}} aplica una lista de colores al borde derecho.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado.

+ +

 

+ +

{{cssinfo}}

+ +

 

+ +

No se aplica

+ +
    +
  1. Si  {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. A tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-left-colors: #f0f0f0;
+
+/* Valor de <color> único */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}.
+
+ +

 

+ +

Síntaxis Formal

+ +

 

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-right-colors/index.html b/files/es/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..5939baf82f --- /dev/null +++ b/files/es/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-right-colors")}} establece una lista de colores para el borde derecho.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. a tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-right-colors: #f0f0f0;
+
+/* Valor de <color> múltiple */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-top-colors/index.html b/files/es/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..2db9dffac6 --- /dev/null +++ b/files/es/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,140 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-top-colors")}} establece una lista de colores para el borde inferior.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. En tablas con border-collapse: collapse.
    3. +
+ +

 

+ +

Síntaxis

+ +

 

+ +
/* Valores de <color> único */
+-moz-border-top-colors: #f0f0f0;
+
+/* Valores de color <color> múltiple */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..c7491aea2d --- /dev/null +++ b/files/es/web/css/-moz-box-flex/index.html @@ -0,0 +1,155 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
+ +

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

+ +

Resumen

+ +

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores <number> */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Valores

+ +
+
0
+
La caja no crece.
+
> 0
+
La caja crece para rellenar un proporción del espacio disponible..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ejemplo de -moz-box-flex</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Creceré para rellenar un espacio extra</p>
+      <p>No creceré</p>
+    </div>
+  </body>
+</html>
+
+ +

Notas

+ +

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

+ +

Los elementos dentro del contenedor que tienen 0 flex no crecen.

+ +

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

+ +

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

+ +

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

+ +

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

+ +

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

+ +

Especificaciones

+ +

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
característicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..7969d3e525 --- /dev/null +++ b/files/es/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

+ +

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

+ +

Resumen

+ +

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

+ +

Valores

+ +

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

+ +

Ejemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..118d60287a --- /dev/null +++ b/files/es/web/css/-moz-box-pack/index.html @@ -0,0 +1,184 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
+ +

Ver Flexbox para más información.

+ +

Resumen

+ +

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Valores

+ +
+
start
+
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
+
center
+
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
+
end
+
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
+
justify
+
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+     para el empaquetado en la caja */
+  height: 300px;
+  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+     centrados horizontalmente */
+  width: 300px;
+
+  /* Los hijos deberían estar orientados verticalmente */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Alínea los hijos con el centro horizontal de la caja */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Dispone a los hijos en el fondo de la caja */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* hace los hijos más estrechos que el padra para que
+     haya espacio suficiente para el box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
+  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
+</div>
+
+ +

{{EmbedLiveSample('Examples', 310, 310)}}

+ +

Notas

+ +

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontalleftright
Verticaltopbottom
+ +

El borde opuesto a start será el considerado como end.

+ +

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

+ +

Especificaciones

+ +

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..b1c5e8aa32 --- /dev/null +++ b/files/es/web/css/-moz-cell/index.html @@ -0,0 +1,10 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}{{obsolete_header}}
+ +

¡No uses este valor!Don't use this value! Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.

diff --git a/files/es/web/css/-moz-context-properties/index.html b/files/es/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..2a9f0d3137 --- /dev/null +++ b/files/es/web/css/-moz-context-properties/index.html @@ -0,0 +1,79 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}} +
+

Note: Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via chrome:// o resource:// URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner svg.context-properties.content.enabled en true.

+
+
+ +

Si mencionas una imagen SVG en una pagina web({{htmlelement("img")}} como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad-moz-context-properties, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de  context-fill.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Global values */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+
+ +

Valores

+ +
+
fill
+
Expone el valor de fill determinado en la imagen del SVG.
+
stroke
+
Expone el valor de stroke determinado en la imagen del SVG..
+
fill-opacity
+
Expone el valor defill-opacity determinado en la imagen del SVG.
+
stroke-opacity
+
Expone el valor de stoke-opacity determinado en la imagen del SVG.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo tenemos un SVG sencillo utilizando un elemento <img>.

+ +

Primero necesitas especificar en el elemento incrustado las propiedades cuyos valores quieres exponer al SVG, utilizando la propiedad -moz-context-properties. Por ejemplo:

+ +
.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}
+ +

Ahora que has hecho eso la imagen SVG puede utlizar los valores de {{cssxref("fill")}} y {{cssxref("stroke")}} , por ejemplo:

+ +
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+ +

Aqui hemos puesto que la imagen src sea una URL de datos que contiene una imagen SVG simple; el <rect>de dentro ha sido hecho para coger sus valores de fill y stroke de {{cssxref("fill")}} y {{cssxref("stroke")}} puestos en el elemento <img>poniendo  context-fill/context-stroke en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.

+ +
+

Note: Puedes en contrar un ejemplo de ejecucion en Github.

+
+ +

Especificaciones

+ +

Esta propiedad no esta definida en ningun estándar de CSS

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.-moz-context-properties")}}

diff --git a/files/es/web/css/-moz-float-edge/index.html b/files/es/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..9454e77fc9 --- /dev/null +++ b/files/es/web/css/-moz-float-edge/index.html @@ -0,0 +1,78 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - 'CSS: Extensión Mozilla' + - Diseño + - No estandar + - Propiedad CSS +translation_of: Web/CSS/-moz-float-edge +--- +
   {{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS no estándar -moz-float-edge especifica si las propiedades  altura y anchura  del elemento incluyen el margen, el borde o el espesor del padding (relleno)

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valores globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

Valores

+ +
+
border-box
+
La altura y anchura incluyen el contenido, el padding (relleno) y el bordee, pero no el margin.
+
content-box
+
La altura y anchura incluyen el contenido, pero no el padding (relleno),borde ni el margen.
+
margin-box
+
La altura y anchura incluyen el contenido, el padding (relleno), el borde y el margen.
+
padding-box
+
La altura y anchura incluyen el contenido, y el padding (relleno), pero no el borde ni el margen.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

 

+ +

Ejemplo

+ +

Contenido HTML

+ +
<div class="box"> 
+   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div>
+ +

Contenido CSS

+ +
.box {
+    display: block;
+    height: 5px;
+    margin: 0.5em auto 0.5em auto;
+    color: gray;
+    -moz-float-edge: margin-box;
+    box-sizing: border-box;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-float-edge') }}

+ +

Ver además

+ +

{{bug(432891)}}

diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..5d035a4cd3 --- /dev/null +++ b/files/es/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.html b/files/es/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..67f407e77b --- /dev/null +++ b/files/es/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{ CSSRef() }}
+ +

Resumen

+ +

-moz-force-broken-image-icon es una propiedad CSS extendida. El valor 1 fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo alt. Cuando el valor es 0 la imagen actuará normalmente y solo mostrará el atributo  alt.

+ +
Nota: Aunque el valor sea 1 el atributo alt se seguirá mostrando. Más información debajo.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-moz-force-broken-image-icon: <integer>;
+ +

Valores

+ +
+
{{cssxref("<integer>")}}
+
 
+
+ +

Ejemplos

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}
+ +
<img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'>
+ +

{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}

+ +
Nota: A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de -moz-force-broken-image-icon es 1.
+ +

Notas

+ + + +

Ver también

+ + diff --git a/files/es/web/css/-moz-image-rect/index.html b/files/es/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..5d6b6f1e69 --- /dev/null +++ b/files/es/web/css/-moz-image-rect/index.html @@ -0,0 +1,143 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-image-rect +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
+ +

Resumen

+ +

Este valor para la propiedad CSS {{cssxref("background-image")}} te permite usar una parte de una imagen de gran tamaño como fondo. Esto permitirá, por ejemplo, usar diferentes partes de una imagen grande como si fueran una sóla imagen grande usada como fondo de diferentes partes de tú contenido.

+ +

Funciona de manera similar a la propiedad {{cssxref("-moz-image-region")}} , que se usa junto con la propiedad{{cssxref("list-style-image")}} para utilizar partes de imágnes como iconos de listas. Sin embargo puede ser usado para cualquier fondo CSS.

+ +

La síntaxis para el rectánigulo es similar a la de la función rect() y genera un tipo CSS {{cssxref("<shape>")}} . Los cuatro valores son relativos a la esquina superior izquierda de la imagen.

+ +

Síntaxis

+ +
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
+ +

Valores

+ +
+
{{cssxref("<uri>")}}
+
La URI de la imagen de la que se cogera una parte.
+
top
+
El borde superior, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
right
+
El borde derecho, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
bottom
+
El borde inferior, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
left
+
El borde izquierdo, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
+ +

Ejemplo

+ +

Este ejemplo carga una imagen y la usa en cuatro segmento para dibujar el logo de Firefox en cuatro bloques  {{HTMLElement("div")}} blocks. Si hacemos click en el contenedor los cuatro segmentos rotarán cmabiando los valores de la propiedad {{cssxref("background-image")}} entre estos cuatro bloques {{HTMLElement("div")}}.

+ +

CSS

+ +

El CSS define un estilo para el contenedor y, posteriormente los estilos para las cuatro cajas que comprenden la imagen completa.

+ +

Para el contenedor:

+ +
#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+ +

posteriormente las cuatro caja se defines las cajas que especifican los segmentos de la imagen. La vamos a ver una por una.

+ +
#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

Esta es la esquina superior izquierda de la imagen. Define un rectángulo que contiene el cuartil superior izquierda de la imagen firefox.jpg.

+ +
#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

Esto define la esquina superior derecha:

+ +

Las otras dos siguen un patrón similar:

+ +
#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

HTML

+ +

Es bastante simple:

+ +
<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+
+ +

Sitúa los 4 segmentos de una imagen en un caja de 2x2 celdas. Estos cuatro elementos están dentro de un bloque {{HTMLElement("div")}} más grande cuya función es recibir eventos click y mandarlos al código JavaScript.

+ +

El codigo javaScript

+ +

Gestiona el evento click cuando el contenedor recibe un click de ratón

+ +
function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Una vez hemos guardado la última, empezamos a rotar.
+
+  for (var i=1; i<=4; i++) {
+    var curId = "box" + i;
+
+    // Permuta las imágenes de fondo.
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}
+ +

Usa {{domxref("window.getComputedStyle()")}} para establecer el estilo de cada elemento, cambiándolo al elemento posterior. Destacar que, una vez se empieza se guarda una copia del estilo de la última caja ya que será sobreescrito por el tercer elemento. Simplemente copiando los valores de la propiedad {{cssxref("background-image")}} de un elemento al siguiente, cuando hacemos click de ratón, conseguiremos el efecto deseado.

+ +

Como queda

+ +

{{EmbedLiveSample("Example","400","400")}}

+ +

Bugs

+ + diff --git a/files/es/web/css/-moz-image-region/index.html b/files/es/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..4b8ff97c95 --- /dev/null +++ b/files/es/web/css/-moz-image-region/index.html @@ -0,0 +1,37 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - No estandar + - Referencia + - Referencia CSS +translation_of: Web/CSS/-moz-image-region +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Para sistemas que funcionan con cualquier fondo ver {{ Cssxref("-moz-image-rect") }}.

+ +

Resumen

+ +

Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad {{cssxref("list-style-image")}}, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.

+ +

La síntaxis es similar a la síntaxis de la propiedad {{cssxref("clip")}}. Los 4 valors son relativos la esquina superior izquierda de la imagen.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
#example-button {
+  /* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
diff --git a/files/es/web/css/-moz-orient/index.html b/files/es/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..171a8e47ef --- /dev/null +++ b/files/es/web/css/-moz-orient/index.html @@ -0,0 +1,156 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The -moz-orient CSS especifica la orientación del elemento al que se aplica.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
inline
+
El elemento se representa en la misma dirección que el eje del texto : horizontal para los modos de escritura horizontales , verticalmente para los modos de escritura vertical .
+
block
+
El elemento se representa de forma ortogonal al eje del texto : verticalmente para los modos de escritura horizontal , horizontal para los modos de escritura vertical .
+
horizontal
+
El elemento se representa horizontalmente.
+
vertical
+
El elemento se representa verticalmente.
+
+ +

Ejemplos

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples","200","360")}}

+ +

Especificaciones

+ +

Aunque somete al W3C , con retroalimentación positiva inicial , esta propiedad no es todavía parte de ninguna especificación ; Actualmente , esto es una extensión de Mozilla-specific (that is, -moz-orient).

+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
apoyo básico{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto valor{{CompatNo}}{{CompatGeckoDesktop("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}

+ línea y el valor de bloqueo		{{CompatNo}}{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
apoyo básico{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto valor{{CompatNo}}{{CompatGeckoMobile("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
línea y el valor de bloqueo{{CompatNo}}{{CompatGeckoMobile(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

[1] In Gecko 6.0 {{geckoRelease("6.0")}}, error causado por verticales{{HTMLElement("progress")}} elementos para el procesamiento con las dimensiones de una barra horizontal. Esto se soluciona en Gecko 7.0 { { geckoRelease ( " 7.0 " ) } } .

+ +

[2] El valor auto era equivalente a la horizontal.

+ +

Ver también

+ + diff --git a/files/es/web/css/-moz-outline-radius-bottomleft/index.html b/files/es/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..b5103d501e --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Summary

+ +

La propiedad  CSS -moz-outline-radius-bottomleft establece, en aplicaciones Mozilla, el redondeado de la esquina inferior izquierda de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-bottomright/index.html b/files/es/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..3d40fde4ce --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,21 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Summary

+ +

La propiedad  CSS -moz-outline-radius-bottomright establece, en aplicaciones Mozilla, el redondeado de la esquina inferior derecha de un contorno.

+ +

+

{{cssinfo}}

+

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-topleft/index.html b/files/es/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..045ff93826 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad  CSS -moz-outline-radius-topleft establece, en aplicaciones Mozilla, el redondeado de la esquina superior izquierda de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-topright/index.html b/files/es/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..cabb6e97a1 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad  CSS -moz-outline-radius-topright establece, en aplicaciones Mozilla, el redondeado de la esquina superior derecha de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius/index.html b/files/es/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..01370818bb --- /dev/null +++ b/files/es/web/css/-moz-outline-radius/index.html @@ -0,0 +1,158 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

En aplicaciones de Mozilla como Firefox, la propiedad CSS -moz-outline-radius puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.

+ +

-moz-outline-radius es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Un valor */
+-moz-outline-radius: 25px;
+
+/* Dos valores */
+-moz-outline-radius: 25px 1em;
+
+/* Tres valores */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Cuator valores */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* valores globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

Valores

+ +
Los contornos elípticos y los valores <porcentaje> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.
+ +

Uno, dos,tres o cuatro valores  <outline-radius> , representan uno de los siguientes casos:

+ +
+
{{cssxref("<length>")}}
+
Ver {{cssxref("<length>")}} para ver los posibles valores.
+
{{cssxref("<percentage>")}}
+
Un {{cssxref("<percentage>")}}; ver {{cssxref("border-radius")}} para más detalles.
+
+ + + +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<style>
+p {
+border: 1px solid black; 
+outline: dotted red; -moz-outline-radius: 12% 1em 25px;
+}
+</style> </head>
+
+<body> <p>La propiedad  outline-style usando -moz-outline-radius</p> </body>
+
+<head> <style>
+p1 {
+border: 1px solid black; outline: dotted red; 
+-moz-outline-radius-topleft: 12%; 
+-moz-outline-radius-topright: 1em; 
+-moz-outline-radius-bottomright: 35px; 
+-moz-outline-radius-bottomleft: 1em; }
+</style> </head>
+
+<body> <p1>La propiedad outline-style usando un -moz-outline-radius-xxx más complicado</p1> </body>
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}

+ +

Notas

+ + + +

Especificaciones

+ +

Esta propiedad no se define es ningún estándar CSS.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.8")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-stack-sizing/index.html b/files/es/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..639c05d4a5 --- /dev/null +++ b/files/es/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - No estandar + - Referencia CSS + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +

{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.1")}}

+ +

Resumen

+ +

-moz-stack-sizing es una propiedad de CSS extendido. Normalmente, una {{XULElem("stack")}} cambiará su tamaño para que todos los elementos hijo sean completamente visibles. Por ejemplo, al mover un hijo de la pila lo suficientemente a la derecha anchará la plia para que el hijo permanezca visible.

+ +

Si quieres evitar que la pila cambie de tamaño automáticamente puedes establecer -moz-stack-sizing a ignore en el hijo. La propiedad no se estable en la misma pila si no que se establece en los hijos de la pila. Esto permite ignorar a ciertos elementos hijos pero no a otros.

+ +

Nota: En versiones anteriores de Gecko  era posible solucionar el problema estableciendo un valor negativo muy grande como margen derecho e inferior para la pila y de igual manera unos márgenes inferior y derecho con grandes valores positivos para los hijos cuyo tamaño no quería ignorar. (El problema no afecta los hijos que se muevan en la parte inferior o izquierda de la pila.)

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de los valores */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* valores gloables */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

Valores

+ +
+
stretch-to-fit
+
El hijo influirá en el tamaño de la pila.
+
ignore
+
La pila no tendrá en cuenta el hijo al calcular su tamaño..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+
+ +

Ver además

+ +

{{bug("346189")}}

diff --git a/files/es/web/css/-moz-text-blink/index.html b/files/es/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..95f6961609 --- /dev/null +++ b/files/es/web/css/-moz-text-blink/index.html @@ -0,0 +1,95 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - 'CSS:Entensiones de Mozilla' + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-text-blink +--- +
{{CSSRef}} {{non-standard_header}}{{deprecated_header}}
+ +

Resumen

+ +

La extensión de Mozilla no estándar  -moz-text-blink especifica si se establece el modo parpadeo.

+ +
+

Firefox, que era el único de entre los navegadores más conocidos que lo soportaba, dejó de soportarla a partir de la versión 26. Esta propiedad no es soportadoa por ningún navegador en la actualizad.

+
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
none
+
No produce parpadeo
+
blink
+
El texto parpade. Destacar que el hecho de que el texto no parpadee es una técnica para satisfacer checkpoint 3.3 of WAI-UAAG.
+
+ +

Ejemplo

+ +
.example {
+  -moz-text-blink: blink;
+}
+ +

Especificaciones

+ +

Esta propiedad fue definida en un antiguo borrador de la especificación CSS 3 . La versiones nuevas eliminaron esta definición.

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("6.0")}}
+ Removed in {{CompatGeckoDesktop("26.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatGeckoMobile("6.0")}}
+ Removed in {{CompatGeckoMobile("26.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-user-focus/index.html b/files/es/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..f945c3e64b --- /dev/null +++ b/files/es/web/css/-moz-user-focus/index.html @@ -0,0 +1,113 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - Referencia CSS +translation_of: Web/CSS/-moz-user-focus +--- +
{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -moz-user-focusse usa para indicar si el elemento puedo obtener el foco.

+ +

Al poner el valor de esta propiedad a ignore, deshabilitas el hecho de que el elemento pueda obtener el foco lo que significa que el usuario no podrá activar el elemento. Se saltará el elemento es un secuncia de tabuladores.

+ +

{{cssinfo}}

+ +
Nota: Esta propiedad no funciona con los elementos XUL {{XULElem("textbox")}} , porque el textbox en sí mismo nunca tomará el foco. En su lugar , XBL crea un elemento HTML  {{HTMLElement("input")}} anónimo dentro del textbox, y es ese elemento el que recibe el foco. Se puede evitar que el textbox obtenga el foco de teclado estableciendo su índice de tabulación a -1, y que obtenga el foco del ratón evitando la acción por defecto para los eventos mousedown.
+ +

Síntaxis

+ +
/* Palabras clave de valores */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valores gloables */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+
+ +

Valores

+ +
+
ignore
+
El elemento no aceptará el foco y será saltado en el orden de tabulación.
+
normal
+
El elemento puedeo aceptar el foco del teclado.
+
select-after
+
?
+
select-before
+
?
+
select-menu
+
?
+
select-same
+
?
+
select-all
+
?
+
none
+
?
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

Esta propiedad no es parte de ninguna especificación. Una propiedad similar user-focus fue propuesta en borradores previos de la especificación CSS 3 UI pero finalmente fué rechazada por el grupo de trabajo.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-user-input/index.html b/files/es/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..f94b13f1b3 --- /dev/null +++ b/files/es/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

En las aplicaciones Mozilla , -moz-user-input determina si un elemento aceptará entrada por parte del usuario. user-focus, una propiedad similar fue propuesta en  primeros borradores de un predecesor de la especificación CSS3 UI pero fue rechazada posteriormente por el grupo de trabajo..

+ +

{{cssinfo}}

+ +

-moz-user-input fue was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations).

+ +

Para elementos que normalmente son receptores de entrada por parte del usuario, como  {{HTMLElement("textarea")}}, el valor inicial de -moz-user-input es enabled.

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valores gloables */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Valores

+ +
+
none
+
El elemento no responde a la entrada de datos por parte del usuario y no estará {{Cssxref(":active")}}.
+
enabled
+
El elemento acepta entrada por parte del usuario. Para cajas de texto es el comportamiento por defecto.
+
disabled
+
El elemento no acepta datos del usuario. Sin embargo, no es lo mismo que establecer  {{XULAttr("disabled")}} a true, en ese caso el elemento es dibujado normalmente.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
input.example {
+  /* the user will be able to select the text, but not change it. */
+  -moz-user-input: disabled;
+}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..21b9593d93 --- /dev/null +++ b/files/es/web/css/-moz-user-modify/index.html @@ -0,0 +1,132 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Valores globales */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Valores

+ +
+
read-only
+
Valor por defecto. El contenido sólo se puede leer.
+
read-write
+
El usuario puede leer y escribir contenidos.
+
write-only
+
El usuario puede editar el contenido pero no leerlo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">El usuario puede cambiar este texto.</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 300, 30)}}

+ +

Especificaciones

+ +

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
+ Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-window-shadow/index.html b/files/es/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..fb2d15bdf0 --- /dev/null +++ b/files/es/web/css/-moz-window-shadow/index.html @@ -0,0 +1,52 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Resumen

+ +

La propiedad  CSS -moz-window-shadow especifica si una ventana tendrá sombra. Sólo funciona en Mac OS X.

+ +
+

Esta propiedad no estándar y a partir de Firefox 44 no puede ser usada más en sitios Web.

+
+ +

{{cssinfo}}

+ +

Firefox 3 añadió el soporte para ventanas transparentes en Mac OS X. Sin embargo, para este tipo de ventanas,  se quitaron las sombras y no había manera de habilitarlas.

+ +

En Firefox 3.5 cambiamos el comportamiento por defecto; todas las ventanas tienen ahora sombra. Introducimos la propiedad CSS -moz-window-shadow para proporcionar una manera de quitar las sombras no deseadas.

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
default
+
La ventana tendrá sombra con el estilo por defecto de la ventana.
+
menu {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para los menús.
+
tooltip {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para las herramientas.
+
sheet {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para las ventanas de datos
+
none
+
La ventana no tendrá sombra.
+
+ +

Ejemplos

+ +
.KUI-panel {
+  -moz-window-shadow: none;
+}
+
diff --git a/files/es/web/css/-ms-accelerator/index.html b/files/es/web/css/-ms-accelerator/index.html new file mode 100644 index 0000000000..33f1a38f9e --- /dev/null +++ b/files/es/web/css/-ms-accelerator/index.html @@ -0,0 +1,75 @@ +--- +title: '-ms-accelerator' +slug: Web/CSS/-ms-accelerator +tags: + - CSS + - Non-standard + - Propiedad CSS + - Referencia +translation_of: Archive/Web/CSS/-ms-accelerator +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

La propiedad CSS -ms-accelerator es una  esxtensión Microsoft que establece o recupera una cadena que indica si el objeto representa un método abreviado de teclado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* El objeto no es un atajo de teclado (por defecto) */
+-ms-accelerator: false
+/* El objeto es un atajo de teclado */
+-ms-accelerator: true
+
+ +

Values

+ +
+
false
+
+

El objeto no es un atajo de teclado

+
+
true
+
+

El objeto es un atajo de teclado

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Este ejemplo usa el atributo -ms-accelerator en un  elemento {{HTMLElement("u")}} para especificar que la "N" en el elemento {{HTMLElement("label")}} es un atajo de teclado. Cuando la opción de "Ocultar los indicadores de navegación del teclado hasta que use la tecla Alt" está habilitada en las propiedades de pantalla del usuario la "N" no estará subrayada hasta que el usuario presione la tecla Alt . Cuando Alt + N son presionadas,el elemento {{HTMLElement("input")}} que define un atributo {{htmlattrxref("accessKey","input")}} valor de atributo de "N" recibe el foco.

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Acelerador</title>
+  </head>
+  <body>
+    <label for="oName"><u style="-ms-accelerator: true; accelerator: true">N</u>ame: </label>
+    <input type="text"
+      id="oName"
+      size="25"
+      accesskey="N"
+      value="Your name here" />
+  </body>
+</html>
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Observaciones

+ +

Esta propiedad está soportada por Windows 2000 y versiones posteriores. permite a los usuarios ocultar los indicadores de navegación para los elementos del menú y los controles hasta que se presiona la tecla  Alt

+ +

Una clave de acceso es un solo carácter que se utiliza como método abreviado de teclado para seleccionar un objeto. El usuario presiona la tecla Alt y la mantiene presionada mientras presiona el carácter para mover el enfoque de entrada al objeto e invocar el evento predeterminado asociado con el objeto.

+ +

En Internet Explorer 8 (IE8) el atributo -ms-accelerator es una extensión de CSS, y se puede usar como un sinónimo para accelerator en el modo estándar de IE8.

diff --git a/files/es/web/css/-ms-overflow-style/index.html b/files/es/web/css/-ms-overflow-style/index.html new file mode 100644 index 0000000000..8e2295067a --- /dev/null +++ b/files/es/web/css/-ms-overflow-style/index.html @@ -0,0 +1,40 @@ +--- +title: '-ms-overflow-style' +slug: Web/CSS/-ms-overflow-style +tags: + - CSS + - No estándar(2) + - Propiedad + - Propiedad CSS + - Referencia + - Referencia CSS +translation_of: Archive/Web/CSS/-ms-overflow-style +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

-ms-overflow-style es una propiedad CSS propietaria, específica de  Internet Explorer y Microsoft Edge, que controla el compartamiento de la barra de desplazamiento (scroll) cuando el contenido de un elemento se desborda.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
auto
+
Valor inicial. Lo mismo que  inherit.
+
none
+
La barras de desplazamiento (Scrollbars) no son nuncas mostradas, aunque se puede hacer el scroll sobre el elemento si el contenido lo desoborda.
+
scrollbar
+
Las  barras de desplazamiento(sroll) "Tradicionales" se muestran si el contenido desborda el elemento. Estas barras no se auto ocultan ni se solapan con el contenido del elemento. Por consiguente, las dimensiones del aréa de contenido son reducidas en una cantidad igual al tamaño de las barras de desplazamiento.
+
-ms-autohiding-scrollbar
+
Se muestran barras de desplazamiento que se auto ocultan si el contenido desborda el elemento. Estas barras se muestran mientras se hace el desplzamiento o scroll y brevemente después de realizar el desplazamiento y cuando la interacción ha terminado se ocultan. Mientras estén visibles se supeponen al contenido del elemento..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificciones

+ +

No es parte de ninguna especificación. Microsoft tiene una descripción suya en MSDN.

diff --git a/files/es/web/css/-webkit-border-before/index.html b/files/es/web/css/-webkit-border-before/index.html new file mode 100644 index 0000000000..444337ac10 --- /dev/null +++ b/files/es/web/css/-webkit-border-before/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-border-before +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-border-before es una propiedad que permite configurar los valores de la propiedad borde para el bloque lógico de inicio en un sólo sitio de la hoja de estilos. -webkit-border-before se puede usar para establecer los valores para más de uno de: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, y {{cssxref("-webkit-border-before-color")}}. Se mapea a un borde físico dependiendo del modo de escritura del elemento, la direccionalidad y la orientación del texto. Se corresonde con  la propiedad {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos en {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Se relaciona con {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, y {{cssxref("-webkit-border-end")}}, que definen los otros bordes del elemento.

+ +

Esta propiedad se prevee que será incluida en el estándar como  {{cssxref("border-block-start")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores para el borde */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valores globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+
+ +

Valores

+ +

Uno o más de los siguiente valores, dando igual el orden en el que se especifiquen:

+ +
+
<'border-width'>
+
Ver {{cssxref("border-width")}}
+
<'border-style'>
+
Ver {{cssxref("border-style")}}
+
<'color'>
+
Ver {{cssxref("color")}}
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación aunque está relacionada con la propiedad {{cssxref("border-block-start")}}.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-box-reflect/index.html b/files/es/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..ca3fde311e --- /dev/null +++ b/files/es/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-box-reflect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS -webkit-box-reflect peermite reflejar el contenido del elemento en una dirección específica.

+ +
Nota: Esta característica no está pensada para ser usada en páginas Web .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS {{cssxref("element", "element()")}} .
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores para la dirección */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valor del desplazamiento */
+-webkit-box-reflect: below 10px;
+
+/* Valor de máscara */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valores globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+
+ +

Valores

+ +
+
above, below, right, left
+
Son palabras clave que indican en qué dirección se realiza la reflexión.
+
<length>
+
Indica el tamaño de la reflexión.
+
<image>
+
Describe la máscara que se aplicará a la reflexión.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función {{cssxref("element", "element()")}}.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatChrome("4.0")}}{{CompatNo}}{{CompatOpera("15.0")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatAndroid("2.1")}}{{CompatNo}}22.0 {{CompatVersionUnknown}}3.2 {{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-mask-attachment/index.html b/files/es/web/css/-webkit-mask-attachment/index.html new file mode 100644 index 0000000000..50309f5376 --- /dev/null +++ b/files/es/web/css/-webkit-mask-attachment/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-attachment +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se ha especificado una {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-attachment determina si la posición de la imagen de la máscara es fija dentro de la ventana (viewport) , o se desplaza a lo largo del bloque que la contiene.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

Valores

+ +
+
scroll
+
Si se ha especifiacod  scroll , la imagen de máscara se desplaza dentro de la ventana (viewport) junto con el bloque que contiene la máscara de imagen.
+
fixed
+
Si se ha especificado el valor fixed , la imagen de máscara no se desplaza junto con el elemento que la contienen, en vez de eso permanece es una posición fija dentro de la ventana (viewport).
+
+ +

Ejemplos

+ +
body {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-attachment: fixed;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo() }} [1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

[1] Se ha dejado de dar soporte desde Chrome 24.

+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }},  {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-box-image/index.html b/files/es/web/css/-webkit-mask-box-image/index.html new file mode 100644 index 0000000000..6ba9930377 --- /dev/null +++ b/files/es/web/css/-webkit-mask-box-image/index.html @@ -0,0 +1,130 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-box-image +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

-webkit-mask-box-image establece la imagen de máscara para la caja del borde de un elemento.

+ + + +

Síntaxis

+ +
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
+
+ +

Where:

+ +
+
<mask-box-image>
+
{{cssxref("<uri>")}} | <gradient> | none
+
<top> <right> <bottom> <left>
+
<length> | <percentage>
+
<x-repeat> <y-repeat>
+
repeat | stretch | round
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será usada como imagen de máscara..
+
<gradient>
+
La función -webkit-gradient que se usará como imagen de máscara.
+
none
+
Para especificar que la caja del borde no va a tener imagen de máscara.
+
+ +
+
<length>
+
El tamaño del desplazamiento de la imagen de máscara. Ver  {{cssxref("<length>")}} para posibles unidades.
+
<percentage>
+
El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.
+
repeat
+
La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja.  Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.
+
stretch
+
La imagen de máscara se encoge para contener la caja del borde exactamente.
+
round
+
 Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.
+
+ +

Ejemplos

+ +
.exampleone {
+    -webkit-mask-box-image: url('mask.png');
+}
+
+.exampletwo {
+    -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html new file mode 100644 index 0000000000..02a522733f --- /dev/null +++ b/files/es/web/css/-webkit-mask-clip/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/-webkit-mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

donde:

+ +
+
<clip-style>
+
border | padding | content | text
+
+ +

Valores

+ +
+
border
+
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
+
padding
+
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
+
content
+
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
+
text
+
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
+
+ +

Ejemplo

+ +
div {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-clip: padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-composite/index.html b/files/es/web/css/-webkit-mask-composite/index.html new file mode 100644 index 0000000000..c8a3666fee --- /dev/null +++ b/files/es/web/css/-webkit-mask-composite/index.html @@ -0,0 +1,121 @@ +--- +title: '-webkit-mask-composite' +slug: Web/CSS/-webkit-mask-composite +tags: + - CSS +translation_of: Web/CSS/-webkit-mask-composite +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

La propiedad -webkit-mask-composite especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad {{ Cssxref("-webkit-mask-image") }}.

+ + + +

Síntaxis

+ +
-webkit-mask-composite: <composite-style>[, <composite-style>]*
+
+ +

Donde:

+ +
+
<composite-style>
+
clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor
+
+ +

Valores

+ +
+
clear
+
Los píxeles coincidentes en la imagen origen y destino son borrados.
+
copy
+
La imagen de máscara origen reemplaza la imagen de máscara destino.
+
source-over
+
La imagen de máscara origen se dibuja sobre la imagen de máscara destino.
+
source-in
+
Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.
+
source-out
+
Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.
+
source-atop
+
Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.
+
destination-over
+
Se dibuja la imagen de máscara destino sobre la de origen.
+
destination-in
+
Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.
+
destination-out
+
Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.
+
destination-atop
+
Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.
+
xor
+
Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.
+
+ +

Ejemplos

+ +
.example {
+    -webkit-mask-image: url(mask1.png), url('mask2.png');
+    -webkit-mask-composite: xor, source-over;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }}

diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html new file mode 100644 index 0000000000..17fc6d5e1e --- /dev/null +++ b/files/es/web/css/-webkit-mask-image/index.html @@ -0,0 +1,156 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será utilizado como imagen de máscara.
+
<gradient>
+
La función webkit-gradient que será usada como imagen de máscara.
+
none
+
Usado para especificar si un elemento no tiene imagen de máscara.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
body {
+  -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+  -webkit-mask-image: none;
+}
+
+ +

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..23b0f52dc7 --- /dev/null +++ b/files/es/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
padding
+
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
+
border
+
La posición de la imagen de máscara es relativa al borde.
+
content
+
La posición de la imagen de máscara es relativa al contenido.
+
+ +

Ejemplos

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* La imagen de máscara estará dentro del padding */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/-webkit-mask-position-x/index.html b/files/es/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..a2d712e337 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-position-x CSS establece la posición horizontal inicial de una imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave valores */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* <porcentaje> valores */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* <longitud> valores */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Múltiples valores */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+
+ +

Valores

+ +
+
<percentage>
+
Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que  el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.
+
<length>
+
Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.
+
left
+
Equivalente a 0%.
+
center
+
Equivalente a 50%.
+
right
+
Equivalente a 100%.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

See also

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/es/web/css/-webkit-mask-position-y/index.html b/files/es/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..e68f3ac8e8 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-position-y fija la posición inicial vertical de una imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valores */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* valores <porcentaje> */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* valores <longitud> */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Valores Múltiples*/
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+
+ +

Values

+ +
+
<percentage>
+
Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que  el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.
+
<length>
+
Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).
+
top
+
Equivalente a 0%.
+
bottom
+
Equivalente a 100%.
+
center
+
Equivalente a 50%.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+
+ +

Especificaciones

+ +

Not part of any specification.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html new file mode 100644 index 0000000000..f2162ce36b --- /dev/null +++ b/files/es/web/css/-webkit-mask-position/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/-webkit-mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Sumario

+ +
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

+ + + +
+
<percentage>
+
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
+
<length>
+
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
+
top
+
Equivalente al 0% para la posición vertical.
+
right
+
Equivalente al 100% para la posición horizontal.
+
bottom
+
Equivalente al 100% para la posición vertical.
+
left
+
Equivalente al 0% para la posición horizontal.
+
center
+
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
+
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: bottom right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver tambien

+ +

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-repeat-x/index.html b/files/es/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..5395782abd --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,136 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-repeat-x especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave Valor */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+
+ +

Valores

+ +
+
repeat
+
La imagen de máscara se repite tanto horizontal como verticalmente.
+
no-repeat
+
La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.
+
space
+
La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.
+
round
+
Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Es posible especificar un  <repeat-style> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+
+ +

Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.

+ +

Ver además

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}

diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.html b/files/es/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..23f989db45 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-repeat-y especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave Valor */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+
+ +

Valores

+ +
+
repeat
+
La imagen se repite verticalmente
+
no-repeat
+
La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.
+
space
+
La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento  y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.
+
round
+
Al aumentar el espacio vertical  la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px.
+
As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Es posible especificar un  <repeat-style> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+
+ +

Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.

+ +

Ver además

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}

diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..50ff3bc603 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de valor únicas */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Palabras clave de valor mútiple */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Valores globlaes */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Valores

+ +
+
repeat
+
La máscara de imagen se repite tanto vertical como horizontalmente.
+
repeat-x
+
La imagen de máscara de repite sólo horizontalmente.
+
repeat-y
+
La imagen de máscara de repite sólo verticalemente.
+
no-repeat
+
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html new file mode 100644 index 0000000000..59b3a02370 --- /dev/null +++ b/files/es/web/css/-webkit-mask/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+
+ +

Valores

+ +
+
mask-image
+
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
+
mask-repeat
+
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
+
mask-attachment
+
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
+
mask-position
+
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
+
mask-origin
+
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
+
mask-clip
+
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

See also

+ + diff --git a/files/es/web/css/-webkit-overflow-scrolling/index.html b/files/es/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..61d96b749d --- /dev/null +++ b/files/es/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad CSS -webkit-overflow-scrolling controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
auto
+
Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.
+
touch
+
Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<div class="scroll-touch">
+  <p>
+    This paragraph has momentum scrolling
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
+    This paragraph does not.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Apple tiene una  descripción en la Referencia CSS de Safari.

+ +

Compatibilidad en navegadores

+ +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/-webkit-print-color-adjust/index.html b/files/es/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..67e3456e5a --- /dev/null +++ b/files/es/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,102 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-print-color-adjust es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.

+ +

Síntaxis

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Valores

+ +
+
economy
+
Comportamiento normal.  Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.
+
exact
+
Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.
+
+ +

Herencia

+ +

Esta propiedad es heredada.

+ +

Especificaciones

+ +

Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el Chromium bug 131054,  las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con  -webkit-print-color-adjust: exact. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.

+ +

[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-tap-highlight-color/index.html b/files/es/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..065b35dac9 --- /dev/null +++ b/files/es/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,43 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

-webkit-tap-highlight-color es una propiedad CSS no estándar que fija el color que sirve para destacar un enlace cuando se golpea  sobre él (normalmente con el dedo en dispositivos táctiles). Ese color destacado indica que se ha presionado correctamente e indica el elemento sobre el cuál se ha golpeado.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
-webkit-tap-highlight-color: red;
+
+ +

Valores

+ +

Un {{Cssxref("color value")}}.

+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Apple tiene una descripción en la Guía Web de Contenidos sobre Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

Soportado por WebKit/Safari, Blink/Chrome, y y algunas versiones de Internet Explorer y Microsoft Edge.

diff --git a/files/es/web/css/-webkit-text-fill-color/index.html b/files/es/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..6882843fd7 --- /dev/null +++ b/files/es/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-text-fill-color especifica el color de relleno de las letras de un texto. Si la propiedad no está establecidad se usará el valor de la propiedad {{cssxref("color")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}{{Spec2('Compat')}}Estandarización estándar
Referencia CSS Safari
+ '-webkit-text-fill-color' en ese documento.		Documentanción no oficial no estándarDocumentación inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CompatibilidadChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CompatibilidadAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke-color/index.html b/files/es/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..ef5119cb4e --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,129 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - No estándar(2) + - Propiedad CSS +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-text-stroke-color especifica el  color del trazo de los caracteres de texto. Si no se fija se usa el valor de la propiedad {{cssxref("color")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* valores <color> */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valores gloables */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

Valores

+ +
+
<color>
+
El color del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS de Safari CSS
+ '-webkit-text-stroke-color' en ese documento.		Documentación no estándar y no oficial.Documentación Inicial
+ +

No es parte de ninguna especificación.

+ +

Apple tiene una descripción de -webkit-text-stroke-color en la referencia CSS de Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke-width/index.html b/files/es/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..797dbea3f4 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimental + - No estandar + - Referencia +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad  CSS -webkit-text-stroke-width especifica la anchura del trazo de texto.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* TODO */
+
+ +

Valores

+ +
+
<line-width>
+
La anchura del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS de Safari
+ '-webkit-text-stroke-width' en ese documento.		Non-standard unofficial documentationDocumentación Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke/index.html b/files/es/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..d9c1e26ae6 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,142 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-text-stroke +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad  CSS -webkit-text-stroke especifica la  anchura y  color del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores anchura y color */
+-webkit-text-stroke: 4px navy;
+
+/* Valores globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

Valores

+ +
+
<length>
+
La anchura del trazo.
+
<color>
+
El color del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p id="example">El trazo de este texto es rojo.</p>
+ +

CSS

+ +
#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+ +

{{EmbedLiveSample("Example", 600, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS Safari
+ '-webkit-text-stroke' en ese documento.		Documentación no oficial y no estándarDocumentación Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-touch-callout/index.html b/files/es/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..dbb8e830e7 --- /dev/null +++ b/files/es/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,106 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-touch-callout controla la visualización de la llamada predeterminada que se muestra cuando se mantiene pulsado un objetivo táctil .

+ +

Cuando se toca y se mantiene la presión  en un objetivo en iPhone OS, Safari muestra un un cuadro con información sobre el enlace.  Esta propiedad permite deshabilitar este comportamiento.

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valores globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

Valores

+ +
+
default
+
Se muestra el cuadro de información por defecto.
+
none
+
El cuadro está deshabilitado
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Example

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Apple tiene una descripcón en la Referencia CSS de Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +

[1] La propiedad  -webkit-touch-callout fue implementada en iOS 2.0 y posteriormente añadida a WebKit ({{webkitbug(121507)}}).

diff --git a/files/es/web/css/@charset/index.html b/files/es/web/css/@charset/index.html new file mode 100644 index 0000000000..c45a05f3e8 --- /dev/null +++ b/files/es/web/css/@charset/index.html @@ -0,0 +1,123 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - Regla-at +translation_of: Web/CSS/@charset +--- +
{{ CSSRef }}
+ +

Resumen

+ +

La regla-at @charset de CSS especifica la codificación de caracteres usada en la hoja de estilos. Éste debe ser el primer elemento en la hoja de estilos, y no debe ser precedidad por ningun otro caracter; al no ser una declaración anidada, no puede ser usada dentro de grupos de reglas-at condicionales. Si se definen varias reglas-at @charset, solamente se usará la primera. La regla-at @charset no puede ser usada dentro de un atributo style style en un elemento HTML o dentro del elemento {{ HTMLElement("style") }} , ya que en estos casos se tomará en cuenta la codificación de la página HTML contenedora.

+ +

Esta regla-at es útil cuando se usan caracteres fuera de la codificación ASCII en alguna propiedad CSS, como {{ cssxref("content") }}.

+ +

Habiendo diferentes maneras de definir la codificación de caracteres en una hoja de estilos, el navegador intentará seguir este orden para identificarlo (deteniéndose en el primer paso que dé resultado):

+ +
    +
  1. El valor de la Marca de orden de bytes al principio del archivo.
    2. +
  2. El valor dado por el atributo charset del encabezado HTTP Content-Type: o su equivalente en el protocolo usado para descargar la hoja de estilos.
    3. +
  3. La regla-at @charset de CSS.
    4. +
  4. Usar la codificación de caracteres definida en el documento de referencia: el atributo charset attribute del elemento {{ HTMLElement("link") }}. Este método es obsoleto para HTML5 y no debe ser usado.
    5. +
  5. Asumir que el documento es UTF-8.
    6. +
+ +

Sintaxis

+ +
@charset "UTF-8";
+@charset 'iso-8859-15';
+
+ +

donde:

+ +
+
charset
+
Es un valor {{cssxref("<string>")}} que denota la codificación de caracteres que será usada. Debe ser el nombre de una codificación de caracteres compatible con Web, definida en el registro IANA. Si varios nombres están asociados a una codificación, solamente se usará el que está marcado como principal.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
@charset "UTF-8";       /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) */
+ @charset "UTF-8";      /* Inválido, hay un caracter (espacio) antes de la regla-at */
+@charset UTF-8;         /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("<string>")}} de CSS */
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}{{ Spec2('CSS2.1') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico2.0{{ CompatGeckoDesktop("1.8") }}[1]5.5[2]94
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.1{{ CompatGeckoMobile("1.8") }}5.5[2]10.04
+
+ +

[1] Firefox 1.0 soporta sólo una sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.

+ +

[2] De IE 5.5 a IE 7, IE también soporta la sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.

diff --git a/files/es/web/css/@counter-style/additive-symbols/index.html b/files/es/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..9c91ff7f39 --- /dev/null +++ b/files/es/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,129 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - Descriptor CSS + - Estilos de Contador CSS + - Referencia +translation_of: Web/CSS/@counter-style/additive-symbols +--- +

Resumen

+ +

El descriptor additive-symbols es similar al descriptor {{cssxref('symbols')}}, y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor {{cssxref('system')}} es additive. El descriptor additive-symbols define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo. El sistema aditivo es usado para construir sistemas de numeración de valores de signos como la numeración romana.

+ +

Cuando el valor del descriptor es cyclic, numeric, alphabetic, symbolic, o fixed, se usa el descriptor symbols, en lugar de additive-symbols para especificar los símbolos de conteo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<ul class="list">
+   <li>One</li>
+   <li>Two</li>
+   <li>Three</li>
+   <li>Four</li>
+   <li>Five</li>
+</ul>
+ +

Contenido CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@counter-style/index.html b/files/es/web/css/@counter-style/index.html new file mode 100644 index 0000000000..557c5b42a9 --- /dev/null +++ b/files/es/web/css/@counter-style/index.html @@ -0,0 +1,200 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - At-rule + - CSS + - NeedsTranslation + - Reference + - Styles + - TopicStub + - counter +translation_of: Web/CSS/@counter-style +--- +

{{CSSRef}}

+ +

Summary

+ +

The @counter-style CSS at-rule lets authors define specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.

+ +

Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

+ +

Syntax

+ +

Descriptors

+ +

Each @counter-style is identified by a name and has a set of descriptors.

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
+
+ The below @counter-style rule uses images instead of character symbols.
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

The above counter style rule can be applied to lists like this:

+ +
.items {
+   list-style: circled-alpha;
+}
+
+ +

Which will produce lists like this:

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ....
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six

+ +

27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

Checkout more examples on the demo page.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..8a81c04645 --- /dev/null +++ b/files/es/web/css/@counter-style/symbols/index.html @@ -0,0 +1,144 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - Descriptor CSS + - Estilos de contadores CSS +translation_of: Web/CSS/@counter-style/symbols +--- +

Summary

+ +

El descriptor symbols es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador. El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.

+ +

Los valores posibles para descriptor de símbolos incluyen:

+ + + +

{{cssinfo}}

+ +

Sintaxis

+ +
symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('first.svg') url('second.svg') url('third.svg');
+symbols: indic-numbers;
+
+ +

Valores

+ +
+
<symbol>
+
Representa u símbolo (<symbol>) usado dentro del sistema de conteo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style symbols-example {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.list {
+  list-style: symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html new file mode 100644 index 0000000000..250b5342c7 --- /dev/null +++ b/files/es/web/css/@document/index.html @@ -0,0 +1,82 @@ +--- +title: '@document' +slug: Web/CSS/@document +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The @document CSS at-rule restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+
+ + + +

Syntax

+ + + +

Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:

+ + + +

The values provided to the url(), url-prefix(), and domain() functions can be optionally enclosed by single or double quotes. The values provided to the regexp() function must be enclosed in quotes.

+ +

Escaped values provided to the regexp() function must additionally be escaped from the CSS. For example, a . (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to \.), then escape that string using CSS rules (to \\.).

+ +
+

Note: There is a -moz-prefixed version of this property — @-moz-document. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

CSS

+ +
@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Specifications

+ +

Initially in {{SpecName('CSS3 Conditional')}}, @document has been postponed to Level 4.

+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.document")}}

+ +

See also

+ + diff --git a/files/es/web/css/@font-face/font-display/index.html b/files/es/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..f6dcaf0c03 --- /dev/null +++ b/files/es/web/css/@font-face/font-display/index.html @@ -0,0 +1,96 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - Descriptor CSS + - Experimental + - Fuentes CSS + - Referencia + - font-display + - web fonts +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

El descriptor font-display determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.

+ +

La visualización de las fuentes

+ +

La  visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.

+ +
+
Tiempo de bloqueo de fuente
+
Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa invisible. Si la fuente se carga correctamente durante este período, se utiliza normalmente.
+
Tiempo de intercambio de fuente
+
Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.
+
Tiempo de fallo de la fuente
+
Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Valores

+ +
+
auto
+
El agente de usuario define la estrategia de visualización de fuentes.
+
block
+
Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito
+
swap
+
No establece  tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.
+
fallback
+
Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.
+
optional
+
Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

diff --git a/files/es/web/css/@font-face/font-family/index.html b/files/es/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..1069ff05a8 --- /dev/null +++ b/files/es/web/css/@font-face/font-family/index.html @@ -0,0 +1,116 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - CSS + - font-family +translation_of: Web/CSS/@font-face/font-family +--- +

{{CSSRef}}

+ +

Resumen

+ +

El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.

+ +

La propiedad font-family puede contener varias fuentes  a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.

+ +

hay dos tipos de nombres de familias de fuentes:

+ + + +

Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
font-family: font|initial|inherit;
+ +

Valores

+ +

family-name
+ generic-family
+ Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.

+ +

initial
+ Establace el valor por defecto para esta propiedad.

+ +

inherit
+ Hereda esta propiedad del elemento padre.

+ +

serif
+ Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.

+ +

sans-serif
+ Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.

+ +

fantasy
+ Fuente genérica Fantasy.

+ +

monospace
+ Fuente genérica Monospace, como por ejemplo Courier.

+ +

cursive
+ Fuente genérica cursiva, como por ejemplo Script.

+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:

+ +
p {
+    font-family: "Times New Roman", Georgia, Serif;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico1.01.04.03.51.0
+ +

 

diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..5b812c2d63 --- /dev/null +++ b/files/es/web/css/@font-face/font-style/index.html @@ -0,0 +1,134 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - CSS + - Fuentes + - Referências +translation_of: Web/CSS/@font-face/font-style +--- +

{{CSSRef}}

+ +

Summary

+ +

La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "@font-face".

+ +

Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.

+ +

{{cssinfo}}

+ +

Syntax

+ +
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+ +

Values

+ +

normal
+ Selecciona la version normal del estilo de fuente.

+ +

italic
+ Especifica que el estilo de fuente es la versión en cursiva de la fuente normal.

+ +

oblique
+ Especifica que el estilo de fuente es la versión en cursiva, también, pero de forma diferente, de la fuente normal.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +

unstyled Garamond

+ +

La versión en cursiva de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.

+ +

artificially sloped garamond

+ +

Por otra parte, si existe un verdadera versión en cursiva del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en cursiva. Las verdaderas cursivas utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.

+ +

@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }

+ +

italic garamond

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.1")}}4.0  4.010.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
+
+
diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html new file mode 100644 index 0000000000..b00594d694 --- /dev/null +++ b/files/es/web/css/@font-face/index.html @@ -0,0 +1,162 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.

+ +

Sintaxis

+ +
@font-face {
+  font-family: <un-nombre-de-fuente-remota>;
+  src: <origen> [,<origen>]*;
+  [font-weight: <peso>];
+  [font-style: <estilo>];
+}
+
+ +

Valores

+ +
+
<un-nombre-de-fuente-remota> 
+
Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.
+
<origen> 
+
Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma local("Nombre de Fuente").
+
<peso> 
+
Un valor de peso/grosor de fuente.
+
<estilo> 
+
Un valor de estilo de fuente.
+
+ +

Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis local(). Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.

+ +

Formatos de fuentes soportados

+ + + +

Ejemplos

+ +

Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.

+ +

Muestra en vivo

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

Notas

+ + + +

Compatibilidad del navegador

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Chrome (WebKit)4 (532.5)Solo fuentes TrueType y OpenType
6 (534.3)Web Open Font Format (WOFF) soporte agregado
Opera10.0Solo fuentes TrueType y OpenType
Safari (WebKit)3.1 (525.6)Solo fuentes TrueType y OpenType
NavegadorVersión desdeSoporte de
Internet Explorer4.0Solo fuentes OpenType embebidas
Internet Explorer9.0 Preview 3Web Open Font Format (WOFF) soporte agregado
Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
3.6 (1.9.2)Web Open Font Format (WOFF) soporte agregado
+ +

Vea también MSDN Microsoft library @font-face.

+ +

Especificaciones

+ + + +

Vea también

+ + diff --git a/files/es/web/css/@font-face/src/index.html b/files/es/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..a9627ebf9b --- /dev/null +++ b/files/es/web/css/@font-face/src/index.html @@ -0,0 +1,245 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - Descriptor CSS + - Fuentes CSS + - Referencia +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

El descriptor CSS src de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla @font-face sea válida.

+ +

Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.

+ +

Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla @font-face. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla @font-face. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <url> values */
+src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
+src: url(path/to/font.woff);                         /* relative URL */
+src: url(path/to/font.woff) format("woff");          /* explicit format */
+src: url('path/to/font.woff');                       /* quoted URL */
+src: url(path/to/svgfont.svg#example);               /* fragment identifying font */
+
+/* <font-face-name> values */
+src: local(font);      /* unquoted name */
+src: local(some font); /* name containing space */
+src: local("font");    /* quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+    url(path/to/font.woff) format("woff"),
+    url(path/to/font.ttf) format("opentype");
+
+ +

Valores

+ +
+
<url> [ format( <string># ) ]?
+
Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.
+
<font-face-name>
+
Especifica el nombre de una fuente instalada localmente, usando la función local(), que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font), url('examplefont.woff') format("woff"),
+      url('examplefont.woff') format("opentype");
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("4.0")}}12.0{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("6.0")}}{{CompatOpera("9.0")}}{{CompatSafari("3.1")}}
WOFF{{CompatChrome("5.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE("9.0")}}{{CompatOpera("11.1")}}{{CompatSafari("5.1")}}
WOFF 2{{CompatChrome("36.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("35.0")}}[1]{{CompatNo}}{{CompatOpera("26.0")}}{{CompatNo}}
TrueType{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("10.0")}}{{CompatSafari("3.1")}}
OpenType{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("10.0")}}{{CompatSafari("3.1")}}
Embedded OpenType{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatIE("6.0")}}{{CompatNo}}{{CompatNo}}
SVG Font{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatNo}}{{CompatOpera("9.0")}}{{CompatSafari("3.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Soporte básico{{CompatAndroid("2.2")}}{{CompatGeckoMobile("1.9.1")}}{{CompatIE("10.0")}}{{CompatNo}}{{CompatOpera("12.0")}}{{CompatSafari("3.1")}}
WOFF{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WOFF 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
TrueType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OpenType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Embedded OpenType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVG Font{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta característica está implementada bajo la preferencia gfx.downloadable_fonts.woff2.enabled, inicialmente con valor predeterminado de false. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de true.

+ +

[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.

diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html new file mode 100644 index 0000000000..61638788ac --- /dev/null +++ b/files/es/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,86 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Experimental + - Layout + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +
{{cssref}}
+ +

La regla CSS unicode-range especifica un rango específico de caracteres a ser usados por una fuente definida  {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.

+ +

El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.

+ +

Sintaxis

+ +
/* valores <unicode-range> */
+unicode-range: U+26;               /* un único código */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* rango de códigos */
+unicode-range: U+4??;              /* rango por expresión */
+unicode-range: U+0025-00FF, U+4??; /* multiples valores */
+
+ +

Valores

+ +
+
un único código
+
Un único código de caracter Unicode, por ejemplo U+26.
+
un rango de código
+
Un rango de códigos de caracter Unicode. Asi que, por ejemplo, U+0025-00FF significa incluir todos caracteres en el rango U+0025 a U+00FF.
+
rango por expresión
+
Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter '?', asi que, por ejemplo U+4?? significa incluir todos los caracteres en el rango U+400 a U+4FF.
+
+ +

Ejemplos

+ +

Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio,  usaremos una fuente sans-serif, Helvetica para el texto, y una fuente serif, Times New Roman, para el caracter &.

+ +
+
<div>Me & You = Us</div>
+
+ +

En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.

+ +
+
@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}
+ +

Reultado

+ +

What the example should looks like if your browser supports it.

+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.at-rules.font-face.unicode-range")}}

diff --git a/files/es/web/css/@font-feature-values/index.html b/files/es/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..7966f7433e --- /dev/null +++ b/files/es/web/css/@font-feature-values/index.html @@ -0,0 +1,134 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +tags: + - CSS + - Fuentes + - Referencia + - Regla-at +translation_of: Web/CSS/@font-feature-values +--- +
{{CSSRef}}
+ +

Resumen

+ +

La regla-at CSS @font-feature-values permite a los autores usar un nombre común de {{cssxref("font-variant-alternates")}} para características activadas de distintas formas en OpenType. Permite simplificar el código CSS cuando se usan distintas fuentes.

+ +
@font-feature-values Font One { /* Cómo activar nice-style en Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two { /* Cómo activar nice-style en Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+.nice-look { font-variant-alternates: styleset(nice-style); } /* Independiente de la fuente */
+
+ +

La regla-at @font-feature-values debe ser usada en la parte superior de la hoja de estilos, pero también dentro de Grupos de reglas condicionales.

+ +

Sintaxis

+ +

Bloques de valores de características

+ +
+
@swash
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "swash()", "#swash()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de swash permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@annotation
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de annotation permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@ornaments
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de ornaments permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@stylistic
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylistic permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@styleset
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylset permite una cantidad ilimitada de valores: ident1: 2 4 12 1 corresponden a los valores OpenType ss02, ss04, ss12, ss01. Nótese que los valores superiores a 99 son válidos, pero no corresponden a ningún valor OpenType y serán ignorados.
+
@character-variant
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de character-variant permite uno o dos valores: ident1: 2  corresponde a cv02=1 y ident2: 2 4 corresponde a cv02)4 e ident2: 2 4 5 no es válido.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementación experimental de las extensiones CSS Fonts Nivel 3 estaba disponible desde Gecko 24. Estaba regido por la preferencia layout.css.font-features.enabled con valor predeterminado true en Nightly y Aurora solamente.

+ +

Véase también

+ + diff --git a/files/es/web/css/@import/index.html b/files/es/web/css/@import/index.html new file mode 100644 index 0000000000..145304cf70 --- /dev/null +++ b/files/es/web/css/@import/index.html @@ -0,0 +1,118 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +

{{CSSRef}}

+ +

Resumen

+ +

La regla-at CSS @import  permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una declaración anidada, no puede ser usado dentro de grupos condicionales de reglas-at.

+ +

Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio @import. Estas condiciones @import se especifican separando por una coma las consultas de medios (media query) despues de la url. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando  all para el medio tiene el mismo efecto.

+ +

Sintaxis

+ +
@import url;                      or
+@import url list-of-media-queries;
+
+ +

Dónde :

+ +
+
url
+
es una {{cssxref("<string>")}} o un {{cssxref("<uri>")}}
+
Representa la ubicación del recurso a importar. La url puede ser absoluta o relativa.
+
list-of-media-queries
+
Es una lista separada por comas de consultas de medios (media query) que condicionan la aplicación de las reglas CSS definidas en el enlace url. Si el navegador no soporta cualquiera de estos consultas de medios (media query),  ni siquiera cargará el recurso vinculado.
+
+ +

Ejemplos

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}{{ Spec2('CSS3 Media Queries') }}Extiende la sintaxis para soportar cualquier consultas de medios (media query) y no sólo los tipos de medios simples.
{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}{{ Spec2('CSS2.1') }}Añade soporte para {{cssxref("<string>")}}
+  para denotar la url de una hoja de estilo,
+ y es requerida para insertar la regla @import  en el principio del documento CSS.
{{ SpecName('CSS1', '#the-cascade', '@import') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}5.5{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}5.5{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/css/@keyframes/index.html b/files/es/web/css/@keyframes/index.html new file mode 100644 index 0000000000..55944c37db --- /dev/null +++ b/files/es/web/css/@keyframes/index.html @@ -0,0 +1,178 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Resumen

+ +

La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.

+ +
Para utilizar keyframes, se crea una regla de @keyframes con un nombre que es utilizada por la propiedad {{cssxref ("animation-name")}} para que coincida con una animación de keyframe a su lista. Cada regla @keyframes contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.
+ +
 
+ +
Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.
+ +

Listas válidas de keyframe

+ +
Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos  0% (o desde) y 100% (o hacia) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración keyframe es inválida y no se puede utilizar para la animación.
+ +
 
+ +
Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.
+ +

Duplicar resolución

+ +
Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de @keyframes no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.
+ +
 
+ +
Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de @keyframes para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de @keyframes
+si varios kayframes especifican los valores de los mismos porcentajes.
+ +
+

Cuando las propiedades son dejadas fuera de algunos keyframes

+ +
Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:
+
+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +
En este caso, la propiedad {{cssxref ("top")}} anima con los keyframes de 0%, 30% y 100%, y {{cssxref ("left")}} anima utilizando los keyframes 0%, 68%, y 100%.
+ +
 
+ +
Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.
+ +

Cuando se define un keyframe varias veces

+ +
La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:
+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +
+
En este ejemplo, en el 50% del keyframe, el valor utilizado es top: 10px y todos los demás valores en este keyframe se ignoran.
+ +
 
+ +
{{non-standard_inline}} {{fx_minversion_inline ("14")}} los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.
+
+ +

Sintaxis

+ +
@keyframes <identifier> {
+  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
+}
+
+ +

Valores

+ +
+
<identifier>
+
Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.
+
from
+
Un desplazamiento inicial de 0%.
+
to
+
Un desplazamiento final de 100%.
+
{{cssxref("<percentage>")}}
+
Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.
+
+ +

Ejemplos

+ +

Mira los ejemplos del CSS animations.

+ +

Especificaciones

+ +

Compatibilidad del navegador

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadpComentario
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }} 
+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012 {{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }} +

{{ CompatUnknown()}}iones

+
+ +

Vease también

+
+ + diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html new file mode 100644 index 0000000000..7cb29fe768 --- /dev/null +++ b/files/es/web/css/@media/altura/index.html @@ -0,0 +1,82 @@ +--- +title: Altura +slug: Web/CSS/@media/altura +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características media +translation_of: Web/CSS/@media/height +--- +
{{cssref}}
+ +

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

+ +

Sintáxis

+ +

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

+ +

Ejemplo

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's height.</div>
+ +

CSS

+ +
/* Altura exacta */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git a/files/es/web/css/@media/color/index.html b/files/es/web/css/@media/color/index.html new file mode 100644 index 0000000000..462a566a07 --- /dev/null +++ b/files/es/web/css/@media/color/index.html @@ -0,0 +1,80 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - CSS + - Referencia +translation_of: Web/CSS/@media/color +--- +

color es una característica CSS relativa al medio de presentación cuyo valor es un  <integer> que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..91b1d2cce4 --- /dev/null +++ b/files/es/web/css/@media/display-mode/index.html @@ -0,0 +1,90 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características de medio + - consultas de medio + - display + - display-mode + - media feature +translation_of: Web/CSS/@media/display-mode +--- +
{{cssref}}
+ +

La característica de medios (media feature) de CSS display-mode puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.

+ +

La característica corresponde al miembro display del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente

+ +

Sintaxis

+ +

La característica display-mode se especifica como un valor de palabra clave elegida de la siguiente lista.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modo de visualizaciónDescripciónModo de visualización de reserva
fullscreenToda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.standalone
standaloneLa aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.minimal-ui
minimal-uiLa aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.browser
browserLa aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.(none)
+ +

Ejemplo

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/es/web/css/@media/hover/index.html b/files/es/web/css/@media/hover/index.html new file mode 100644 index 0000000000..770d2e7494 --- /dev/null +++ b/files/es/web/css/@media/hover/index.html @@ -0,0 +1,70 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - Consulta de medios + - Media Queires + - Referencia + - característica de medios + - media feature +translation_of: Web/CSS/@media/hover +--- +
{{cssref}}
+ +

La característica de medios CSS hover, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.

+ +

Sintaxis

+ +

La característica hover es especificada como un valor de palabra clave elegida de la siguiente lista.

+ +
+
none
+
El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.
+
hover
+
El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.
+
+ +

Ejemplo

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.at-rules.media.hover")}}

diff --git a/files/es/web/css/@media/index.html b/files/es/web/css/@media/index.html new file mode 100644 index 0000000000..05e5f6ec5a --- /dev/null +++ b/files/es/web/css/@media/index.html @@ -0,0 +1,360 @@ +--- +title: '@media' +slug: Web/CSS/@media +translation_of: Web/CSS/@media +--- +

{{CSSRef}}

+ +

Resumen

+ +

La regla-at CSS @media asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at @media puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas conditionales.

+ +

La regla-at @media puede ser accesible por medio de la interfaz de modelo de objeto {{domxref("CSSMediaRule")}}.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Un <media-query> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.

+ +

Tipos de medios

+ +
+
all
+
Aplicable a todos los dispositivos.
+
print
+
Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
+
screen
+
Destinado a principalmente a pantallas de computadora a color.
+
speech
+
Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.
+
+ +
Nota: CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille, embossed, aural), pero fueron descontinuados en Media Queries 4 y no deben ser usados.
+ +

Características de Medios (media feature)

+ +

Cada característica de medios verifica una característica específica del navegador o dispositivo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreResumenNotas
widthAnchura del viewport 
heightAltura del viewport 
aspect-ratioRelación de aspecto anchura-altura del viewport 
orientationOrientación del viewport 
resolutionDensidad de pixeles del dispositivo 
scanProceso de escaneo del dispositivo 
grid¿El dispositivo es un grid o un mapa de bits? 
update-frequencyQué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenidoIncluido en Media Queries Nivel 4
overflow-blockCómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloqueIncluido en Media Queries Nivel 4
overflow-inline¿Puede desplazarse hacia el contenido que excede los límites del viewport?Incluido en Media Queries Nivel 4
colorComponente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. 
color-indexNúmero de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. 
display-modeModo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web.Definido en la especificación del Manifiesto de Aplicación Web.
monochromeBits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. 
inverted-colors¿El agente usuario o el Sistema Operativo está invirtiendo los colores?Incluido en Media Queries Nivel 4
pointer¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?Incluido en Media Queries Nivel 4
hover¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
any-pointer¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?Incluido en Media Queries Nivel 4
any-hover¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
light-levelNivel de luz ambiental actualIncluido en Media Queries Nivel 4
scripting¿Se soporta lenguaje de script (p.ej. JavaScript)?Incluido en Media Queries Nivel 4
device-width {{obsolete_inline}}Anchura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-height {{obsolete_inline}}Altura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-aspect-ratio {{obsolete_inline}}Relación de aspecto anchura-altura del dispositivoDescontinuado en Media Queries Nivel 4
-webkit-device-pixel-ratio {{non-standard_inline}}Número de pixeles reales del dispositivo por pixel CSSNo estándar; Específica de WebKit/Blink. De ser posible, use la característica resolution en su lugar.
-webkit-transform-3d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?No estándar; Específica de WebKit/Blink
-webkit-transform-2d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?No estándar; Específica de WebKit
-webkit-transition {{non-standard_inline}}Se soportan {{cssxref("transition", "transiciones")}} CSS?No estándar; Específica de WebKit
-webkit-animation {{non-standard_inline}}¿Se soportan {{cssxref("animation", "animaciones")}} CSS?No estándar; Específica de WebKit
+ +

Ejemplos

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Estandariza las características -webkit-device-pixel-ratio y -webkit-transform-3d.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Define la sintaxis básica de la regla @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Se agregan las características scripting, pointer, hover, light-level, update-frequency, overflow-block, y overflow-inline.
+ Se descontinúan todos los tipos de medios excepto screen, print, speech, y all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Sin cambios.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (all, print, screen)1.0{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
Característica display-mode{{CompatUnknown}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (all, print, screen)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
Característica display-mode{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@media/pointer/index.html b/files/es/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..f7fca78ca6 --- /dev/null +++ b/files/es/web/css/@media/pointer/index.html @@ -0,0 +1,101 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +
{{cssref}}
+ +

La caracteristica pointer CSS comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.

+ +
+

Nota: Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa any-pointer en su lugar.

+
+ +

Sintaxis

+ +

La propiedad pointer se especifica como un valor de palabra clave elegido de la lista que figura a continuación.

+ +
+
none
+
El mecanismo de entrada principal no incluye un dispositivo apuntador.
+
coarse
+
El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.
+
fine
+
El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.
+
+ +

Ejemplo

+ +

Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Mírame!</label>
+ +

CSS

+ +
input[type="checkbox"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: solid;
+  margin: 0;
+}
+
+input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    border-width: 1px;
+    border-color: blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    width: 30px;
+    height: 30px;
+    border-width: 2px;
+    border-color: red;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

Compatibilidad

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

Ver también

+ + diff --git "a/files/es/web/css/@media/resoluci\303\263n/index.html" "b/files/es/web/css/@media/resoluci\303\263n/index.html" new file mode 100644 index 0000000000..bd2beb4866 --- /dev/null +++ "b/files/es/web/css/@media/resoluci\303\263n/index.html" @@ -0,0 +1,88 @@ +--- +title: Resolución +slug: Web/CSS/@media/resolución +tags: + - Referencia + - resolución +translation_of: Web/CSS/@media/resolution +--- +

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Característica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@media/width/index.html b/files/es/web/css/@media/width/index.html new file mode 100644 index 0000000000..a4392047b3 --- /dev/null +++ b/files/es/web/css/@media/width/index.html @@ -0,0 +1,124 @@ +--- +title: width +slug: Web/CSS/@media/width +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

El width CSS {{cssxref("@media")}} media caracteristica puede ser usada para aplicar estilos basados en el ancho  de el  {{glossary("viewport")}} (o la caja de la pagina, para paged media).

+ +

Syntax

+ +

La característica width es especificada como {{cssxref("<length>")}} valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo min-width and max-width variantes para consultar valores mínimos y máximos, respectivamente.

+ +

Example

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's width.</div>
+ +

CSS

+ +
/* Exact width */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Minimum width */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Maximum width */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Specificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}The value can now be negative, in which case it computes to false.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initial definition. The value must be nonnegative.
+ +

Navegadores Compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome +

Firefox (Gecko)

+ 		Internet ExplorerEdgeOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.014+{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support56+{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9.3+
+
diff --git a/files/es/web/css/@namespace/index.html b/files/es/web/css/@namespace/index.html new file mode 100644 index 0000000000..ef48776311 --- /dev/null +++ b/files/es/web/css/@namespace/index.html @@ -0,0 +1,71 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +translation_of: Web/CSS/@namespace +--- +
{{CSSRef}}
+ +

@namespace es una regla que define XML namespace a ser usados en una hoja de estilos CSS. Los namespaces definidos pueden utilizarse para restringir selectores universales, types, y selectores de atributos para seleccionar sólo elementos dentro de ese namespace.La regla @namespace generalmente sólo es útil cuando se trata de documents que contienen múltiples namespace—como HTML5 con SVG o MathML, o XML que mezclamúltiplesvocabularios.

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Esto coincide con todos los elementos XHTML <a>, ya que el XHTML es el namespace por defecto sin prefijo */
+a {}
+
+/* Esto coincide con todos los elementos SVG <a> */
+svg|a {}
+
+/* Esto concuerda con todos los elementos XHTML y SVG <a> elements */
+*|a {}
+ +

Cualquier @namespace debe seguir todas las reglas de @charset y @import, y preceder a todas las demás reglas y declaraciones de estilo de una hoja de estilos.

+ +

Se puede utilizar @namespace para definirun namespace por defecto de una hoja de estilos. Cuando se define un namespace por defecto, todos los selectores universales y tipos (pero no los selectores de atributo, véase la nota a continuación) se aplican únicamente a los elementos de ese namespace

+ +

La regla @namespace también puede usarse para definir un prefijo de namespace. Cuando un selector universal, tipo, o selector de atributo se antepone a un prefijo de un namespace, ese selector sólo coincide si el namespace y el nombre del elemento o atributo coinciden.

+ +

En HTML5, conocidos como elementos externos automaticamente se les asignarán un namespace. Esto significa que los elementos HTML actuarán como si estuvieran en un namespace XHTML (http://www.w3.org/1999/xhtml), incluso si no hay ningún atributo xmlns en ninguna parte del document, y los elementos <svg> y <math> se les asignará un namespace propio (http://www.w3.org/2000/svg and http://www.w3.org/1998/Math/MathML).

+ +
+

Nota: En XML, a menos que se defina un prefijo directamente sobre un atributo (ejemplo., xlink:href), ese atributo no tiene namespace. En otras palabras, los atributos no heredan el namespace del elemento en el que están. Para que coincida con este comportamiento, el namespace por defecto en CSS no se aplica a los selectores de atributos.

+
+ +

Sintaxis

+ +
/* Namespace por defecto */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Namespace sin prefijo */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

Sintaxis oficial

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Initial definition
+ +

Compatibilidad

+ + + +

{{Compat("css.at-rules.namespace")}}

diff --git a/files/es/web/css/@page/index.html b/files/es/web/css/@page/index.html new file mode 100644 index 0000000000..b13d0eddf7 --- /dev/null +++ b/files/es/web/css/@page/index.html @@ -0,0 +1,129 @@ +--- +title: '@page' +slug: Web/CSS/@page +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

Resumen

+ +

La regla @page es usada para modificar algunas propiedades CSS cuando se va a imprimir una página web. No se pueden cambiar todas las propiedades CSS con @page, solo los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de cambiar otra propiedad será ignorada.

+ +

La regla @page puede ser accesada por medio de la interfaz modelo objeto {{domxref("CSSPageRule")}}.

+ +
Nota: La W3C esta discutiendo como manejar las unidades relativas {{cssxref("<length>")}} : vh, vw, vmin, y vmax. Mientras tanto, se recomienda no usarlas en la regla @page.
+ +

Sintaxis

+ +

Descriptores

+ +
+
size
+
Especifica el tamaño y la orientación de la caja objetivo de la página. En general, una caja es representada dentro de una hoja, también indica el tamaño de la hoja destino.
+
+ +
+
marks
+
Añade marcas de corte y/o registro al documento.
+
+ +
+
bleed
+
Especifica la extensión más allá de la caja de página a la que se recorta el procesamiento de página.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Por favor dirígete a las pseudo-classes de @page por ejemplos.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Agrega los selectores de página:recto y :verso.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Ningún cambio desde {{SpecName('CSS2.1')}}, aunque mas reglas CSS pueden ser usadas dentro de @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico2.0{{CompatGeckoDesktop("19.0")}}8.06.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/@supports/index.html b/files/es/web/css/@supports/index.html new file mode 100644 index 0000000000..4d07fc1afe --- /dev/null +++ b/files/es/web/css/@supports/index.html @@ -0,0 +1,138 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La regla "CSS @supports"asocia un conjunto de declaraciones anidadas en un bloque CSS (que está delimitado por corchetes) con una condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor, así como conjunciones, disjunciones o negaciones abritrarias sobre ellas). A esas condiciones se le llama condición "soporta" (supports condition).

+ +

@supports otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles (feature query).

+ +

La regla @supports puede ser usada tanto en el nivel superior de una hoja de estilos, como dentro de cualquier regla de grupo condicional y se puede acceder a ella a través del modelo de objetos de CSS {{domxref("CSSSupportsRule")}}.

+ +

Sintaxis

+ +

Una condición "soporta" (supports condition) consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. La precedencia de los operadores puede ser definida usando paréntesis.

+ +

Sintaxis de una declaración

+ +

La expresión más simple es una declaración CSS, es decir el nombre de una propiedad CSS seguida por un valor, separada por dos puntos. La siguiente expresión

+ +
( transform-origin: 5% 5% )
+ +

devuelve "cierto" si la {{ cssxref("transform-origin") }} implementa una sintaxis que reconoce 5% 5% como válida.

+ +

Una declaración CSS está siempre rodeada entre paréntesis.

+ +

El operador "not "

+ +

El operador not puede preceder cualquier expresión para crear una nueva, resultando en la negación de la expresión original. La siguiente expresión

+ +
not ( transform-origin: 10em 10em 10em )
+ +

devuelve "cierto" si {{ cssxref("transform-origin") }} no reconoceo 10em 10em 10em como una sintaxis válida.

+ +

Como cualquier operador, el operador not puede ser aplicado a una declaración de complejidad arbitraria. Los siguientes ejemplos son todas expresiones válidas:

+ +
not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )
+ +
+

Nota: no hay necesidad de encerrar el operador not entre paréntesis cuando se encuentra en el nivel superior. Para combinarlo con otros operadores, como and y or, sí se requieren paréntesis

+
+ +

El operador  "and"

+ +

Partiendo de dos expresiones, el operador and crea una nueva expresión consistente en la conjunción de dos originales; la expresión resultante es verdadera si sólo ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si y sólo si, las dos expresiones son simultáneamente veraderas:

+ +
(display: table-cell) and (display: list-item)
+ +

Varias conjunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

+ +
(display: table-cell) and (display: list-item) and (display:run-in)
+ +

es equivalente a:

+ +
(display: table-cell) and ((display: list-item) and (display:run-in))
+ +

El operador "or"

+ +

Partiendo de dos expresiones, el operador  or crea una nueva expresión consistente en la disyunción de dos originales; la expresión resultante es verdadera si una o ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si al menos una de las dos expresiones es veradera:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve )
+ +

Varias disyunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )
+ +

es equivalente a:

+ +
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))
+ +
+

Nota: cuando se usan and y or, el paréntesis debe ser usado para definir el orden en el cual aplican. Si no, la condición es inválida provocando que se ignore todo el "at-rule" .

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Prueba "soporta" de una propiedad CSS determinada

+ +
@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+
+ +

Prueba "soporta" de una propiedad CSS determinada o de una versión con prefijo

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+
+ +

Prueba "soporta" para propiedades customizadas

+ +
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}{{ Spec2('CSS3 Conditional') }}Initial definition.
+ +

Compatibilidad con navegadores

+ +{{Compat("css.at-rules.supports")}} + +

Ver también

+ + diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..8389bdb95e --- /dev/null +++ b/files/es/web/css/@viewport/height/index.html @@ -0,0 +1,125 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - Descriptor CSS + - Referencia +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS height es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Dos valores */
+height: 320px 200px;
+
+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +
@viewport {
+  height: 500px;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
diff --git a/files/es/web/css/@viewport/index.html b/files/es/web/css/@viewport/index.html new file mode 100644 index 0000000000..f03aaee77b --- /dev/null +++ b/files/es/web/css/@viewport/index.html @@ -0,0 +1,159 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +

{{CSSRef}}

+ +

Summary

+ +

The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.

+ +

Syntax

+ +

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

+ +

Descriptors

+ +

Browsers are supposed to ignore unrecognized descriptors.

+ +
+
min-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
max-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
width
+
A shorthand descriptor for setting both min-width and max-width
+
min-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
max-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
height
+
A shorthand descriptor for setting both min-height and max-height
+
zoom
+
Sets the initial zoom factor.
+
min-zoom
+
Sets the minimum zoom factor.
+
max-zoom
+
Sets the maximum zoom factor.
+
user-zoom
+
Controls whether or not the user should be able to change the zoom factor.
+
orientation
+
Controls the document's orientation.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag) [4]{{CompatNo()}} [2]10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{CompatNo}} [2]10{{property_prefix("-ms")}}[1]11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +

[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a viewport {{HTMLElement("meta")}} tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

+ +

[2]: See {{bug(747754, 'summary')}}

+ +

[3]: See {{webkitbug(95959)}}

+

[4]: See Chromium issue #235457: Enable @viewport on all platforms

+

See also

+ + diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html new file mode 100644 index 0000000000..8ff87e0443 --- /dev/null +++ b/files/es/web/css/@viewport/width/index.html @@ -0,0 +1,122 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS width es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Ejemplo con un valor de viewport: */
+@viewport {
+    width: 320px;
+}
+
+/* Ejemplo con dos valores de viewport: */
+@viewport {
+    width: 320px, 120px;
+}
+
+
+ +

 

+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +

 

diff --git a/files/es/web/css/_colon_-moz-broken/index.html b/files/es/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..a419ae3cbc --- /dev/null +++ b/files/es/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La pseudo-clase CSS  :-moz-broken  selecciona elementos con enlaces a imágenes no válidos

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-drag-over/index.html b/files/es/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..5e18bdd1fa --- /dev/null +++ b/files/es/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-drag-over  se usa para editar un elemento cuando se produce un evento de arrasttar (drag) sobre él.

+ +

Síntaxis

+ +
element:-moz-drag-over { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Arrastra aquí</td>
+  </tr>
+</table>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

diff --git a/files/es/web/css/_colon_-moz-first-node/index.html b/files/es/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..6bd7cb3460 --- /dev/null +++ b/files/es/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-first-node representa cualquier elemento que sea el primer nodo hijo de algún otro elemento. Se diferencia de {{Cssxref(":first-child")}} en que  no selecciona al primer hijo si tiene texto (que no sea espacios en blanco) detrás de él.

+ +

Cualquier espacion en blanco al principio del elemento se ignora a la hora de determina cual elemento es :-moz-first-node.

+ +

Síntaxis

+ +
span:-moz-first-node { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-focusring/index.html b/files/es/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..95ef9db9c4 --- /dev/null +++ b/files/es/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,90 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - NeedsLiveSample + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS  :-moz-focusring es similar a la pseudo-clase {{cssxref(":focus")}} , pero sólo selecciona un elemento si éste tiene el foco y el agente de usuario (user-agent) tiene habilitado el mostrar el anillo (borde) alrededor del elemento que actualmente tiene el foco. Si :-moz-focusring selecciona un elemento entonces  :focus también lo selecciona pero esto no se da igual al revés, depende, como se ha dicho anteriormente, de la configuración del agente de usuario. Que un agente de usuario tenga el dibujo del anillo de foco habilitado depende de cosas como la configuración del sistema operativo así que el comportamiento preciso de esta propiedad puede variar de una plataforma a otra dependiendiendo de la configuración de la misma o de la configuración del usuario.

+ +

Síntaxis

+ +
:-moz-focusring
+ +

Ejemplo

+ +

Para especificar la apariencia de un elemento cuando recibe el foco se puede usar este psuedo-selector de la siguiente manera:

+ +
mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+
+ +

Especificaciones

+ +

Esta propiedad todavía no está definida en ninguna especificación, aunque fue debatida en el grupo de trabajo y se decidió añadirla a los selectores 4 o 5.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..3163a3e07e --- /dev/null +++ b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,83 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-full-screen-ancestor se aplica a todos los ancestros de el elemento full-screen(pantalla completa) exceptuando los frames (marcos) que pueda contener en los documentos padre, que son los elementos full-screen(pantalla completa) es sus propios documentos. Sin embargo, sí que se aplica la clase a los antecesores de esos elementos.

+ +

Ejemplos

+ +

Necesita un ejemplo

+ +

Compatibilidad con distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además.

+ + diff --git a/files/es/web/css/_colon_-moz-handler-blocked/index.html b/files/es/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..3d4569b68d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

+ +

Resumen

+ +

:-moz-handler-blocked selecciona elementos que no pueden ser mostrado por haber sido sus manejadores bloqueados.

+ +

Es útil principalmente para los desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-handler-crashed/index.html b/files/es/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..406cd7c72d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

+ +

Resumen

+ +

:-moz-handler-crashed selecciona elementos que no pueden ser mostrados porque el plugin para dibujarlos ha dejado de funcionar.

+ +

Es útil principalmente para  los desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-handler-disabled/index.html b/files/es/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..f69c0d7ca3 --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

+ +

Resumen

+ +

:-moz-handler-disabled selecciona elementos que no pueden ser mostrados porque sus manejadores han sido deshabilitados por el usuario.

+ +

Es útil principalmente para desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-last-node/index.html b/files/es/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..a857fcd9df --- /dev/null +++ b/files/es/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-last-node selecciona un elemento si es el último nodo hijo de algún otro elemento. Se diferencia de {{cssxref(":last-child")}} en que no selecciona el último elemento hijo si tiene texto (sin contar espacios en blanco) después de él.

+ +

Cualquier espacio en blanco al final de un elemento se ignora al usar :-moz-last-node.

+ +

Síntaxis

+ +
span:-moz-last-node {propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-list-bullet/index.html b/files/es/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..07415595a9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,46 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento CSS no-estándar de Mozilla ::-moz-list-bullet  se usa para establecer el estilo para los iconos que preceden a los elemento de una lista.

+ +

Síntaxis

+ +
li::-moz-list-bullet { propiedades del estilo }
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+<ul class="list">
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+ +

CSS

+ +
.list ::-moz-list-bullet { font-size: 36px; }
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/:-moz-list-bullet') }}

+ +

 

diff --git a/files/es/web/css/_colon_-moz-list-number/index.html b/files/es/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..31747f5fe1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-list-number te permite personalizar la apariencia de los números de los elementos de lista  ({{HTMLElement("li")}}) en listas que sean listas ordenadas ({{HTMLElement("ol")}}).

+ +

Síntaxis

+ +
li::-moz-list-number { style properties }
+
+ +

Ejemplo

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+
+ +

Resultado

+ +

moz-list-number.png
+ {{EmbedLiveSample("Example")}}

diff --git a/files/es/web/css/_colon_-moz-loading/index.html b/files/es/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..ba3eaff1c6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-loading selecciona elementos que no pueden mostrarse porque no aún no se han empezado a cargar, elementos como imágenes que todavía no han empezado a llegar. Destacar que las imágenes que están en proceso de carga no son seleccionadas por esta pseudo-clase.

+ +

Principalmente es útil para desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..a626dc93ee --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.2")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-locale-dir(ltr)  selecciona un elemento si el interfaz del usuario se está mostrando de izquierda a derecha. Esto viene determinado cuando la opción de las preferencias  intl.uidirection.locale (donde  locale es la localización de idioma actual) está estáblecido a "ltr".

+ +

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

+ +

Este selector no funciona adecuadamente en HTML; siempre selecciona no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..8fdb2f9dfd --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-locale-dir(rtl)  selecciona un elemento si el interfaz del usuario se está mostrando de derecha a izquierda. Esto viene determinado cuando la opción de las preferencias  intl.uidirection.locale (donde  locale es la localización de idioma actual) está estáblecida a "rtl".

+ +

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario, siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

+ +

Este selector no funciona adecuadamente en HTML; nunca selecciona nada, no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

+ +

 

+ +

Ver además

+ +

 

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..16421aa6f1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase :-moz-lwtheme-brighttext es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es true (verdadero) y se ha seleccionado un tema ligero con un color de texto brillante.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..4cc595e8d1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

La pseudo-clase :-moz-lwtheme-darktext es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es verdadero (true) y se ha seleccionado un tema ligero con un color de texto oscuro.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme/index.html b/files/es/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..7ce4770c52 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas + - Temas Ligeros +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase :-moz-lwtheme es verdadera y seleccionada en los documento chrome cuando el atributo {{xulattr("lightweightthemes")}} del elemento raíz es true (verdadero) y se ha seleccionado un tema

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-only-whitespace/index.html b/files/es/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..9c8f5e89ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-class CSS:-moz-only-whitespace selecciona un elemento si no tiene ningún hijo, o bien nodos textos vacíos o bien nodos texto que sólo contienen espacios en blanco. Sólo cuando hay elementos o nodos texto con uno o más caracteres dentro, el elemento no será seleccionado por esta pseudo-clase.

+ +

Síntaxis

+ +
span:-moz-only-whitespace { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-only-whitespace::before {
+  background-color: lime;
+}
+ +

HTML

+ +
<span> </span>
+
+ +

{{EmbedLiveSample("Example", "50", "20")}}

diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..a3e0afd5b0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,122 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - Marcador de Posición INPUT + - Marcador de posición + - No estándar(2) + - Placeholder + - Pseudo-Clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:placeholder-shown' +--- +
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
+ +
Nota:  El CSSWG ha decidido introducir  :placeholder-shown. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase :-moz-placeholder representa a cualquier elemento que muestre un  texto del marcador de posición (placeholder). Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,

+ +

Ejemplo

+ +

Ejemplo básico

+ +

Este ejemplo le da estilo a un placeholder (marcador de posición) haciendo que el color del texto sea verde.

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input::-moz-placeholder {
+      color: green;
+    }
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Desbordamiento

+ +

En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS text-overflow: ellipsis para envolverlo.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado en {{bug("457801")}}.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-submit-invalid/index.html b/files/es/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..75cd48a3f0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,76 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Resumen

+ +

La pseudo-clase CSS :-moz-submit-invalid  representa cualquier botón de enviar de formularios cuyos contenidos no sean válidos conforme a las  restricciones de validación HTML.

+ +

Por defecto no se aplica ningún estilo. Puedes usar tu estilo para personalizar la apariencia del botón de enviar cuando existen campos no válidos en el formulario.

+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatNo() }}{{ CompatGeckoDesktop("2") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-suppressed/index.html b/files/es/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..554a4c55d8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-suppressed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-suppressed selecciona elementos que representan a imágenes que no han sido cargadas por estar bloqueado el sitio del que provienen.

+ +

Este selector está pensado sobre todo para los desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..b99e17b59f --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +
{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}
+ +

Resumen

+ +

La   pseudo-class CSS :-moz-system-metric(images-in-menus) selecciona un elemento si el interfaz de usuario del equipo soporta imágenes en menús.

+ +

Está pensado sobre todo para desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..981760b5de --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(mac-graphite-theme) seleccionará cualquier elemento si el usuario ha elegido la apariencia "Graphite" en el panel de preferencias  "Appearance"  dentro de la sección de preferencias de sistema de Mac OS X.

+ +

Este selector está pensado sobre todo para desarrolladores de temas

+ +

Ejemplos

+ +

Demo

+ +

Bugzilla

+ +

{{Bug(448767)}}

diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..00239c5bd1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(scrollbar-end-backward) seleccionará un elemento  si el interfaz de usuario del equipo incluye un botón de flecha hacia atrás al final de las barras de desplazamiento o barras de scroll.

+ +

Está pensado sobre todo para desarrolladores de temas

+ +

Especificaciones

+ +

No es parte de ningún estándar.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..2712092b3c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-system-metric(scrollbar-end-forward) seleccionará un elemento si el interfaz de usuario del equpo incluye una flecha hacia adelante al final de las barras de desplazamiento o barras de scroll.

+ +

Está pensado sobre todo para desarrolldores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..a3a5c21e82 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-system-metric(scrollbar-start-backward) seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de niguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..f309dabd5c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-system-metric(scrollbar-start-forward) seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..1cbef2d0ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS:-moz-system-metric(scrollbar-thumb-proportional) seleccionará un elemento si el interfaz de usuario del equipo proporciona miniaturas (thumbnails) proporcionales en las barras de desplazamiento o barras de scroll; es decir, la miniatura o parte arrastrable en la barra de desplazamiento cambia de tamaño para indicar el tamaño relativo del área visible del documento.

+ +

Está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..5ee2a63aa2 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La   pseudo-clase CSS :-moz-system-metric(touch-enabled) seleccionará un elemento si el dispositivo en el cuál se está mostrando el contenido soporta un interfaz táctil.

+ +
Nota: No está pensado para contenido web. Para eso se debería usar la consulta de medios  (media query) -moz-touch-enabled
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..8d134cb531 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,113 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Psuedo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(windows-default-theme)  selecciona un elemento si el usuario está usando en esos momento uno de los siguientes temas de Windows: Luna, Royale, Zune, or Aero (por ejemplo  Vista Basic, Vista Standard, or Aero Glass). Esto excluye los temas clásicos de Windows y los temas realizados por terceros.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Ejemplo

+ +

Contenido HTML

+ +
<p id="defaultThemes">
+  Este párrafo debería tener un fondo verde con los temas de Windows Luna/Royale/Zune/Aero
+  y un fondo rojo con otros temas.
+</p>
+
+<p id="nonDefaultThemes">
+  Este párrafo debería tener fondo verde con el tema clásico de Window o con temas de terceros
+  y fondo rojo con otros temas
+</p>
+
+<p id="notSupported">La detección de temas no está soportada.</p>
+ +

Contenido CSS

+ +
#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", 170)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementando en {{Bug("426660")}}. Cambió el comportamiento de los temas  Royale y Zone para que funcionaran igual que el tema Luna {{Bug("429176")}}.

diff --git a/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..c0ef648273 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-tree-cell-text(hover) seleccionará un elemento si el cursor del ratón está actualmente sobre el texto en una celda o elemento del árbol

+ +

Está pensado principalmente para desarrolladores.

diff --git a/files/es/web/css/_colon_-moz-tree-cell-text/index.html b/files/es/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..c6dcc5f378 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Activado por el atributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-cell/index.html b/files/es/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..cf8ee0162c --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el attributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + + +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-tree-column/index.html b/files/es/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..62376be975 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el atributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..320955cddf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-image/index.html b/files/es/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..65e270ddb5 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + + +

Ejemplos

+ +

Bookmark icons in the Places window - Mozillazine Forum

diff --git a/files/es/web/css/_colon_-moz-tree-indentation/index.html b/files/es/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..bce9310aaf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-line/index.html b/files/es/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..67d05a7b74 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-progressmeter/index.html b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..57cdb929bd --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado cuando al atributo type se le da el valor progressmeter.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-row(hover)/index.html b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..6a5a723a12 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}
+ +

Resumen

+ +

La   pseudo-clase CSS :-moz-tree-row(hover) seleccionará un elemento si el cursor del ratón está sobre una fila de un árbol.

+ +

Está pensado principalmente para ser usado por desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-tree-row/index.html b/files/es/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..b334d502f9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El  pseudo-elemento::-moz-tree-row CSS  se usa para seleccionar filas y para aplicar estilos a las filas de los árboles.

+ +

Elementos asociados

+ + + +

Síntaxis

+ +
treechildren::-moz-tree-row {propiedades de estilo }
+
+ +

Propiedades de estilo

+ + + +

Ejemplos

+ +
treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+
+ +

...donde...

+ +
  <treerow properties="foo">...</treerow>
+
diff --git a/files/es/web/css/_colon_-moz-tree-separator/index.html b/files/es/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..c3d15f89f8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-twisty/index.html b/files/es/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..80f03fadec --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..6f12ca97a6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase + - Referencia CSS +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

+ + + +

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

+ +

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-ui-valid/index.html b/files/es/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..0e49681290 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS:-moz-ui-valid CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  restricciones de validación.

+ +

Se aplica siguiendo las siguientes reglas:

+ + + +

El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-user-disabled/index.html b/files/es/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..b7749f1a29 --- /dev/null +++ b/files/es/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,18 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La pseudo-class CSS :-moz-user-disabled selecciona imágenes que no fueron cargadas porque en las preferencias del usuario las imagenes han sido totalmente desahabilitadas.

+ +

Está pensado para que, sobre todo, sea usado por desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-window-inactive/index.html b/files/es/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..e22e734842 --- /dev/null +++ b/files/es/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,99 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-window-inactive selecciona cualquier elemento mientras está en una ventana inactiva.

+ +
Nota: Antes de añadir esta pseudo-clase, dar  dieferentes estilos a las ventanas de fondo podría lograrse con el atributo (active="true") en la venta del nivel superior XUL. Este atributo ya no se usa.
+ +

:-moz-window-inactive funciona también en documentos de contenido HTML.

+ +

Ejemplo

+ +

Este ejemplo modifica la apariencia del fondo de una caja dependiendo de si está o no en una ventana activa.

+ +
<style type="text/css">
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+</style>
+
+<div id="mybox" style="width:200px; height:200px;">
+  <p>This is a box!</p>
+</div>
+
+ +

Puedes verlo aquí en un ejemplo en directo.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop(2)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementado en {{bug("508482")}}.

diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html new file mode 100644 index 0000000000..a2be7fcf59 --- /dev/null +++ b/files/es/web/css/_colon_-ms-input-placeholder/index.html @@ -0,0 +1,111 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo clase CSS + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase propietaria y no estándar  :-ms-input-placeholder representa el  texto del marcador de posición (placeholder) de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.

+ +

Ejemplo

+ +

El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.

+ +

HTML

+ +
<form id="test">
+  <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
+  <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
+  <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
+  <input type="submit" />
+</form>
+ +

CSS

+ +
input {
+   background-color:#E8E8E8;
+   color:black; }
+/* placeholder only style */
+input.studentid:-ms-input-placeholder {
+   font-style:italic;
+   color: red;
+   background-color: yellow;
+}
+ +

Resultado

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación aunque  Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..98c1c68215 --- /dev/null +++ b/files/es/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

+ +

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_active/index.html b/files/es/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7dc6934848 --- /dev/null +++ b/files/es/web/css/_colon_active/index.html @@ -0,0 +1,97 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-clase :active de CSS  representa un elemento (como un botón) que el usuario está activando.  Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase :active se usa comúnmente en los elementos {{HTMLElement("a")}} y {{HTMLElement("button")}}, pero también se puede usar en otros elementos.

+ +
/* Selecciona cualquier <a> que esté siendo activado */
+a:active {
+  color: red;
+}
+ +

Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudoclase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :active después de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: :link — :visited — :hover — :active.

+ +
Nota: En los sistemas con los ratones de varios botones, CSS3 especifica que la pseudo-clase :active sólo debe aplicarse al botón primario; en ratones diestros, este suele ser el botón más a la izquierda.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<a href="#">Este enlace cambiará a color lima mientras hace clic en él.</a>
+
+ +

CSS

+ +
a:link { color: blue; }          /* Enlaces no visitados */
+a:visited { color: purple; }     /* Enlaces visitados */
+a:hover { background: yellow; }  /* El usuario esta sobre el enlace */
+a:active { color: lime; }        /* Enlaces activos */
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Ningún cambio.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("css.selectors.active")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_any-link/index.html b/files/es/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..00c8a94bda --- /dev/null +++ b/files/es/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Diseño + - Experimental + - Presentación + - Pseudo-Clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +
La pseudo-clase :any-link de CSS representa a un elemento que actúa como el ancla origen de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con cualquier elemento {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un atributo href. Por lo tanto, coincide con todos los elementos que coincidan con {{cssxref(":link")}} o {{cssxref(":visited")}}.
+ +
+ +
/* Selecciona cualquier elemento que coincida con :link o :visited */
+:any-link {
+  color: green;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<a href="https://example.com">Enlace externo</a><br>
+<a href="#">Enlace de destino interno</a><br>
+<a>Enlace de marcador de posición (no se personalizará)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* navegadores WebKit */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.any-link")}}

+ +
diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html new file mode 100644 index 0000000000..b65249dfe3 --- /dev/null +++ b/files/es/web/css/_colon_any/index.html @@ -0,0 +1,186 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-Clase CSS + - Referencia +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

+ +
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
selector
+
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
+
+ +
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+ +

Ejemplos

+ +

Por ejemplo, el siguiente CSS:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Puede ser reemplazado con:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notas

+ +

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

+ +

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Nivelo 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... ni siquiera lo pienses*/
+
+ +

Usando :-any(), en cambio, es mucho más fácil:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Nivel 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Nivel 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemas con rendimiento y especificidad

+ +

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

+ +

Por ejemplo

+ +
.a > :-moz-any(.b, .c)
+
+ +

es más lento que:

+ +
.a > .b, .a > .c
+
+ +

y lo siguiente es rápido:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/es/web/css/_colon_blank/index.html b/files/es/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..8545c5ce04 --- /dev/null +++ b/files/es/web/css/_colon_blank/index.html @@ -0,0 +1,54 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - Borrador + - CSS + - Experimental +translation_of: 'Web/CSS/:blank' +--- +

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

+ +
+

Nota: El selector :blank esta considerado en riesgo, puesto que la CSSWG sigue haciendo cambios.

+ +

Ver CSSWG issue #1967.

+
+ +

La pseudo-clase CSS :blank selecciona elementos de entrada vaciós (eg. {{HTMLElement("input")}} or {{HTMLElement("textarea")}}).

+ +

Sintáxis

+ +
{{CSSSyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Definición inicial
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.selectors.blank")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_checked/index.html b/files/es/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..fd5bb8e13c --- /dev/null +++ b/files/es/web/css/_colon_checked/index.html @@ -0,0 +1,197 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:checked' +--- +
{{ CSSRef() }}
+ +

La pseudo-clase :checked de CSS representa cualquier radio (<input type="radio">), checkbox (<input type="checkbox">) u option ({{ HTMLElement("option") }} en un elemento {{ HTMLElement("select") }}) que está marcado o conmutado a un estado on.

+ +
/* Coincide con cualquier checked/selected radio, checkbox, u option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+ +

El usuario puede activar este estado marcando/seleccionando un elemento, o desactivándolo desmarcando/deseleccionando el elemento.

+ +
+

Nota: Debido a que los navegadores a menudo tratan las <option> s como elementos reemplazados, la medida en que se pueden diseñar con la pseudo-clase :checked varía de un navegador a otro.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Etiquetas para entradas marcadas */
+input:checked + label {
+  color: red;
+}
+
+/* Elemento Radio, cuando está marcado */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Elemento Checkbox, cuando está marcado */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Elementos Option, cuando se seleccionan */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico")}}

+ +

Alternar elementos con un checkbox oculto

+ +

Este ejemplo utiliza la pseudoclase :checked para permitir al usuario alternar contenido según el estado de un checkbox, todo sin usar JavaScript.

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Columna #1</th><th>Columna #2</th><th>Columna #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+ +

CSS

+ +
/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Alternar_elementos_con_un_checkbox_oculto", "auto", 220)}}

+ +

Galería de imágenes

+ +

Puede usar la pseudoclase :checked para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el usuario hace clic en una miniatura. Vea esta demostración.

+ +
Nota: Para un efecto análogo, pero basado en la pseudoclase :hover y sin radioboxes ocultos, vea esta demostración, tomada de la página de referencia :hover.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Define la semántica con respecto a HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 UI') }}Enlace al Nivel 3 de Selectores.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.checked")}}

diff --git a/files/es/web/css/_colon_default/index.html b/files/es/web/css/_colon_default/index.html new file mode 100644 index 0000000000..e46989a6b0 --- /dev/null +++ b/files/es/web/css/_colon_default/index.html @@ -0,0 +1,99 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:default' +--- +

{{ CSSRef() }}

+ +

La pseudo-clase :default de CSS representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.

+ +

Este selector se puede usar en los elementos {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> y {{htmlelement("option")}}.

+ +
/* Selecciona cualquier <input> predeterminado */
+input:default {
+  background-color: lime;
+}
+ +

Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, todos los valores predeterminados se representan utilizando la pseudo-clase :default. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="summer">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="fall">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="winter">Winter</label>
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Define la semántica HTML asociada y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Definición inicial, pero sin la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.default")}}

+ +
+

 

+
diff --git a/files/es/web/css/_colon_defined/index.html b/files/es/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..8e5921184f --- /dev/null +++ b/files/es/web/css/_colon_defined/index.html @@ -0,0 +1,115 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :defined de CSS representa cualquier elemento que se haya definido.  Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método {{domxref("CustomElementRegistry.define()")}}).

+ +
/* Selecciona cualquier elemento definido */
+:defined {
+  font-style: italic;
+}
+
+/* Selecciona cualquier instancia de un elemento personalizado específico */
+simple-custom:defined {
+  display: block;
+}
+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Los siguientes fragmentos están tomados de nuestra demostración Pseudo-clase-definida (ver también en directo).

+ +

En esta demostración, definimos un elemento personalizado trivial muy simple:

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

Luego inserta una copia de este elemento en el documento, junto con un <p> estándar:

+ +
<simple-custom text="Texto de ejemplo del elemento personalizado"></simple-custom>
+
+<p>Texto de ejemplo de párrafo estándar</p>
+ +

En el CSS primero incluimos las siguientes reglas:

+ +
/* Dar a los dos elementos fondos distintivos */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+/* Tanto el elemento personalizado como el incorporado tienen texto en cursiva */
+:defined {
+  font-style: italic;
+}
+ +

A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.defined")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..b39c21888a --- /dev/null +++ b/files/es/web/css/_colon_dir/index.html @@ -0,0 +1,108 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

+ +
/* Selecciona cualquier elemento con texto de derecha a izquierda */
+:dir(rtl) {
+  background-color: red;
+}
+ +

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.

+ +
+

Nota: Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.

+
+ +
+

Nota: En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.

+
+ +

Sintaxis

+ +

La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

+ +

Parámetros

+ +
+
ltr
+
Orientar elementos de izquierda a derecha.
+
rtl
+
Orientar elementos de derecha a izquierda.
+
+

Sintaxis formal

+ + 
{{csssyntax}}
+
+
+
+ +

Ejemplo

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Ejemplo') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.dir")}}

+ +
 
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_disabled/index.html b/files/es/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ce16ddb96e --- /dev/null +++ b/files/es/web/css/_colon_disabled/index.html @@ -0,0 +1,127 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :disabled de CSS representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.

+ +
/* Selecciona cualquier <input> deshabilitado */
+input:disabled {
+  background: #ccc;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript {{event("change")}} para permitir al usuario habilitar / deshabilitar los campos de facturación.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Dirección de Envío</legend>
+    <input type="text" placeholder="Nombre">
+    <input type="text" placeholder="Dirección">
+    <input type="text" placeholder="Código postal">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Dirección de facturación</legend>
+    <label for="billing_is_shipping">Igual que la dirección de envío:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Nombre" disabled>
+    <input type="text" placeholder="Dirección" disabled>
+    <input type="text" placeholder="Código postal" disabled>
+  </fieldset>
+</form>
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+ +

JavaScript

+ +
// Esperar a que la página termine de cargarse
+document.addEventListener('DOMContentLoaded', function () {
+  // Adjunte el detector de eventos `change` al checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Seleccione los campos de texto de facturación
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Alternar los campos de texto de facturación
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Define la semántica referente a HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Referencia a los selectores de Nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada..
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.disabled")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_empty/index.html b/files/es/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..d86e01d306 --- /dev/null +++ b/files/es/web/css/_colon_empty/index.html @@ -0,0 +1,106 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef() }}
+ +
La pseudo-clase :empty de CSS representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.
+ +
+ +
+

Nota: En {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} la pseudo-clase :empty fue modificada para actuar como {{CSSxRef(":-moz-only-whitespace")}}, pero ningún navegador actualmente suporta aún esto.

+
+ +
/* Selecciona cualquier <div> que no contenga contenido */
+div:empty {
+  background: lime;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div class="box"><!-- Voy a ser de color lima. --></div>
+<div class="box">Voy a ser de color rosa.</div>
+<div class="box">
+    <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. -->
+</div>
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 80)}}

+ +

Problemas de accesibilidad

+ +

La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (anclajes, botones, etc.). Los nombres accesibles exponen el control interactivo al árbol de accesibilidad, una API que comunica información útil para las tecnologías de asistencia.

+ +

El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una combinación de propiedades que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("css.selectors.empty")}}

+
diff --git a/files/es/web/css/_colon_enabled/index.html b/files/es/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..c91360c9ab --- /dev/null +++ b/files/es/web/css/_colon_enabled/index.html @@ -0,0 +1,103 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :enabled CSS representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.

+ +
/* Selecciona cualquier <input> habilitado */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

El siguiente ejemplo hace que el color del texto y el botón {{htmlElement ("input")}} sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">Primer campo (habilitado):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Segundo campo (deshabilitado):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Enviar">
+</form>
+
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 550, 95)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Define la semántica en relación con HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Enlaza con selectores nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.enabled")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first-child/index.html b/files/es/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..225aa2ffa5 --- /dev/null +++ b/files/es/web/css/_colon_first-child/index.html @@ -0,0 +1,133 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :first-child de CSS representa el primer elemento entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el primer
+   elemento entre sus hermanos */
+p:first-child {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <p>¡Este texto está seleccionado!</p>
+  <p>Este texto no está seleccionado.</p>
+</div>
+
+<div>
+  <h2>Este texto no está seleccionado: no es un `p`.</h2>
+  <p>Este texto no está seleccionado.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}

+ +

Diseñando una lista

+ +

HTML

+ +
<ul>
+  <li>Objeto 1</li>
+  <li>Objeto 2</li>
+  <li>Objeto 3
+    <ul>
+      <li>Objeto 3.1</li>
+      <li>Objeto 3.2</li>
+      <li>Objeto 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_una_lista')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.first-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first-of-type/index.html b/files/es/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..d219d9cd70 --- /dev/null +++ b/files/es/web/css/_colon_first-of-type/index.html @@ -0,0 +1,114 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :first-of-type de CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el primer elemento
+   de este tipo entre sus hermanos */
+p:first-of-type {
+  color: red;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Diseñando el primer párrafo

+ +

HTML

+ +
<h2>Encabezado</h2>
+<p>Párrafo 1</p>
+<p>Párrafo 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_el_primer_párrafo')}}

+ +

Elementos anidados

+ +

Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.

+ +

HTML

+ +
<article>
+  <div>!Este `div` es primero!</div>
+  <div>¡Este <span>`span` anidado es el primero</span>!</div>
+  <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
+  <div>¡Este <span>`span` anidado tiene estilo</span>!</div>
+  <b>¡Este `b` califica!</b>
+  <div>Este es el `div` final.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Elementos_anidados', 500)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.first-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first/index.html b/files/es/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2f02c35bd7 --- /dev/null +++ b/files/es/web/css/_colon_first/index.html @@ -0,0 +1,97 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +
La pseudo-clase :first de CSS, utilizada con la regla-at {{cssxref("@page")}}, representa la primera página de un documento impreso.
+ +
 
+ +
/* Selecciona la primera página al imprimir */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
Nota: No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, {{cssxref("orphans")}}, {{cssxref("widows")}} y saltos de página del documento. Además, solo puede usar unidades de longitud absoluta al definir los márgenes. Todas las otras propiedades serán ignoradas.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Primera página.</p>
+<p>Segunda página.</p>
+<button>Imprimir!</button>
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+ +

JavaScript

+ +
document.querySelector("button").onclick = function () {
+  window.print();
+}
+ +

Resultado

+ +

Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.

+ +

{{ EmbedLiveSample('Ejemplo', '80%', '150px') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Ningún cambio.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.first")}}

+ +
 
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_focus-visible/index.html b/files/es/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..53212edeac --- /dev/null +++ b/files/es/web/css/_colon_focus-visible/index.html @@ -0,0 +1,128 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}
+ +

La pseudo-clase :focus-visible  se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el  UA (Agente de Usuario) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.

+ +

Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).

+ +

Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplos

+ +

Ejemplos básicos

+ +

En este ejemplo, el selector  :focus-visible usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo :focus.

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", 300)}}

+ +

Mostrando selectivamente el indicador de enfoque

+ +

Un control personalizado, como un botón de elemento personalizado, puede utilizar :focus-visible para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}.

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

+ +

Polyfill

+ +

You can polyfill :focus-visible usando focus-visible.js.

+ +

Problemas de accesibilidad

+ +

Baja visión

+ +

Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). WCAG 2.1 SC 1.4.11 Contraste Sin Texto requiere que el indicador de enfoque visual sea al menos 3 a 1.

+ + + +

Cognición

+ +

Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Compatibilidad de navegador

+ + + +

{{Compat("css.selectors.focus-visible")}}

+ +

Vea también

+ + diff --git a/files/es/web/css/_colon_focus-within/index.html b/files/es/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..5628c3b8bc --- /dev/null +++ b/files/es/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudo-clases +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-clase CSS :focus-within representa un elemento que ha recibido el foco o que contiene un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase {{cssxref(":focus")}} o tiene descendientes que coincidan con :focus. (Esto incluye descendientes en shadow DOM)

+ +
/* Selecciona un <div> cuando uno de sus descendientes recibe el foco*/
+div:focus-within {
+  background: cyan;
+}
+ +

Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor {{HTMLElement("form")}} completo cuando el usuario enfoca sobre uno de sus elementos {{HTMLElement("input")}}.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplos

+ +

En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.

+ +

HTML

+ +
<p>Intenta escribir en este formulario.</p>
+
+<form>
+  <label for="given_name">Nombre:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Apellido:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplos", 500, 150)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_focus/index.html b/files/es/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..5e1ecbe49f --- /dev/null +++ b/files/es/web/css/_colon_focus/index.html @@ -0,0 +1,114 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.

+ +
/* Selecciona cualquier <input> cuando se enfoca */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice {{cssxref(":focus-within")}} si desea seleccionar un elemento que contenga un elemento enfocado.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input class="red-input" value="Voy a ser de color rojo cuando enfoque."><br>
+<input class="blue-input" value="Voy a ser de color azul cuando enfoque.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Sobre Accesibilidad

+ +

Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de WCAG 2.1 requiere que el indicador de foco tenga un contraste de por lo menos 3:1.

+ + + +

:focus { outline: none; }

+ +

Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Define la semántica específica de HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_fullscreen/index.html b/files/es/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..d86528d5d8 --- /dev/null +++ b/files/es/web/css/_colon_fullscreen/index.html @@ -0,0 +1,170 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Pantalla completa + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

La pseudo-clase :fullscreen de CSS representa un elemento que se muestra cuando el navegador está en modo de pantalla completa.

+ +
/* Selecciona cualquier <div> que se muestre en modo de pantalla completa */
+/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos;
+   Edge también es compatible con la versión sin prefijo */
+div:-moz-full-screen {
+  background-color: pink;
+}
+
+div:-webkit-full-screen {
+  background-color: pink;
+}
+
+div:fullscreen {
+  background-color: pink;
+}
+ +
+

Nota: La especificación W3C usa la palabra única :fullscreen, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: :fullscreen y :-ms-fullscreen, respectivamente.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="fullscreen">
+  <h1>Demostración :fullscreen</h1>
+  <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p>
+  <button id="fullscreen-button">Entrar en pantalla completa</button>
+</div>
+
+ + + +

CSS

+ +
#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen > h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen > p {
+  color: darkred;
+}
+
+#fullscreen:fullscreen > button {
+  display: none;
+}
+
+ +

Resultado

+ +

{{ LiveSampleLink('Ejemplo', "Haga clic aquí para probar este ejemplo.") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_has/index.html b/files/es/web/css/_colon_has/index.html new file mode 100644 index 0000000000..186e999382 --- /dev/null +++ b/files/es/web/css/_colon_has/index.html @@ -0,0 +1,98 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Pseudo clase + - Referencia + - Selectores CSS +translation_of: 'Web/CSS/:has' +--- +

{{ CSSRef() }}{{SeeCompatTable}}

+ +

Resumen

+ +

La pseudo-class CSS:has() representa un elemento si cualquiera de los selectores, en relación con el {{cssxref(":scope")}} del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :has() tomo un selector como argumento.

+ +

Síntaxis

+ +
:has(selector_list) { propiedades de estilo }
+ +

Ejemplos

+ +

El siguiente selector  selecciona únicamente los elementos {{HTMLElement("a")}}  que contienen {{HTMLElement("img")}} hijo:

+ +
a:has(> img)
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}{{ Spec2('CSS4 Selectors') }}Definición Inicial
+ +

Compatibilidad entre los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_host/index.html b/files/es/web/css/_colon_host/index.html new file mode 100644 index 0000000000..dca8c822d4 --- /dev/null +++ b/files/es/web/css/_colon_host/index.html @@ -0,0 +1,95 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:host' +--- +
{{ CSSRef }}
+ +

La pseudo-clase CSS :host selecciona la sombra host de sombra DOM que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.

+ +
+

Nota: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.

+
+ +
/* Selects a shadow root host */
+:host {
+  font-weight: bold;
+}
+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Los siguientes fragmentos se toman de nuestro ejemplo de selectores de host (ver también en directo).

+ +

En este ejemplo, tenemos un elemento personalizado simple — <context-span> — que se puede envolver alrededor del texto:

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Dentro del constructor del elemento, creamos los elementos style y span, llenamos el span con el contenido del elemento personalizado y llenamos el elemento style con algunas reglas CSS:

+ +
let style = document.createElement('style');
+      let span = document.createElement('span');
+      span.textContent = this.textContent;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(span);
+
+      style.textContent = 'span:hover { text-decoration: underline; }' +
+                          ':host-context(h1) { font-style: italic; }' +
+                          ':host-context(h1):after { content: " - no links in headers!" }' +
+                          ':host-context(article, aside) { color: gray; }' +
+                          ':host(.footer) { color : red; }' +
+                          ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

La regla :host { background: rgba(0,0,0,0.1); padding: 2px 5px; }  estiliza todas las instancias del elemento <context-span> (la sombra host en esta instancia) en el documento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

Compatible con Chrome y Safari.

+ +
+ + +

{{Compat("css.selectors.host")}}

+
+ +

Ver también

+ + + +

 

diff --git a/files/es/web/css/_colon_hover/index.html b/files/es/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..65b6202f03 --- /dev/null +++ b/files/es/web/css/_colon_hover/index.html @@ -0,0 +1,105 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).

+ +
/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */
+a:hover {
+  color: orange;
+}
+ +

Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :hover después de las reglas :link y :visited, pero antes de :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-clase :hover es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase :hover podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades hovering limitadas o inexistentes.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<a href="#">Intenta pasar el mouse sobre este enlace.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico")}}

+ +

Galería de imágenes

+ +

Puede usar la pseudoclase :hover para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea esta demostración para una posible nota.

+ +
Nota: Para un efecto análogo, pero basado en la pseudo-clase :checked (aplicado a radioboxes ocultos), vea esta demostración, tomada de la página de referencia :checked.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Permite aplicar :hover a cualquier pseudo-elemento.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio significativo.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_in-range/index.html b/files/es/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..95cee43d30 --- /dev/null +++ b/files/es/web/css/_colon_in-range/index.html @@ -0,0 +1,115 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

La pseudo-clase :in-range de CSS representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.

+ +
/* Selecciona cualquier <input>, pero solo cuando tiene un rango
+   especificado, y su valor está dentro de ese rango */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.

+ +
Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Los valores entre 1 y 10 son válidos.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
+      <label for="value1">Tu valor esta </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: 'fuera de rango!';
+}
+ +

Resultado

+
+ +
{{EmbedLiveSample('Ejemplo', 600, 140)}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Define cuándo :in-range coincide con elementos en HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..ff56f97c85 --- /dev/null +++ b/files/es/web/css/_colon_indeterminate/index.html @@ -0,0 +1,134 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

La pseudo-clase :indeterminate de CSS representa cualquier elemento de formulario cuyo estado sea indeterminado.

+ +
/* Selecciona cualquier <input> cuyo estado sea indeterminado */
+input:indeterminate {
+  background: lime;
+}
+ +

Los elementos seleccionados por este selector son:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Checkbox y radio button

+ +

Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">Esta etiqueta comienza con el color lima.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">Esta etiqueta comienza con el color lima.</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}

+ +

Barra de progreso

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+
diff --git a/files/es/web/css/_colon_invalid/index.html b/files/es/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..a357717a25 --- /dev/null +++ b/files/es/web/css/_colon_invalid/index.html @@ -0,0 +1,149 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

La pseudo-clase :invalid de CSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan validar.

+ +
/* Selecciona cualquier <input> no válido */
+input:invalid {
+  background-color: pink;
+}
+ +

Esta pseudo-clase es útil para resaltar errores de campo para el usuario.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.

+ +

HTML

+ +
<form>
+  <label for="url_input">Ingresa una URL:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Introduzca una dirección de correo electrónico:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 600, 150)}}

+ +

Problemas de accesibilidad

+ +

El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Notas

+ +

Radio buttons

+ +

Si alguno de los radio buttons en un grupo es required, la pseudo-clase :invalid se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo name).

+ +

Gecko por defecto

+ +

Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad {{Cssxref("box-shadow")}}) a la pseudoclase {{cssxref(":-moz-ui-invalid")}}, que se aplica en un subconjunto de casos para: :invalid.

+ +

Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.invalid")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..46bfc7609e --- /dev/null +++ b/files/es/web/css/_colon_lang/index.html @@ -0,0 +1,101 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-clase + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-clase :lang() de CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.

+ +
/* Selecciona cualquier <p> en inglés (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Nota: En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.

+
+ +

Sintaxis

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Parámetro

+ +
+
<language-code>
+
Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML.
+
+ +

Ejemplo

+ +

En este ejemplo, la pseudo-clase :lang() se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando selectores de hijo. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.

+ +

HTML

+ +
<div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 350)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Ningún cambio significativo.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_last-child/index.html b/files/es/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..309a8b4b38 --- /dev/null +++ b/files/es/web/css/_colon_last-child/index.html @@ -0,0 +1,127 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :last-child de CSS representa el último elemento entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el último elemento
+   entre sus hermanos */
+p:last-child {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <p>Este texto no está seleccionado.</p>
+  <p>¡Este texto está seleccionado!</p>
+</div>
+
+<div>
+  <p>Este texto no está seleccionado.</p>
+  <h2>Este texto no está seleccionado: no es un `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}

+ +

Diseñando una lista

+ +

HTML

+ +
<ul>
+  <li>Artículo 1</li>
+  <li>Artículo 2</li>
+  <li>Artículo 3
+    <ul>
+      <li>Artículo 3.1</li>
+      <li>Artículo 3.2</li>
+      <li>Artículo 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_una_lista')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.last-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_last-of-type/index.html b/files/es/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..3058cd668f --- /dev/null +++ b/files/es/web/css/_colon_last-of-type/index.html @@ -0,0 +1,113 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class :last-of-type de CSS representa el último elemento de su tipo entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el último elemento
+   de su tipo entre sus hermanos */
+p:last-of-type {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

Diseñando el último párrafo

+ +

HTML

+ +
<h2>Título</h2>
+<p>Párrafo 1</p>
+<p>Párrafo 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_el_último_párrafo')}}

+ +

Elementos anidados

+ +

Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.

+ +

HTML

+ +
<article>
+  <div>Este `div` es primero.</div>
+  <div>¡Este <span>'span' anidado es el último</span>!</div>
+  <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
+  <b>¡Este `b` califica!</b>
+  <div>¡Este es el 'div' final!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Elementos_anidados', 500)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.last-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_left/index.html b/files/es/web/css/_colon_left/index.html new file mode 100644 index 0000000000..33a66ad6d3 --- /dev/null +++ b/files/es/web/css/_colon_left/index.html @@ -0,0 +1,80 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

La :left CSS pseudo-clase, utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.

+ +
/* Selects any left-hand pages when printing */
+@page :left {
+  margin: 2in 3in;
+}
+ +

La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha". Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha); si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).

+ +
+

Nota: Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página. Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.

+
+ +

Sintaxis 

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionesEstatusComentario
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}Sin Cambio.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }} +

Definición Inicial.

+
+ +

Compatibilidad con navegadores

+ + + + + +

{{Compat("css.selectors.left")}}

+ + + +

Ver También

+ + diff --git a/files/es/web/css/_colon_link/index.html b/files/es/web/css/_colon_link/index.html new file mode 100644 index 0000000000..7859239d9e --- /dev/null +++ b/files/es/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:link' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :link CSS representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo href.

+ +
/* Selecciona cualquier <a> que aún no se haya visitado */
+a:link {
+  color: red;
+}
+ +

Los estilos definidos por la pseudo-clase :link serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :link antes de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: :link — :visited — :hover — :active.

+ +
+

Nota: Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.

+ +

HTML

+ +
<a href="#ordinary-target">Este es un enlace ordinario.</a><br>
+<a href="">Ya has visitado este enlace.</a><br>
+<a>Enlace de marcador de posición (no se personalizará)</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplos")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.link")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not()/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

+ +
/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}
+ +
+

Notas:

+ + +
+ +

Sintaxis

+ +

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

+ +
+

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Soy un párrafo.</p>
+<p class="fancy">¡Soy muy elegante!</p>
+<div>NO soy un párrafo.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos <p> que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos <p> */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos <div> o <span> */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.not")}}

+
diff --git a/files/es/web/css/_colon_nth-child/index.html b/files/es/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..19e024c8ff --- /dev/null +++ b/files/es/web/css/_colon_nth-child/index.html @@ -0,0 +1,188 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-child() de CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos.

+ +
/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Sintaxis

+ +

La pseudo-clase nth-child se especifica con un único argumento, que representa el patrón para los elementos coincidentes.

+ +

Valores de palabras clave

+ +
+
odd
+
Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.
+
even
+
Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.
+
+ +

Notación funcional

+ +
+
<An+B>
+
Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Selectores de ejemplo

+ +
+
tr:nth-child(odd) o tr:nth-child(2n+1)
+
Representa las filas impares de una tabla HTML: 1, 3, 5, etc.
+
tr:nth-child(even) o tr:nth-child(2n)
+
Representa las filas pares de una tabla HTML: 2, 4, 6, etc.
+
:nth-child(7)
+
Representa el séptimo elemento.
+
:nth-child(5n)
+
Representa los elementos 5, 10, 15, etc.
+
:nth-child(3n+4)
+
Representa los elementos 4, 7, 10, 13, etc.
+
:nth-child(-n+3)
+
Representa los primeros tres elementos entre un grupo de hermanos.
+
p:nth-child(n)
+
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.
+
p:nth-child(1) o p:nth-child(0n+1)
+
Representa cada <p> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.
+
+ +

Ejemplo detallado

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, SIN un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, CON un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 5 y 7 son seleccionados.<br>
+   3 se usa en el conteo porque es un hijo, pero
+   no se selecciona porque no es un <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Este es un `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, CON un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br>
+   3 no se usa en el conteo ni se selecciona porque es un <code>&lt;em&gt;</code>,
+   no un <code>&lt;span&gt;</code>, y <code>nth-of-type</code> solo selecciona
+   hijos de ese tipo. El <code>&lt;em&gt;</code> se omite por completo y se ignora.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Este es un `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}} +

Agrega la sintaxis of <selector> y especifica que no se requiere que los elementos coincidentes tengan un padre.

+
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..daf0b8a50b --- /dev/null +++ b/files/es/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-last-child() de CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.

+ +
/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos, contando
+   hacia atrás desde el último */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.

+
+ +

Sintaxis

+ +

La pseudo-clase nth-last-child se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.

+ +

Valores de palabras clave

+ +
+
odd
+
Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.
+
even
+
Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.
+
+ +

Notación funcional

+ +
+
<An+B>
+
Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Selectores de ejemplo

+ +
+
tr:nth-last-child(odd) o tr:nth-last-child(2n+1)
+
Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.
+
tr:nth-last-child(even) o tr:nth-last-child(2n)
+
Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.
+
:nth-last-child(7)
+
Representa el séptimo elemento, contando desde el final.
+
:nth-last-child(5n)
+
Representa los elementos 5, 10, 15, etc., contando desde el final.
+
:nth-last-child(3n+4)
+
Representa los elementos 4, 7, 10, 13, etc., contando desde el final.
+
:nth-last-child(-n+3)
+
Representa los últimos tres elementos entre un grupo de hermanos.
+
p:nth-last-child(n)
+
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p. 
+
p:nth-last-child(1) or p:nth-last-child(0n+1)
+
Representa cada <p> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}. 
+
+ +

Ejemplo de tabla

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Primera línea</td>
+    </tr>
+    <tr>
+      <td>Segunda línea</td>
+    </tr>
+    <tr>
+      <td>Tercera línea</td>
+    </tr>
+    <tr>
+      <td>Cuarta línea</td>
+    </tr>
+    <tr>
+      <td>Quinta línea</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* Selecciona los últimos tres elementos */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* Toma todos los elementos a partir del penúltimo elemento */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* Seleccione solo el penúltimo elemento */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}

+ +

Ejemplo de caso Edge

+ +

Como n comienza en cero, mientras que el último elemento comienza en uno, n y n+1 seleccionarán los mismos elementos.

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Primera línea</td>
+    </tr>
+    <tr>
+      <td>Segunda línea</td>
+    </tr>
+    <tr>
+      <td>Tercera línea</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-last-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-last-of-type/index.html b/files/es/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..6699c2520d --- /dev/null +++ b/files/es/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-last-of-type() CSS coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.

+ +
/* Selecciona cada cuarto elementos <p> entre
+   cualquier grupo de hermanos, contando hacia
+   atrás desde el último */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.

+
+ +

Sintaxis

+ +

La pseudo-clase nth-last-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.

+ +

Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<div>
+  <span>Este es un span.</span>
+  <span>Este es otro span.</span>
+  <em>Esto esta enfatizado.</em>
+  <span>¡Guauu, este span se pone color lima!</span>
+  <strike>Esto está tachado.</strike>
+  <span>Aquí hay un último span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-last-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-of-type/index.html b/files/es/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..ad133d3584 --- /dev/null +++ b/files/es/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,107 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-of-type() de CSS selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.

+ +
/* Selecciona cada cuarto elementos <p> entre
+   cualquier grupo de hermanos */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Sintaxis

+ +

La pseudo-clase nth-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.

+ +

Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <div>Este elemento no se cuenta.</div>
+  <p>1er párrafo.</p>
+  <p>2do párrafo.</p>
+  <div>Este elemento no se cuenta.</div>
+  <p>3er párrafo.</p>
+  <p>4to párrafo.</p>
+</div>
+ +

CSS

+ +
/* Párrafos impares */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Párrafos pares */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Primer párrafo */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 250, 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_only-child/index.html b/files/es/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..c11051748e --- /dev/null +++ b/files/es/web/css/_colon_only-child/index.html @@ -0,0 +1,136 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :only-child de CSS representa un elemento sin hermanos. Esto es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1), pero con una especificidad menor.

+ +
/* Selecciona cada <p>, pero solo si es el */
+/* único hijo de su padre */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<main>
+  <div>
+    <i>Soy un hijo único y solitario.</i>
+  </div>
+
+  <div>
+    <i>Yo tengo hermanos.</i><br>
+    <b>¡Yo también!</b><br>
+    <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico','100%',180)}}

+ +

Ejemplo de lista

+ +

HTML

+ +
<ol>
+  <li>Primero
+    <ul>
+      <li>Esta lista tiene solo un elemento.
+    </ul>
+  </li>
+  <li>Segundo
+    <ul>
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.only-child")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_only-of-type/index.html b/files/es/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..36d26b5fea --- /dev/null +++ b/files/es/web/css/_colon_only-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :only-of-type CSS representa un elemento que no tiene hermanos del mismo tipo.

+ +
/* Selecciona cada <p>, pero solo si es el único */
+/* elemento <p> dentro de su padre */
+p:only-of-type {
+  background-color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<main>
+  <div>Soy un `div` #1.</div>
+  <p>Yo soy el único `p` entre mis hermanos.</p>
+  <div>Soy un `div` #2.</div>
+  <div>Soy un `div` #3.
+    <i>Yo soy el único hijo `i`.</i>
+    <em>Soy un `em` #1.</em>
+    <em>Soy un `em` #2.</em>
+  </div>
+</main>
+
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo','100%',180)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.only-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_optional/index.html b/files/es/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..2efdc61674 --- /dev/null +++ b/files/es/web/css/_colon_optional/index.html @@ -0,0 +1,91 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :optional de CSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.

+ +
/* Selecciona cualquier opción <input> */
+input:optional {
+  border: 1px dashed black;
+}
+ +

Esta pseudo-clase es útil para diseñar campos que no son necesarios para enviar un formulario.

+ +
+

Nota: La pseudo-clase {{cssxref(":required")}} selecciona los campos de formulario requeridos.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

Si un formulario contiene {{htmlelement("input")}}s opcionales, las entradas requeridas deben indicarse utilizando el atributo {{ htmlattrxref("required", "input") }}. Esto se asegurará de que las personas que navegan con la ayuda de la tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar el envío exitoso del formulario.

+ +

Las entradas requeridas también deben indicarse visualmente, utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Por lo general, se utilizan textos descriptivos y/o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Define la semántica de HTML y la validación de restricciones.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.optional")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_out-of-range/index.html b/files/es/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..2ed8e84372 --- /dev/null +++ b/files/es/web/css/_colon_out-of-range/index.html @@ -0,0 +1,116 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Presentación + - Pseudo-Clase CSS + - Referencia CSS + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +

La pseudo-clase :out-of-range de CSS representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.

+ +
/* Selecciona cualquier <input>, pero solo cuando tiene un
+   rango especificado, y su valor está fuera de ese rango */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.

+ +
Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Los valores entre 1 y 10 son válidos.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
+      <label for="value1">Tu valor esta </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: '¡fuera de rango!';
+}
+ +

Resultado

+
+ +
{{EmbedLiveSample('Ejemplo', 600, 140)}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Define cuándo :out-of-range coincide con los elementos en HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.out-of-range")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_placeholder-shown/index.html b/files/es/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..9a113639b6 --- /dev/null +++ b/files/es/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,97 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-clase :placeholder-shown de CSS  representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el texto de marcador de posición (placeholder).

+ +
/* Selecciona cualquier elemento con un placeholder activo */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<input placeholder="¡Escribe algo aquí!">
+ +

CSS

+ +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico", 200, 60)}}

+ +

Texto desbordante

+ +

En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="¡Ingresa algo en este campo, por favor!">
+ +

CSS

+ +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Texto_desbordante", 200, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_read-only/index.html b/files/es/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..a97724cdf8 --- /dev/null +++ b/files/es/web/css/_colon_read-only/index.html @@ -0,0 +1,100 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

La pseudo-clase :read-only de CSS representa un elemento que ya no es editable por el usuario (como un input).

+ +
/* Selecciona cualquier <input> que está en modo de solo lectura */
+/* Soportado en Firefox usando prefijo */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge  */
+p:read-only {
+  cursor: not-allowed;
+}
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

Nota: El selector no solo selecciona {{htmlElement("input")}} marcados como  {{htmlattrxref("readonly", "input")}}; también selecccionará cualquier elemento que no pueda ser editar por el usuario.  Lea sobre el atributo contenteditable.

+
+ +

Sintaxis

+ +
:read-only
+ +

Ejemplo

+ +

HTML

+ +
<input type="text" value="Aquí puedes poner lo que quieras.">
+<input type="text" value="Campo de solo lectura." readonly>
+<p>Este es un párrafo normal.</p>
+<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Define la semántica relacionada con HTML y de la validación de las restricciones.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.read-only")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_read-write/index.html b/files/es/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..404b97ce79 --- /dev/null +++ b/files/es/web/css/_colon_read-write/index.html @@ -0,0 +1,99 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

La pseudo-clase :read-write de CSS representa un elemento (como un input) que es editable por el usuario.

+ +
/* Selecciona cualquier elemento <input> que sea editable */
+/* Compatible con Firefox con un prefijo */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Compatible con Blink/WebKit/Edge sin un prefijo */
+input:read-write {
+  background-color: #bbf;
+}
+ +
+

Nota: Este selector no solo selecciona texto de {{htmlElement("input")}}; seleccionará cualquier elemento que pueda editar el usuario, como un elemento {{htmlelement("p")}} con {{htmlattrxref("contenteditable")}} establecido en él.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input type="text" value="Escribe lo que quieras aquí.">
+<input type="text" value="Este es un campo de solo lectura." readonly>
+<p>Este es un párrafo normal.</p>
+<p contenteditable="true">¡Puedes editar este párrafo!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Define la semántica con respecto a HTML y validación de restricciones.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_required/index.html b/files/es/web/css/_colon_required/index.html new file mode 100644 index 0000000000..2dd6458012 --- /dev/null +++ b/files/es/web/css/_colon_required/index.html @@ -0,0 +1,91 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:required' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :required de CSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.

+ +
/* Selecciona cualquier <input> requerido */
+input:required {
+  border: 1px dashed red;
+}
+ +

Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.

+ +
+

Nota: La pseudoclase {{cssxref(":optional")}} selecciona campos de formulario opcionales.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

Obligatoriamente los {{htmlelement("input")}} deben tener el atributo {{ htmlattrxref("required", "input") }} aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.

+ +

Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Define la semántica de HTML y la validación de restricciones.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.required")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_right/index.html b/files/es/web/css/_colon_right/index.html new file mode 100644 index 0000000000..97490676a3 --- /dev/null +++ b/files/es/web/css/_colon_right/index.html @@ -0,0 +1,78 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

La pseudo-clase CSS :right, utilizada con la regla-at {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.

+ +
/* Selecciona cualquier página de la derecha al imprimir */
+@page :right {
+  margin: 2in 3in;
+}
+ +

Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.

+ +
+

Nota: No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}Ningún cambio.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.selectors.right")}}

+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_root/index.html b/files/es/web/css/_colon_root/index.html new file mode 100644 index 0000000000..5c5bc5e192 --- /dev/null +++ b/files/es/web/css/_colon_root/index.html @@ -0,0 +1,64 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento {{HTMLElement("html")}} y es idéntico al selector html, excepto que su especificidad es mayor.

+ +
/* Selecciona el elemento raíz del documento:
+   <html> en el caso de HTML */
+:root {
+  background: yellow;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

:root puede ser útil para declarar variables CSS globales:

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.root")}}

diff --git a/files/es/web/css/_colon_target/index.html b/files/es/web/css/_colon_target/index.html new file mode 100644 index 0000000000..bb426f225d --- /dev/null +++ b/files/es/web/css/_colon_target/index.html @@ -0,0 +1,214 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

La pseudo-clase :target de CSS representa un elemento único (el elemento objetivo) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.

+ +
/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */
+:target {
+  border: 2px solid black;
+}
+ +

Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado section2:

+ +
http://www.example.com/index.html#section2
+ +

El siguiente elemento sería seleccionado por un selector :target cuando la URL actual sea igual a la anterior:

+ +
<section id="section2">Ejemplo</section>
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Una tabla de contenido

+ +

La pseudo-clase :target se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.

+ +

HTML

+ +
<h3>Tabla de contenido</h3>
+<ol>
+ <li><a href="#p1">¡Salta al primer párrafo!</a></li>
+ <li><a href="#p2">¡Salta al segundo párrafo!</a></li>
+ <li><a href="#nowhere">Este enlace no va a ninguna parte,
+   porque el objetivo no existe.</a></li>
+</ol>
+
+<h3>Mi artículo divertido</h3>
+<p id="p1">Puede orientar elegir como blanco <i>este párrafo</i> utilizando un
+  fragmento de URL. ¡Haz clic en el enlace de arriba para probar!</p>
+<p id="p2">Este es <i>otro párrafo</i>, también accesible
+  desde los enlaces de arriba. ¿No es encantador?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Agrega un pseudo-elemento dentro del elemento de destino */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Estilo de elementos en cursiva dentro del elemento de destino */
+p:target i {
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}

+ +

CSS-Puro lightbox

+ +

Puede usar la pseudo-clase :target para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su display para que se muestren.

+ +
Nota: Un CSS-Puro lightbox más completo basado en la pseudoclase :target está disponible en GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#ejemplo1">Abrir ejemplo #1</a></li>
+  <li><a href="#ejemplo2">Abrir ejemplo #2</a></li>
+</ul>
+
+<div class="lightbox" id="ejemplo1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="ejemplo2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* lightbox sin abrir */
+.lightbox {
+  display: none;
+}
+
+/* lightbox abierto */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Contenido de Lightbox */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Botón Cerrar */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* superposición Lightbox */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('CSS-Puro_lightbox', 500, 220)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Define la semántica específica de HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Ningún cambio.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.target")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_valid/index.html b/files/es/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..047421e43a --- /dev/null +++ b/files/es/web/css/_colon_valid/index.html @@ -0,0 +1,83 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

La pseudo-clase :valid de CSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se valide satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.

+ +
/* Selecciona cualquier <input> válido */
+input:valid {
+  background-color: powderblue;
+}
+ +

Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

El color verde se usa comúnmente para indicar una entrada válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.valid")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_visited/index.html b/files/es/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..3fa81d8ddc --- /dev/null +++ b/files/es/web/css/_colon_visited/index.html @@ -0,0 +1,120 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :visited de CSS  representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.

+ +
/* Selecciona cualquier <a> que ha sido visitado */
+a:visited {
+  color: green;
+}
+ +

Los estilos definidos por la pseudo-clase :visited serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :visited después de la regla :link pero antes de las reglas :hover y :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

+ +

Restricciones de estilo

+ +

Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:

+ + + +
+

Nota: Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea Privacidad y el selector :visited.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con :visited. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para color y column-rule-color. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector :visited.

+ +

HTML

+ +
<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br>
+<a href="">Ya has visitado este enlace.</a>
+ +

CSS

+ +
a {
+  /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
+     lo que les permite ser diseñado con el estado :visited */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Levanta la restricción para aplicar  :visited solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.visited")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_-moz-color-swatch/index.html b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html new file mode 100644 index 0000000000..3edb2edc5b --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html @@ -0,0 +1,56 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El ::-moz-color-swatch pdseudo-elemento CSS es una extension de Mozilla que representa el color seleccionado en un {{HTMLElement("input")}} de type="color".

+ +
+

Nota: Usando ::-moz-color-swatch con cualquier cosa excepto <input type="color"> no concuerda con nada y no tiene efecto.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<input type="color" value="#de2020" />
+
+ +

CSS

+ +
input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificacion. Es un pseudo-elemento patentado específicamente para Gecko.

+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.-moz-color-swatch")}}

+ +

Ver tambien

+ + diff --git a/files/es/web/css/_doublecolon_-moz-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..33ee3c2706 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,82 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-moz-page-sequence sirve para representar el fondo de la previsualización de impresión.

+ +

Ejemplos

+ +

Necesita un eejemplo

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-page/index.html b/files/es/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..5e6d7d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,27 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - NeedsCompatTable + - NeedsE + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-moz-page se aplica a una página individual que va a ser impresa o que está en previsualización para impresión.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..efe8d9c509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,108 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento CSS + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
Nota: El pseudo-elemento ::-moz-placeholder fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.
+ +

Resumen

+ +

El  pseudo-elemento ::-moz-placeholder sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  marcador de posición de texto (placeholder text) . Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).

+ +

Ejemplo

+ +

En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).

+ +

Contenido HTML

+ +
<input id="test" placeholder="Placeholder text!">
+
+ +

Contenido CSS

+ +
input::-moz-placeholder {
+  color: green;
+}
+
+ +

Obtendremos el siguiente resultado:

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox aplica un estilo por defecto de  {{cssxref("opacity")}}: 0.54 al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.

+ +

La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-progress-bar/index.html b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..0d3cd4d002 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-elemento ::-moz-progress-bar de CSS es una extensión de Mozilla que representa la barra de progreso dentro de un elemento {{HTMLElement("progress")}}. (La barra representa la cantidad de progreso que se ha realizado).

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminado</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Forzar barras indeterminadas para tener ancho cero */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

La primera barra de arriba debe tener este aspecto:

+ +

Custom styled progress bar

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-progress/index.html b/files/es/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..22c7889cf0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,115 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-range-progress representa la parte del "camino" (la ranura sobre la que desliza) de un elemento  {{HTMLElement("input")}} con type="range", que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".

+ +
+

Si usamos  ::-moz-range-progress con cualquier otra cosa que no sea  <input type="range"> ni seleccionaremos nada ni conseguiremos ningún efecto.

+
+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso que utilice este estilo se vería de la siguiente manera:

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario de Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-thumb/index.html b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..97900536ba --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-range-thumb representa el elemento que el usuario puede usar en el "camino" marcado por un elemento  {{HTMLElement("input")}} con type="range" para alterar su valor numérico.

+ +
+

Si se usa  ::-moz-range-thumb en cualquier elemento  que no sea  <input type="range"> ni se seleccionará nada ni se conseguirá efecto alguno.

+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso que utilizara este estilo se visualizarías de la siguiente manera:

+ +

The thumb of the <input type=right> styled in green

+ +

Especificaciones

+ +

No es parte de ninguna especificación. El un pseudo-elemento propietario de Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-track/index.html b/files/es/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..f702065abc --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-moz-range-track representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un  {{HTMLElement("input")}} con type="range".

+ +
+

Si usamos  ::-moz-range-track con cualquier otra cosa que no sea un  <input type="range"> ni seleccionaremos nada ni se mostrará efecto alguno.

+
+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:

+ +

A range with the track green.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario específico del motor Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..bbb86d7207 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,79 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +

{{CSSRef}}{{non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-moz-scrolled-page-sequence CSS representa el fondo de la previsualización para impresión.

+ +

Especificaciones

+ +

Not part of any specification.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-browse/index.html b/files/es/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..7ad4e3c6ec --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,97 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-browse representa el botón para abrir el selector de archivos de un  {{HTMLElement("input")}} con type="file".

+ +
+

Nota: No se pueden usar todas las propiedades con este pseudo-elemento. Hay una  lista de propiedades permitidas en la documentación MSDN.

+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<label>Select image: <input type="file"></label>
+ +

Contenido CSS

+ +
input[type="file"]::-ms-browse
+{
+  color: red;
+  background-color: yellow;
+}
+ +

Salida

+ +

{{EmbedLiveSample('Example')}}

+ +

Resultado del ejemplo

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación pero Miscrosoft tiene una  descripción de ::-ms-browse en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-check/index.html b/files/es/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..ce4c6e1c6b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,114 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-check representa la marca de selección de un {{HTMLElement("input")}} con  type="checkbox" o type="radio".

+ +

No es un elemento estándar y es únicamente soportado por Internet Explorer y Edge, tal y como indica el prefijo  (-ms que indica Microsoft).

+ +

Síntaxis

+ +
selector::-ms-check
+
+ +

Ejemplos

+ +

Contenido HTML

+ +
<form>
+    <label for="redButton">Red</label>
+    <input type="radio" id="redButton"><br>
+    <label for="greenCheckbox">Green</label>
+    <input type="checkbox" id="greenCheckbox">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: inline;
+}
+
+input[type=radio]::-ms-check {
+    color: red; /* Hará que la marca de selección sea roja cuando seleccionemos el botón */
+}
+
+input[type=checkbox]::-ms-check {
+    color: green; /* Hará que la marca de selección sea rverde cuando seleccionemos el botón */
+}
+
+ +

Más abajo tiene disponible un ejemplo para poder probar. El pantallazo a la izquierda muestra que es lo que sucedería al haer click en caso de que no tengas acceso a Internet Explorer o Edge.

+ +

{{ EmbedLiveSample('Examples', '', '', 'https://mdn.mozillademos.org/files/13392/ms_check', 'Web/CSS/::-ms-check') }}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tienes una descripcón en MSDN que enumera varias propiedades que se pueden modificar en este pseudo-elemento.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileiOS WebKit
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
 
diff --git a/files/es/web/css/_doublecolon_-ms-clear/index.html b/files/es/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..d5fe9d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,113 @@ +--- +title: '::-ms-clear' +slug: 'Web/CSS/::-ms-clear' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-clear' +--- +

{{non-standard_header}}{{CSSRef}}

+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-clear sirve para representar un botón (el botón "borrar") en el borde de un elemento  {{HTMLElement("input")}} con type="text". Este botón elimina el valor actual del elemento {{HTMLElement("input")}}. El botón y pseudo-elemento no son parte del estándar y únicamente son soportados por los navegadores Internet Explorer 10 y 11 y Edge 12+, de ahí el prefijo del vendedor  (`-ms` por Microsoft). El botón de borrado sólo se muestra en elementos  {{HTMLElement("input")}} con type="text" que hayan recibido el foco y no estén vacíos.

+ +

Síntaxis

+ +
 selector::-ms-clear
+ +

Ejemplos

+ +

Contenido HTML

+ +
<form>
+   <label for="firstname">First name:</label>
+   <input type="text" id="firstname" name="firstname" placeholder="First name"><br>
+
+   <label for="lastname">Last name:</label>
+   <input type="text" id="lastname" name="lastname" placeholder="Second name">
+</form>
+
+ +

Contenido CSS

+ +
input,
+label {
+    display: block;
+}
+
+input[type=text]::-ms-clear {
+    color: red; /* Establece el color de la cruz a rojo */
+    /* La cruz se puede ocultar si fijamos el atributo display a "none" */
+}
+ +

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/::-ms-clear') }}

+ +

El siguiente pantallazo muestra, para aquellos que no tengan acceso a IE 10/11 o a  Edge 12+, cómo quedaría esta característica:

+ +

 

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.

+ +
+

Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0 [1]
+ Edge 12+		{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] En un {{HTMLElement("input")}} de texto al que se le haya dada estilo con  {{cssxref("text-align")}}: right,  si se muestra el botón de borrado,  éste cortará el borde derecho del valor contenido en el {{HTMLElement("input")}}. Una solución es esconder el botón usando  {{cssxref("display")}}: none.

diff --git a/files/es/web/css/_doublecolon_-ms-expand/index.html b/files/es/web/css/_doublecolon_-ms-expand/index.html new file mode 100644 index 0000000000..99c3a18ccd --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-expand/index.html @@ -0,0 +1,25 @@ +--- +title: '::-ms-expand' +slug: 'Web/CSS/::-ms-expand' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estandar + - Pesudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-expand' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-expand representa el botón dentro un {{HTMLElement("select")}} que abre y cierra el menú desplegable que contiene los disferentes elementos {{HTMLElement("option")}}. Normalemente tiene apariencia de triángulo que apunta hacia abajo..

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

diff --git a/files/es/web/css/_doublecolon_-ms-fill-lower/index.html b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..33ba4292b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-fill-lower representa la porción de la "ruta" (la ranura sobre la cual el indicador desliza) de un {{HTMLElement("input")}} con type="range", lo que corresponde a los valores inferiores al actualmente seleccionador por el indicador.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tiene  una  descriptción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-fill-upper/index.html b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..1806c2890f --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-ms-fill-upper representa la parte de la ruta  (la ranura sobre la que el indicador desliza) de un  {{HTMLElement("input")}} con type="range", que corresponde a valores mayores que el valor actual en el que se encuentra el indicador.

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-fill/index.html b/files/es/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..6da2a8a77b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,106 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - No estándar(2) + - Pseudo-lemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-fill CSS representa la porción rellena de un elemento {{HTMLElement("progress")}}. Es un pseudo-elemento no estándar y específico de Internet Explorer 10+, de ahí el prefijo del vendedor.

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Microsoft tiene una descripción en MSDN.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso a la que se aplique ese estilo tendrá una apariencia similar a la siguiente:

+ +

Progress Bar with Orange Fill

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-reveal/index.html b/files/es/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..ed8e17278d --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,72 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-reveal se usa para mostrar y aplicar estilos al botón "mostrar contraseña" que normalmente se pone al lado de un elemento  {{HTMLElement("input")}} con type="password" en Internet Explorer 10+. Este botón revela el valor del campo contraseña en texto plano (en vez de los asteriscos que son usados por motivos de privacidad). Este botón y el pseudo-elemento no son estándar y son específicos de Internet Explorer 10+,  de ahí ese prefijo de vendedor.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-thumb/index.html b/files/es/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..3e81694509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,44 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elementos CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-thumb representa el indicador que el usuario puede mover a través de la pista o ranura de un elemento  {{HTMLElement("input")}} con type="range" para alterar su valor numérico.

+ +

Especificación

+ +

No es parte de ninguna especificación, aunque  Microsoft tiene una descripción en MSDN.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-ticks-after/index.html b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html new file mode 100644 index 0000000000..5f49d4a9b0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html @@ -0,0 +1,84 @@ +--- +title: '::-ms-ticks-after' +slug: 'Web/CSS/::-ms-ticks-after' +tags: + - CSS + - No standard + - Pseudo-elementos + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-ticks-after' +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +
 
+ +

El  CSS pseudo-elemento  ::-ms-ticks-after es una extensión de extensión de Microsoft que aplica uno o más estilos, a las marcas de tick que aparecen despues del marcador de un control slider.  El control slider es una posible representación de una entrada tipo rango( <input type="range"> ).

+ +

Esas marcas no son mostradas por omisión.  Para mostrarlas, se debe de establecer la propiedad display del control a block  {{cssxref("display")}}.

+ +

Es posible usar los pseudo elementos  ::-ms-ticks-after, {{ cssxref("::-ms-ticks-before") }},  y {{ cssxref("::-ms-track") }} a la vez. Para hacerlo debe crear tres tres conjuntos de marcas, pero la mejor experiencia deusuario es con un conjunto. Par quitar todas las marcas , establezca la propiedad color {{ cssxref("color") }} a transparente.

+ +

Allowable Properties

+ +

Solo una de las siguientes propiedades CSS puede ser usada con  ::-ms-ticks-after en su selector. Otras propiedadess seran ignoradas.

+ + + +

Syntax

+ +
  {{csssyntax}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-track/index.html b/files/es/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..e4feb900b5 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,48 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estádar + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El  pseudo-elemento CSS ::-ms-track representa la trayectoria (la ranura sobre la cual se desliza el indicador) de un  {{HTMLElement("input")}} con type="range".

+ +

Specification

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-value/index.html b/files/es/web/css/_doublecolon_-ms-value/index.html new file mode 100644 index 0000000000..618063cb2b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-value/index.html @@ -0,0 +1,31 @@ +--- +title: '::-ms-value' +slug: 'Web/CSS/::-ms-value' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-value' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-value aplica reglas al valor / contenido de un {{HTMLElement("input")}} o de un {{HTMLElement("select")}}. En este pseudo-elemento sólo se pueden establecer ciertas propiesdades, las demás no tendrán efecto.

+ +

Síntaxis

+ +
input::-ms-value { propiedades de estilo }
+
+select::-ms-value { propiedades de estilo }
+ +

Especificaciones

+ +

No es parte de ninguna espeficiación

+ +

Microsoft tiene una descripción en MSDN.

diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html new file mode 100644 index 0000000000..5d14e35e58 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html @@ -0,0 +1,100 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

+ +

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

+ +

Síntaxis

+ +
selector::-webkit-file-upload-button
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<form>
+    <label for="fileUpload">Upload file</label><br>
+    <input type="file" id="fileUpload">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    border: 1px solid grey;
+    background: #FFFAAA;
+}
+ +

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

+ +

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html new file mode 100644 index 0000000000..d6dcc041b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-inner-spin-button' +slug: 'Web/CSS/::-webkit-inner-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-inner-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-webkit-inner-spin-button se usa para dar estilo a la parte interior del botón ruleta para seleccionar números  en los input con type="number".

+ +

Ejemplo

+ +

Contenido CSS

+ +
input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+ +

Contenido HTML

+ +
<input type="number">
+
+ +

{{EmbedLiveSample("Example", 200, 30)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatversionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html new file mode 100644 index 0000000000..b765b529a4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html @@ -0,0 +1,85 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento no estándar y propietario ::-webkit-input-placeholder representa el marcador de posición de texto (placeholder text) de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html new file mode 100644 index 0000000000..f84bebf096 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-bar' +slug: 'Web/CSS/::-webkit-meter-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-bar' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

La pseudo-clase ::-webkit-meter-bar establece el estilo para el fondo del elemento meter que contiene el valor.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter {
+   /* Resetea a la apariencia por defecto */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Note: Sólo funciona en navegadores basados en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los  pseudo-elementos usados en WebKit/Blink para dar estilos a otras partes del elemento {{htmlelement("meter")}} :

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html new file mode 100644 index 0000000000..d309e32dfc --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html @@ -0,0 +1,91 @@ +--- +title: '::-webkit-meter-even-less-good-value' +slug: 'Web/CSS/::-webkit-meter-even-less-good-value' +translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento ::-webkit-meter-even-less-good-value da color rojo al elemento meter cuando el valor y el atributo optimum están fuera del rango establecido y en zonas opuestas. Por ejemplo valor < low < high < optimum o valor> high > low > optimum.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +
meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Note: This will only work in Webkit/Blink-based browsers.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

The pseudo-elements used by WebKit/Blink to style other parts of a {{htmlelement("meter")}} element are as follows:

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html new file mode 100644 index 0000000000..b4a1d5e657 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html @@ -0,0 +1,106 @@ +--- +title: '::-webkit-meter-inner-element' +slug: 'Web/CSS/::-webkit-meter-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-inner-element' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-inner-element es un pseudo-elemento propietario de WebKit CSS para seleccionar y aplicar estilo al contenedor exterior de un elemento {{htmlelement("meter")}}. Es necesario una marca adicional para mostrar este elemento como si fuera de sólo lectura.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +
meter {
+  /* Resetear la apariencia por defecto*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Nota: Sólo funcionará en navegadores basasdo en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :

+ + + +

 
+  

diff --git a/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html new file mode 100644 index 0000000000..1ba5550c80 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-optimum-value' +slug: 'Web/CSS/::-webkit-meter-optimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-optimum-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-optimum-value da estilo al elemento  meter cuando su valor está dentro del rango min-max establecido.

+ +

El color por defecto es verde.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter::-webkit-meter-bar {
+  /* Necesario para eliminar la propiedad de fondo por defecto */
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Nota: Sólo funciona en navegadores basado en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Soporte básicoFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos de WebKit/Blink para dar estilos a otras partes de  {{htmlelement("meter")}}:

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html new file mode 100644 index 0000000000..6213d4afa9 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-meter-suboptimum-value' +slug: 'Web/CSS/::-webkit-meter-suboptimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-suboptimum-value da color amarillo al elemento meter cuando su valor cae fuera del rango mix-max.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom,
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Notae: Sólo funciona en navegadores basados en Webkit/Blink

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html new file mode 100644 index 0000000000..8351b2fa2e --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-outer-spin-button' +slug: 'Web/CSS/::-webkit-outer-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-outer-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-outer-spin-button se usa para dar estilo a la parte exterior del selector de números  en un botón input de tipo number.

+ +

Ejemplo

+ +

Contenido CSS

+ +
input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+ +

Contenido HTML

+ +
<input type="number">
+
+ +

{{EmbedLiveSample("Ejemplo", 200, 30)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatversionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..7aff28f56d --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-progress-bar representa la barra entera del elemento {{HTMLElement("progress")}} . Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento  {{ cssxref("::-webkit-progress-value") }}. Es hijo del pseudo-elemento  {{cssxref("::-webkit-progress-inner-element")}} y padre del pseudo-elemento  {{cssxref("::-webkit-progress-value")}}.

+ +
+

Nota: para que  ::-webkit-progress-value tenga efecto , en el elemento <progress> {{cssxref("-webkit-appearance")}} debe tener el valor none.

+
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:

+ +

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html new file mode 100644 index 0000000000..55bb247275 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-inner-element' +slug: 'Web/CSS/::-webkit-progress-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-inner-element' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-progress-inner-element representa la parte más exterior de un elemento  {{HTMLElement("progress")}}.  Es el padre del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: para que  ::-webkit-progress-inner-element tenga efecto , hay que darle valor none a {{cssxref("-webkit-appearance")}} en el elemento  <progress>.

+
+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Salida

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso que use el estilo especificado anteriormente tendrá una apariencia similar a la siguiente::

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propitario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-value/index.html b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..4e6d5bd10f --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,111 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-progress-value representa la parte rellena de la barra del elemento {{HTMLElement("progress")}}. Es hija del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: para que  ::-webkit-progress-value tenga efecto en el elemento <progress>  {{cssxref("-webkit-appearance")}} deberá tener none como valor.

+
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso con el estilo indicado anteriormente será similar a esta:

+ +

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html new file mode 100644 index 0000000000..4e89ab3087 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,37 @@ +--- +title: '::-webkit-scrollbar' +slug: 'Web/CSS/::-webkit-scrollbar' +tags: + - CSS + - NeedsCompatTable + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-scrollbar' +--- +

{{Draft()}}{{CSSRef}}

+ +

Resumen

+ +

El pseudo-elemento CSS  ::-webkit-scrollbar afecta el estilo de la barra de desplazamiento asociada a un elemento.

+ +
+

::-webkit-scrollbar sólo está disponible en navegadores basados en  WebKit (p.e., Google Chrome).

+
+ +

Ejemplo

+ +
.visible-scrollbar, .invisible-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+ +
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+
+ +

{{EmbedLiveSample('Ejemplo')}}

diff --git a/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..753ecad019 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,40 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-slider-runnable-track representa el trayecto (la ranura sobre la que se desliza el indicador) de un  {{HTMLElement("input")}} con type="range".

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..bd00c701d3 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,38 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
admi{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-webkit-slider-thumb representa el selector que el usuario puede mover a lo largo de la ranura de un elemento  {{HTMLElement("input")}} con  type="range" para modificar su valor numérico.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_after/index.html b/files/es/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..c5fe24fedb --- /dev/null +++ b/files/es/web/css/_doublecolon_after/index.html @@ -0,0 +1,182 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +
+ +
+

En CSS, ::after crea un pseudo-elemento que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad {{CSSxRef("content")}}.Es en linea (inline) de forma predeterminada.

+ +
/* Añdade una flecha después de los enlaces */
+a::after {
+  content: "→";
+}
+ +
+

Nota: Los pseudo-elementos generados por  ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto no aplica a elementos reemplazados como los elementos {{HTMLElement("img")}}, o {{HTMLElement("br")}}.

+
+
+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +
+

Nota: CSS3 introdujo la notación ::after (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :after, añadido en CSS2.

+
+ +

Ejemplos

+ +

Uso simple

+ +

Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.

+ +

HTML

+ +
<p class="boring-text">Here is some plain old boring text.</p>
+<p>Here is some normal text that is neither boring nor exciting.</p>
+<p class="exciting-text">Contributing to MDN is easy and fun.</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- EXCITING!";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- BORING";
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Uso_simple', 500, 150)}}

+ +

Ejemplo decorativo

+ +

Podemos estilizar el texto o imágenes de la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.

+ +

HTML

+ +
<span class="ribbon">Look at the orange box after this text. </span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "This is a fancy orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_decorativo', 450, 20)}}

+ +

Tooltips

+ +

El siguiente ejemplo muestra el uso del pseudo-elemento ::after en conjunto con la expresión CSS attr() y el atributo data personalizado data-descr para crear un tooltip de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una página separada.

+ +

HTML

+ +
<p>Here we have some
+  <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
+  <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Sin cambios significativos desde la especificación previa.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}Permite transiciones en propiedades definidas en los pseudo-elementos.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}Permite animaciones en propiedades definidas en los pseudo-elementos.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introduce la sintaxis de doble símbolo :
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Definición inicial, usando sintáxis de un solo símbolo :
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.selectors.after")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_backdrop/index.html b/files/es/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..931a893f81 --- /dev/null +++ b/files/es/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,132 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pantalla completa + - Pseudo Elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Cada uno de los elementos en la pila de la  capa superior posee un  ::backdrop {{Cssxref("pseudo-elements", "pseudo-element")}}. Este pseudo-elemento es una caja que se muestra inmediatamente debajo del elemento (y sobre el elemento inmediatamente inferior de la pila, si es que hay), dentro de dicha capa superior.

+ +

El pseudo-elemento ::backdrop se puede usar para crear un fondo que oculte el documento subyacente detrás de la pila de la capa superior, p.ej., para el elemento que es mostrado a pantalla complete tal  y como se describe en esta especificación.

+ +

No se hereda ni es heredado de ningún elemento. Tampoco se hacen restricciones sobre qué propiedades se aplican a este pseudo-elemento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
en la etiqueta <dialog>32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
a pantalla completa{{CompatNo}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
característicaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
en la etiqueta <dialog>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
a pantalla completa{{CompatNo}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Ver {{bug(1064843)}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_before/index.html b/files/es/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..3f75cb9266 --- /dev/null +++ b/files/es/web/css/_doublecolon_before/index.html @@ -0,0 +1,231 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

En CSS, ::before crea un pseudoelemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad {{cssxref("content")}}. Este elemento se muestra en línea con el texto de forma predeterminada.

+ +
/* Añade un corazón antes de los enlaces */
+a::before {
+  content: "♥";
+}
+ +
+

Nota: Los pseudoelementos generados por ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto, no aplica a elementos de reemplazo como los elementos {{htmlelement("img")}}, o {{htmlelement("br")}}.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +
+

Nota: CSS3 introdujo la notación ::before (con doble dos puntos) para diferenciar pseudo-clases con pseudo-elementos. Los navegadores aceptan :before, añadido en CSS2.

+
+ +

Ejemplos

+ +

Añadiendo comillas

+ +

Un ejemplo simple del uso del pseudoelemento ::before es el proporcionar comillas. Aquí, usamos ::before y {{Cssxref("::after")}} para insertar caracteres de comillas.

+ +

HTML

+ +
<q>Some quotes</q>, he said, <q>are better than none</q>.
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Añadiendo_comillas', '500', '50', '')}}

+ +

Ejemplo decorativo

+ +

Podemos estilizar el texto o imágenes en la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.

+ +

HTML

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_decorativo', 450, 60)}}

+ +

Lista de tareas

+ +

En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.

+ +

HTML

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento ::before que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.

+ +

Resultado

+ +

{{EmbedLiveSample('Lista_de_tareas', 400, 300)}}

+ +

Caracteres especiales

+ +

Como esto es CSS y no HTML, no se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.

+ +

HTML

+ +
<ol>
+  <li>Crack Eggs into bowl</li>
+  <li>Add Milk</li>
+  <li>Add Flour</li>
+  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
+  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
+  <li>Fry until the top of the pancake loses its gloss</li>
+  <li>Flip it over and fry for a couple more minutes</li>
+  <li>serve with your favorite topping</li>
+</ol>
+ +

CSS

+ +

+li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Sin cambios significativos desde la especificación previa.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permite transiciones en propiedades definidas a los pseudo-elementos.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permite animaciones en propiedades definidas a los pseudo-elementos.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduce la sintaxis de doble símbolo :
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Definición inicial, usando la sintaxis de un símbolo :
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.selectors.before")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_cue/index.html b/files/es/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..033849a603 --- /dev/null +++ b/files/es/web/css/_doublecolon_cue/index.html @@ -0,0 +1,113 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - Archivos multimedia + - CSS + - Formato de pistas de texto para la web + - Pseudo-elemento + - Referencia + - Selector + - WebVTT + - anotaciones + - subtítulos +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

El pseudo-elemento CSS ::cue señala las pistas de texto WebVTT dentro del elemento seleccionado. Esto puede ser usado para estilizar subtítulos y otras pistas de texto multimedia con pistas de texto.

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que background y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Propiedades permitidas

+ +

Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:

+ + + +

Ejemplos

+ +

Estilizando las anotaciones WebVTT como blanco sobre negro

+ +

El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Definición inicial.
+ +

Compatibilidad con los navegadores

+ + + +

{{Compat("css.selectors.cue")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..3e243869b6 --- /dev/null +++ b/files/es/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,135 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

El pseudo-elemento ::first-letter aplica estilos a la primera letra de la primera línea un elemento de bloque, sólo cuando no es precedido de otro contenido (como imágenes o tablas).

+ +
/* Selecciona la primera letra de <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

La primera letra de un elemento no es siempre fácil de identificar:

+ + + +
+

CSS3 introdujo la notación::first-letter (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan:first-letter, introducido en CSS2.

+
+ +

Propiedades permitidas

+ +

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-letter:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Hace que la primera letra de cada párrafo sea roja y grande.

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.</p>
+<p>-El comienzo es un signo de puntuación especial.</p>
+<p>_El comienzo es un signo de puntuación especial.</p>
+<p>"El comienzo es un signo de puntuación especial.</p>
+<p>'El comienzo es un signo de puntuación especial.</p>
+<p>*El comienzo es un signo de puntuación especial.</p>
+<p>#El comienzo es un signo de puntuación especial.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Sin cambios.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definición inicial, uso de la sintaxis de doble dos puntos.
+ +

Compatibilidad

+ +
+ + +

{{Compat("css.selectors.first-letter")}}

+
+ +

Ver También

+ + diff --git a/files/es/web/css/_doublecolon_first-line/index.html b/files/es/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..671e7716ef --- /dev/null +++ b/files/es/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,122 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

El Pseudoelemento ::first-line aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.

+ +
/* Selecciona la primera línea de un <p> */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

+
+ +

Propiedades permitidas

+ +

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Los estilos sólo se aplicarán en la primera línea de este párrafo.
+Posteriormente, todo el texto tendrá el estilo normal.
+¿Ves?</p>
+
+<span>La primera línea de este elemento no recibe ningún estilo
+especial, porque no es un elemento de bloque.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ADVERTENCIA: NO USES ESTOS*/
+  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 350, 160)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}} +

Defina más estrictamente dónde ::first-letter puede ocurrir. Generaliza propiedades permitidas. Define la herencia de ::first-letter.

+
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}Introducción de la sintexis de doble dos puntos.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Sin cambios.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}Definición inicial, uso de la sintaxis de doble dos puntos.
+ +
+ + + + +

{{Compat("css.selectors.first-line")}}

+
+ +

Ver También

+ + diff --git a/files/es/web/css/_doublecolon_marker/index.html b/files/es/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..68c7e12b52 --- /dev/null +++ b/files/es/web/css/_doublecolon_marker/index.html @@ -0,0 +1,91 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-elemento ::marker en CSS selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para display: list-item, como el elemento {{HTMLElement("li")}} y {{HTMLElement("summary")}}.

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

Propiedades permitidas

+ +

Sólo ciertas propiedades CSS puedes utilizarse en una regla con ::marker como selector:

+ + + +
+

En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.

+
+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li>Duraznos</li>
+  <li>Manzanas</li>
+  <li>Ciruelas</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant change.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Initial definition.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.marker")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_placeholder/index.html b/files/es/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4ed5e7ff80 --- /dev/null +++ b/files/es/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,152 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - '::placeholder' + - CSS + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

El pseudo-elemento CSS  ::placeholder representa el texto provisional en un elemento {{HTMLElement("input")}} o un elemento {{HTMLElement("textarea")}}.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento {{cssxref("::first-line")}} puede ser usado en una regla utilizando ::placeholder en su selector.

+ +
+

Nota: En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.

+
+ +

Sintáxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Texto rojo

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

Texto verde

+ +

HTML

+ +
<input placeholder="Type something here...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

Preocupaciones por la accesibilidad

+ +

Contraste de color

+ +

Contraste de color

+ +

El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.

+ +

Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.

+ +

El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales Pautas de Accesibilidad para el Contenido Web (WCAG), un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.

+ + + +

Usabilidad

+ +

Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento {{htmlelement("input")}}. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.

+ +

Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar aria-describedby para programáticamente asociar la entrada {{HTMLElement("input")}} con su sugerencia.

+ +

Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una entrada preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan aria-describedby para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Modo de alto contraste de Windows

+ +

El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el Modo de alto contraste de Windows. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal

+ + + +

Etiquetas

+ +

El texto provisional no es un reemplazo para el elemento {{htmlelement("label")}}. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos {{htmlattrxref("for", "label")}} y {{htmlattrxref("id")}}, tecnología asistiva como los lectores de pantalla no pueden leer los elementos {{htmlelement("input")}}.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Definición inicial
+ +

Compatibilidad de los navegadores

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_selection/index.html b/files/es/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d02181429f --- /dev/null +++ b/files/es/web/css/_doublecolon_selection/index.html @@ -0,0 +1,94 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El selector ::selection CSS pseudo-elemento aplica reglas a una porción de un documento que ha sido destacado (por ejemplo: selección con el mouse o algún otro puntero en un dispositivo) del usuario.

+ +

Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla  ::selection en el selector de:  {{ cssxref("color") }}, {{ cssxref("background") }}, {{ cssxref("background-color") }} y {{ cssxref("text-shadow") }}. Nótese que, en particular, {{ cssxref("background-image") }} es ignorado, como cualquier otra propiedad.

+ +
+

text-shadow en ::selection es soportado por Chrome y Safari y Firefox 17 y superior.

+
+ +
Aunque este pseudo-elemento está en borradores como nivel 3 de selectores CSS, fue quitado durante la fase  recomendaciones de candidatos, como parecía que su comportamiento estaba infra-especificado, especialmente con elementos anidados, y la interoperabilidad no fue conseguida (basado en discusión en W3C lista de correos de estilo).
+
+El ::selection pseudo elemento actualmente no está en los modulos de CSS para estandar track. No debe ser usado en entornos de produccion.
+ +

Ejemplo

+ +

Gecko es la única máquina que requiere el prefijo. Devido a el factor que las reglas de análisis de CSS requieren dejar caer la regla general cuando encuentre un pseudo elemento inválido, dos reglas deben ser escritas: ::-moz-selection, ::selection {...}. La regla debe soltada en non-Gecko como ::-moz-selection es inválido en esto.

+ +
/* dibuja en cualquier texto seleccionado el color amarillo  sobre un fondo rojo */
+::-moz-selection { color: gold;  background: red; }
+::selection      { color: gold;  background: red; }
+
+/* dibuja el texto seleccionado en un parrafo de color blanco y negro*/
+p::-moz-selection { color: white;  background: black; }
+p::selection      { color: white;  background: black; }
+ +

Especificaciones

+ +

El ::selection CSS pseudo-elemento fue redactado selector CSS nivel 3 pero quitado antes que alcanzara el estatus recomendado. Apesar de esto es simplemente en algunos Navegadores, que probablemente tendran soporte a este.

+ +

En estos momentos, el seudo elemento CSS ::selection no esta en ninguna especificación.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico11.0 {{ property_prefix("-moz") }}99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicasAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/_doublecolon_spelling-error/index.html b/files/es/web/css/_doublecolon_spelling-error/index.html new file mode 100644 index 0000000000..7c0ac9fb5b --- /dev/null +++ b/files/es/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,70 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - Pseudo-elemento + - Referencia + - Web +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-elemento CSS ::spelling-error representa un segmento de texto que el {{glossary("user agent")}} ha marcado como deletreado incorrectamente.

+ +
::spelling-error {
+  color: red;
+}
+ +

Propiedades permitidas

+ +

Solo se puede usar un pequeño subconjunto de propiedades de CSS en una regla con ::spelling-error en su selector:

+ + + +

Sintaxis

+ +
::spelling-error
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.spelling-error")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/actual_value/index.html b/files/es/web/css/actual_value/index.html new file mode 100644 index 0000000000..a11954dbdb --- /dev/null +++ b/files/es/web/css/actual_value/index.html @@ -0,0 +1,36 @@ +--- +title: Valor real +slug: Web/CSS/actual_value +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

Resumen

+ +

El valor real (actual value) de una propiedad CSS es el valor usado una vez que se aplican todas las aproximaciones. Por ejemplo, tal vez un agente usuario solo puede renderizar bordes con un valor de píxel entero, y se vería forzado a calcular la aproximación de la anchura del borde.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/css/align-content/index.html b/files/es/web/css/align-content/index.html new file mode 100644 index 0000000000..9e6b9b882a --- /dev/null +++ b/files/es/web/css/align-content/index.html @@ -0,0 +1,261 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - Cajas Flexibles CSS + - Propiedad CSS +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS align-content ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.

+ +

Esta propiedad no tiene efecto en cajas flexibles de una sola línea.

+ +
{{cssinfo}}
+ +

Vea Usando las cajas flexibles CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Ajusta las líneas desde el inicio del eje transversal */
+align-content: flex-start;
+
+/* Ajusta las líneas desde el final del eje transversal */
+align-content: flex-end;
+
+/* Ajusta las líneas al rededor del centro del eje transversal */
+align-content: center;
+
+/* Distribuye las líneas a lo largo del eje transversal, de principio a fin */
+align-content: space-between;
+
+/* Distribuye las líneas a lo largo del eje transversal, igualmente espaciados */
+align-content: space-around;
+
+/* Estira las líneas para que ocupen el eje transversal completo */
+align-content: stretch;
+
+/* Valores globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Valores

+ +
+
flex-start
+
Las líneas son ajustadas a partir del inicio del eje transversal. El borde transversal de inicio de la primera línea y el del contenedor flexible quedan unidos. Cada línea siguiente es unida a su predecesora.
+
flex-end
+
Las líneas son ajustadas a partir del final del eje transversal. El borde transversal final de la última línea y el del contenedor flexible quedan unidos. Cada línea que precede es unida a la línea siguiente.
+
center
+
Las líneas son ajustadas hacia el centro del contenedor flexible. Las líneas son unidas entre sí, y centradas dentro del contenedor. El espacio entre el borde transversal de inicio y la primera línea, y el que hay entre el borde transversal final y la última línea es el mismo.
+
space-between
+
Las líneas son distribuidas de manera uniforme en el contenedor flexible. El espaciado se hace de modo que la separación entre cualquier par de elementos adyacentes sea el mismo. Los bordes transversales de inicio y de fin del contenedor son unidos a los bordes de la primera y última línea, respectivamente.
+
space-around
+
Las líneas son distribuidas uniformemente de modo que el espacio entre cualquier par de elementos adyacentes sea el mismo. El espacio vacío antes de la primera línea y el espacio después de la última es igual a la mitad del espacio entre cualquier par de líneas adyacentes.
+
stretch
+
Las líneas son estiradas para usar el espacio sobrante. El espacio libre en el contenedor es dividido por igual entre todas las líneas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

HTML:

+ +
<div id="container">
+  <p>align-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: stretch</p>
+  <div id="stretch">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+ +

CSS:

+ +
#container > div {
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container > div > div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+}
+
+#center {
+  -webkit-align-content: center;
+  align-content: center;
+}
+
+#flex-end {
+  -webkit-align-content: flex-end;
+  align-content: flex-end;
+}
+
+#space-between {
+  -webkit-align-content: space-between;
+  align-content: space-between;
+}
+
+#space-around {
+  -webkit-align-content: space-around;
+  align-content: space-around;
+}
+
+#stretch {
+  -webkit-align-content: stretch;
+  align-content: stretch;
+}
+ +

Su resultado es:

+ +

{{ EmbedLiveSample('Examples', 600, 550) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico21.0{{property_prefix("-webkit")}}28.0[1]{{CompatNo}}12.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}28.0[1]{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/align-items/index.html b/files/es/web/css/align-items/index.html new file mode 100644 index 0000000000..1bc917d05b --- /dev/null +++ b/files/es/web/css/align-items/index.html @@ -0,0 +1,169 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-items +--- +

La propiedad CSS align-items establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su área grid.

+ +

El ejemplo interactivo a continuación demuestra algunos de los valores de align-items utilizando el sistema grid.

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ +

Sintaxis

+ +
/* Palabras Clave Basicas */
+align-items: normal;
+align-items: stretch;
+
+/* Alineamiento posicional */
+/* align-items no considera los valores de "left" o "right"  */
+align-items: center; /* Agrupa los elementos alrededor del centro */
+align-items: start; /* Agrupa los elementos desde el inicio */
+align-items: end; /* Agrupa los elementos desde el final */
+align-items: flex-start; /* Agrupa los elementos flex desde el incio */
+align-items: flex-end; /* Agrupa los elementos flex desde el final */
+align-items: self-start;
+align-items: self-end;
+
+/* Alineamiento de Linea Base */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valores globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Valores

+ +
+
normal
+
El efecto de esta palabra clave depende del modo de diseño utilizado:
+
+ + + +
+
+
flex-start
+
El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.
+
flex-end
+
El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.
+
center
+
Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.
+
start
+
Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.
+
end
+
Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.
+
baseline
+
Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
+
stretch
+
Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
+
+

Sintaxis formal

+
+
+ +
{{csssyntax}}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}[1]{{CompatGeckoDesktop("20.0")}}[2]11.0[3]12.107.0{{property_prefix("-webkit")}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}[2]{{CompatNo}}12.107.0{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de 0x0. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.

+ +

[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a about:config y cambiar el valor de la preferencia layout.css.flexbox.enabled a true. Los flexbox multiínea son soportados desde Firefox 28.

+ +

Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen align-items: center; y su contenido es muy largo, se saldrán de los límites del contenedor. Véase Flexbug #2 para más información.

+ +

Véase también

+ + diff --git a/files/es/web/css/align-self/index.html b/files/es/web/css/align-self/index.html new file mode 100644 index 0000000000..639c48a15a --- /dev/null +++ b/files/es/web/css/align-self/index.html @@ -0,0 +1,137 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-self +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de {{cssxref("align-items")}}. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.

+ +

{{cssinfo}}

+ +

Véase Usando las cajas flexibles CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Valores clave */
+align-self: auto;
+align-self: flex-start;
+align-self: flex-end;
+align-self: center;
+align-self: baseline;
+align-self: stretch;
+
+/* Valores globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+
+ +

Valores

+ +
+
auto
+
Se calcula acorde al valor de {{cssxref("align-items") }} del padre, o al de stretch si el elemento no tiene padre.
+
flex-start
+
El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.
+
flex-end
+
El límite transversal final del elemento flexible es unido al borde transversal final de la línea.
+
center
+
Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.
+
baseline
+
Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
+
stretch
+
Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico21.0{{property_prefix("-webkit")}}
+ 36.0		{{CompatGeckoDesktop("20.0")}}[1]11.012.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox soporta solamente flexbox de una línea hasta Firefox 27. Para activar soporte a flexbox, en Firefox 18 y 19, el usuario debe cambiar la preferencia layout.css.flexbox.enabled a true en la página about:config.

+ +

Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/all/index.html b/files/es/web/css/all/index.html new file mode 100644 index 0000000000..0bb60f5174 --- /dev/null +++ b/files/es/web/css/all/index.html @@ -0,0 +1,219 @@ +--- +title: all +slug: Web/CSS/all +tags: + - Cascada CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de forma reducida all restaura todas las propiedades, excepto {{cssxref("unicode-bidi")}} y {{cssxref("direction")}}, a su valor inicial o heredado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+
+ +

Valores

+ +
+
initial
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a sus valores iniciales. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
inherit
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padre. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
unset
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padres, si son heredadas, o a sus valores iniciales en caso contrario. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
revert
+
Si el valor en cascada de una propiedad es la palabra clave revert, el comportamiento dependerá del origen al que pertenece la declaración: +
+
user-agent origin
+
Equivalente a unset.
+
user origin
+
Revierte la cascada al nivel del agente usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor o a nivel de usuario para esta propiedad.
+
author origin
+
Revierte la cascada a nivel del usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor para esta propiedad. Para permitir la reversión, este origen incluye los orígenes de Override y Animation.
+
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+ +

CSS

+ +
html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Su resultado es:

+ +
+

Sin propiedad all

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} usa los estilos predeterminados del navegador junto con colores de fondo y de texto específicos. También se comporta como elemento block: el texto que le sigue está debajo de él.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento inline (valor inicial), su propiedad {{cssxref("background-color")}} es transparent (valor inicial), pero su propiedad {{cssxref("font-size")}} sigue siendo small (valor heredado) y su propiedad {{cssxref("color")}} es blue (valor heredado).

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento inline element (valor inicial), su propiedad {{cssxref("background-color")}} es transparent (valor inicial), su propiedad {{cssxref("font-size")}} es  normal (valor inicial) y su propiedad {{cssxref("color")}} es black (valor inicial).

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento block (valor heredado de su contenedor {{HTMLElement("div")}}), su propiedad {{cssxref("background-color")}} es transparent (valor heredado), su propiedad {{cssxref("font-size")}} es small (valor heredado) y su propiedad {{cssxref("color")}} es blue (valor heredado).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}Añadido el valor revert.
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("37")}} {{ CompatGeckoDesktop("27") }}{{CompatNo}}{{CompatChrome("24")}}{{CompatNo}}
revert{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
revert{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.3
+
+ +

Véase también

+ +

Los valores de las propiedades CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, y {{cssxref("revert")}}.

diff --git a/files/es/web/css/angle/index.html b/files/es/web/css/angle/index.html new file mode 100644 index 0000000000..8da1e5173d --- /dev/null +++ b/files/es/web/css/angle/index.html @@ -0,0 +1,139 @@ +--- +title: +slug: Web/CSS/angle +tags: + - Ángulo +translation_of: Web/CSS/angle +--- +

{{ CSSRef() }}

+ +

Summary

+ +

El tipo de dato <angle> de CSS representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("<number>")}}) seguido inmediatamente por la unidad (deg, grad, rad o turn). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.

+ +

Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: 90deg y -270deg, o 1turn y 4turn representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente.

+ +

Se deben usar las siguientes unidades:

+ + + +

Aun cuando todas las unidades representan lo mismo para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("<length>")}}: 0 es inválido, y no representa 0deg, 0grad, 0rad o 0turn.

+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Ángulo recto: 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.pngÁngulo llano: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngÁngulo recto (hacia la izquierda): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Ángulo nulo: 0deg = 0grad = 0turn = 0rad

+ +
Nota: 0 no es un valor de ángulo válido.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico2 (528.17)3.6 (1.9.2)9.0{{ CompatNo }}4.0 (528.17)
turn unit{{ CompatNo }}13.09.0{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown }}{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatNo }}{{ CompatUnknown }}
turn unit{{ CompatNo }}13.0{{ CompatUnknown }}{{ CompatNo }}{{ CompatNo }}
+
diff --git a/files/es/web/css/animation-delay/index.html b/files/es/web/css/animation-delay/index.html new file mode 100644 index 0000000000..6edea7e4f2 --- /dev/null +++ b/files/es/web/css/animation-delay/index.html @@ -0,0 +1,125 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-delay +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-delay especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.

+ +

El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.

+ +

Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.

+ +

Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.

+ +

A menudo es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramática formal: <time> [, <time>]*
+
+ +
animation-delay: 3s
+animation-delay: 2s, 4ms
+
+ +

Valores

+ +
+
<time>
+
El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando s) o milisegundos (usando ms). Si no especificamos la unidad, la sentencia no será válida.
+
+ +

Ejemplos

+ +

Visitar animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-delay', 'animation-delay') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }}1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}12{{ property_prefix("-o") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-direction/index.html b/files/es/web/css/animation-direction/index.html new file mode 100644 index 0000000000..cdc0973157 --- /dev/null +++ b/files/es/web/css/animation-direction/index.html @@ -0,0 +1,167 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - Experemiental + - Reference +translation_of: Web/CSS/animation-direction +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

+ +

Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
+
+ +
animation-direction: normal
+animation-direction: reverse
+animation-direction: alternate
+animation-direction: alternate-reverse
+animation-direction: normal, reverse
+animation-direction: alternate, reverse, normal
+
+ +

Valores

+ +
+
normal
+
Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
+
alternate
+
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.
+
reverse
+
Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.
+
alternate-reverse
+
Es similar a alternate pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.
+
+ +

Ejemplos

+ +

Visitar animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}{{ Spec2('CSS3 Animations') }}For the two new values, see the W3C discussion.
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
alternate-reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
alternate-reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-duration/index.html b/files/es/web/css/animation-duration/index.html new file mode 100644 index 0000000000..40f9fa5382 --- /dev/null +++ b/files/es/web/css/animation-duration/index.html @@ -0,0 +1,127 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-duration +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-duration indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).

+ +

El valor por defecto es 0s, que indica que la animación no debe producirse.

+ +

Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramatica formal: {{csssyntax("animation-duration")}}
+
+ +
animation-duration: 6s
+animation-duration: 120ms
+animation-duration: 1s, 15s
+animation-duration: 10s, 30s, 230ms
+
+ +

Valores

+ +
+
<time>
+
El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando s) o milisegundos (usando ms). Si no especificamos la unidad, la sentencia no será válida.
+
+ +
Nota: No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran 0s.
+ +

Ejemplos

+ +

Visitar CSS animations para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3.0{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.0{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}
+
+ +

Consultar también

+ + diff --git a/files/es/web/css/animation-fill-mode/index.html b/files/es/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..1c1f251d22 --- /dev/null +++ b/files/es/web/css/animation-fill-mode/index.html @@ -0,0 +1,233 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{ CSSRef() }}
+ +
{{ SeeCompatTable() }}
+ +

Definición

+ +

La propiedad CSS animation-fill-mode especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal syntax: {{csssyntax("animation-fill-mode")}}
+
+ +
animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+El caracter # indica que pueden darse varios valores separados por comas.
+Cada uno de los valores se aplicará en el mismo orden en que se ha declarado en la propiedad 'animation'
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+
+ +

Valores

+ +
+
none
+
La animación no aplicará los estilos antes ni después de su ejecución.
+
forwards
+
El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación. El último valor dependerá del valor de {{ cssxref("animation-direction") }} y {{ cssxref("animation-iteration-count") }}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countultimo keyframe encontrado
normaleven o odd100% or to
reverseeven o odd0% or from
alternateeven0% or from
alternateodd100% or to
alternate-reverseeven100% or to
alternate-reverseodd0% or from
+
+
backwards
+
La animación aplicará los valores definidos en el primer keyframe tan pronto como se aplique al objeto, y los retendrá durante el tiempo de {{ cssxref("animation-delay") }}. El primer keyframe dependerá del valor de {{ cssxref("animation-direction") }}: + + + + + + + + + + + + + + + + + +
animation-directionprimer keyframe
normal o alternate0% or from
reverse o alternate-reverse100% or to
+
+
both
+
La animación seguirá las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animación en ambas direcciones.
+
+ +

Ejemplos

+ +

Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo.  Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteración queden en su estado final mejor que en el estado inicial. 

+ +

HTML

+ +
<p>Mueve el raton sobre la caja gris</p>
+<div class="demo">
+  <div class="grows">Esto sólo crece</div>
+  <div class="growsandstays">Esto crece y se queda grande</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}
+ +

{{ EmbedLiveSample('Example',700,300) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-iteration-count/index.html b/files/es/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..da5a5792ba --- /dev/null +++ b/files/es/web/css/animation-iteration-count/index.html @@ -0,0 +1,126 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{ CSSRef() }}
+ +
{{ SeeCompatTable() }}
+ +

Resumen

+ +

La propiedad CSS animation-iteration-count define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.

+ +

A menudo es conveniente utilizar la propiedad {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("animation-iteration-count")}}
+
+ +
animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+
+ +

Valores

+ +
+
infinite
+
La animación se repetirá siempre.
+
<number>
+
El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).
+
+ +

Ejemplos

+ +

Ver ejemplos CSS animations.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-name/index.html b/files/es/web/css/animation-name/index.html new file mode 100644 index 0000000000..c74f2cc301 --- /dev/null +++ b/files/es/web/css/animation-name/index.html @@ -0,0 +1,134 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

Resumen

+ +

La propiedad CSS animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un {{cssxref("@keyframes")}} esta regla define los valores de las propiedades de la secuencia de animación.

+ +

A menudo es conveniente utilizar la propiedad abrevieda {{cssxref("animation")}} para ajustar todas las propiedades de animación a la vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("animation-name")}}
+ +
animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+animation-name: initial;
+animation-name: inherit;
+animation-name: unset;
+
+ +

Valores

+ +

<single-animation-name> es una de las siguientes palabras clave:

+ +
+
none
+
Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.
+
{{cssxref("custom-ident","<custom-ident>")}}
+
Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse none, unset, initial, o inherit ni ninguna combinación de estos casos.
+
+ +

Ejemplos

+ +

Ver ejemplos CSS animations.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10 12 {{property_prefix("-o")}}
+ 12.10 #		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-play-state/index.html b/files/es/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..ea24e449de --- /dev/null +++ b/files/es/web/css/animation-play-state/index.html @@ -0,0 +1,134 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

 

+ +

Resumen

+ +

La propiedad CSS animation-play-state determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.

+ +

Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Single animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Multiple animations */
+animation-play-state: paused, running, running;
+
+/* Global values */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Valores

+ +
+
running
+
La animación se está ejecutando.
+
paused
+
La animación está pausada.
+
+ +

Syntax formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Visita animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Definición incial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-timing-function/index.html b/files/es/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..3ab99bb113 --- /dev/null +++ b/files/es/web/css/animation-timing-function/index.html @@ -0,0 +1,141 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Resumen

+ +

La propiedad CSS animation-timing-function especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias {{cssxref("<timing-function>")}}.

+ +

Para animaciones con keyframes,  la timing function se aplica entre los keyframes en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.

+ +

Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.

+ +

A menudo, es conveniente usar la propiedad abreviada {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Valores

+ +
+
<timingfunction>
+
Cada {{cssxref("<timing-function>")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Visita animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Definición incial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}12{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

 

+ +

Consulte también

+ + diff --git a/files/es/web/css/animation/index.html b/files/es/web/css/animation/index.html new file mode 100644 index 0000000000..23b241a346 --- /dev/null +++ b/files/es/web/css/animation/index.html @@ -0,0 +1,127 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad animation de CSS es una propiedad abreviada (shorthand property) para {{ cssxref("animation-name") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-timing-function") }}, {{ cssxref("animation-delay") }}, {{ cssxref("animation-iteration-count") }} y {{ cssxref("animation-direction") }}.

+ +

La lista de propiedades CSS que pueden ser animadas está disponible; cabe señalar que estas son las mismas propiedades soportadas por CSS transitions.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal grammar:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
+                   <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ]
+                 [, [<'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
+                     <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'>] ]*
+
+ +

Ejemplos

+ +

Consulte CSS animations para ver los ejemplos.

+ +

Sobre Accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

+ +

Para más información (en inglés):

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation', 'animation') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}iOS 2.0{{ property_prefix("-webkit") }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html new file mode 100644 index 0000000000..b9bb3a62cc --- /dev/null +++ b/files/es/web/css/appearance/index.html @@ -0,0 +1,1556 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Apariencia CSS + - CSS Referencia(2) + - No-estándar +translation_of: Web/CSS/appearance +--- +
{{non-standard_header}}{{CSSRef}}
+ +

La propiedad CSS -moz-appearance se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.

+ +

Esta propiedad es frecuentemente utilizada en hojas de estilo XUL para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones XBL de los widgets que se arman en la plataforma Mozilla.

+ +
+

No utilizar esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave none no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.

+
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Lista parcial de valores válidos en Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Lista parcial de valores válidos en WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

Valores

+ +

<appearance> es una de las siguientes palabras clave:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}The element is drawn like a button.
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} 
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} 
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} 
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} 
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} 
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} 
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} 
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} 
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} 
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} 
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} 
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} 
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} 
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} 
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} 
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} 
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}The element is styled as menu item, item is highlighted when hovered.
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} 
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} 
menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}The element is styled as a button that would indicate a menulist can be opened.
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} 
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} 
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} 
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} 
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}New in Fx 16.
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}New in Fx 16
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}The element is styled like a progress bar.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} 
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} 
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} 
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} 
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} 
range + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} 
range-thumb + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} 
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} 
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} 
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} 
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} 
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} 
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} 
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} 
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} 
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} 
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} 
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} 
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} 
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} 
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} 
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} 
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} 
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} 
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} 
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} 
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} 
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} 
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} 
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} 
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} 
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} 
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} 
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} 
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} 
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} 
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} 
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} 
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} 
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} 
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} 
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} 
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} 
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} 
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} 
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} 
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} 
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} 
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} 
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} 
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} 
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} 
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} 
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} 
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} 
-moz-mac-unified-toolbar + + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} 
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} 
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} 
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} 
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} 
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} 
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} 
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} 
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} 
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} 
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} 
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} 
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} 
+ +

Síntaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

Especificaciones

+ +

La propiedad appearance no se encuentra actualmente presente en ninguna nueva especificación CSS.

+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] No está completamente soportada.

+ +

[2] Solo los valores none, button, y textfield están soportados. Ver la documentación en MSDN.

+ +

Ver también

+ + diff --git a/files/es/web/css/at-rule/index.html b/files/es/web/css/at-rule/index.html new file mode 100644 index 0000000000..58620af629 --- /dev/null +++ b/files/es/web/css/at-rule/index.html @@ -0,0 +1,73 @@ +--- +title: Regla-At +slug: Web/CSS/At-rule +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Una regla-at es una declaración CSS que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente bloque CSS, lo que sea primero.

+ +

Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:

+ + + +

Grupos de Reglas Condicionales

+ +

Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas conditional group rules. Estas declaraciones comparten sintáxis común y cada una puede incluir nested statements—ya sean conjuntos de reglas o reglas-at anidadas. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser verdadero o falso. Si el valor de la condición resulta verdadero, todas las declaraciones del grupo serán aplicadas.

+ +

Los grupos de reglas condicionales están definidos en CSS Conditionals Level 3 y son:

+ + + +

Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificatiónEstadoComentarios
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición inicial
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}@-webkit-keyframes estandarizado.
+ +

Véase también

+ + diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html new file mode 100644 index 0000000000..7f78df0156 --- /dev/null +++ b/files/es/web/css/attr()/index.html @@ -0,0 +1,246 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

+ +

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

+ +

Sintaxis

+ +
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Valores

+ +
+
attribute-name
+
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
+
<type-or-unit>
+
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
+ Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
+ URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{ cssxref("<angle>") }} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{ cssxref("<angle>") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback>
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

Examples

+ +
p::before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

Result

+ +

{{ EmbedLiveSample("Examples", '100%', '80') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Limited to the {{ cssxref("content") }} property; always return a {{cssxref("<string>")}}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{ CompatGeckoDesktop(1.0) }}89.03.1
Usage in other properties than {{cssxref("content")}} and with non-string values  {{ experimental_inline() }}{{CompatNo()}}{{CompatNo()}} (see {{bug("435426")}}){{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{ CompatGeckoMobile(1.0) }}810.03.1
Usage in other properties than {{cssxref("content")}}and with non-string values  {{ experimental_inline() }}{{CompatUnknown()}}{{CompatNo()}} (see {{bug("435426")}}){{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

 

diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html new file mode 100644 index 0000000000..f9f19df9f7 --- /dev/null +++ b/files/es/web/css/auto/index.html @@ -0,0 +1,49 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/width +--- +

+

<< Volver +

+

Resumen

+

Un valor computado automáticamente por el 'useragent.' +

Usando el valor auto en cualquier propiedad, dejamos al navegador que calcule el valor requerido.


+FIXME +

+

Ejemplos

+
div {
+   height: 600px;
+   border: 1px solid #000;
+}
+
+
div img {
+   height: auto;
+   border: 1px solid red;
+}
+
+

Se utiliza en

+ +


+

+
+

Categorías +Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/azimuth/index.html b/files/es/web/css/azimuth/index.html new file mode 100644 index 0000000000..b4ccce8e37 --- /dev/null +++ b/files/es/web/css/azimuth/index.html @@ -0,0 +1,70 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Archive/Web/CSS/azimuth +--- +

+

<< Referencia CSS +


+

+

Resumen

+

En combinación con elevación, azimuth permite posicionar en el espacio/lugar diferentes fuentes de audio para una presentación auditiva (aural). Es importante ya que es un medio natural de definir varias fuentes de audio que pueden ser colocadas en lugares diferentes en la escena auditiva. Una salida estéreo produce una escena lateral, mientras que los cascos o los sistemas de múltiples altavoces permiten obtener una audición en 3D. +

+ +

Sintaxis

+
azimuth: angle | [[ left-side | far-left | left |
+    center-left | center | center-right | right |
+    far-right | right-side ] || behind ] | leftwards |
+    rightwards | inherit
+
+

Valores

+
ángulo (angle) 
La posición de la fuente audible se describe por un ángulo comprendido en tre -360deg y 360deg. El valor 0deg se encuentra directamente en el centro del escenario auditivo (valor por defecto), 90deg es a la derecha, 180deg es detrás y 270deg o -90deg es a la izquierda. +
+

Palabras claves de posición

+ +

Ejemplos

+
h1   { azimuth: 30deg }
+td.a { azimuth: far-right }          /*  60deg */
+#12  { azimuth: behind far-right }   /* 120deg */
+p.comment { azimuth: behind }        /* 180deg */
+
+

Especificaciones

+ +

Compatibilidad con navegadores

+

Por definir. +

+

Ver también

+

{{ Cssxref("elevation") }} +

{{ languages( { "en": "en/Image/Azimuth.png", "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }} diff --git a/files/es/web/css/backdrop-filter/index.html b/files/es/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..ca5df66d42 --- /dev/null +++ b/files/es/web/css/backdrop-filter/index.html @@ -0,0 +1,145 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - Diseño + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG + - Web + - graficos +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS de backdrop-filter le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está detrás del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.

+ +
/* Valor de palabra clave */
+backdrop-filter: none;
+
+/* URL al filtro SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* valores <filter-function> */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Múltiples filtros */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valores globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
No se aplica filtro al fondo.
+
<filter-function-list>
+
Una lista separada por espacios de {{cssxref("<filter-function>")}} o un filtro SVG que se aplicará al fondo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 600, 400)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..509c6e05fc --- /dev/null +++ b/files/es/web/css/backface-visibility/index.html @@ -0,0 +1,270 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propiedad CSS + - Referencia +translation_of: Web/CSS/backface-visibility +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Resumen

+ +

La propiedad CSS backface-visibility determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.

+ +

Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).

+ +

Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
backface-visibility: visible;
+backface-visibility: hidden;
+
+ +

Valores

+ +

Esta propiedad puede tener dos valores diferentes (y exclusivos):

+ + + +

Sintaxis formal

+ +
+
+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Cubo con caras transparentes

+ +

Contenido HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>All the faces are transparent and the three back faces are visible through the front ones.</p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>No face is opaque, but the three back faces are always hidden now.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

Contenido CSS

+ +
/* Shorthand classes that will show or hide the three back faces of the "cube" */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico12{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoDesktop("16")}}[1]		1015{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoMobile("16")}}[1]		8.1
+ 11{{property_prefix('-webkit')}}		{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +

[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo -webkit por razones de compatibilidad, bajo la preferencia layout.css.prefixes.webkit, con valor predeterminado de false. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html new file mode 100644 index 0000000000..0075a07f88 --- /dev/null +++ b/files/es/web/css/background-attachment/index.html @@ -0,0 +1,133 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS +translation_of: Web/CSS/background-attachment +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

+ + + +

Sintaxis

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valores

+ +
+
scroll 
+
Si scroll es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
+
fixed 
+
Si fixed es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.
+
+ +

Ejemplos

+ +

Ejemplo simple

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Soporta múltiples imagenes de fondo

+ +

Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <attachment> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..808654f167 --- /dev/null +++ b/files/es/web/css/background-blend-mode/index.html @@ -0,0 +1,150 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - Composición CSS + - Propiedad CSS +translation_of: Web/CSS/background-blend-mode +--- +

{{CSSRef()}}

+ +

Resumen

+ +

La propiedad CSS background-blend-mode describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. 

+ +

Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor */
+background-blend-mode: normal;
+
+/* Dos valores, uno por fondo */
+background-blend-mode: darken, luminosity;
+
+/* Valores globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Valores

+ +
+
<blend-mode>
+
Es un {{cssxref("<blend-mode>")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.
+
+ +

Ejemplos

+ + + + + + + +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico 35{{CompatGeckoDesktop('30.0')}}{{CompatNo()}}227.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo()}}{{CompatGeckoMobile('30.0')}}{{CompatNo()}}22iOS 8
+
+ +

Véase también

+ + diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html new file mode 100644 index 0000000000..2c8b8daf79 --- /dev/null +++ b/files/es/web/css/background-clip/index.html @@ -0,0 +1,171 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Diseño + - Fondo CSS + - Propiedad CSS + - Referencia + - Referência(2) + - Web +translation_of: Web/CSS/background-clip +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

+ +

Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); de lo contrario el borde cubre la diferencia.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis Formal: {{csssyntax("background-clip")}}
+ +
background-clip: border-box
+background-clip: padding-box
+background-clip: content-box
+
+background-clip: inherit
+
+ +

Valores

+ +
+
border-box
+
El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).
+
padding-box
+
El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).
+
content-box
+
El fondo se dibuja desde donde inicia el contenido.
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="border-box">The yellow background extends behind the border.</p>
+<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
+<p class="content-box">The yellow background extends only to the edge of the content box.</p>
+
+ +

Contenido CSS

+ +
p {
+   border: 5px navy;
+   border-style: dotted double;
+   margin: 2em;
+   padding: 2em;
+   background: #F8D575;
+}
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+ +

Salida

+ +

{{ EmbedLiveSample('Ejemplo', 540, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad del navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]10.53.0 (522) [3]
content-box1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]12.0 (maybe earlier)3.0 (522) [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
content-box4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
+
+ +

[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, que se corresponde con Firefox 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: -moz-background-clip: padding | border.

+ +

[2] Internet Explorer 7 soportado, pero en otras versiones de Internet Explorer se comporta como background-clip:padding si overflow es: hidden | auto | scroll.

+ +

[3]Webkit también es compatible con prefijo en esta propiedad, y en ese caso, además de las palabras clave actuales, los sinónimos alternativas son: padding, border, and content.

+ +

[4] Konqueror 3.5.4 tiene soporte con -khtml-background-clip.

+ +

Ver también

+ + diff --git a/files/es/web/css/background-color/index.html b/files/es/web/css/background-color/index.html new file mode 100644 index 0000000000..4f3a1fb78f --- /dev/null +++ b/files/es/web/css/background-color/index.html @@ -0,0 +1,141 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-color +--- +

 

+ +

Resumen

+ +

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "transparente".

+ + + +

Sintaxis

+ +
background-color: color | transparent | inherit
+
+ +

Valores

+ +
+
<color>
+
Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.
+
+ +
+
transparent 
+
El valor por defecto del color de fondo (background-color) es transparente tomando así el color del elemento que está justo debajo de él en el apilamiento.
+
+ +

Ejemplos

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","150")}}

+ +

Notas

+ +

(Add links to good colour reference sites here.)

+ +

 

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ +

TBD: This may be removed in favour of a centralized compatibility chart.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navegadorsoporta background-color
Internet Explorer 6parcialmente
Internet Explorer 7parcialmente
Firefox 1.5Sí
Firefox 2Sí
Opera 8.5parcialmente
Opera 9parcialmente
Konqueror 3.5Sí
Safari 2Sí
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html new file mode 100644 index 0000000000..b2ab46dd70 --- /dev/null +++ b/files/es/web/css/background-image/index.html @@ -0,0 +1,135 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-image +--- +

{{ PreviousNext("CSS:background-color", "CSS:background-position") }}

+ +

Resumen

+ +

La propiedad CSS background-image establece una o más imágenes de fondo para un elemento.

+ + + +

Sintaxis

+ +
background-image: url | none | inherit
+
+ +

Valores

+ +
+
url 
+
Localización de la imagen que se utilizará de fondo.
+
none 
+
Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.
+
+ +

Ejemplos

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Notas

+ +

Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.

+ +

Sobre Accesibilidad

+ +

Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta img.

+ +

Para más información (en inglés):

+ + + +

Especificaciones

+ + + +

Compatibilidad de navegador

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-origin/index.html b/files/es/web/css/background-origin/index.html new file mode 100644 index 0000000000..e7e8a94c63 --- /dev/null +++ b/files/es/web/css/background-origin/index.html @@ -0,0 +1,88 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referência +translation_of: Web/CSS/background-origin +--- +

Resumen

+

La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.

+ +

Sintaxis

+
background-origin:[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
+
+

Valores

+
+
+ border-box
+
+

El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.

+
+
+ padding-box
+
+

El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.

+
+
+ content-box
+
+

El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.

+
+
+

Ejemplos

+
div{
+  border:4px dotted #FBE700;
+  background:url('imagen.jpg');
+  background-position:0 0;
+  background-origin:border-box;
+}
+
+
div{
+  background-image: url('image1.jpg'), url('image2.jpg');
+  background-position: 0 0, bottom left;
+  background-origin: padding-box, content-box;
+}
+
+

Notas

+ +

Compatibilidad de navegadores

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.04.0 (2.0)9.010.53.0 (522)
+
+

Especificaciones

+ +

Relacionado

+

background, background-attachment, background-image, background-repeat

diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html new file mode 100644 index 0000000000..cb85bcd824 --- /dev/null +++ b/files/es/web/css/background-position-x/index.html @@ -0,0 +1,128 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

El background-position-x propiedad de CSS  coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.

+ +

Syntax

+ +
/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> values */
+background-position-x: 25%;
+
+/* <length> values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

The background-position-x property is specified as one or more values, separated by commas.

+ +

Values

+ +
+
left
+
Aligns the left edge of the background image with the left edge of the background position layer.
+
center
+
Aligns the center of the background image with the center of the background position layer.
+
right
+
Aligns the right edge of the background image with the right edge of the background position layer.
+
{{cssxref("<length>")}}
+
The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).
+
{{cssxref("<percentage>")}}
+
The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image.
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic example

+ +

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background-color: skyblue;
+  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: bottom 10px;
+}
+ +

Result

+ +

{{EmbedLiveSample('Basic_example', '100%', 300)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-position-x")}}

+ +

See also

+ + diff --git a/files/es/web/css/background-position/index.html b/files/es/web/css/background-position/index.html new file mode 100644 index 0000000000..66a74be4b3 --- /dev/null +++ b/files/es/web/css/background-position/index.html @@ -0,0 +1,132 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-position +--- +

{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }}

+ +

Resumen

+ +

background-position define la posición inicial de la imagen de fondo especificada.

+ + + +

Sintaxis

+ +
background-position: [ <percentage> | <length> | left | center | right  ]
+                     [ <percentage> | <length> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+ +

Valores

+ +
+
{{ Cssxref("porcentaje") }} <percentage>
+
Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.
+
{{ Cssxref("length") }} <length>
+
con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.
+
top left y left top
+
Es igual a '0% 0%'.
+
top, top center y center top
+
Es igual a '50% 0%'.
+
right top y top right
+
Es igual a '100% 0%'.
+
left, left center y center left
+
Es igual a '0% 50%'.
+
center and center center
+
Es igual a '50% 50%'.
+
right, right center y center right
+
Es igual a '100% 50%'.
+
bottom left y left bottom
+
Es igual a '0% 100%'.
+
bottom, bottom center y center bottom
+
Es igual a '50% 100%'.
+
bottom right y right bottom
+
Es igual a '100% 100%'.
+
+ +

Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (lenght) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, 'left' y 'right' solo se utilizarán como primer valor y 'top' y 'bottom' como segundo.

+ +

Ejemplos

+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html new file mode 100644 index 0000000000..660f22df27 --- /dev/null +++ b/files/es/web/css/background-repeat/index.html @@ -0,0 +1,250 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - 'CSS:Referencias' + - Fondos CSS + - Propiedades de CSS + - Referências + - Todas_las_Categorías +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

La propiedad de CSS background-repeat define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

+ +

 

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}} 
+ +
 
+ + + +

 

+ +

 

+ +
/* One-value syntax */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Two-value syntax: horizontal | vertical */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Global values */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +
 
+ + + +

 

+ +

Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando round) o igualmente distribuido desde un extremo a otro (usando space).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<repeat-style>
+
Los atributos de valor único son una abreviación de los atributos de doble valor.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor únicoDoble valor equivalente
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:
+
+ + + + + + + + + + + + + + + + + + + +
repeat La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.
spaceLa imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando space es cuando no hay suficiente sitio para desplegar una imagen.
roundComo el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.
no-repeatLa imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido ies definida por la propiedad de CSS {{cssxref("background-position")}}.
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

HTML

+ +
<ol>
+  <li>no-repeat
+    <div class="one"></div>
+  </li>
+  <li>repeat
+    <div class="two"></div>
+  </li>
+  <li>repeat-x
+    <div class="three"></div>
+  </li>
+  <li>repeat-y
+    <div class="four"></div>
+  </li>
+  <li>space
+    <div class="five"></div>
+  </li>
+  <li>round
+    <div class="six"></div>
+  </li>
+  <li>repeat-x, repeat-y (multiple images)
+    <div class="seven"></div>
+  </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* Background repeats */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* Multiple images */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}
+ +

Resultado

+ +

En este ejemplo, cada elemento de la lista coincide con un valor diferente de background-repeat.

+ +

{{EmbedLiveSample('Examples', 240, 560)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave space y round , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Sin cambios significativos.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.background-repeat")}}

+ +

Mira también

+ + diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html new file mode 100644 index 0000000000..827eb7b8e5 --- /dev/null +++ b/files/es/web/css/background-size/index.html @@ -0,0 +1,235 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS background-size especifica el tamaño de las imágenes de fondo.

+ +
Nota: Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS background-size, el valor de esta propiedad se restablece a su valor inicial de la propiedad abreviada.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
background-size:  background-size[ background-size]*
+
+ +

donde :

+ +
+
background-size
+
Es una de las palabras claves:
+
+
    +
  • contain
    + Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.
    • +
  • cover
    + Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
    • +
+ O bien, uno o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno, el valor predeterminado para el segundo es auto): + +
    +
  • Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado {{ cssxref("background-origin") }}. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno, el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de {{cssxref ("background-attachment", "attachment")}} es fija, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos.
    • +
  • Un valor {{cssxref("<length>")}} que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos.
    • +
  • La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene.
    • +
+
+
+ +

La interpretación de los valores posibles depende de las dimensiones propias de la imagen (ancho y alto) y proporción propia (relación entre la anchura y altura). Una imagen de mapa de bits siempre tiene dimensiones propias y una proporción propia. Una imagen del vector puede tener ambas dimensiones propias (y por lo tanto debe tener una proporción propia). También puede tener una o ningúna dimensiones propias, y en cualquier caso se podría o no tener una proporción propia. Los gradientes son tratados como imágenes sin dimensiones propias o proporción propia.

+ +
+

{{ gecko_callout_heading("8.0") }}

+ +

Este comportamiento ha cambiado en Gecko 8.0 {{geckoRelease ("8.0")}}. Antes de esto, los gradientes se tratan como imágenes sin dimensiones propias, con una proporción propia idéntica al área de posicionamiento de fondo.

+
+ +

 

+ +

Las imágenes de fondo generados a partir de elementos con {{ cssxref("-moz-element") }} (que en realidad coincide con un elemento) se tratan actualmente como las imágenes con las dimensiones del elemento, o de la zona de posicionamiento de fondo si el elemento es SVG, con la proporción propia correspondiente.

+ +
Nota: El comportamiento de los <degradados> cambió en Gecko 8.0 {{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.
+ +

El tamaño representado de la imagen de fondo se calcula como sigue:

+ +
+
Si ambos componentes de background-size se especifican y no son auto:
+
La imagen de fondo representa al tamaño especificado.
+
si el background-size es contain o cover:
+
La imagen es renderizada, preservando su proporción propia, en el tamaño mayor contenido dentro de, o cubriendo, el área de posicionamiento de fondo. Si la imagen no tiene una proporción propia, entonces se representa al tamaño de la zona de posicionamiento de fondo.
+
Si el background-size es auto o auto auto:
+
Si la imagen tiene dos dimensiones propias, se representa en ese tamaño. Si no tiene dimensiones propias y no proporción propia, se representa en el tamaño del área de posicionamiento de fondo. Si no tiene dimensiones, pero tiene una proporción, se representa como si se hubiera especificado contener en su lugar. Si la imagen tiene una dimensión propia y una proporción, ha rendido en el tamaño determinado por esa única dimensión y la proporción. Si la imagen tiene una dimensión propia pero proporción no, se representa utilizando la dimensión propia y la dimensión correspondiente del área de posicionamiento de fondo.
+
Si el background-size tiene un auto componente y un non-auto componente:
+
Si la imagen tiene una proporción propia, entonces hacen uso de la dimensión especificada, y calcula la otra dimensión de la dimensión especificada y la proporción propia. Si la imagen no tiene una parte propia, utilice la dimensión especificada para esa dimensión. Por la otra dimensión, utilice la imagen de dimensión propia correspondiente, si es que existe. Si no hay ninguna dimensión propia tal, el uso de la dimensión correspondiente del área de posicionamiento de fondo.
+
+ +

Tenga en cuenta que los antecedentes de tamaño de imágenes vectoriales que carecen de dimensiones propias o la proporción no se ha aplicado plenamente en todos los navegadores. Tenga cuidado con confiar en el comportamiento descrito anteriormente, y la prueba en varios navegadores (incluyendo específicamente las versiones de Firefox 7 o anterior y Firefox 8 o superior) para asegurarse de versiones diferentes son aceptables.

+ +

Ejemplos

+ +

Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver cómo contain y cover comportarse cuando las dimensiones del área de posicionamiento de fondo variar. Esta serie de demostraciones de cómo funciona el background-size e interactúa con otras propiedades de background-* debe casi cubrir el suelo restante en el uso de background-size solo y en combinación con otras propiedades.

+ +

Notas

+ +

Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NO RECOMENDADO */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8, sin saber el tamaño exacto del elemento cuyo fondo se ha especificado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadosComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{ property_prefix("-webkit") }} [2]{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]9.09.5{{ property_prefix("-o") }}
+ with some bugs [1]		3.0 (522){{ property_prefix("-webkit") }}
+ but from an older CSS3 draft [2]		  
3.0{{ CompatGeckoDesktop("2.0") }}10.04.1 (532)
Soporte para
+ contain y cover		3.0{{ CompatGeckoDesktop("1.9.2") }}9.010.04.1 (532)
Soporte para SVG backgrounds{{ CompatUnknown() }}{{ CompatGeckoDesktop("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Windows PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+ 2.3		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte para SVG backgrounds{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1]  Opera 9.5 's calcula el área de posicionamiento de background es incorrecto para los background fijos. Opera 9,5 también interpreta la forma de dos valores como un factor de escala horizontal y, por las apariencias, una dimensión de recorte vertical. Esto ha sido arreglado en Opera 10.

+ +

[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

+ +

[2] Los navegadores basados ​​en WebKit- originalmente implementado un proyecto anterior de background-size CSS3 en que se trata de un valor omitido segundo como duplicar el primer valor; este proyecto no incluye el cover o contain palabras claves.

+ +

[3] Konqueror 3.5.4 soportan -khtml-background-size.

+ +

[4] Si bien esta propiedad es nueva en Gecko 1.9.2 (Firefox 3.6), es posible estirar una imagen completamente sobre el fondo en Firefox 3.5 usando {{ cssxref("-moz-border-image") }}.

+ +
.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}
+ +

Ver también

+ + diff --git a/files/es/web/css/background/index.html b/files/es/web/css/background/index.html new file mode 100644 index 0000000000..d982708096 --- /dev/null +++ b/files/es/web/css/background/index.html @@ -0,0 +1,138 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background +--- +

{{CSSRef}}

+ +

La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar background para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.

+ + + +

Sintaxis

+ +
/* Usando <background-color> */
+background: green;
+
+/* Usando <bg-image> y <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Usando <box> and <background-color> */
+background: border-box red;
+
+/* Una sola imagen, centrada y escalada */
+background: no-repeat center/80% url("../img/image.png");
+ +

La propiedad  background se especifica como una o más capas de fondo, separadas por comas.

+ +

La sintaxis de cada capa es la siguiente:

+ + + +

Valores

+ +
+
background-color
+
ver color.
+
background-image 
+
ver image.
+
background-repeat 
+
ver repeat.
+
background-attachment 
+
ver background-attachment.
+
background-position 
+
ver position.
+
+ +

Ejemplos

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos")}}

+ +

Notas

+ +

Tomando una declaración válida, la propiedad background inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorMínima versión
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html new file mode 100644 index 0000000000..7ebf5eb24b --- /dev/null +++ b/files/es/web/css/basic-shape/index.html @@ -0,0 +1,208 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/basic-shape +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo <basic-shape> puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <basic-shape>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.

+ +

Figuras posibles

+ +

Las siguientes figuras son soportadas. Todos los valores <basic-shape> usan notación funcional y son definidos aquí usando la sintaxis de definición de valor.

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

Define un rectángulo incrustado.

+ +

Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.

+ +

Los argumentos opcionales <border-radius> definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.

+ +

Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> representa la regla de llenado usada para determinar el área interior del polígono. Los valores posibles son nonzero y evenodd. El valor predeterminado es nonzero.

+ +

Cada elemento par de la lista representa xi y yi - las coordenadas del eje x y el eje y en el vértice i del polígono.

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

El argumento <shape-radius> representa a r, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como sqrt(width^2+height^2)/sqrt(2).

+ +

El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es center.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

El argumento <shape-radius> representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.

+ +

El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es center.

+
+
+ +

Los argumentos no definidos arriba son definidos de esta forma:

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

Define un radio para un círculo o elipse. Su valor predeterminado es closest-side.

+ +

closest-side usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.

+ +

farthest-side use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.

+ +

Valores Calculados de Figuras Básicas

+ +

Los valores en una función <basic-shape> son calculados segun se especifica, con estas excepciones:

+ +
    +
  • Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
    • +
  • Un valor {{cssxref("<position>")}} en circle() o  ellipse() es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.
    • +
  • Un valor <border-radius> en inset() es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.
    • +
+ +

Interpolación de Figuras Básicas

+ +
Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener nonzero en la misma posición en ambas listas), sí se interpolan esos valores.
+ +
 
+ +
    +
  • Ambas figuras deben usar la misma figura de referencia.
    • +
  • Si ambas figuras son del mismo tipo, ellipse() o circle(), y ninguno de los radios usa las palabras clave closest-side o farthest-side keywords, se interpola entre cada valor de las funciones de figura.
    • +
  • Si ambas figuras son de tipo inset(), se interpola entre cada valor de las funciones de figura.
    • +
  • Si ambas figuras son de tipo polygon(), ambos polígonos tienen el mismo número de vértices y usan la misma regla <fill-rule>, se interpola entre cada valor de la función de figura.
    • +
  • En cualquier otro casa no se especifica la interpolación.
    • +
+ +

Ejemplos

+ +
TODO
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificicaciónEstatusComentarios
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{compatVersionUnknown()}}{{CompatGeckoDesktop(47)}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown()}}
inset(){{compatUnknown()}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
Animaciones{{compatUnknown()}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{compatVersionUnknown()}}{{compatVersionUnknown()}}{{CompatGeckoMobile(47)}} (behind a pref){{CompatNo}}{{CompatNo}}{{compatVersionUnknown()}}
inset(){{compatUnknown()}}{{compatVersionUnknown()}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
Animaciones{{compatUnknown()}}{{compatUnknown()}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
+
+ +

Véase también

+ +
    +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html new file mode 100644 index 0000000000..e2a0e41f18 --- /dev/null +++ b/files/es/web/css/blend-mode/index.html @@ -0,0 +1,417 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - Composición + - Composición CSS + - Modos de mezcla + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/blend-mode +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo <blend-mode> es una coleccion de palabras clave que describen modos de mezcla.

+ +

Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.

+ +

Sintaxis

+ +
Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+ +

Valores posibles

+ +
+
normal
+
+

El color final es el de la capa superior, sin importar el color de fondo.
+ El efecto es similar a dos trozos de papel sobrepuestos.

+ +
+ + + +
+ +

{{ EmbedLiveSample('normal', "300", "300") }}

+
+
multiply
+
+

El color final es el resultado de multiplicar el color superior y el inferior.
+ Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
+ El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.

+ +
+ + + +
+ +

{{ EmbedLiveSample('multiply', "300", "300") }}

+
+
screen
+
+

El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
+ Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
+ El efecto es similar a dos imágenes mostrándose desde un proyector.

+ +
+ + + +
+ +

{{ EmbedLiveSample('screen', "300", "300") }}

+
+
overlay
+
El color final es el resultado de multiply si el color inferior es más oscuro, o screen si el color inferior es más claro.
+ Este modo de mezcla es equivalente a hard-light, pero si las capas son intercambiadas. +
+ + + +
+ +

{{ EmbedLiveSample('overlay', "300", "300") }}

+
+
darken
+
+

El resultado final es un color compuesto de los valores más oscuros por cada canal de color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('darken', "300", "300") }}

+
+
lighten
+
+

El resultado final es un color compuesto de los valores más claros por cada canal de color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('lighten', "300", "300") }}

+
+
color-dodge
+
+

El color final es el resultado de dividir el color inferior por el inverso del color superior.
+ Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
+ Este modo de mezcla es similar a screen, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-dodge', "300", "300") }}

+
+
color-burn
+
+

El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
+ Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
+ Este modo de mezcla es similar a multiply, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-burn', "300", "300") }}

+
+
hard-light
+
+

El color final es el resultado de multiply si el color superior es más oscuro, o screen si el color superior es más oscuro.
+ Este modo de mezcla es equivalente a overlay, pero con las capas intercambiadas.
+ El efecto es similar a encender un foco con mucha intensidad en el fondo.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hard-light', "300", "300") }}

+
+
soft-light
+
+

El color final es similar a hard-light, pero más suave.
+ Este modo de mezcla se comporta similar a hard-light.
+ El efecto es similar a encender un foco difuso en el fondo.

+ +
+ + + +
+ +

{{ EmbedLiveSample('soft-light', "300", "300") }}

+
+
difference
+
+

El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
+ Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

+ +
+ + + +
+ +

{{ EmbedLiveSample('difference', "300", "300") }}

+
+
exclusion
+
+

El color final es similar a difference, pero con menor contraste.
+ Así como con difference,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

+ +
+ + + +
+ +

{{ EmbedLiveSample('exclusion', "300", "300") }}

+
+
hue
+
+

El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hue', "300", "300") }}

+
+
saturation
+
+

El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
+ Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.

+ +
+ + + +
+ +

{{ EmbedLiveSample('saturation', "300", "300") }}

+
+
color
+
+

El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
+ El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color', "300", "300") }}

+
+
luminosity
+
+

El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
+ Este modo de mezcla es equivalente a color, pero con las capas intercambiadas.

+ +
+ + + +
+ +

{{ EmbedLiveSample('luminosity', "300", "300") }}

+
+
+ +

Interpolación de modos de mezcla

+ +
 
+ +

Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico35{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{compatUnknown()}}{{compatUnknown()}}{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +

Véase también

+ +
    +
  • Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}
    • +
  • Blend modes
    • +
  • Índice de Referencia CSS
    • +
diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html new file mode 100644 index 0000000000..7b3bd80cc6 --- /dev/null +++ b/files/es/web/css/block-size/index.html @@ -0,0 +1,151 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/block-size +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS block-size CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.

+ +

{{EmbedInteractiveExample("pages/css/block-size.html")}} 

+ +

Resumen

+ +

La propiedad de CSS block-size define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.

+ +

Si el modo de escritura está orientado verticalmente, el valor de block-size se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values */
+block-size: 300px;
+block-size: 25em;
+
+/* <percentage> values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+
+ +

Valores

+ +

La propiedad block-size toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="texto">Texto de ejemplo</p>
+
+ +

Contenido CSS

+ +
.texto {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básicoCompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada de forma predeterminada. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde dicha versión.

+ +

Véase también

+ +
    +
  • Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html new file mode 100644 index 0000000000..904664a1ae --- /dev/null +++ b/files/es/web/css/border-block-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +translation_of: Web/CSS/border-block-color +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-block-color define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-color: yellow;
+border-block-color: #F5F6F7;
+
+ +

El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mirar {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097
    • +
diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html new file mode 100644 index 0000000000..e6b360ad1f --- /dev/null +++ b/files/es/web/css/border-block-end-color/index.html @@ -0,0 +1,138 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-color +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end-color define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+
+ +

Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-color'>
+
Véase {{ cssxref("border-color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión .

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html new file mode 100644 index 0000000000..cf626f9017 --- /dev/null +++ b/files/es/web/css/border-block-end-style/index.html @@ -0,0 +1,139 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-style +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end-style define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+
+ +

Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
See {{ cssxref("border-style") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.

+ +

Véase también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html new file mode 100644 index 0000000000..df9125f627 --- /dev/null +++ b/files/es/web/css/border-block-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +translation_of: Web/CSS/border-block-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propieda de CSS border-block-end-width define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+
+ +

Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El tamaño del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("css.properties.border-block-end-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html new file mode 100644 index 0000000000..a2c5d20e60 --- /dev/null +++ b/files/es/web/css/border-block-end/index.html @@ -0,0 +1,144 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. border-block-end puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+
+ +

Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

Una o más de los siguientes, en cualquier orden:

+ +
+
<'border-width'>
+
Véase {{ cssxref("border-width") }}
+
<'border-style'>
+
Véase {{ cssxref("border-style") }}
+
<'color'>
+
Véase {{ cssxref("color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html new file mode 100644 index 0000000000..393780221b --- /dev/null +++ b/files/es/web/css/border-block-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +translation_of: Web/CSS/border-block-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-block-start-color define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
+ + + +

Sintaxis

+ +
border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
Mira {{ cssxref("border-color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html new file mode 100644 index 0000000000..0fe32ca16a --- /dev/null +++ b/files/es/web/css/border-block-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +translation_of: Web/CSS/border-block-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS border-block-start-style define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html new file mode 100644 index 0000000000..cdbdcc153a --- /dev/null +++ b/files/es/web/css/border-block-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +translation_of: Web/CSS/border-block-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS border-block-start-width define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+
+ +

Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html new file mode 100644 index 0000000000..89204dc8b1 --- /dev/null +++ b/files/es/web/css/border-block-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +translation_of: Web/CSS/border-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-block-start es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.  

+ +
{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
+ + + +

Sintaxis

+ +
border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+
+ +

border-block-start puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-block-start es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
El estilo de la línea del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html new file mode 100644 index 0000000000..f3a8cbadbf --- /dev/null +++ b/files/es/web/css/border-block-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +translation_of: Web/CSS/border-block-style +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-block-style CSS property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-style'> values */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+
+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-style")}}

+ +

 

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html new file mode 100644 index 0000000000..10c641ba39 --- /dev/null +++ b/files/es/web/css/border-block-width/index.html @@ -0,0 +1,87 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +translation_of: Web/CSS/border-block-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-block-width CSS property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-width'> values */
+border-block-width: 5px;
+border-block-width: thick;
+
+ +

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html new file mode 100644 index 0000000000..f3159a7174 --- /dev/null +++ b/files/es/web/css/border-block/index.html @@ -0,0 +1,96 @@ +--- +title: border-block +slug: Web/CSS/border-block +translation_of: Web/CSS/border-block +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-block es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. 

+ +
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+
+ +

border-block puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .

+ +

Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

El border-block es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mirar {{cssxref("border-width")}}.
+
<'border-style'>
+
El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mirar {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}Definition inicial
+ +

Compatibilidad en navegadores 

+ + + +

{{Compat("css.properties.border-block")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..b171eb2aca --- /dev/null +++ b/files/es/web/css/border-bottom-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-color +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-bottom-color define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparente.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: non
    • +
  • Porcentajes: N/A
    • +
  • Medio : {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.
    • +
+ +

Sintaxis

+ +
border-bottom-color: couleur | transparent | inherit
+
+ +

Valores

+ +
+
color 
+
puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (azul).
+
+ +
+
transparent 
+
el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-color") }}
    • +
  • {{ Cssxref("border-left-color") }}
    • +
  • {{ Cssxref("border-right-color") }}
    • +
  • {{ Cssxref("border-top-color") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+ +

Notas

+ + + +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}

diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..7290aa56c1 --- /dev/null +++ b/files/es/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-bottom-left-radius establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

+ +
border-bottom-left-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-left-radius: horizontal vertical */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
+
.
+
+ 		Un arco de círculo usado como borde + 
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		Un arco de elipse usado como borde + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-bottomleft, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-bottomleft siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}}, el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..1e95cfd6d7 --- /dev/null +++ b/files/es/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-bottom-right-radius establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

+ +
border-bottom-right-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-right-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
+
.
+
+ 		Un arco de círculo usado como borde + 
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		Un arco de elipse usado como borde + 
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-bottomright, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-bottomright siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a  Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..28f0697b0c --- /dev/null +++ b/files/es/web/css/border-bottom-style/index.html @@ -0,0 +1,102 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-style +--- +

 

+ +

<< Volver

+ +

 

+ +

Resumen

+ +

border-bottom-style define el estilo de línea del borde inferior de una caja.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especificó
    • +
+ +

Sintaxis

+ +
border-bottom-style: <border-style> | inherit
+
+ +

Valores

+ +
+
none 
+
sin borde.
+
hidden 
+
es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.
+
dotted 
+
series de puntos (....).
+
dashed 
+
series de guiones cortos o pequeñas líneas (----).
+
solid 
+
línea única, recta y sólida.
+
double 
+
dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de bordeborder-width.
+
groove 
+
efecto de hundido.
+
ridge 
+
al revés de 'groove'. El borde aparece en 3D (saliendo).
+
inset 
+
hace que la caja aparezca hundida.
+
outset 
+
opuesto a 'inset'. La caja aparece en 3D (saliendo).
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-left-style") }}
    • +
  • {{ Cssxref("border-right-style") }}
    • +
  • {{ Cssxref("border-top-style") }}
    • +
  • {{ Cssxref("border-style") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+        border-bottom-size: 1px;
+        border-bottom-style: dotted;
+        border-bottom-color: #000;
+}
+
+ +

Notas

+ +

A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.

+ +

Especificaciones

+ + + +

Compatibilidades

+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +

 

+ +
+

Categorías

+Interwiki Languages
+ +

{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}

diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..5550344a75 --- /dev/null +++ b/files/es/web/css/border-bottom-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-width +--- +

 

+ +

<< Volver

+ +

Resumen

+ +

border-bottom-width define el ancho del borde inferior de una caja.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es none o hidden.
    • +
+ +

Sintaxis

+ +
border-bottom-width: <border-width> | inherit
+
+ +

Valores

+ +
+
thin
+
un borde fino.
+
medium
+
un borde mediano.
+
thick
+
un borde grueso.
+
<length>
+
El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.
+ Nota : El valor em también es soportada.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-left-style") }}
    • +
  • {{ Cssxref("border-right-style") }}
    • +
  • {{ Cssxref("border-top-style") }}
    • +
  • {{ Cssxref("border-style") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border-bottom-width: thin;
+    border-bottom-style: solid;
+    border-bottom-color: #000;
+}
+
+ +

Especificacions

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer 
Firefox 
Netscape 
Opera 
+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +

 

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}

diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html new file mode 100644 index 0000000000..3b1774513b --- /dev/null +++ b/files/es/web/css/border-bottom/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-bottom permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+ +

Valores

+ +
+
<border-width> 
+
ver {{ Cssxref("border-bottom-width") }}.
+
<border-style> 
+
ver {{ Cssxref("border-bottom-style") }}.
+
<border-color> 
+
ver {{ Cssxref("border-bottom-color") }}.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border-bottom-width: 1px solid #000;
+}
+
+ +

Notas

+ +

Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.

+ +

Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.

+ +

Como con todas las propiedades generales, border-bottom siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.

+ +

Lo que significa que:

+ +
  border-bottom-style: dotted;
+  border-bottom: thick green;
+ +

es idéntico a:

+ +
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+ +

y el valor de {{ Cssxref("border-bottom-style") }} dado antes de border-bottom es ignorado.

+ +

Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es none, el no especificar la parte <border-style> en la propiedad general significa: sin borde.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}

diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html new file mode 100644 index 0000000000..a657568e91 --- /dev/null +++ b/files/es/web/css/border-collapse/index.html @@ -0,0 +1,98 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-collapse +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.

+ +

En el modelo de fusión, las celdas adyacentes comparten los mismos bordes

+ +

En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Yes
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+ +

Sintaxis

+ +
border-collapse: value
+
+ +

Valores

+ +
    +
  • inherit : Define explícitamente el valor como heredada del elemento padre.
    • +
  • separate : Utiliza el modo de presentación de separación de borde.
    • +
  • collapse : Utiliza el modo de presentación de fusión de borde
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
+
+ +
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
+
+ +

Notas

+ +

En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de inset se comporta como groove, y outset como ridge.

+ +

CSS 2 especifica que el valor inicial para esta propiedad es collapse, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera separate.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer5.5
Netscape7
Opera5
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-spacing") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}

diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html new file mode 100644 index 0000000000..ae50c74d4d --- /dev/null +++ b/files/es/web/css/border-color/index.html @@ -0,0 +1,112 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-color +--- +

{{ PreviousNext("CSS:border", "CSS:border-style") }}

+ +

Resumen

+ +

la propiedad border-color es un atajo para definir el color de los cuatro bordes de un elemento.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Percentages: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculada") }}: el valor del color por defecto, o lo que se especificó.
    • +
+ +

Sintaxis

+ +
border-color: [ <color> || transparent ]{1,4} | inherit
+
+ +

Valores

+ +
+
<color> 
+
el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.
+
+ +
+
transparent 
+
el borde no aparece pero ocupa el sitio definido.
+
+ +

Se pueden pasar hasta cuatro valores;

+ +

Con un color, los cuatro lados tendrán el mismo.
+ Con dos colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
+ Con tres colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
+ Con cuatro colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.

+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
+ +

Notas

+ +

Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (diferente de none o hidden)

+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadoresVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Extensiones Mozilla

+ +

La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.

+ +
    +
  • {{ Cssxref("-moz-border-bottom-colors") }}
    • +
  • {{ Cssxref("-moz-border-left-colors") }}
    • +
  • {{ Cssxref("-moz-border-right-colors") }}
    • +
  • {{ Cssxref("-moz-border-top-colors") }}
    • +
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html new file mode 100644 index 0000000000..478bacb8f6 --- /dev/null +++ b/files/es/web/css/border-end-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +translation_of: Web/CSS/border-end-end-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-end-end-radius define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Global values */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-end-end-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html new file mode 100644 index 0000000000..b58ce4add6 --- /dev/null +++ b/files/es/web/css/border-end-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +translation_of: Web/CSS/border-end-start-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-end-start-radius define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Global values */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-end-start-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..565a215775 --- /dev/null +++ b/files/es/web/css/border-image-outset/index.html @@ -0,0 +1,138 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad border-image-outset describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.

+ +

Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.

+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* border-image-outset: sides */
+border-image-outset: 1.5;
+
+/* border-image-outset: vertical horizontal */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: top horizontal bottom */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: top right bottom left */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-outset: inherit;
+
+ +

Valores

+ +
+

Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de border-image-outset. Los valores negativos no son permitidos.

+
+ +
+
sides
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
+
top
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
+
bottom
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
+
right
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
+
left
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
+
inherit
+
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..14410bd1ff --- /dev/null +++ b/files/es/web/css/border-image-repeat/index.html @@ -0,0 +1,123 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - Bordes CSS + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-image-repeat define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.

+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* border-image-repeat: type */
+border-image-repeat: stretch;
+
+/* border-image-repeat: horizontal vertical */
+border-image-repeat: round stretch;
+
+/* Global values */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Valores

+ +
+
type
+
Puede ser stretch, repeat, o round, que denotan cómo será tratada la imagen vertical y horizontalmente.
+
horizontal
+
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen horizontalmente.
+
vertical
+
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen verticalmente.
+
stretch
+
Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
+
repeat
+
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
+
round
+
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
+
space
+
La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
#borderImageRepetition {
+  width: 260px;
+  height: 80px;
+  margin-bottom: 10px;
+  border: 30px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
+}
+
+ + + +

{{EmbedLiveSample("Example", "330px", "180px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{Compat("css.properties.border-image-repeat")}}
+ +

Véase también

+ + diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..4a3c074a22 --- /dev/null +++ b/files/es/web/css/border-image-slice/index.html @@ -0,0 +1,159 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-image-slice divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.

+ +

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesCuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.

+ +

La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave fill. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).

+ +

Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.

+ +

La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertical */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: top horizontal bottom */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: top right bottom left */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Valores

+ +
+
slice
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%.
+
horizontal
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
vertical
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
top
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
bottom
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
right
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
left
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
fill
+
Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
+
inherit
+
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}[1]11156
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.1{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Hasta Gecko 47.0 {{geckoRelease("47.0")}} las imágenes SVGs sin viewport no eran divididas correctamente ({{bug("619500")}}). A partir de Gecko 48.0 {{geckoRelease("48.0")}} son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente ({{bug("1264809")}}). Esto fue arreglado en Gecko 49.0 {{geckoRelease("49.0")}}, aunque aun hay un problema con los SVGs sin viewport donde e10s es deshabilitado ({{bug("1284798")}}).

+ +

También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en {{cssxref("border-image-slice")}} son calculados como enteros, en vez de reales ({{bug("1284797")}}).

+ +

Véase también

+ + diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html new file mode 100644 index 0000000000..a2f2ca8c26 --- /dev/null +++ b/files/es/web/css/border-image/index.html @@ -0,0 +1,199 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +
{{CSSRef("CSS Borders")}}
+ +

Resumen

+ +

La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

+ +

La propiedad border-image es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Etiquetado formal: {{csssyntax("border-image")}}
+ +

Valores

+ +

A continuación vea las respectivas propiedades para los diferentes valores.

+ +

Ejemplos

+ +

Bitmap repeated (repeat)

+ +

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+
+ +

Resultado:
+ border image repeat demo

+ +

Bitmap repeated (round)

+ +

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}
+ +

Resultado:
+ border image round demo

+ +

Bitmap stretched

+ +

La opción 'stretch' estira la imágen para rellenar todo el borde del área

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+ +

Resultado:
+ border image stretch demo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support +

{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}} [1]

+ +

Without prefix since {{CompatGeckoDesktop("15")}}

+ 		+

7.0{{property_prefix("-webkit")}}

+ +

Without prefix since 16.0

+ 		+

11

+ 		+

10.5 / 11.0{{property_prefix("-o")}} [2]

+ +

Without prefix since 15.0

+ 		+

3.0{{property_prefix("-webkit")}}

+ +

Without prefix since 6.0

+
optional <border-image-slice>{{CompatGeckoDesktop("15")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoDesktop("15")}}Yes{{CompatUnknown}}{{CompatNo}}Yes (6)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support +

3.2{{property_prefix("-webkit")}}

+ +

Without prefix since {{CompatGeckoMobile("15")}}

+ 		{{CompatNo}}11.0{{property_prefix("-o")}}2.1{{property_prefix("-webkit")}}
optional <border-image-slice>{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatNo}}Yes(18)
+
+ +
    +
  • [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
    • +
  • [2] For Opera, the prefixed property was added after the non-prefixed.
    • +
diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html new file mode 100644 index 0000000000..cf7c658d5f --- /dev/null +++ b/files/es/web/css/border-inline-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +translation_of: Web/CSS/border-inline-color +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  border-inline-color define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+
+ +

El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html new file mode 100644 index 0000000000..961d2d0e1e --- /dev/null +++ b/files/es/web/css/border-inline-end-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-color CSS property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
+ + + +

Sintaxis

+ +
border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html new file mode 100644 index 0000000000..1f3a6dbfe7 --- /dev/null +++ b/files/es/web/css/border-inline-end-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +translation_of: Web/CSS/border-inline-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-style CSS property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html new file mode 100644 index 0000000000..3924e681f6 --- /dev/null +++ b/files/es/web/css/border-inline-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +translation_of: Web/CSS/border-inline-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-width CSS property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html new file mode 100644 index 0000000000..7303c2fafc --- /dev/null +++ b/files/es/web/css/border-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +translation_of: Web/CSS/border-inline-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-inline-end es una propiedad abreviada para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. 

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
+ + + +

Sintaxis

+ +
border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+
+ +

border-inline-end puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-inline-end es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html new file mode 100644 index 0000000000..b6c7da3e00 --- /dev/null +++ b/files/es/web/css/border-inline-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-color define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
+ + + +

Sintaxis

+ +
border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html new file mode 100644 index 0000000000..e02c4e585b --- /dev/null +++ b/files/es/web/css/border-inline-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +translation_of: Web/CSS/border-inline-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-style define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html new file mode 100644 index 0000000000..d507fcb933 --- /dev/null +++ b/files/es/web/css/border-inline-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +translation_of: Web/CSS/border-inline-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-width define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html new file mode 100644 index 0000000000..5a40bc8105 --- /dev/null +++ b/files/es/web/css/border-inline-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +translation_of: Web/CSS/border-inline-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-inline-start es una propiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
+ + + +

Sintaxis

+ +
border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+
+ +

border-inline-start es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-inline-start es especificado con uno o más de los sigueintes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html new file mode 100644 index 0000000000..23eea1cf40 --- /dev/null +++ b/files/es/web/css/border-inline-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +translation_of: Web/CSS/border-inline-style +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-inline-style define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-style'> values */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+
+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-style")}}

+ +

 

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html new file mode 100644 index 0000000000..b3c6eeb16f --- /dev/null +++ b/files/es/web/css/border-inline-width/index.html @@ -0,0 +1,88 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +translation_of: Web/CSS/border-inline-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-width define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-width'> values */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+
+ +

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html new file mode 100644 index 0000000000..cdff68b414 --- /dev/null +++ b/files/es/web/css/border-inline/index.html @@ -0,0 +1,94 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +translation_of: Web/CSS/border-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS border-inline es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. 

+ +
border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+
+ +

border-inline puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

El border-inline es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html new file mode 100644 index 0000000000..1d78d5e755 --- /dev/null +++ b/files/es/web/css/border-left-color/index.html @@ -0,0 +1,73 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +

Resumen

+ +

border-left-color pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente .

+ +
    +
  • {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: N/A
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
    • +
+ +

Sintaxis

+ +
border-left-color:color | transparent | inherit
+
+ +

Valores

+ +
+
color 
+
El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados
+
transparent 
+
El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.
+
+ +

Propiedades parecidas

+ +
    +
  • {{ Cssxref("border-color") }}
    • +
  • {{ Cssxref("border-bottom-color") }}
    • +
  • {{ Cssxref("border-right-color") }}
    • +
  • {{ Cssxref("border-top-color") }}
    • +
+ +

Examples

+ +

Ver El Ejemplo Vivo

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+
+ +

 

+ +
p {
+border-style: solid;
+border-left-color: #ff0000
+}
+
+p {
+border-style: solid;
+border-left-color: rgb(255,0,0)
+}
+
+ +

Notas

+ + diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html new file mode 100644 index 0000000000..8c2b4d55ed --- /dev/null +++ b/files/es/web/css/border-left/index.html @@ -0,0 +1,120 @@ +--- +title: border-left +slug: Web/CSS/border-left +translation_of: Web/CSS/border-left +--- +

{{CSSRef}}

+ +

Resumen

+ +

El borde_izquierdo es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
border-left: [border-width || border-style || border-color | inherit] ;
+
+ +

Valores

+ +
+
border-width
+
See {{ Cssxref("border-width") }}.
+
border-style 
+
See {{ Cssxref("border-style") }}.
+
border-color 
+
See {{ Cssxref("border-color") }}.
+
+ +

Ejemplos

+ +

element {

+ +
    border-left: 1px solid #000;
+
+ +

}

+ +

Notas

+ +

Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-left', 'border-left') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html new file mode 100644 index 0000000000..39e3ab03d7 --- /dev/null +++ b/files/es/web/css/border-radius/index.html @@ -0,0 +1,320 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-radius +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad CSS border-radius permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.

+ +

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

+ +

El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.

+ +

Esta propiedad es un atajo para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.

+ +
As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal grammar: [ <length> | <percentage> ]{1,4}  [ / [ <length> | <percentage> ]{1,4}] ?
+                \------------------------------/      \-------------------------------/
+                           First radii                     Second radii (optional)
+
+ +
The syntax of the first radius allows one to four values:
+border-radius: radius
+border-radius: top-left-and-bottom-right top-right-and-bottom-left
+border-radius: top-left top-right-and-bottom-left bottom-right
+border-radius: top-left top-right bottom-right bottom-left
+
+The syntax of the second radius also allows one to four values
+border-radius: (first radius values) / radius
+border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
+border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
+border-radius: (first radius values) / top-left top-right bottom-right bottom-left
+
+border-radius: inherit
+
+ +

Valores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radiusall-corner.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-righttop-left-bottom-right.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-lefttop-right-bottom-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-lefttop-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-righttop-right.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-rightbottom-rigth.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-leftbottom-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
inherit Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+ +

Valores

+ +
+
<length>
+
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.
+
<percentage>
+
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
+
+ +

Por ejemplo:

+ +
border-radius: 1em/5em;
+
+/* es equivalente a: */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* es equivalente a: */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Ejemplos

+ +
  border: solid 10px;
+  /* the border will curve into a 'D' */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +

Notas

+ +
    +
  • Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.
    • +
  • border-radius does not apply to table elements when {{ Cssxref("border-collapse") }} is collapse.
    • +
  • Old versions of WebKit handle multiple values differently, see below.
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad con los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}		4.0
+ 0.2{{ property_prefix("-webkit") }}		9.010.55.0
+ 3.0{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatGeckoDesktop("1.9.1") }}yesyesyesyes, but see below
4 values for 4 cornersyes4.0yesyes5.0
Percentagesyes
+ was {{ non-standard_inline() }} (see below)		yesyes11.55.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support3.2{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}2.1{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
4 values for 4 corners{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
Percentages{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +

<percentage> values

+ +
    +
  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
    • +
  • are buggy in Opera prior to 11.50
    • +
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
    • +
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)
    • +
+ +

Gecko notes

+ +

In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

+ +
    +
  • changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • +
  • makes rounded corners clip content and images (if {{ cssxref("overflow") }}: visible is not set)
    • +
+ +
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.
+ +

WebKit notes

+ +

Older Safari and Chrome versions (prior to WebKit 532.5)

+ +
    +
  • support only one value for all 4 corners. For different radii the long form properties must be used
    • +
  • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners + 
    /* this is equivalent: */
+
+-webkit-border-radius: 40px 10px;
+        border-radius: 40px/10px;
+
    +
    • +
+ +

Opera notes

+ +

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

+ +

Vea también

+ +
    +
  • Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}
    • +
+ +

{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}

diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html new file mode 100644 index 0000000000..ef5e1b4a3e --- /dev/null +++ b/files/es/web/css/border-right/index.html @@ -0,0 +1,109 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

La propiedad CSS border-right es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un borde derecho del elemento.

+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ + + +

Como con todas las propiedades rápidas, border-right siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +

... es en realidad lo mismo que ...

+ +
border-right-style: dotted;
+border-right: none thick green;
+
+ +

... y el valor de {{cssxref("border-right-style")}} dado previamente a border-right es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es none, si no se especifica la parte border-style el resultado es no establecer un borde.

+ +

Sintaxis

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.

+ +

Valores

+ +
+
<br-width>
+
Ver {{cssxref("border-right-width")}}.
+
<br-style>
+
Ver {{cssxref("border-right-style")}}.
+
{{cssxref("<color>")}}
+
Ver {{cssxref("border-right-color")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div>
+  Esta caja tiene un borde en el lado derecho.
+</div>
+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

Compatibilitidad del navegador

+ + + +

{{Compat("css.properties.border-right")}}

diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html new file mode 100644 index 0000000000..3abde56c44 --- /dev/null +++ b/files/es/web/css/border-spacing/index.html @@ -0,0 +1,104 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-spacing +--- +

<< Volver

+ +

Resumen

+ +

La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de separación de borde). Es el equivalente al atributo cellspacing en HTML.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: 0
    • +
  • Se aplica a: tablas y elementos con la propiedad inline-table
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.
    • +
+ +

Sintaxis

+ +

border-spacing: <length> | <length> <length> | inherit

+ +

Valores

+ +
    +
  • <length> : un largo a utilizar para el espaciado horizontal y vertical.
    • +
  • <length> <length> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
table#space {
+  border-collapse: separate;
+  border-spacing: 10px 5px;
+}
+
+ +

Notas

+ +

Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en separate.

+ +

El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Netscape6
Internet Explorer7
Firefox1
Mozilla1
Safari1
Opera6
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-collapse") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}

diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html new file mode 100644 index 0000000000..97f10396ad --- /dev/null +++ b/files/es/web/css/border-start-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +translation_of: Web/CSS/border-start-end-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-start-end-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Global values */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-start-end-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html new file mode 100644 index 0000000000..c7596f14ad --- /dev/null +++ b/files/es/web/css/border-start-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +translation_of: Web/CSS/border-start-start-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-start-start-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Global values */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-start-start-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html new file mode 100644 index 0000000000..616f336ead --- /dev/null +++ b/files/es/web/css/border-style/index.html @@ -0,0 +1,242 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

La propiedad border-style CSS es una shorthand property (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* vertical | horizontal */
+border-style: dotted solid;
+
+/* top | horizontal | bottom */
+border-style: hidden double dashed;
+
+/* top | right | bottom | left */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

La propiedad border-style se puede especificar usando uno, dos, tres o cuatro valores.

+ +
    +
  • Cuando se especifica un valor, se aplica el mismo estilo a los cuatro lados.
    • +
  • Cuando se especifican dos valores, el primer estilo se aplica a la parte superior e inferior, el segundo a la izquierda y a la derecha
    • +
  • Cuando se especifican tres valores, el primer estilo se aplica a la parte superior, el segundo a la izquierda y derecha, el tercero a la parte inferior.
    • +
  • Cuando se especifican cuatro valores, los estilos se aplican a la parte superior, derecha, inferior e izquierda en ese orden (en el sentido de las agujas del reloj).
    • +
+ +

Cada valor es una palabra clave elegida de la siguiente lista.

+ +

Values

+ +
+
<br-style>
+
Describe el estilo del borde. Puede tener los siguientes valores: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Like the hidden keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden +
+ 		Like the none keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
dotted +
+ 		Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.
dashed +
+ 		Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid +
+ 		Displays a single, straight, solid line.
double +
+ 		Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.
groove +
+ 		Displays a border with a carved appearance. It is the opposite of ridge.
ridge +
+ 		Displays a border with an extruded appearance. It is the opposite of groove.
inset +
+ 		Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like groove.
outset +
+ 		+

Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like ridge.

+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Tabla con todos los valores de propiedad

+ +

A continuación, se muestra un ejemplo de todos los valores de propiedad.

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style example classes */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Especificacion EstadoComentario
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change.
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Adds hidden keyword value.
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Ver también

+ +
    +
  • The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
    • +
diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html new file mode 100644 index 0000000000..7be5b9461e --- /dev/null +++ b/files/es/web/css/border-top-color/index.html @@ -0,0 +1,105 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

La  propiedad CSS border-top-color  establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.

+ +
/*valores <color> */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valores globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad border-top-color es especificada con un valor unico.

+ +

Valores

+ +
+
{{cssxref("<color>")}}
+
El color superior del borde
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Un div simple con un borde

+ +

HTML

+ +
<div class="mybox">
+  <p>Esta es una caja con un border alrededor.
+     Tenga en cuenta que un border de la caja es
+     <span class="redtext">Rojo</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}Sin cambios significativos, aunque la palabra clave transparent , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

{{Compat("css.properties.border-top-color")}}

+ +

Ver tambien

+ +
    +
  • Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.
    • +
  • Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.
    • +
  • Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.
    • +
diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..69be619d41 --- /dev/null +++ b/files/es/web/css/border-top-left-radius/index.html @@ -0,0 +1,252 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

La propiedad CSS border-top-left-radius establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

+ +
border-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
 
+ 		Un arco de círculo usado como borde + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		Un arco de elipse usado como borde + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-topleft, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-topleft siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..ecb6f157b2 --- /dev/null +++ b/files/es/web/css/border-top-right-radius/index.html @@ -0,0 +1,256 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-right-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-top-right-radius establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

+ +
border-top-right-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-radius-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-top-right-radius: radius */
+border-top-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-right-radius: horizontal vertical */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor  {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor  {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
 
+ 		Un arco de círculo usado como borde + 
+div {
+  border-top-right-radius: 40px 40px;
+}
+
+
+
 
+ 		Un arco de elipse usado como borde + 
+div {
+  border-top-right-radius: 40px 20px;
+}
+
+
+
 
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
 
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-topright, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-topright siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html new file mode 100644 index 0000000000..fbbb9a741b --- /dev/null +++ b/files/es/web/css/border-top/index.html @@ -0,0 +1,151 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - Bordes + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de CSS border-top es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.

+ +
+

Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.

+ +

Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:

+ +
  border-top: none thick green;
+
+ +

es lo mismo que

+ +
  border-top: thick green;
+
+ +

y el valor de {{Cssxref("border-top-style")}} establecido antes de border-top es ignorado.

+ +

El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será none.

+ +

También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar border-top se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a none

+ +
  border-top-style: dotted;
+  border-top: thick green;
+
+
+ +
{{cssinfo}}
+ +

Sintaxis

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

Valores

+ +
+
<br-width> 
+
See {{Cssxref("border-top-width")}}.
+
<br-style> 
+
See {{Cssxref("border-top-style")}}.
+
<color> 
+
See {{Cssxref("border-top-color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
element {
+    border-top: 1px solid #000;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}} +

No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.

+
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}No hay cambios significativos
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.0")}}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html new file mode 100644 index 0000000000..ba017b3823 --- /dev/null +++ b/files/es/web/css/border-width/index.html @@ -0,0 +1,101 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-width +--- +

Resumen

+ +

La propiedad border-width define el ancho del borde.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es ninguno ('none') o 'hidden'.
    • +
+ +

Sintaxis

+ +
 border-width: <border-width-value> {1,4} | {{ Cssxref("inherit", "heredado") }}
+
+ +

Valores

+ +
+
<border-width-value>
+
thin | medium | thick | {{ Cssxref("length", "largo") }}
+
thin
+
Un borde fino.
+
medium
+
Un borde mediano.
+
thick
+
Un borde grueso.
+
<length>
+
El grosor de un borde es un valor explícito por lo cual el ancho no puede ser nunca negativo.
+ Nota: Un valor em también es reconocido y soportado.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-bottom-width") }}
    • +
  • {{ Cssxref("border-left-width") }}
    • +
  • {{ Cssxref("border-right-width") }}
    • +
  • {{ Cssxref("border-top-width") }}
    • +
+ +

Ejemplos

+ +

Ver el ejemplo en vivo

+ +
element {
+    border-width: thin;
+    border-style: solid;
+    border-color: #000;
+}
+
+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4.0
Firefox1.0
Netscape
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html new file mode 100644 index 0000000000..2650cc595d --- /dev/null +++ b/files/es/web/css/border/index.html @@ -0,0 +1,117 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border +--- +

{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}

+ +

Propierdades Contitutivas

+ +

Esta es una propiedad abreviada para las siguientes propiedades CSS:

+ +
    +
  • border-color
    • +
  • border-style
    • +
  • border-width
    • +
+ + + + + +

Resumen

+ +

La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos. Se puede utilizar border para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +
border: [border-width || border-style || border-color | inherit] ;
+
+ +

Valores

+ +
+
{{ Cssxref("border-width") }}.
+
{{ Cssxref("border-style") }}.
+
{{ Cssxref("border-color") }}.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border: 1px solid #000;
+}
+
+ +

Notas importantes

+ +

Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (border) no acepta más de uno por cada propiedad.

+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

+ +

Descripción

+ +

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image no puede ser realizada mediante el uso de  border, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none. 

+ +

La propiedad abreviada border es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width, border-style y border-color puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top) y lógicas (p. ej. border-block-start) del borde.

+ +

Bordes vs. contornos

+ +

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

+ +
    +
  • Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. 
    • +
  • De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares,  no necesitan serlo. 
    • +
diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html new file mode 100644 index 0000000000..6d26cf7c97 --- /dev/null +++ b/files/es/web/css/bottom/index.html @@ -0,0 +1,86 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/bottom +--- +

+

<< Volver +

+

Resumen

+

La propiedad bottom especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute o position: fixed), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. +

Para los elementos con una posición relativa (los que tienen la propiedad position: relative), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si top no es auto, el valor computado de bottom es el valor negativo del valor computado de top. +

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +
  • Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} +
  • {{ Cssxref("inheritance", "Heredado") }}: no +
  • Porcentajes: se refieren a la altura del bloque contenedor. +
  • Medio: {{ Cssxref("Media:Visual", "visual") }} +
  • {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. +
+

Sintaxis

+
   bottom: <length> | <percentage> | auto | inherit
+
+

Valores

+
<length> 
Una longitud, usada como se describe en el resumen. Puede ser un valor negativo, cero o un valor positivo. +
<percentage> 
Un porcentaje de la altura del bloque contenedor, usado como se describe en el resumen. +
auto 
Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata height: auto como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, top es también auto, no se produce desplazamiento alguno. +
inherit 
Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o auto. +
+

Ejemplos

+
element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+
+

El siguiente ejemplo permite contrastar entre position:absolute y position:fixed. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con position:absolute se desplazarán junto con la página, mientras que los bloques posicionados con position:fixed, no lo harán. +

+
  • Atención: IE6 no soporta el código position:fixed. +
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
+<title>Position at bottom, absolute or fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>Esto<br>es<br>un texto<br>alto,<br>alto,
+    <br>alto,<br>alto,<br>alto<br>de prueba.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+

Notas

+

Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. +

Para los elementos posicionados de forma absoluta, la propiedad bottom no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} no son auto (que es el valor por defecto para top y height). +

+

Especificaciones

+ +

Compatibilidad entre navegadores

+This is as far back as the documentaion goes. +
Navegador Versión mínima
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6
+

Ver también

+

{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html new file mode 100644 index 0000000000..16de31787a --- /dev/null +++ b/files/es/web/css/box-shadow/index.html @@ -0,0 +1,178 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Background + - Estilos + - Reference + - Referencia + - Sombras + - box-shadow +translation_of: Web/CSS/box-shadow +--- +

{{ CSSRef() }}

+ +

La propiedad CSS box-shadow  añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

+ + + +

La propiedad box-shadow permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).

+ +

Generador de Box-shadow es una herramienta interactiva que permite generar una box-shadow.

+ +

Sintaxis

+ +
/* Keyword values */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Global keywords */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+ +

Especifica una sola box-shadow utilizando:

+ +
    +
  • Dos, tres, o cuatro valores <length>. + + +
    • +
  • Opcionalmente, la palabra clave inset.
    • +
  • Opcionalmente, el valor <color>.
    • +
+ +

Valores

+ +
+
inset
+
Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
+ La presencia de la palabra clave inset  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
+
<offset-x> <offset-y>
+
Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <offset-x> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.
+ Si ambos valores son 0, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).
+
<blur-radius>
+
Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:
+
+ +
+

...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.

+
+ +
+
<spread-radius>
+
Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).
+
<color>
+
Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.
+ Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.
+
+ +

Ejemplos

+ +

En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).

+ +

HTML

+ +
<blockquote><q>You may shoot me with your words,<br/>
+You may cut me with your eyes,<br/>
+You may kill me with your hatefulness,<br/>
+But still, like air, I'll rise.</q>
+<p>&mdash; Maya Angelou</p>
+</blockquote>
+
+ +

Podrías dispararme con tus palabras,
+ podrías cortarme con tus ojos,
+ podrías matarme con tu odio,
+ y aún, como el aire, levantarme.
+ -Traduccion-

+ +

CSS

+ +
blockquote {
+  padding: 20px;
+  box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+ +

{{EmbedLiveSample('Examples1', '300', '300')}}

+ +
+

HTML

+ +
<div><p>Hello World</p></div>
+
+ +

CSS

+ +
p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}
+ +

{{EmbedLiveSample('Examples2', '300', '300')}}

+ +

Cuando el x-offset, y-offset, y blur son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el border-radius es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un border-radius de cualquier otro valor, las esquinas habrían sido redondeadas.

+ +

Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

cssinfo}}

+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.properties.box-shadow")}}

+ +

Ver también

+ +
    +
  • El tipo de dato {{cssxref("<color>")}}
    • +
  • Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • Aplicando color a los elementos HTML utilizando CSS
    • +
diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html new file mode 100644 index 0000000000..5fbea86747 --- /dev/null +++ b/files/es/web/css/box-sizing/index.html @@ -0,0 +1,119 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - Layout + - Propiedades CSS + - Web +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

La propiedad CSS box-sizing como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.

+ +

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

+ +
    +
  • content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
    • +
  • border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.
    • +
+ +

Sintaxis

+ +

La propiedad box-sizing es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.

+ +

Valores

+ +
+
content-box
+
Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 370 pixeles.
+
Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
+
border-box
+
Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box para hacer que el elemento desaparezca.
+
Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing) alteran el tamaño desplegado de dos elementos idénticos.

+ +

HTML

+ +
<div class="content-box">Contenido de la caja</div>
+<br>
+<div class="border-box">Borde de la caja</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Ancho de la caja de contenido: 160px
+     Altura de la caja de contenido: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Ancho total: 160px
+     Altura total: 80px
+     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 'auto', 300)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.box-sizing")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html new file mode 100644 index 0000000000..def61847cd --- /dev/null +++ b/files/es/web/css/calc()/index.html @@ -0,0 +1,199 @@ +--- +title: calc +slug: Web/CSS/calc() +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Sumario

+ +

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

+ +

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

+ +

Sintaxis

+ +
calc(expresión)
+ +

Values

+ +
+
expresión
+
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
+
+ +

Expresiones

+ +

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

+ +
+
+
+
Suma
+
-
+
Resta
+
*
+
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
+
/
+
División. El divisor debe ser un {{cssxref("<number>")}}.
+
+ +

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

+ +
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
+ +
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
+Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
+ +
+
+ +

Ejemplos

+ +

Añadir un margen a un objeto en pantalla

+ +

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

+ +

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

+ +

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

+ +

Echémosle un vistazo al CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16")}}		9-6 {{property_prefix("-webkit")}} (buggy)
On gradients' color stops19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 27 (maybe 26)		{{CompatGeckoDesktop("19")}}9-6 {{property_prefix("-webkit")}} (buggy)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On gradients' color stops{{CompatUnknown}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/caret-color/index.html b/files/es/web/css/caret-color/index.html new file mode 100644 index 0000000000..df16ae5923 --- /dev/null +++ b/files/es/web/css/caret-color/index.html @@ -0,0 +1,151 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - CSS UI + - Propiedad CSS + - Referencia +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

La propiedad CSS caret-color especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.

+ +
/* Palabras clave */
+caret-color: auto;
+color: transparent;
+color: currentColor;
+
+/* Valores <color> */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+
+ +
+

Nota: Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad {{cssxref("cursor")}} es auto, o sobre un elemento donde la propiedad cursor es text o vertical-text, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
Los agentes usuarios deberán usar currentcolor, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en currentcolor, el fondo, sombras, etc. +
+

Nota: Aunque los agentes usuarios puedan usar currentcolor (que usualmente es animable) para el valor auto, auto no es interpolado en las transiciones/animaciones.

+
+
+
{{cssxref("<color>")}}
+
Color del cursor de texto.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input />
+ +

CSS

+ +
input {
+  caret-color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 300, 40)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57")}} +

Edge 38.1

+ 		{{CompatGeckoDesktop("53.0")}} +

Internet Explorer 11 

+ 		{{CompatOpera("44")}} +

{{CompatNo}} 

+ +

system caret

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome("57")}}{{CompatChrome("57")}}{{CompatGeckoMobile("53.0")}}{{CompatNo}} +

font color

+ 		{{CompatOperaMobile("44")}}{{CompatNo}} +

system caret

+
+
diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html new file mode 100644 index 0000000000..6860a8ba39 --- /dev/null +++ b/files/es/web/css/cascade/index.html @@ -0,0 +1,202 @@ +--- +title: Introducción a CSS en cascada +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +
{{CSSRef}}
+ +
La cascada es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: Hojas de Estilo en Cascada. Este articulo explica que es cascada, el orden de las {{Glossary("CSS")}} declaraciones en cascada, y como esto te afecta, el desarrollador web.
+ +

¿Cuáles entidades CSS participan en la cascada?

+ +

Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las at-rules que contienen entidades distintas de las declaraciones, como una regla @font-face que contiene descriptores, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la @font-face identificada por su descriptor de familia de tipografías. Si se definen varias reglas @font-face con el mismo descriptor, solo se considera la @font-face, como conjunto, más adecuada. 

+ +

Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en @media, @document o @support - participan en la cascada, las declaraciones contenidas en @keyframes no. Como con @font-face, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.

+ +

Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the {{anch("User-agent stylesheets")}}, the {{anch("Author stylesheets")}}, and the {{anch("User stylesheets")}}.

+ +

Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.

+ +

User-agent stylesheets

+ +

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

+ +

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

+ +

Author stylesheets

+ +

Author stylesheets are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.

+ +

User stylesheets

+ +

The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OriginImportance
    1user agentnormal
    2usernormal
    3authornormal
    4animations
    5author!important
    6user!important
    7user agent!important
    8transitions
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

Resetting styles

+ +

After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.

+ +

all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.

+ +

CSS animations and the cascade

+ +

CSS animations, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Example

+ +

Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Cascade")}}{{Spec2("CSS4 Cascade")}}Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.
{{SpecName("CSS3 Cascade")}}{{Spec2("CSS3 Cascade")}}Removed the override cascade origin, as it was never used in a W3C standard.
{{SpecName("CSS2.1", "cascade.html", "the cascade")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#the-cascade", "the cascade")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + diff --git a/files/es/web/css/child_combinator/index.html b/files/es/web/css/child_combinator/index.html new file mode 100644 index 0000000000..b191b809fd --- /dev/null +++ b/files/es/web/css/child_combinator/index.html @@ -0,0 +1,119 @@ +--- +title: Selectores de hijo +slug: Web/CSS/Child_combinator +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador > separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos directos del primero. EN contraste, cuando se combinan dos selectores con el selector de descendiente, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.

+ +

Sintaxis

+ +
selector1 > selector2 { style properties }
+
+ +

Ejemplo

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span #1, dentro del div.
+    <span>Span #2, dentro del span que está en el div.</span>
+  </span>
+</div>
+<span>Span #3, no está dentro del div.</span>
+
+ +

{{EmbedLiveSample("Ejemplo", 200, 100)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sin cambios
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/class_selectors/index.html b/files/es/web/css/class_selectors/index.html new file mode 100644 index 0000000000..382be6e07e --- /dev/null +++ b/files/es/web/css/class_selectors/index.html @@ -0,0 +1,128 @@ +--- +title: Selectores de clase +slug: Web/CSS/Class_selectors +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo class. El atributo {{htmlattrxref("class")}} está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.

+ +

Sintaxis

+ +
.classname { style properties }
+ +

Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "selector de atributo")}}:

+ +
[class~=classname] { style properties }
+ +

Ejemplo

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Aquí hay un span con algo de texto.</span>
+<span>Aquí hay otro.</span>
+
+ +

{{EmbedLiveSample('Ejemplo', 200, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sin cambios
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/clear/index.html b/files/es/web/css/clear/index.html new file mode 100644 index 0000000000..e66c285536 --- /dev/null +++ b/files/es/web/css/clear/index.html @@ -0,0 +1,239 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.

+ +

Cuando es aplicado a bloques no flotantes, mueve el border edge del elemento hacia abajo hasta que este debajo del margin edge de todos los floats relevantes. Este movimiento (cuando acontece) causa que margin collapsing no ocurra.

+ +

Cuando se aplica a elementos flotantes, mueve el margin edge del elemento debajo del margin edge de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.

+ +

Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo contexto de formato de bloque.

+ +
+

Nota: Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar clear en un pseudo-element {{cssxref("::after")}}.

+ +
#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+clear: inherit;
+
+ +

Valores

+ +
+
none
+
Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.
+
left
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.
+
right
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.
+
both
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.
+
inline-start {{experimental_inline}}
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float left en scripts ltr (left to right) y elementos con valor float right en scripts rtl (right to left).
+
inline-end {{experimental_inline}}
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float right en scripts ltr (left to right) y elementos con valor float left en scripts rtl (right to left).
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
Nota: El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear
+ +

clear: left

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
+    <p class="left">This paragraph clears left.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+
+ +

{{ EmbedLiveSample('clear:_left','100%','250') }}

+ +

clear: right

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
+    <p class="right">This paragraph clears right.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+ +

{{ EmbedLiveSample('clear:_right','100%','250') }}

+ +

clear: both

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="both">This paragraph clears both.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}
+ +

{{ EmbedLiveSample('clear:_both','100%','300') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Agrega los valores inline-start y inline-end
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Sin cambios significativos, aunque se aclaran los detalles.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{Compat("css.properties.clear")}}

+ +

También puedes ver

+ + diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html new file mode 100644 index 0000000000..a5c78f6eb8 --- /dev/null +++ b/files/es/web/css/clip-path/index.html @@ -0,0 +1,179 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS clip-path proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es circle(). La propiedad clip-path reemplaza la ahora deprecada propiedad clip.

+ +
/* Valores clave */
+clip-path: none;
+
+/* Valores de imagen */
+clip-path: url(resources.svg#c1);
+
+/* Valores de caja */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valores geometricos */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Valores Geometricos y de caja combinados */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valores globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
url()
+
Represents a URL referencing a clip path element.
+
 
+
inset(), circle(), ellipse(), polygon()
+
A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <geometry-box> to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.
+
<geometry-box>
+
If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: +
+
fill-box
+
Uses the object bounding box as reference box.
+
stroke-box
+
Uses the stroke bounding box as reference box.
+
view-box
+
Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
+
margin-box
+
Uses the margin box as the reference box.
+
border-box
+
Uses the border box as the reference box.
+
padding-box
+
Uses the padding box as the reference box.
+
content-box
+
Uses the content box as the reference box.
+
+
+
none
+
There is no clipping path created.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
/* inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* external SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* circle */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}
+ +

Live sample

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

Result

+ +

{{EmbedLiveSample("Live_sample", 230, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extends its application to HTML elements
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only)
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

See also

+ + diff --git a/files/es/web/css/clip/index.html b/files/es/web/css/clip/index.html new file mode 100644 index 0000000000..73098f51d9 --- /dev/null +++ b/files/es/web/css/clip/index.html @@ -0,0 +1,148 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +
+
{{CSSRef}}{{deprecated_header}}
+
+ +

Resumen

+ +

La propiedad de CSS clip define qué porción de un elemento es visible. La propiedad clip se aplica solamente sobre elementos con {{ cssxref("position","position:absolute") }} o {{cssxref("position", "position:fixed")}}.

+ +
+

Warning: This property is deprecated. Use {{cssxref("clip-path")}} instead.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("clip")}}
+
+ +
clip: rect(1px, 10em, 3rem, 2ch)
+clip: auto
+
+clip: inherit
+ +

Valores

+ +
+
<shape>
+
Una forma rectangular del formulario + 
rect(<top>, <right>, <bottom>, <left>)   /* sintaxis estándar */
+
+ o + + 
rect(<top> <right> <bottom> <left>)      /* sintaxis compatible inversa */
+ donde<top> y <bottom> especifícan desplazamientos de la esquina del borde superior de la caja, y <right>, y <left> especifican desplazamientos de la esquina del borde izquiedo de la caja.
+
<top>, <right>, <bottom>, y <left> pueden cada uno tenerun valor {{cssxref("<length>")}} o auto.
+
auto
+
El elemento no se recorta (valor por defecto)
+
+ +

Ejemplos

+ +
p { border:dotted;  position:relative; }
+
+#img2 {
+  position:absolute;  left:263px;
+
+  clip: rect(40px, 200px, 150px, 30px);
+  /* sintáxis estándar, no soportada por Internet Explorer 4-7 */
+}
+
+#img3 {
+  position: absolute; left:526px;
+
+  clip: rect(40px  200px  150px  30px);
+  /* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE */
+}
+ +

hut.jpg hut.jpg hut.jpg

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}{{ Spec2('CSS3 Transitions') }}Define clip como animatable.
{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad entre exploradores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)4.07.01.0 (85)
8.0
+ En esta versión es soportada la sintaxis correcta con coma.
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ +
    +
  • Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}
    • +
diff --git a/files/es/web/css/color/index.html b/files/es/web/css/color/index.html new file mode 100644 index 0000000000..d5d408265f --- /dev/null +++ b/files/es/web/css/color/index.html @@ -0,0 +1,260 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - Colores CSS + - Colores HTML + - Diseño + - Estilo HTML + - Estilo Texto + - Estilos HTML + - Propiedad CSS + - Referencia + - Referencia_CSS + - Web + - color +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. Tambien establece el valor {{cssxref("currentcolor")}}  que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como {{cssxref("border-color")}}.

+ +

Para obtener una descripción general del uso del color en HTML, consulte Aplicando color a los elementos HTML mediante CSS.

+ +
/* Valores de palabras clave */
+color: currentcolor;
+
+/* Valores <named-color> */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valores <hex-color> */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valores <rgb()> */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valores <hsl()> */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* Valores Globales */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

Ten en cuenta que el valor debe ser un {{cssxref("color")}} uniforme . No puede ser un {{cssxref("<gradient>")}}, que es en realidad un tipo de {{cssxref("<image>")}}.

+ + + +

{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}

+ +
{{cssinfo}}
+ +

Sintaxis

+ +

La propiedad color esta especificada como un solo un valor de {{cssxref("<color>")}}

+ +

Valores

+ +
+
{{cssxref("<color>")}}
+
Establece el color de las partes textuales y decorativas del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% translúcido */
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}} +

Agrega sintaxis sin comas para las funciones rgb(), rgba(), hsl(), y hsla().  Permite valores alfa en rgb() y hsl(), convirtiéndose rgba() y hsla() en alias (obsoletos) para ellos.
+ Agrega una palabra clave de color rebeccapurple.
+ Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.
+ Añade las funciones hwb(), device-cmyk(), y color().

+
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Define color como animable.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones rgba(), hsl(), y hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Añade el color orange y los colores del sistema.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Definicion inicial.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.color")}}

+ +

Ver también

+ +
    +
  • El tipo de datos de  {{cssxref("<color>")}}
    • +
  • Otras propiedades relacionadas con el color: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • Aplicar color a elementos HTML usando CSS
    • +
diff --git a/files/es/web/css/color_value/index.html b/files/es/web/css/color_value/index.html new file mode 100644 index 0000000000..5e8fde3b08 --- /dev/null +++ b/files/es/web/css/color_value/index.html @@ -0,0 +1,1416 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - Layout + - Necesita Compatibilidad con Navegadores Móviles + - Referencia + - Tipos de datos CSS + - Web +translation_of: Web/CSS/color_value +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo de datos CSS <color> denota un color en el sRGB color space. Un color puede ser descrito de cualquiera de las siguiente maneras:

+ +
    +
  • Usando una palabra clave.
    • +
  • Usando el sistema  RGB cubic-coordinate  (usando  #-hexadecimal o las notaciones funcionales rgb() y rgba() )
    • +
  • Usando el sistema HSL cylindrical-coordinate  (usando las notaciones funcionales hsl() y hsla() )
    • +
+ +

Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.

+ +

Asociado con el color en el espacio sRGB, un valor <color> también consiste en una coordenada alpha-channel o valor de transparencia, indicando cómo se debe composite o mezclar el color con su color de fondo.

+ +

Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los color profile de algunos dispositivos de salidas. En esta situación el color puede variar bastante.

+ +
Notas: La recomendación WCAG 2.0 de la W3C aconseja a los autores web de manera clara que no usen  color como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información.
+ +

Interpolación

+ +

Los valores del tipo de datos CSS <color> pueden ser interpolados para lograr animaciones o para crear valores <gradient>. En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante.  Debe tenerse en cuenta que la interpolación del color sucede en el alpha-premultiplied sRGBA color space para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la timing function asociada con la animación.

+ +

Valores

+ +

Hay varias formas de describir un valor <color>.

+ +

Palabras clave de colores

+ +

Las palabras clave de colores son identificadores en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra:

+ +
    +
  • CSS Nivel 1 sólo acepta 16 colores básicos, los llamados colores VGA ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas VGA.
    • +
  • CSS Nivel 2 añadió la palabra clave orange.
    • +
  • Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0  fué el primer estándar  que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG.
    • +
+ +

Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:

+ +
    +
  • A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS.
    • +
  • Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML
    • +
  • Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
    • +
  • Algunas referencian el mismo color: +
      +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • Aunque las palabras clave de colores han sido tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónColorPalabra claveValor RGB hexadecimalMuestra
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 
+ +

El color rebeccapurple es equivalente al color  #639, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "Honoring a Great Man."

+ +

Palabra clave transparent

+ +

La palaba transparent representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es rgba(0,0,0,0).

+ +
Nota histórica
+La palabra clave transparent no fue  un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor <color> regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.
+
+Con el soporte de la opacidad que nos proporcionan los alpha channels, transparent fue redefinido como un color verdadero más en CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<color> , como la propiedad {{Cssxref("color")}}.
+ +

Palabra clave currentColor

+ +

La palabra clave currentColor representa el valor calculado para la la propiedad del elemento {{Cssxref("color")}} . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.

+ +

También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento {{Cssxref("color")}}, en este caso, será equivalente a la plabara clave inherit en estos elementos, si es que la hubiera.

+ +

Ejemplo

+ +

El color de la una line (un div relleno de color) se adapta al color de su propiedad  {Cssxref("color")}} , heredada de su padre.

+ +
+
Live example 1
+ +
<div style="color:darkred">
+ EL color de este texto es el mismo que el de la línea  <div style="background:currentcolor; height:1px"></div>
+ Algo más de texto
+</div>
+
+ +

{{EmbedLiveSample('Live_example_1')}}

+ +
Live example 2
+ +
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+ El color de este texto es el mimso que el color de la línea:
+  <div style="background:currentcolor; height:1px"></div>
+ Algo más de texto.
+</div>
+ +

{{EmbedLiveSample('Live_example_2')}}

+
+ +

rgb()

+ +

Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:

+ +
+
Notación Hexadecimal #RRGGBB ay #RGB
+
+
    +
  • "#", seguido de seis caracteres hexadecimales (0-9, A-F).
    • +
  • "#", seguido de tres caracteres hexadecimales (0-9, A-F).
    • +
+ La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
+ Por ejemplo,  #f03 y #ff0033 representan el mismo color.
+
Notación funcional rgb(R,G,B)
+
"rgb", seguido por tres valores  {{cssxref("<integer>")}} o tres  {{cssxref("<percentage>")}} values.
+ El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
+
+ +
/* Todos estos ejemplos son el mismo color RGB: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ rgb(255, 0, 51.2) /* ¡ERROR! No uses número decimales , usa enteros*/
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ rgb(100%, 0, 20%) /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/
+
+ +

hsl()

+ +

Los colores también puede ser definidos usando el modelo  tono (hue) - saturación (saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue)  igual y modificando el brillo y la saturación.

+ +

El tono (Hue)  se representa como un ángulo del círculo de color (por así decir, el arco iris representado en un círculo). El ángulo se proporciona como un  {{cssxref("<number>")}} sin unidades. Por definición rojo=0=360, y los demas colores están dispersos por el círculo, verde=120, azul=240, etc. Al ser un ánguilo implítamente -120=240 y 480=120.

+ +

La saturación y el brillo son representados por porcentajes.
+ 100%  es saturacion completa, y 0% es una sombra de gris..
+ 100% brillo es blanco, 0%  negro, y 50% es brillo "normal".

+ +
hsl(0,  100%,50%)    /* red */   
+hsl(30, 100%,50%)                
+hsl(60, 100%,50%)                
+hsl(90, 100%,50%)                
+hsl(120,100%,50%)    /* green */ 
+hsl(150,100%,50%)                
+hsl(180,100%,50%)                
+hsl(210,100%,50%)                
+hsl(240,100%,50%)    /* blue */  
+hsl(270,100%,50%)                
+hsl(300,100%,50%)                
+hsl(330,100%,50%)                
+hsl(360,100%,50%)    /* red */   
+
+hsl(120,100%,25%)    /* dark green */  
+hsl(120,100%,50%)    /* green */       
+hsl(120,100%,75%)    /* light green */ 
+
+hsl(120,100%,50%)    /* green */  
+hsl(120, 67%,50%)                 
+hsl(120, 33%,50%)                 
+hsl(120,  0%,50%)                 
+
+hsl(120, 60%,70%)    /* pastel green */ 
+
+ +

rgba()

+ +

Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional rgba(). RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.
+ a representa opacidad: 0=transparente; 1=opaco;

+ +
rgba(255,0,0,0.1)    /* 10% opaque red */  
+rgba(255,0,0,0.4)    /* 40% opaque red */  
+rgba(255,0,0,0.7)    /* 70% opaque red */  
+rgba(255,0,0,  1)    /* full opaque red */ 
+
+ +

hsla()

+ +

Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness)  (HSLa) usando lla notación funcional hsla(). HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.
+ a es la opacidad: 0=transparente; 1=opaco;

+ +
hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
+hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
+hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
+hsla(240,100%,50%,   1)   /* full opaque blue */ 
+
+ +

Colores de Sistema

+ +

No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas..

+ +
+
ActiveBorder
+
Borde de la ventana activa
+
ActiveCaption
+
Título de la ventana activa. Deb usarse con CaptionText como color de fondo
+
AppWorkspace
+
Color de fondo para el interfaz de múltiples documentos.
+
Background
+
Fondo de escritorio.
+
ButtonFace
+
Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente ButtonText .
+
ButtonHighlight
+
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonShadow
+
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonText
+
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
+
CaptionText
+
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
+
GrayText
+
Gris para el texto deshabilitado:
+
Highlight
+
Elemento(s) seleccionados en un control. Debe ser usado con el color de frente HighlightText.
+
HighlightText
+
Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo Highlight.
+
InactiveBorder
+
Borde de ventana inactivo.
+
InactiveCaption
+
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
+
InactiveCaptionText
+
Color of text in an inactive caption.  Should be used with the InactiveCaption background color.
+
InfoBackground
+
Color de foBackground color for tooltip controls. Should be used with the InfoText foreground color.
+
InfoText
+
Text color for tooltip controls.  Should be used with the InfoBackground background color.
+
Menu
+
Fondo del menú. Debe ser usado Menu background. Should be used with the MenuText or  -moz-MenuBarText foreground color.
+
MenuText
+
Texto en el menú. Debe ser usado Text in menus. Should be used with the Menu background color.
+
Scrollbar
+
Color de fondo para las barras de scroll.
+
ThreeDDarkShadow
+
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
ThreeDFace
+
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
+
ThreeDHighlight
+
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
+ concentric layers of surrounding border.
+
ThreeDLightShadow
+
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
+ concentric layers of surrounding border.
+
ThreeDShadow
+
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
Window
+
Fondo de las ventanas. Debe usarse con el color de frente WindowText.
+
WindowFrame
+
Marco de ventana
+
WindowText
+
Texto en las ventanas.Debe usarse con el color de fono de ventana.
+
+ +

Extensiones de Mozilla al Sistema de Colores

+ +
+
-moz-ButtonDefault
+
The border color that goes around buttons that represent the default action for a dialog box.
+
-moz-ButtonHoverFace
+
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
+
-moz-ButtonHoverText
+
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color.
+
-moz-CellHighlight
+
Background color for selected item in a tree widget.  Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes.  Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the -moz-Combobox background color.  In versions prior to 1.9.2, use -moz-FieldText instead.
+
-moz-Dialog
+
Color de fondo para cuadros de diálogo. Debe usarse con el color de frente -moz-DialogText
+
-moz-DialogText
+
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.
+
-moz-Field
+
Text field background color.  Should be used with the -moz-FieldText foreground color.
+
-moz-FieldText
+
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s.  Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
+
-moz-MenuHoverText
+
Text color for hovered menu items. Often similar to HighlightText.  Should be used with the -moz-MenuHover background color.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
+
-moz-MenuBarHoverText
+
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
+
+ +

Extensiones de Mozilla a las Preferencias de Color

+ +
+
-moz-activehyperlinktext
+
Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario  para el color de fondo del documento.
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto.
+
-moz-hyperlinktext
+
Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento.
+
-moz-visitedhyperlinktext
+
Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Añadido el color rebeccapurple.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Añadidos el naranja y los colores de sistema.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
palabras clave de colores1.01.0 (1.0)3.0 [1]3.51.0 (85)
#RRGGBB | #RGB1.01.0 (1.0)3.03.51.0 (85)
rgb()1.01.0 (1.0)4.03.51.0 (85)
hsl()1.01.0 (1.5)9.09.53.1 (525)
rgba()1.03.0 (1.9)9.010.03.1 (525)
hsla()1.03.0 (1.9)9.010.03.1 (525)
currentColor1.01.5 (1.8)9.09.54.0 (528)
transparent1.03.0 (1.9)9.0 [2]10.03.1 (525)
rebeccapurple38.0{{CompatGeckoDesktop("33")}}1125.07.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rgba(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
rebeccapurple{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

[1] Los colores  'e'-grey (con una e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) sólo son soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportadas las variantes con 'a': gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

+ +

[2] IE 7-8 soporta la palabra clave transparent sólo para  {{Cssxref("background")}} y {{cssxref("border")}}. color: transparent; es equivalente a negro en IE. IE6 renderiza también como negros los bordes transparentes.

+ +

Ver además

+ +
    +
  • La propiedad  {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento.
    • +
  • Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}.
    • +
diff --git a/files/es/web/css/column-count/index.html b/files/es/web/css/column-count/index.html new file mode 100644 index 0000000000..cc894efa4e --- /dev/null +++ b/files/es/web/css/column-count/index.html @@ -0,0 +1,95 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS Multicolumna + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

La propiedad CSS column-count divide el contenido de un elemento en el número de columnas indicado.

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ +

Sintaxis

+ +
/* Keyword value */
+column-count: auto;
+
+/* <integer> value */
+column-count: 3;
+
+/* Global values */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

Valores

+ +
+
auto
+
El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}.
+
{{cssxref("<integer>")}}
+
Es un {{cssxref("<integer>")}} estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad {{cssxref("column-width")}} se establece a un valor que no sea auto, se limitará a indicar el número máximo permitido de columnas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ +

{{Compat("css.properties.column-count")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/column-span/index.html b/files/es/web/css/column-span/index.html new file mode 100644 index 0000000000..b72bc8859a --- /dev/null +++ b/files/es/web/css/column-span/index.html @@ -0,0 +1,99 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-span +--- +
{{CSSRef}}
+ +

La propiedad column-span CSS hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a all.

+ +
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+ +
/* Keyword values */
+column-span: none;
+column-span: all;
+
+/* Global values */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+
+ +

A un elemento que se extiende más de una columna se le llama elemento extendido (spanning element).

+ +

Sintaxis

+ +

La propiedad column-span se especifica como una de las palabras clave listadas a continuación.

+ +

Valores

+ +
+
none
+
El elemento no se extiende en sobre varias columnas.
+
all
+
El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.

+ +

HTML

+ +
<article>
+  <h2>My Very Special Columns</h2>
+  <p>This is a bunch of text split into three columns
+     using the CSS `columns` property. The text
+     is equally distributed over the columns.</p>
+</article>
+
+ +

CSS

+ +
article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}Definición inicial.
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.column-span")}}

diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html new file mode 100644 index 0000000000..949f2eca71 --- /dev/null +++ b/files/es/web/css/columnas_css/index.html @@ -0,0 +1,112 @@ +--- +title: Columnas CSS +slug: Web/CSS/Columnas_CSS +tags: + - CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

Guías

+ +
+
Diseños multicolumna con CSS
+
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
+ 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
+ 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
+
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html new file mode 100644 index 0000000000..f09cac662a --- /dev/null +++ b/files/es/web/css/comentarios/index.html @@ -0,0 +1,49 @@ +--- +title: Comentarios +slug: Web/CSS/Comentarios +tags: + - CSS + - Principiante + - Referencia CSS +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

Resumen

+ +

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

+ +

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

+ +

Sintaxis

+ +
/* Comentario */
+ +

Examples

+ +
/* Comentario de una sola línea */
+
+/*
+Un comentario
+que se extiende
+en varias
+líneas
+*/
+
+ +

Notas

+ +

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

+ +

Especificaciones

+ + + +

Véase también

+ + diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html new file mode 100644 index 0000000000..54997a5f6e --- /dev/null +++ b/files/es/web/css/comenzando_(tutorial_css)/index.html @@ -0,0 +1,40 @@ +--- +title: Comenzando (tutorial CSS) +slug: Web/CSS/Comenzando_(tutorial_CSS) +--- +

 

+

Introducción

+

Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).

+

Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.

+
  • La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.
    • +
+
  • La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.
    • +
+

Este tutorial se base en la especificación CSS 2.1

+

¿Quienes deberían usar este tutorial?

+

Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.

+

Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.

+

Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.

+

Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.

+

¿Qué necesitas antes de empezar?

+

Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.

+

Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.

+

Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.

+ +

Nota:  CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.

+

Como usar este tutorial

+

Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.

+

En cada página, usa la sección Información para entender como funciona CSS. Usa la sección Acción para tratar de usar CSS en tu computadora.

+

Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.

+

Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas Más detalles. Usa los enlaces allí para encontrar información de referencia acerca de CSS.

+

Tutorial Parte I

+

Una guía de CSS paso a paso.

+
  1. Que es CSS
  2. Por qué usar CSS
  3. Como funciona CSS
  4. Cascada y herencia
  5. Selectores
  6. CSS legible
  7. Estilos de texto
  8. Color
  9. Contenido 
  10. Listas
  11. Cajas
  12. Estructura
  13. Tablas
  14. Media
    15. +
+

Tutorial Parte II

+

Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.

+
  1. JavaScript
  2. Gráficos SVG
  3. Data XML
  4. XBL bindings 
  5. Interfaces de usuario XUL
    6. +
+

{{ CSSTutorialTOC() }}

+

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html new file mode 100644 index 0000000000..facb250cb3 --- /dev/null +++ b/files/es/web/css/como_iniciar/index.html @@ -0,0 +1,5 @@ +--- +title: Como iniciar +slug: Web/CSS/Como_iniciar +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html new file mode 100644 index 0000000000..66badd7a3a --- /dev/null +++ b/files/es/web/css/como_iniciar/por_que_usar_css/index.html @@ -0,0 +1,106 @@ +--- +title: Por que usar CSS +slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

 

+

Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.

+

Esta es la segunda sección del tutorial.

+

Sección anterior: Que es CSS
+ Sección siguiente: How CSS works

+

Información: ¿Por qué usar CSS?

+

CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como estilos. Si mantienes los estilos separados del contenido puedes:

+
    +
  • Evitar duplicación
    • +
  • Hacer el mantenimiento más simple
    • +
  • Usar el mismo contenido con diferentes estilos para diferentes propositos.
    • +
+ + + + + + + +
+ Ejemplo
+

Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.

+

Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.

+
+

En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).

+ + + + + + + +
+ Más detalles
+

Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.

+

Por ejemplo en HTML puedes usar una etiqueta <b> para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <body>.

+

Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.

+
+

Acción: Creando una hoja de estilos

+
    +
  1. Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: style1.css
    2. +
  2. En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
    3. +
  3. +
    + 
    strong {color: red;}
+
    +
    +
    4. +
+

Enlazando tu documento a tu hoja de estillos

+
    +
  1. Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
    2. +
  2. +
    + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;
+charset=iso-8859-1">
+  <title>Sample document</title>
+  <link rel="stylesheet" type="text/css" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    +
    3. +
  3. Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: + + + + + + +
    Cascading Style Sheets
    +
    4. +
+ + + + + + + +
+ Reto
En adición al rojo, CSS permite algunos otros nombres de colores. +

Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.

+
+

See a solution for the challenge. Ver la solución al reto.

+

¿Qué sigue?

+

Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.

+

Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: Como funciona CSS.

+

{{ CSSTutorialTOC() }}

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}

diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html new file mode 100644 index 0000000000..fb914f0758 --- /dev/null +++ b/files/es/web/css/como_iniciar/que_es_css/index.html @@ -0,0 +1,145 @@ +--- +title: Que es CSS +slug: Web/CSS/Como_iniciar/Que_es_CSS +tags: + - para_revisar +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.

+ +

Esta es la primera sección del tutorial Como iniciar.
+ Siguiente sección: Por qué usar CSS

+ +

Información: ¿Qué es CSS?

+ +

Cascading Style Sheets (CSS), traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.

+ +

Un documento (document) es una colección de información que está estructurada utilizando un lenguaje de formato (markup language).

+ + + + + + + + +
Ejemplos
+
    +
  • Una página web como la que estás leyendo, es un documento.
    + La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).
    • +
+ +
    +
  • Un cuadro de diálogo en una aplicación Mozilla es un documento.
    + Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).
    • +
+
+ +

En este tutorial, los cuadros con titulo Más detalles, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.

+ + + + + + + + +
Más detalles
+

Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.

+ +

Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.

+ +

Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara páginas web
XMLpara documentos estrucurados, en general
SVGpara gráficas
XULpara interfaces de usuario de Mozilla
+ +

En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.

+
+ +

Presentar un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.

+ + + + + + + + +
Más detalles
CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un agente de usuarios (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. +

Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace Definiciones (en ingles) en la especificación CSS.

+
+ +

Acción: Crear un documento

+ +
    +
  1. Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. +
      +
    1. Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre doc1.html + +
      + 
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;
+  charset=iso-8859-1">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+      <strong>B</strong>heets
+    </p>
+  </body>
+</html>
+
      +
      +
      2. +
    +
    2. +
  2. En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. +

    Debe observar un texto con las letras iniciales en negrita, así:

    + + + + + + + +
    Cascading Style Sheets
    + +

    Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.

    +
    3. +
+ +

¿Qué sigue?

+ +

Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de Discusiones.

+ +

El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: ¿Por qué utilizar CSS?

+ +

{{ CSSTutorialTOC() }}

+ +

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}

diff --git a/files/es/web/css/content/index.html b/files/es/web/css/content/index.html new file mode 100644 index 0000000000..624611a97e --- /dev/null +++ b/files/es/web/css/content/index.html @@ -0,0 +1,58 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/content +--- +

<< Volver +

+

Resumen

+

La propiedad content se usa junto con los pseudo-elementos :before y :after para generar contenido que se adjunta antes o después de un selector CSS. +

+

Características

+

En CSS3 +

+
  • Value: {{ mediawiki.external(' <uri> \',\' ') }}</uri>* {{ mediawiki.external(' normal | none | inhibit | <content-list> ') }}</content-list> +
  • Valor inicial: normal +
  • Se aplica a: todos los elementos y a ::before, ::after, ::alternate, ::marker, ::line-marker, áreas de margin y @footnote. +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no +
  • Porcentajes: N/A +
  • Medio: todos +
  • Valor calculada: The specified value with each occurrence of 'normal' expanded as per the prose below. +
+

Ejemplos

+
p:before
+{
+content: url("beep.wav")
+}
+
+img:before
+{
+content: attr(alt)
+}
+
+
+

Valores

+
  • string: Define el contenido de texto. El valor por defecto es "". +
  • url: Define una dirección URL +
  • counter (name) +
  • counter (name, list-style-type) +
  • counters (name, string) +
  • counters (name, string, list-style-type)
  • attr(X): Define un atributo de un selector que será mostrado antes/después del selector. +
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote +
+

Ver también

+

(CSS2 en) +(CSS2 1 en) +(CSS3 en) +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/content" } ) }} diff --git "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" new file mode 100644 index 0000000000..11bb0c0076 --- /dev/null +++ "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" @@ -0,0 +1,91 @@ +--- +title: Detectar soporte de animación CSS +slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +

{{CSSRef}}

+ +

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

+ +

Prueba de la compatibilidad de animaciones CSS

+ +

Este código comprueba si el soporte de animaciones CSS esta disponible:

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

+ +

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

+ +

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

+ +

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

+ +

Animaciones utilizando la sintaxis correcta para diferentes navegadores

+ +

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

+ +

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

+ +

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

+ +

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

+ +

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

+ +

Ver en el JSFiddle

+ +

Ver tambien

+ + diff --git a/files/es/web/css/css_animations/index.html b/files/es/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/es/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS At-rules

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if the browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ +
    +
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • +
+ +

 

diff --git a/files/es/web/css/css_animations/tips/index.html b/files/es/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..1053ef24ac --- /dev/null +++ b/files/es/web/css/css_animations/tips/index.html @@ -0,0 +1,150 @@ +--- +title: Animaciones CSS tips y trucos +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +
Las Animaciones con CSS hacen posible crear cosas increíbles con los elementos que forman parte de tus documentos y apps . Sin embargo, hay cosas que deseas hacer que no son evidentes, o soluciones inteligentes que quizás no encuentres de inmediato. Este artículo es una colección de tips y trucos que hemos encontrado que podrían hacer más fácil el trabajo, incluido cómo volver a ejecutar una animación detenida.
+ +

Corriendo una animación de nuevo

+ +

La especificación de CSS Animations no ofrece una forma de ejecutar una animación nuevamente. No hay un método mágico de resetAnimation() en los elementos, y tu no puedes solo configurar el elemento {{cssxref("animation-play-state")}} para "correr" de nuevo. En su lugar debes usar trucos inteligentes para que una animación detenida se reproduzca.

+ +

Aquí te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte

+ +

Contenido HTML 

+ +

Primero, definamos el HTML para un {{HTMLElement("div")}}  que deseamos animar y un botón que ejecurara (o repetira) la animación.

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

Contenido CSS

+ +

Ahora definiremos la animación en si usando CSS. Algún CSS que no es importante (el estilo del botón "Run" en sí)  no se muestran aquí, por brevedad.

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

Aquí hay dos clases. La clase "box" es un descripción básica de la apariencia de la caja, sin ninguna información de la animación incluida. Los detalles de la animación son incluidos en la clase "changing" class, que dice que {{cssxref("@keyframes")}} llamado "colorchange" debe usarse en el transcurso de dos segundo para animar la caja.

+ +

Note que debido a esto, la caja no comienza con ningún efecto de animación en su lugar, por lo que no se animará

+ +

Contenido JavaScript

+ +

Ahora veremos el JavaScript que jace el trabajo. La escencia de la técnica esta en la función play(), que se llama cuando el usuario hace clic en  el botón "Run".

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reproducir una animación es eleminar el efecto de animación, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animación al elemento. Para que eso suceda, tenemos que ser creativos.

+ +

Esto es lo que sucede cuando la función play() es llamada:

+ +
    +
  1.  La lista de clases CSS de caja se restablece a "box". Esto tiene el efecto de remover   cualquier otra clase recurrente aplicada a la caja, incluida la clase "changing" que       controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo  y se ha producido una actualización para reflejar el cambio.
    2. +
  2. Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...
    3. +
  3. Nuestro callback habilmente llama a requestAnimationFrame() ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase "changing"  de nuevo en la caja, para que el repaint inicie la animación una vez más.
    4. +
+ +

Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón  "Run" para que en verdad haga algo

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Resultado

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

Detener la animación

+ +

Simplemente removemos {{cssxref("animation-name")}} aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animación se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:

+ +
    +
  1. Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar enanimation-direction: alternate. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.
    2. +
  2. Use JavaScript y borre la animación  que se esta utilizando cuando se activa el evento animationiteration.
    3. +
+ +

El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +
<h1 id="watchme">Click me to stop</h1>
+
+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Demo https://jsfiddle.net/morenoh149/5ty5a4oy/

+ +

Mira también

+ + diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html new file mode 100644 index 0000000000..b9b08bbc0b --- /dev/null +++ b/files/es/web/css/css_animations/usando_animaciones_css/index.html @@ -0,0 +1,351 @@ +--- +title: Usando animaciones CSS +slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

+ +

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

+ +
    +
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. +
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. +
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. +
+ +

Configurando la animación

+ +

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

+ +

Las subpropiedades de {{ cssxref("animation") }} son:

+ +
+
{{ cssxref("animation-delay") }}
+
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
+
{{ cssxref("animation-direction") }}
+
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
+
{{ cssxref("animation-duration") }}
+
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
+
{{ cssxref("animation-iteration-count") }}
+
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
+
{{ cssxref("animation-play-state") }}
+
Permite pausar y reanudar la secuencia de la animación
+
{{ cssxref("animation-timing-function") }}
+
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
+
{{ cssxref("animation-fill-mode") }}
+
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
+
+ +

Definiendo la secuencia de la animación con fotogramas

+ +

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

+ +

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

+ +

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

+ +

Ejemplos

+ +
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
+ +

Haciendo que un texto se delice por la ventana del navegador

+ +

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

+ +

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

+ +

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

+ +

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

+ +

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

+ +

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

+ +

Añadiendo otro fotograma

+ +

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

+ +

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

+ +

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

+ +

Haciendo que se repita

+ +

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

+ +

Moviendolo hacia adelante y hacia atrás

+ +

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

+ +

Usando la versión abreviada animation

+ +

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+ +

Se puede reemplazar por

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

+
+ +

Estableciendo multiples valores de propiedades animation

+ +

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

+ +

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+
+ +

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Usando eventos de animación

+ +

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

+ +

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

+ +

Agregando CSS

+ +

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Añadiendo detectores de eventos a la animación

+ +

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+ +

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

+ +

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

+ +

Recibiendo los eventos

+ +

Los eventos, al irse disparando, llamarán a la función listener().

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

+ +

El resultado, si todo ha ido bien, será algo parecido a esto:

+ +
    +
  • Iniciado: tiempo transcurrido 0
    • +
  • Nueva iteración comenzó a los 3.01200008392334
    • +
  • Nueva iteración comenzó a los 6.00600004196167
    • +
  • Finalizado: tiempo transcurrido 9.234000205993652
    • +
+ +

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

+ +

El HTML

+ +

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

+ +

Te puede interesar también

+ + diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html new file mode 100644 index 0000000000..3f189b87ea --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-image_generador/index.html @@ -0,0 +1,2615 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

+
+

Border Image Generator

+

HTML Content

+ 
    

+
+        
+
+        

+            
+            
 Upload image 

+            
+            
 

+        

+
+        

+            
 Control Box 

+            

+            

+                
scale

+                

+                

+            

+            

+            

+                
draggable

+                

+            

+            

+                
section height

+                

+                

+            

+        

+
+        

+            

+                

+                

+                

+                

+            

+            
 

+        

+
+
+        

+
+
+            

+                
 border-image-slice 

+                

+                    
fill

+                    

+                

+            

+
+
+            

+                
 border-image-width 

+            

+
+
+            

+                
 border-image-outset 

+            

+
+
+            

+                
 aditional-properties 

+                

+                    
 repeat-x 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    
 repeat-y 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    

+                    

+                

+
+                

+                    

+                

+                

+                    

+                    

+                

+            

+
+
+            

+                
 CSS Code 

+                

+                     border-image-slice: 
+                     
+                

+                

+                     border-image-width: 
+                     
+                

+                

+                     border-image-outset: 
+                     
+                

+                

+                     border-image-repeat: 
+                     
+                

+                

+                     border-image-source: 
+                      
+                

+            

+
+        

+
+

CSS Content

+ 
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+

JavaScript Content

+ 
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..5f2f982065 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Generador de border-radius +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..456fdd7484 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,56 @@ +--- +title: Usando múltiples fondos con CSS +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - Ejemplo + - Fondos CSS + - Guía + - Intermedio +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

+ +

Especificar fondos múltiples es fácil:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Ejemplo

+ +

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

+ +

HTML

+ +
<div class="multi_bg_example"></div>
+ +

CSS

+ +
.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

+ +

{{EmbedLiveSample('Example','100%','400')}}

+ +

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

+ +

Véase también

+ + diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html new file mode 100644 index 0000000000..7e7819542d --- /dev/null +++ b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html @@ -0,0 +1,3220 @@ +--- +title: Herramienta para seleccionar color +slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

+ +

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html new file mode 100644 index 0000000000..586b0e85e4 --- /dev/null +++ b/files/es/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

Tipos de datos CSS

+ +

{{cssxref("<color>")}}

+ +

Guías

+ +

Ninguna.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Ver también

+ +
    +
  • En CSS, las gradientes no son colores sino imágenes.
    • +
diff --git a/files/es/web/css/css_containment/index.html b/files/es/web/css/css_containment/index.html new file mode 100644 index 0000000000..f0e1bb357d --- /dev/null +++ b/files/es/web/css/css_containment/index.html @@ -0,0 +1,124 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +
{{CSSRef}}
+

+ El objetivo de la espicificación CSS Containment es mejorar el rendimiento de las páginas web permitiendo a los desarrolladores aislar un subárbol del resto de la página. Si el navegador sabe si una parte de la página es independiente, se puede optimizar la renderización y el rendimiento mejora. La especificación define una única propiedad CSS {{cssxref("contain")}}. Este documento relata los objetivos básicos de la especificación.

+ +

Ejemplo básico

+ +

Muchas páginas web contienen un número de secciones que don independientes entre sí. Por ejemplo una lista de encabezados de artículo y un contenido, como en el siguiente marcado.

+ +
<h1>Mi blog</h1>
+<article>
+  <h2>Encabezado de un bonito artículo</h2>
+  <p>Contenido del artículo.</p>
+</article>
+<article>
+  <h2>Otro encabezado de otro artículo</h2>
+  <p>Más contenido.</p>
+</article>
+ +

Cada artículo tiene la propiedad {{cssxref("contain")}} con valor content aplicado en el CSS.

+ +
article {
+  contain: content;
+}
+ +

Cada artículo es independiente de los demás artículos en la página, y en consecuencia se les ha aplicado contain: content para indicar al navegador que ese es el caso. El navegador puede entonces usar esa información para tomar decisiones sobre cómo renderizar el contenido. Por ejemplo, puede no renderizar artículos que estén fuera del área visible.

+ +

Si aplicamos a cada <article> la propiedad contain con el valor content, cuando se inserten nuevos elementos el navegador entiende que no necesita hacer relayout o repaint de ningun área que esté fuera del subárbol que contenga el elemento, aunque si aplicamos estilos al <article> (por ejemplo height: auto), el navegador puede necesitar hacerse cargo de ese cambio de tamaño.

+ +

Se nos ha dicho por medio de la propiedad contain que cada artículo es independiente de los demás.

+ +

El valor content es una clave para referirse al valor layout paint. Dice al navegador que el layout del elemento está totalmente separado del resto de la página, y que todo lo relacionado con el elemento es pintado dentro de sus límites. Nada puede desbordarse visualmente.

+ +

Esta información es algo que normalmente es obvio para el desarrollador a la hora de crear la página web. Sin embargo, los navegadores no pueden adivinar las intenciones del desarrollador y no puede asumir que un <article> tenga que ser enteramente autocontenido. Esta propiedad, por lo tanto, provee de una buena forma de explicar este hecho al navegador, permitiendo que haga optimizaciones para el rendimiento basados en ese conocimiento.

+ +

Key concepts and terminology

+ +

This specification defines only one property, the {{cssxref("contain")}} property. The values for this property indicate the type of containment that you want to apply to that element.

+ +

Layout containment

+ +
article {
+  contain: layout;
+}
+ +

Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using contain: layout you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.

+ +

In addition:

+ +
    +
  • float layout will be performed independently.
    • +
  • Margins won't collapse across a layout containment boundary
    • +
  • The layout container will be a containing block for absolute/fixed position descendants.
    • +
  • The containing box creates a stacking context, therefore {{cssxref("z-index")}} can be used.
    • +
+ +

Paint containment

+ +
article {
+  contain: paint;
+}
+ +

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

+ +

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

+ +

Size containment

+ +
article {
+  contain: size;
+}
+ +

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

+ +

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

+ +

Style containment

+ +
article {
+  contain: style;
+}
+ +

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

+ +

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

+ +
+

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

+
+ +

Special values

+ +

There are two special values of contain:

+ +
    +
  • content
    • +
  • strict
    • +
+ +

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

+ +

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

+ +
contain: strict;
+contain: strict style;
+ +

Reference

+ +

CSS Properties

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

External resources

+ + diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..154480239b --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,231 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Align + - CSS + - Flex + - Guía + - Tutorial + - align-content + - align-self + - alineación + - alinear + - flexbox + - justify + - justify-content + - rejillas +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja.  A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido  sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.

+ +

Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente. Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.

+ +

A containing element with another box centered inside it.

+ + + +

Puedes echar un vistazo al código de este ejemplo a continuación. Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Propiedades que controlan la alineación.

+ +

Las propiedades que veremos en esta guía son las siguientes.

+ +
    +
  • {{cssxref("justify-content")}} — controla la alineación de todos los elementos en el eje principal.
    • +
  • {{cssxref("align-items")}} — controla la alineación de todos los elementos en el eje transversal.
    • +
  • {{cssxref("align-self")}} — controla la alineación de un elemento flexible individual en el eje transversal.
    • +
  • {{cssxref("align-content")}} — descrito en la especificación como para "empaquetar líneas flexibles"; Controla el espacio entre las líneas de flexión en el eje transversal.
    • +
+ +

También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox

+ +
+

Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — CSS Box Alignment Level 3. Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.

+
+ +

El eje transversal

+ +

Las propiedades align-items y align-self controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si flex-direction se encuentra en row ó en columnas si flex-direction se encuentra en column.
+
+ Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple. Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila. Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal. Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.

+ +

Three items, one with additional text causing it to be taller than the others.

+ +

Three items stretched to 200 pixels tall

+ + + +

La razón por la que los elementos se convierten en la misma altura es que el valor inicial de align-items, la propiedad que controla la alineación en el eje transversal, se establece en stretch.

+ +

Podemos usar otros valores para controlar como se alinean los items:

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

En el ejemplo en vivo a continuación, el valor de align-items is stretch. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Alineando un item  individual con align-self

+ +

La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad align-self para apuntar a un solo elemento. La propiedad align-self acepta todos los mismos valores que align-items, además del valor auto, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..

+ +

En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación: flex-start, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector first-child,  y se configuró con la propiedad: strecth; otro elemento ha sido alineado, utilizando  su clase selected  y dando valor a la propiedad  align-self: center.  Puede cambiar el valor de align-items o cambiar los valores de align-self en los elementos individuales para ver cómo funciona esto.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Cambiando el eje principal

+ +

Hasta ahora hemos examinado el comportamiento cuando nuestra flex-direction  es row, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+ +

Si cambiamos nuestra flex-direction a columna, align-items y align-self van a alinear los items a la derecha y a la izquierda.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+ +

Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con flex-direction: column , y  que de lo contrario seria exactamente igual  al ejemplo anterior. .

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+ +

Alineando el contenido en el eje transversal: la propiedad align-content

+ +

Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad  align-content para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como empaquetamiento de lineas flexibles.

+ +

Para que align-content funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene.    

+ +

La propiedad align-content acepta los siguientes valores:

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de align-content  lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final  del contenedor en el eje transversal. 

+ +

Pruebe con otros valores para ver como la propiedad align-content funciona.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Una vez mas podemos cambiar nuestra flex-direction a column para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Nota: El valor space-evenly no está definido en las especificaciones de flexbox  y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.

+
+ +

Revise la documentacion para justify-content  en MDN para  encontrar más detalles de todos sus valores y el soporte de los navegadores.

+ +

Alineando contenido en el eje principal

+ +

Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — justify-content.  Esto se debe a que  solo podemos trabajar con los items como grupos en el eje principal. Con justify-content controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items  

+ +

En nuestro ejemplo inicial con display: flex en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de justify-content es flex-start. Cualquier espacio disponible se coloca al final de los elementos.

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

La propiedad justify-content  accepta el mismo valor que  align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

En el ejemplo a continuacion el valor de justify-content es space-between. El espacio disponible despues de mostrar los items es distribuido  entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si el eje principal esta en direccion bloque porque flex-direction  tiene valor  column, entonces justify-content distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+ +

Modos de Alineación y escritura

+ +

Recuerda que con todos estos metodos de alineación los valores de flex-start y flex-end son escritos en modo consciente. Si el valor de  justify-content es start y el modo de escritura es izquierda a derecha, como en español o ingles,  los elementos se alinearán comenzando en el  lado izquierdo del contenedor

+ +

Three items lined up on the left

+ +

Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.

+ +

Three items lined up from the right

+ +

El ejemplo siguiente tiene la propiedad  direction  con valor rtl para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de  justify-content   para ver como flexbox  se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha.  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

Alineacíon y flex-direction

+ +

La linea de inicio también cambiará si cambias la propiedad flex-direction  — por ejemplo usando  row-reverse en vez de row.

+ +

En el ejemplo siguiente tengo items dispuestos con flex-direction: row-reverse y justify-content: flex-end. En lenguaje de izquierda a derecha, estos elementos se alinearan a  la izquierda. Prueba a cambiar flex-direction: row-reverse a flex-direction: row. Veras como los elementos ahora se mueven a la derecha.  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea.   flex-start comenzará donde el inicio de la oracion debe comenzar.  

+ +

Diagram showing start on the left and end on the right.

+ +

Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando  flex-direction: column. Luego flex-start estará donde la parte superior del primer parrafo de texto comenzaria.  

+ +

Diagram showing start at the top and end at the bottom.

+ +

Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. flex-start cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

Usando auto margenes para la alineación en el eje principal  

+ +

No tenemos una propiedad  justify-items o justify-self disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje.  Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox.  

+ +

Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de  justify-self  , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar justify-self en el elemento d, también cambiaría la alineación del artículo e que sigue, lo cual puede o no ser mi intención.

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

En cambio podemos enfocarnos en el item  4 y separarlo de los tres primeros elementos dandole a este un  valor al margin-left  de auto. El auto margen tomará  todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.

+ +

En este ejemplo en vivo, tenemos elementos flexibles,   organizados simplemente en una fila con los valores básicos de flexión, y  la clase  push  tiene margin-left: auto. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Futuras caracteristicas de alineación para  Flexbox

+ +

Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del space-evenly para las propiedades de align-content y justify-content.

+ +

 El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de column-gap y ow-gap, como se ve en el  Diseño de rejillas de CSS. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar column-gap y row-gap  tambien en diseños flexibles. Esto significará que no tendremos  que usar márgenes para espaciar los elementos flexibles.

+ +

 Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con  la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de  Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN Alineación de cajas  , y también he comparado cómo funciona la alineación en estas especificaciones en mi Hoja de trucos de alineacion de cajas.

+ + + +

Ver también

+ + diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..ca416812f3 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,112 @@ +--- +title: Compatibilidad con versiones anteriores de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse. En esta guía, veremos qué tan bien se admite flexbox en los navegadores, y veremos algunos posibles problemas, recursos y métodos para crear soluciones y fallos.

+ +

La historia de flexbox

+ +

Al igual que con todas las especificaciones CSS, la especificación Flexbox experimentó una gran cantidad de cambios antes de convertirse en la Recomendación de Candidato que tenemos hoy. Como recomendación de un candidato, no deberíamos ver grandes cambios en este punto de la especificación, sin embargo, este no ha sido el caso con las iteraciones anteriores de flexbox.

+ +

Flexbox se implementó de forma experimental en varios navegadores web. En ese momento, el método para crear implementaciones experimentales era utilizar un prefijo de proveedor. La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones. La idea no era utilizar las implementaciones experimentales en el código de producción. Sin embargo, los prefijos finalmente se usaron en el código de producción, y los cambios en la especificación experimental hicieron que las personas necesitaran actualizar sus sitios para mantenerse al día.

+ +

En 2009 , la especificación se veía bastante diferente. Para crear un contenedor flexible, usaría display: box y había una serie de propiedades box-* , que hicieron cosas que reconocerá hoy en flexbox.

+ +

Hubo una actualización de la especificación que actualizó la sintaxis para display: flexbox : esto fue nuevamente prefijado por el proveedor.

+ +

Finalmente, la especificación se actualizó para definir display: flex como la forma de crear un contenedor de flex. El soporte del navegador para la versión actualizada de la especificación es excelente a partir de este momento.

+ +

Existen algunos artículos antiguos que hacen referencia a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible. Si encuentra algo que se refiere a display: box o display: flexbox esta es información desactualizada.

+ +

Estado en navegadores

+ +

La compatibilidad del navegador para flexbox es excelente, y la mayoría de los navegadores no necesitan un prefijo en este momento. Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:

+ +
    +
  • Internet Explorer 10, que implementó la versión display: flexbox de la especificación con el prefijo -ms- .
    • +
  • UC Browser, que aún admite la versión 2009 display: box versión de display: box solo con el prefijo -webkit- .
    • +
+ +

Tenga en cuenta también que Internet Explorer 11 es compatible con la display: flex moderna display: flex especificación display: flex sin embargo, tiene una serie de errores en la implementación.

+ +

Problemas comunes

+ +

La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentamos usar una especificación experimental en la producción. Si está tratando de garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el sitio Flexbugs es un recurso útil. Verá que muchos de los errores enumerados se aplican a las versiones antiguas del navegador y se corrigen en los navegadores actuales. Cada uno de los errores tiene una solución alternativa que puede ahorrarle muchas horas de desconcierto.

+ +

Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos de proveedor en su CSS además de la versión no prefijada. Esto se está volviendo cada vez menos un requisito hoy en día, ya que el apoyo es generalizado.

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador. También puede consultar ¿Puedo usar? Para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar su decisión.

+ +

Técnicas de respaldo útiles

+ +

Dado que el uso de flexbox se inicia con el valor de la propiedad de display , cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear fallos sobrescribiendo un método de diseño con otro. La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.

+ +

Floated items

+ +
+

"Flotar y despejar no crea flotación o espacio libre del elemento flexible, y no lo saque del flujo". 3. Contenedores flexibles

+
+ +

En el siguiente ejemplo en vivo, floté dos bloques y luego configuré display: flex en el contenedor. Los artículos ahora son artículos flexibles, lo que significa que se estiran a la misma altura. Cualquier comportamiento de flotación no se aplica.

+ +

Puede probar el comportamiento alternativo eliminando display: flex del contenedor.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

Una vez que un elemento de inline-block convierte en un elemento flexible, se block y, por lo tanto, el comportamiento de la display: inline-block como preservar el espacio en blanco entre elementos ya no se aplica.

+ +

Eliminar display: flex para ver el comportamiento de reserva. Verá un espacio en blanco agregado entre los elementos, que es lo que sucede cuando se usa display: inine-block ya que prefiere el espacio en blanco como otros elementos en línea.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.

+ +

Si usa display: table-cell en un elemento en su HTML, toma el estilo de una celda de tabla HTML. CSS crea cuadros anónimos para representar estos elementos para que no necesite envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni diseñar estos cuadros anónimos; Están allí para arreglar el árbol.

+ +

Si luego declara display: flex en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.

+ +
+

“Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- 4. Elementos Flexibles

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

The vertical-align property

+ +

El siguiente ejemplo en vivo demuestra el uso de la propiedad de vertical-align junto con display: inline-block . Tanto display: table-cell como display: inline-block permiten el uso de esta propiedad. El uso de vertical-align vertical permite la alineación vertical antes de flexbox. Flexbox ignora la propiedad, por lo que puede usarla junto con display: table-cell o display: inline-block como respaldo y luego usar de forma segura las propiedades de alineación de caja en flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

Consultas de funciones y flexbox

+ +

Puede usar consultas de funciones para detectar la compatibilidad con flexbox:

+ +
@supports (display: flex) {
+  // code for supporting browsers
+}
+ +

Tenga en cuenta que Internet Explorer 11 no admite consultas de funciones, pero sí admite flexbox. Si decide que la implementación de IE11 es demasiado defectuosa y desea servirle el diseño alternativo, entonces podría usar consultas de características para servir las reglas de flexbox solo a aquellos navegadores con un buen soporte de flexbox. Recuerde que si desea incluir versiones de navegadores que tengan flexbox prefijado por el proveedor, deberá incluir la versión prefijada en su consulta de características. La siguiente consulta de características incluiría UC Browser, que admite consultas de características y sintaxis antigua de flexbox, con el prefijo:

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}
+ +

Para obtener más información sobre el uso de consultas de características, consulte Uso de consultas de características en CSS en el blog Mozilla Hacks.

+ +

Conclusión

+ +

Si bien pasé algún tiempo en esta guía analizando posibles problemas y retrocesos, flexbox está muy listo para que lo use en el trabajo de producción. Esta guía lo ayudará en aquellos casos en los que encuentre un problema o tenga el requisito de admitir navegadores antiguos.

diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

+ +

¿Por qué elegir flexbox?

+ +

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

+ +

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

+ + + +

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

+ +

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

+ +

Espacio distribuido fuera de los elementos

+ +

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

+ +

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

Espacio distribuido dentro de los elementos

+ +

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

+ +

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

+ +

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ + + +

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

+ +

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

+ +

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrar elemento

+ +

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

+ +

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

+ + + +

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Objetos multimedia

+ +

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

+ +

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

+ +

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

+ +

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Volteando el objeto multimedia

+ +

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Controles de formulario

+ +

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

+ +

Conclusión

+ +

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

+ +

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

+ +

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

+ +

Los dos ejes de flexbox

+ +

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

+ +

El eje principal

+ +

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

El eje cruzado

+ +

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

+ +

Líneas de inicio y de fin

+ +

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

+ +

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

+ +

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

+ +

Working in English the start edge is on the left.

+ +

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

+ +

The start edge in a RTL language is on the right.

+ +

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

+ +

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

+ +

El contenedor flex

+ +

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

+ +
    +
  • Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).
    • +
  • Los ítems empiezan desde el margen inicial sobre el eje principal.
    • +
  • Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
    • +
  • Los ítems se ajustarán para llenar el tamaño del eje cruzado.
    • +
  • La propiedad {{cssxref("flex-basis")}} es definida como auto.
    • +
  • La propiedad {{cssxref("flex-wrap")}} es definida como nowrap.
    • +
+ +

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

+ +

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Cambiar flex-direction

+ +

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

+ +

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

+ +

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Contenedores flex Multi-línea con flex-wrap

+ +

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

+ +

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

La abreviatura flex-flow

+ +

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

+ +

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Propiedades aplicadas a los ítems flex

+ +

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

+ +

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

+ +

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

+ +

This flex container has available space after laying out the items.

+ +

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

+ +

La propiedad flex-basis

+ +

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

+ +

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

+ +

La propiedad flex-grow

+ +

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

+ +

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

+ +

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

+ +

La propiedad flex-shrink

+ +

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

+ +

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

+ +
+

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

+
+ +

Valores abreviados para las propiedades flex

+ +

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

+ +

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

+ +

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

+ +

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

+ +

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

+ +

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

+ +

Alineación, justificación y distribución del espacio libre entre ítems

+ +

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

+ +

align-items

+ +

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

+ +

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

+ +

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

+ +

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

+ +

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

+ +
    +
  • space-evenly
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

+ +

Próximos pasos

+ +

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/index.html b/files/es/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..b39db24d68 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: Diseño de caja flexible CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

El diseño CSS Flexbox es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.

+ +

Ejemplo Básico

+ +

En el siguiente ejemplo, se ha definido un contenedor como display: flex, lo que significa que los tres elementos hijo se convierten en elementos flexibles. El valor de justify-content se ha establecido en space-between para espaciar los elementos de manera uniforme en el eje principal. Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible. También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de align-items es stretch. Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

Propiedades de alineación

+ +

Las propiedades align-content, align-self, align-items y justify-content aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Entradas del glosario

+ +
+ +
+ +

Guías

+ +
+
Conceptos básicos de Flexbox
+
Una visión general de las características de flexbox
+
Relación de flexbox con otros métodos de diseño.
+
Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS
+
Alinear elementos en un contenedor flexible
+
Cómo funcionan las propiedades de Alineación de cuadro con flexbox.
+
Ordenando elementos flex
+
Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.
+
Control de proporción de elementos flex a lo largo del eje principal
+
Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.
+
Dominar el envoltorio de elementos flex
+
Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.
+
Casos de uso típicos de flexbox
+
Patrones de diseño comunes que son los típicos casos de uso de flexbox.
+
Compatibilidad con versiones anteriores de Flexbox
+
Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial.
+ +

Ver también

+ +
+
Flexbugs
+
una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox
+
Combinaciones (Mixins) Flexbox para varios navegadores
+
Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.
+
diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html new file mode 100644 index 0000000000..95804a5da2 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html @@ -0,0 +1,190 @@ +--- +title: Usando flexbox para componer aplicaciones web +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +tags: + - Avanzado + - CSS + - Cajas Flexibles CSS + - Ejemplo + - Guía + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Usar flexbox puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

+ +
    +
  • Quieres centrar un elemento en la mitad de una página
    • +
  • Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro
    • +
  • Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla
    • +
+ +

Este artículo sólo aborda el uso de flexbox con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee la guía más general para usar cajas flexibles de CSS.

+ +

Conceptos básicos

+ +

Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como flex y luego dando a la propiedad {{cssxref("flex-flow")}} el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.

+ +

Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:

+ +
    +
  • Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza flex: none que se expande a 0 0 auto.
    • +
  • Si deseas explícitamente dimensionar un elemento, usa flex: 0 0 tamaño. Por ejemplo: flex 0 0 60px.
    • +
  • Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza flex: auto. Se expande a 1 1 auto.
    • +
+ +

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.

+ +

Centrando un elemento en una página

+ +

Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}

+ +

Haciendo fluir verticalmente un conjunto de contenedores

+ +

Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como auto y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como none.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Contenido JavaScript

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}

+ +

Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.

+ +

Creando un contenedor que colapse horizontalmente

+ +

En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor wrap.

+ +

Contenido CSS

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

Contenido HTML

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Contenido JavaScript

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}

+ +

Ver también

+ + diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html new file mode 100644 index 0000000000..7046347011 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html @@ -0,0 +1,375 @@ +--- +title: Usando las cajas flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

+ +

Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

+ +
Nota: Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo -webkit; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.
+ +

El concepto de "cajas flexibles"

+ +

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

+ +

El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.

+ +

Vocabulario de "cajas flexibles"

+ +

Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una flex-direction de tipo row, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.

+ +

flex_terms.png

+ +
+
Contenedor flexible (Flex container)
+
El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.
+
Elemento flexible (Flex item)
+
+

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

+
+
Ejes
+
+

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

+ +
    +
  • La propiedad flex-direction establece el eje principal.
    • +
  • La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
    • +
  • La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
    • +
  • La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
    • +
+
+
Direcciones
+
+

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).

+ +
    +
  • La propiedad order asigna elementos a grupos ordinales y determina qué elementos aparecen primero.
    • +
  • La propiedad flex-flow combina las propiedades flex-direction y flex-wrap para colocar los elementos flexibles.
    • +
+
+
Líneas
+
+

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad flex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

+
+
Dimensiones
+
+

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) and tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.

+ +
    +
  • La propiedades min-height y min-width tienen un nuevo valor, auto que establece el tamaño mínimo de un elemento flexible.
    • +
  • La propiedad flex combina las propiedades flex-basis, flex-grow, y flex-shrink para establecer el grado de flexibilidad de los elementos flexibles.
    • +
+
+
+ +

Diseñando una "caja flexible"

+ +

Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad display así:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

+ +
Nota: Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, display : -webkit-flex.
+ +

Consideraciones de los elementos flexibles

+ +

El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad display:none.

+ +

Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del inicio principal (main start) de su contenedor flexible.

+ +

Actualmente, debido a un problema conocido, asignar visibility:collapse a un elemento flexible causa que sea tratado como si fuera display:none en vez de lo que se supone que debería ocurrir, es decir, como si fuera visibility:hidden. La alternativa mientras se resuelve este problema es usar visibility:hidden para elementos flexibles que deban comportarse como visibility:collapse.

+ +

Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes auto se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver Aligning with 'auto' margins en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.

+ +

Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa min-width:auto y/o min-height:auto. Para los elementos flexibles, el valor de atributo auto calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.

+ +

Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades align-, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades justify-, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar justify-content con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "centrado-basado-en-márgenes" en el eje principal al reemplazar la propiedad justify-content.

+ +

Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. 

+ +

Propiedades de las "cajas flexibles"

+ +

Propiedades que no afectan a las "cajas flexibles"

+ +

Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.

+ +
    +
  • Propiedades column-* del Módulo Multicol no tienen ningún efecto en un elemento flexible.
    • +
  • {{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar float causa que la propiedad display del elemento se comporte como block.
    • +
  • {{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.
    • +
+ +

Ejemplos

+ +

Ejemplo básico "flex"

+ +

Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. 

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Ejemplo de "Diseño del Santo Gríal"

+ +

Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.

+ +

HolyGrailLayout.png

+ +

Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.

+ +
​
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Área de juego

+ +

Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:

+ + + +

Cosas a tener en mente

+ +

El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".

+ +

Las "cajas flexibles" se comportan en función del modo de escritura establecido. Esto siginifica que inicio principal (main start) y fin principal (main end) se disponen de según la posición de inicio (start) y fin (end).

+ +

inicio secundario (cross start) y fin secundario (cross end) confían en la definición de la posición inicio (start) o antes (before) que depende del valor de direction.

+ +

Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad break- lo permita. Las propiedades CSS3 break-after, break-before y break-inside así como las propiedades CSS 2.1 page-break-before, page-break-after y page-break-inside se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoDesktop("22.0") }}		21.0{{ property_prefix("-webkit") }}10{{ property_prefix("-ms") }}(partial)12.13.1{{ property_prefix("-webkit") }}(partial)
+ 6.1{{ property_prefix("-webkit") }}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoMobile("22.0") }}		{{ CompatUnknown() }}10{{ property_prefix("-ms") }}(partial)
+ 11		12.1 +

3.2{{ property_prefix("-webkit") }}(partial)
+ 7.1{{ property_prefix("-webkit") }}
+ 9.0

+
+
+ +

Notas

+ +

[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.

+ +

[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a true.

+ +

[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.

+ +

[4] Mientras que en la implementación inicial en Opera 12.10 flexbox no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.

+ +

[5] Hasta Firefox 29, especificar visibility: collapse en un elemento flex causaba que fuera tratado como si fuera display: none en vez del comportamiento pretendido, tratándolo como si fuera visibility: hidden. El método alternativo sugerido es usar visibility: hidden para los elementos flex que debieran comportarse como si huberan sido designados visibility: collapse. Para más información, ver {{bug(783470)}}.

+ +

Ver también

+ +
    +
  • El Proyecto Flexbugs para información de errores en implementación de flexbox en navegadores.
    • +
diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..45daafc7a4 --- /dev/null +++ b/files/es/web/css/css_flow_layout/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

El Flujo Normal, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página sin que haya cambios en su diseño. El flujo es esencialmente un grupo de elementos que se perciben entre sí e interactúan entre ellos en nuestro diseño. Cuando uno de ellos se encuentra fuera del flujo, éste se comporta de manera independiente.

+ +

In normal flow, inline elements display in the inline direction, that is in the direction  words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

+ +

Ejemplo Básico

+ +

The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.

+ +

The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Guides

+ + + +

Reference

+ +

Glossary Entries

+ +
    +
  • {{Glossary("Block/CSS", "Block (CSS)")}}
    • +
+ + diff --git a/files/es/web/css/css_fonts/index.html b/files/es/web/css/css_fonts/index.html new file mode 100644 index 0000000000..f3d6ebe59a --- /dev/null +++ b/files/es/web/css/css_fonts/index.html @@ -0,0 +1,148 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CCS + - CSS Fonts + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts es el modulo CSS que define todo lo relacionado con los recursos tipográficos, sus propiedades y como son cargados. Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. También permite definir la altura de una línea.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

Atributos

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Guia

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}} +

Definición
+ inicial

+
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte
+ básico		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..3b0aac0c26 --- /dev/null +++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: Colocación automática en diseño de cuadrícula CSS +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +

Además de la capacidad de colocar elementos con precisión en una cuadrícula creada, la especificación de diseño de cuadrícula CSS contiene reglas que controlan lo que sucede cuando crea una cuadrícula y no coloca algunos o todos los elementos secundarios. Puede ver la colocación automática en acción de la manera más simple creando una cuadrícula en un conjunto de elementos. Si no proporciona información de ubicación a los elementos, se colocarán en la cuadrícula, uno en cada celda de la cuadrícula.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_1', '500', '230') }}

+
+ +

Reglas predeterminadas para la colocación automática

+ +

Como puede ver con el ejemplo anterior, si crea una cuadrícula, todos los elementos secundarios se colocarán uno en cada celda de la cuadrícula. El flujo predeterminado es organizar los elementos por fila. La cuadrícula colocará un elemento en cada celda de la fila 1. Si ha creado filas adicionales utilizando la propiedad grid-template-rows , entonces grid continuará colocando elementos en estas filas. Si la cuadrícula no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas implícitas .

+ +

Dimensionar filas en la cuadrícula implícita

+ +

El valor predeterminado para las filas creadas automáticamente en la cuadrícula implícita es que tengan el tamaño automático. Esto significa que contendrán el contenido agregado a ellos sin causar un desbordamiento.

+ +

Sin embargo, puede controlar el tamaño de estas filas con la propiedad grid-auto-rows . Para hacer que todas las filas creadas tengan 100 píxeles de alto, por ejemplo, usaría:

+ + + +
+ + +
<div class="wrapper">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{ EmbedLiveSample('placement_2', '500', '330') }}

+
+ +

Puede usar minmax() en su valor para grid-auto-rows permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.

+ +
+ + +
<div class="wrapper">
+     <div>One</div>
+     <div>Two</div>
+     <div>Three</div>
+     <div>Four
+     <br>This cell
+     <br>Has extra
+     <br>content.
+     <br>Max is auto
+     <br>so the row expands.
+     </div>
+     <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{ EmbedLiveSample('placement_3', '500', '330') }}

+
+ +

También puede pasar una lista de pistas, esto se repetirá. La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como 200px píxeles. Esto continuará mientras se agregue contenido a la cuadrícula implícita. Las listas de seguimiento no son compatibles con Firefox.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{ EmbedLiveSample('placement_4', '500', '330') }}

+
+ +

Colocación automática por columna

+ +

También puede pedirle a la cuadrícula que coloque automáticamente los elementos por columna. Usando la propiedad grid-auto-flow con un valor de column . En este caso, la cuadrícula agregará elementos en las filas que haya definido utilizando grid-template-rows . Cuando llena una columna, se moverá a la siguiente columna explícita o creará una nueva pista de columna en la cuadrícula implícita. Al igual que con las pistas de fila implícitas, estas pistas de columna tendrán el tamaño automático. Puede controlar el tamaño de las pistas de columna implícitas con grid-auto-columns , esto funciona de la misma manera que grid-auto-rows .

+ +

En el siguiente ejemplo, he creado una cuadrícula con tres pistas de fila de 200 píxeles de altura. Estoy colocando automáticamente por columna y las columnas creadas tendrán un ancho de columna de 300 píxeles, luego un ancho de columna de 100 píxeles hasta que haya suficientes pistas de columna para contener todos los elementos.

+ + + +
+
.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_5', '500', '640') }}

+
+ +

El orden de los artículos colocados automáticamente

+ +

Una cuadrícula puede contener una mezcla de elementos. Algunos de los elementos pueden tener una posición en la cuadrícula, pero otros pueden colocarse automáticamente. Esto puede ser útil, si tiene un orden de documentos que refleja el orden en que los elementos se ubican en la cuadrícula, es posible que no necesite escribir reglas CSS para colocar absolutamente todo. La especificación contiene una sección larga que detalla el algoritmo de colocación de elementos de la cuadrícula , sin embargo, para la mayoría de nosotros solo necesitamos recordar algunas reglas simples para nuestros elementos.

+ +

Pedido de documentos modificados

+ +

La cuadrícula coloca los elementos a los que no se les ha asignado una posición de cuadrícula en lo que se describe en la especificación como "orden de documento modificado de orden". Esto significa que si ha utilizado la propiedad del order , los artículos se colocarán por ese orden, no por su orden DOM. De lo contrario, permanecerán de forma predeterminada en el orden en que se ingresan en el origen del documento.

+ +

Artículos con propiedades de colocación

+ +

Lo primero que hará la cuadrícula es colocar cualquier elemento que tenga una posición. En el siguiente ejemplo, tengo 12 elementos de cuadrícula. El elemento 2 y el elemento 5 se han colocado utilizando una colocación basada en líneas en la cuadrícula. Puede ver cómo se colocan esos elementos y luego los otros elementos se colocan automáticamente en los espacios. Los artículos colocados automáticamente se colocarán antes de los artículos colocados en orden DOM, no comienzan después de la posición de un artículo colocado que viene antes que ellos.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_6', '500', '450') }}

+
+ +

Maneja artículos que abarcan pistas

+ +

Puede usar las propiedades de ubicación sin dejar de aprovechar la colocación automática. En el siguiente ejemplo, he agregado al diseño configurando elementos impares para abarcar dos pistas tanto para filas como para columnas. Hago esto con las propiedades grid-column-end y grid-row-end y establezco el valor de esto para span 2 . Lo que esto significa es que la línea de inicio del artículo se establecerá mediante la colocación automática, y la línea final abarcará dos pistas.

+ +

Puede ver cómo esto deja huecos en la cuadrícula, en cuanto a los elementos colocados automáticamente si la cuadrícula se encuentra con un elemento que no cabe en una pista, se moverá a la siguiente fila hasta que encuentre un espacio que el elemento pueda caber en.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_7', '500', '770') }}

+
+ +

Llenando los huecos

+ +

Hasta ahora, aparte de los elementos que hemos colocado específicamente, la cuadrícula siempre avanza y mantiene los elementos en orden DOM. En general, esto es lo que desea, si está diseñando un formulario, por ejemplo, no desea que las etiquetas y los campos se mezclen para llenar un vacío. Sin embargo, a veces, estamos diseñando cosas que no tienen un orden lógico y nos gustaría crear un diseño que no tenga huecos.

+ +

Para hacer esto, agregue la propiedad grid-auto-flow con un valor dense al contenedor. Esta es la misma propiedad que usa para cambiar el orden de flujo a column , por lo que si estuviera trabajando en columnas agregaría ambos valores grid-auto-flow: column dense .

+ +

Una vez hecho esto, la grilla ahora rellenará los huecos, a medida que se mueva a través de la grilla, deja huecos como antes, pero luego, si encuentra un elemento que se ajuste a un hueco anterior, lo recogerá y lo sacará del orden DOM para colóquelo en la brecha. Al igual que con cualquier otro reordenamiento en la cuadrícula, esto no cambia el orden lógico. El orden de tabulación, por ejemplo, seguirá el orden del documento. Examinaremos los posibles problemas de accesibilidad de Grid Layout en una guía posterior, pero debe tener cuidado al crear esta desconexión entre el orden visual y el orden de visualización.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{ EmbedLiveSample('placement_8', '500', '730') }}

+
+ +

Elementos de cuadrícula anónimos

+ +

Hay una mención en la especificación de elementos de cuadrícula anónimos. Estos se crean si tiene una cadena de texto dentro de su contenedor de cuadrícula, que no está envuelta en ningún otro elemento. En el siguiente ejemplo, tenemos tres elementos de cuadrícula, suponiendo que haya configurado el padre con una clase de grid para display: grid . El primero es un elemento anónimo, ya que no tiene un marcado adjunto, este elemento siempre se tratará a través de las reglas de colocación automática. Los otros dos son elementos de cuadrícula encerrados en un div, pueden colocarse automáticamente o puede colocarlos con un método de posicionamiento en su cuadrícula.

+ +
<div class="grid">
+  I am a string and will become an anonymous item
+  <div>A grid item</div>
+  <div>A grid item</div>
+</div>
+
+ +

Los elementos anónimos siempre se colocan automáticamente porque no hay forma de orientarlos. Por lo tanto, si tiene algún texto sin envolver por alguna razón en su cuadrícula, tenga en cuenta que puede aparecer en algún lugar inesperado, ya que se colocará automáticamente de acuerdo con las reglas de colocación automática.

+ +

Casos de uso para la colocación automática

+ +

La colocación automática es útil siempre que tenga una colección de artículos. Pueden ser elementos que no tienen un orden lógico, como una galería de fotos o una lista de productos. En ese caso, puede optar por utilizar el modo de embalaje denso para rellenar los agujeros en su cuadrícula. En mi ejemplo de galería de imágenes tengo algunas imágenes de paisajes y algunas de retratos. He configurado imágenes de paisajes, con una clase de landscape para abarcar dos pistas de columna. Luego uso grid-auto-flow: dense para crear una grilla densamente empaquetada.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+
+ +
<ul class="wrapper">
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{ EmbedLiveSample('placement_9', '500', '1300') }}

+
+ +

La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico. Un ejemplo es la lista de definiciones en el siguiente ejemplo. Las listas de definición son un desafío interesante para el estilo, ya que son planas, no hay nada que envuelva los grupos de elementos dt y dd . En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un dt en la columna 1, y dd en la columna 2, esto garantiza que los términos vayan de un lado y las definiciones del otro, sin importar cuántos de cada uno que tenemos.

+ +
+ + +
<div class="wrapper">
+   <dl>
+       <dt>Mammals</dt>
+       <dd>Cat</dd>
+       <dd>Dog</dd>
+       <dd>Mouse</dd>
+       <dt>Fish</dt>
+       <dd>Guppy</dd>
+       <dt>Birds</dt>
+       <dd>Pied Wagtail</dd>
+       <dd>Owl</dd>
+   </dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+
+ +

{{ EmbedLiveSample('placement_10', '500', '230') }}

+
+ +

¿Qué no podemos hacer con la colocación automática (todavía)?

+ +

Hay un par de cosas que a menudo surgen como preguntas. Actualmente no podemos hacer cosas como apuntar a cualquier otra celda de la cuadrícula con nuestros artículos. Es posible que ya se le haya ocurrido un problema relacionado si siguió la última guía sobre líneas con nombre en la cuadrícula. Sería definir una regla que dijera "colocar elementos automáticamente en la siguiente línea llamada" n ", y la cuadrícula se saltaría otras líneas. Se plantea un problema al respecto en el repositorio CSSWG GitHub, y sería bienvenido a agregue sus propios casos de uso a esto.

+ +

Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula. Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso. Esto ayudará a mejorar las futuras versiones de la especificación.

+ + diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..445cbac308 --- /dev/null +++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,703 @@ +--- +title: Box alignment in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +

Si estás familiarizado con flexbox Entonces ya habrás encontrado la forma en que los items flexibles pueden ser alineados correctamente dentro de un contendor flex. Estas propiedades de alineación que encontramos por primera vez en la especificación de flexbox se han trasladado a una nueva especificación llamada Box Alignment Level 3. Esta especificación tiene detalles de cómo debería funcionar la alineación en todos los diferentes métodos de diseño.

+ +

Cada método de diseño que implemente Box Alignment tendrá algunas diferencias debido a que cada método tiene características y restricciones diferentes (y acciones heredadas), por lo que es imposible hacer la alineación exactamente de la misma forma en todos los ámbitos.  La especificación Box Alignment tiene detalles para cada método, sin embargo, te decepcionaría si intentaras alinear en muchos métodos en este momento, pues el soporte aún no está disponible para todos los navegadores. Donde sí tenemos soporte de navegador para las propiedades de alineación y distribución de espacio de la especificación Box Alignment es en grid layout.

+ +

Esta guía muestra la forma cómo funciona la alineación de cajas (box alignment) en el diseño de cuadriculas (Grid Layout). Verás mucha similitud en cómo funcionan estás propiedades y valores en flexbox. Debido a que la cuadrícula (grid) es bidimensional y flexbox es unidimensional, existen algunas pequeñas diferencias con las que debes tener cuidado. Así que comenzaremos mirando los dos ejes con los que tratamos cuando alineamos cosas en una cuadricula.

+ +

Los 2 ejes de un diseño Grid

+ +

Al trabajar con el diseño de cuadrícula, tienes dos ejes disponibles para alinear las cosas: el eje del bloque (block axis) y el eje en línea (inline axis).  El eje de bloque es el eje sobre el cual se disponen los bloques en el diseño del bloque. Si tienes dos párrafos en tu página, se mostrara uno debajo del otro, entonces es ésta la dirección que describimos como el eje de bloque (también llamadas columnas, eje "y", eje vertical).

+ +

+ +

El eje en línea (inline axis) se ejecuta a través del eje del bloque, es la dirección en la que se ejecuta el texto en el flujo regular en línea (también llamadas filas, Eje "x", eje horizontal). 

+ +

+ +

Podemos alinear el contenido dentro de las áreas de la cuadrícula o rejilla , y los tracks en estos dos ejes.

+ +

Alineación de elementos en el Eje de Bloque 

+ +

Las propiedades {{cssxref("align-self")}} y {{cssxref("align-items")}} controlan la alineación en el eje de bloque. Cuando usamos estas propiedades, estamos cambiando la alineación del elemento dentro del área de la cuadricula (grid) que se ha colocado.

+ +

En el siguiente ejemplo, tengo 4 áreas dentro de mi cuadricula (grid). Puedo usar la propiedad {{cssxref("align-items")}} en el contenedor de la cuadricula (grid container), para alinear los elementos usando uno de los siguientes valores:

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_1', '500', '450') }}

+
+ +

Ten en mente que una vez establezcas align-self: start, la altura de cada hijo <div> será determinada por el contenido del <div>.  Esto está en contraste de omitir align-self completamente, en el cual la altura de cada <div> se extendería hasta llenar el área de la cuadricula.

+ +

La propiedad {{cssxref("align-items")}} establece la propiedad {{cssxref("align-self")}} para todos los elementos hijos de la cuadricula. Esto significa que puedes establecer la propiedad individualmente, usando align-self en cada elemento de la cuadricula.

+ +

En el siguiente ejemplo, estoy usando la propiedad align-self para demostrar los diferentes valores de alineación. La primer área está mostrando la acción por defecto de align-self, el cual es extenderse. El segundo elemento tiene un valor en align-self de start, el tercero end y el cuarto center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_2', '500', '450') }}

+
+ +

Elementos con una relación de aspecto intrínseco

+ +

La especificación determina que la acción por defecto en {{cssxref("align-self")}} es estirarse, excepto para los elementos que tienen una relación de aspecto intrínseco, en este caso ellos funcionan como start. La razón para esto, es que si elemento con una relación de aspecto intrínseco es establecido para estirarse, este por defecto pueda distorsionarlo.

+ +

Esta acción ahora ha sido clarificada en la especificación, con navegadores aún hay que implementar la acción correcta. Hasta que eso pase, te puedes asegurar de que los elementos no se extiendan, como en imagenes, las cuales son hijos directos de la cuadricula, estableciendo {{cssxref("align-self")}} y {{cssxref("justify-self")}} al empezar. Esto se asemejará a la acción correcta una vez implementado.

+ +

Justifying Items on the Inline Axis

+ +

As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for align-self.

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.

+ +

Once again the default is stretch, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_3', '500', '450') }}

+
+ +

As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.

+ +

The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.

+ +

Center an item in the area

+ +

By combining the align and justify properties we can easily center an item inside a grid area.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Item 1</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_4', '500', '480') }}

+
+ +

Aligning the grid tracks on the block axis

+ +

If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The values for {{cssxref("align-content")}} and {{cssxref("justify-content")}} are:

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.

+ +

The align-content property is applied to the grid container as it works on the entire grid. The default behavior in grid layout is start, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_5', '500', '520') }}

+ +

If I add align-content to my container, with a value of end, the tracks all move to the end line of the grid container in the block dimension:

+
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_6', '500', '520') }}

+
+ +

We can also use values for this property that you may be familiar with from flexbox; the space distribution values of space-between, space-around and space-evenly. If we update {{cssxref("align-content")}} to space-between, you can see how the elements on our grid space out:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_7', '500', '520') }}

+
+ +

It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.

+ +

In the below image I have placed the grid with align-content, with a value of start alongside the grid when align-content has a value of space-between. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:

+ +

Demonstrating how items become larger if we use space-between.

+ +

Justifying the grid tracks on the row axis

+ +

On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.

+ +

Using the same example, I am setting {{cssxref("justify-content")}} to space-around. This once again causes tracks which span more than one column track to gain extra space:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_8', '500', '500') }}

+
+ +

Alignment and auto margins

+ +

Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to auto, you know that an auto margin absorbs all of the available space. By setting the margin to auto on both sides, it pushes the block into the middle as both margins attempt to take all of the space.

+ +

In this next example, I have given item 1 a left margin of auto. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_9', '500', '500') }}

+
+ +

You can see how the item is aligned by using the Firefox Grid Highlighter:

+ +

Image showing auto-margins using the Grid Highlighter.

+ +

Alignment and Writing Modes

+ +

In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.

+ +

CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of justify-content: start would be for grid tracks to start on the right hand side of the grid.

+ +

Setting auto margins, using margin-right or margin-left however, or absolutely positioning items using the top, right, bottom and left offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.

+ + diff --git "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

+ +

¿Qué es una cuadrícula(grid)?

+ +

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

+ +

Tamaños fijos y flexibles

+ +

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

+ +

Posicionamiento de elementos

+ +

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

+ +

Creación de líneas adicionales para alojar contenido

+ +

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

+ +

Control de alineación

+ +

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

+ +

Control de contenido superpuesto

+ +

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

+ +

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

+ +

El contenedor de Grid

+ +

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

+ +

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

Hago de .wrapper un contenedor de cuadrícula.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

+
+ +

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

+ +

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

+ +

Vias, filas y columnas del Grid

+ +

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

+ +

+ +

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

+ +

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

La Unidad fr

+ +

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

+
+ +

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Listando vías con la notación repeat()

+ +

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

También puede ser escrita así:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

La cuadrícula implícita y explícita

+ +

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

+ +

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

+ +

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

+ +
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

+
+ +

Tamaño de vía y minmax()

+ +

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

+ +

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

+
+ +

Líneas de la cuadrículaEdit

+ +

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

+ +

Diagram showing numbered grid lines.

+ +

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

+ +

Posicionando elementos de acuerdo a las líneas

+ +

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

+ +

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

+ +

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

+ +
+
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

+
+ +

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

+ +

Celdas de cuadrícula

+ +

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

+ +

The first cell of the grid highlighted

+ +

Áreas de cuadrícula

+ +

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

+ +

A grid area

+ +

Canaletas

+ +

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

+ +
+
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
+

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Canaletas') }}

+
+ +

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

+ +

Anidamiento de cuadrículas

+ +

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('anidamiento', '600', '340') }}

+ +

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

+ +

Subgrid

+ +

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

+ +
+

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

+
+ +

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

+ +

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

Estratificando elementos con z-index

+ +

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

+ +

Controlando el orden

+ +

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

+ +

Siguientes Pasos

+ +

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

+ + +
diff --git a/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..7339530ff1 --- /dev/null +++ b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,169 @@ +--- +title: CSS Grid Layout y accesibilidad +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +

Los que llevamos en esto del desarrollo web más años de los que queremos recordar podríamos considerar que CSS Grid es un poco como "maquetar con tablas". En los primeros tiempos del diseño web la manera de maquetar la página era usando tablas HTML y "troceando" los elementos dentro de las celdas de esas tablas para crear un diseño. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.

+ +

In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the CSS Zen Garden showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.

+ +

CSS Grid Layout does not have the same issues that tables did, our grid structure is defined in CSS rather than in the mark-up. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? Is it possible that we could create an accessibility issue through our use of grids?

+ +

Re-ordering content in CSS Grid Layout

+ +

We’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use grid-auto-flow: dense which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.

+ +

The specification includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.

+ +
+

Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex HTML5).

+
+ +

If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.

+ +

The specification warns authors (the CSSWG term for web developers) not to do this reordering.

+ +
+

Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.

+
+ +

What does this mean for designing with grid layout in practice?

+ +

Visual not logical re-ordering

+ +

Any time you reorder things with grid layout – or with flexbox – you only perform visual reordering. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.

+ +

In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">One</a></div>
+  <div class="box box2"><a href="">Two</a></div>
+  <div class="box box3"><a href="">Three</a></div>
+  <div class="box box4"><a href="">Four</a></div>
+  <div class="box box5"><a href="">Five</a></div>
+</div>
+
+ +

{{ EmbedLiveSample('accessibility_1', '500', '330') }}

+
+ +

The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.

+ +

How should we approach accessibility for grid layout?

+ +

From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?

+ +
+
Start with a structured and accessible document
+
A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for your smallest screen devices too. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.
+
Create a responsive, and responsible grid
+
With a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to tab around the document. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.
+
Returning to the source
+
If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.
+
+ +

Grid and the danger of markup flattening

+ +

Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to flatten markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, that ul becomes a grid item – the child {{HTMLElement("li")}} elements do not.

+ +

If the subgrid value of {{cssxref("display")}} becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the ul element a subgrid. Currently the only way to do this is to use display: contents to cause the box generated by the ul to disappear from the DOM. For more information about this interaction see the guide on the Relationship of Grid Layout to other layout methods and the section on display: contents.

+ +

Given that interoperable support for display: contents is limited and we do not yet have subgrids, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to display: grid. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!

+ +

Further reading

+ +

There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.

+ +

The concept of visual display following document source order is detailed in the WCAG Techniques for Success Criteria – Technique C27.

+ +

As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading Flexbox & the Keyboard Navigation Disconnect from Léonie Watson. Also the video of Léonie’s presentation from ffconf is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding tab order in various browsers – although this was prior to grid support being fully implemented in Firefox.

+ + diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d26c21f5fa --- /dev/null +++ b/files/es/web/css/css_grid_layout/index.html @@ -0,0 +1,251 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

+ +

Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

+ +

Ejemplo sencillo

+ +

El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Funciones CSS

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

CSS data types

+ +
+
    +
  • {{cssxref("<flex>")}}
    • +
+
+ +

Glosario

+ +
+ +
+ +

Guías

+ +
+ +
+ +

Recursos externos

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("CSS Grid 2") }}{{ Spec2("CSS Grid 2") }}Added subgrids.
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..d477402114 --- /dev/null +++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,597 @@ +--- +title: Realizing common layouts using CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

Para completar este conjunto de guías de CSS Grid Layout, voy a recorrer algunos diseños diferentes, que demuestran algunas de las diferentes técnicas que puede utilizar al diseñar con grid layout. Vamos a ver un ejemplo usando grid-template-areas un típico sistema de cuadrícula flexible de 12 columnas, y también un listado de productos usando el emplazamiento automático. Como puedes ver en este conjunto de ejemplos, a menudo hay más de una manera de lograr el resultado que deseas con el diseño de cuadrícula. Escoge el método que encuentres más útil para los problemas que estás resolviendo y los diseños que necesitas implementar.

+ +

Responsive layout de 1 a 3 columnas fluidas usando grid-template-areas

+ +

Muchos sitios web son una variación de este tipo de diseño: contenido, barras laterales, un encabezado y un pie de página. En diseños responsivos, es posible que quieras mostrar el diseño en una sola columna, agregando una barra lateral en un punto de interrupción determinado y luego incorporar un diseño de tres columnas para pantallas más amplias.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Voy a crear este layout usando la propiedad named template areas que aprendimos en la guía Grid template areas.

+ +

Mi marcado consiste en un container con elementos en su interior para el header, footer, contenido principal, navegación, sidebar, y un bloque para poner anuncios./p>

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Área principal del artículo</h1>
+            <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

Al usar {{cssxref("grid-template-areas")}} para crear el diseño. A parte de las media queries necesito nombrar las áreas. Nombremos las áreas con la propiedad {{cssxref("grid-area")}} property.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Esto no creará ningún diseño, sin embargo, nuestros elementos ahora tienen nombres que podemos utilizar para hacerlo. Al margen de las media queries, ahora voy a configurar el diseño para el ancho móvil. Aquí estoy manteniendo todo en el orden de origen, tratando de evitar cualquier separación entre la fuente y la pantalla, tal y como se describe en la guía Grid layout y accesibilidad. No he definido ninguna vía de columna o de fila, pero este diseño dicta una sola columna, y las filas se crearán según sea necesario para cada uno de los items de la cuadrícula implícita.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Después de establecer la columna simple para todas los tamaños de pantalla, ahora podemos añadir una media query y redefinir nuestro layout para los casos en los que tuviéramos suficiente pantalla real como para mostrar dos columnas.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Se puede ver la forma del layout en los valores de {{cssxref("grid-template-areas")}}. El header se expande en dos vías de columna, lo mismo que nav. En la tercera vía de fila tenemos el sidebar al costado del content. En la cuarta vía de fila he decidido poner el contenido ad – por tanto aparecerá debajo de sidebar,y a continuación, el footer , debajo del contenido. Estoy utilizando flexbox en la navegación para mostrarlo en una fila espaciada.

+ +

Ahora puedo añadir un punto de ruptura final para pasar a un diseño de tres columnas.

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

El diseño de tres columnas tiene dos columnas laterales de 1fr y una columna central que tiene 4fr como tamaño de vía. Esto significa que el espacio disponible en el contenedor se divide en 6 y se asigna en proporción a nuestras tres pistas - una parte cada una a las columnas laterales y 4 partes al centro.

+ +

En este diseño estoy mostrando nav en la columna de la izquierda, junto al content. En la columna de la derecha tenemos sidebar y debajo están los anuncios (ad). El footer se extiende a lo largo de la parte inferior del diseño. Luego uso flexbox para mostrar la navegación como una columna.

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

Este es un ejemplo simple pero demuestra cómo podemos usar un diseño de cuadrícula para reorganizar nuestro diseño para diferentes puntos de ruptura. En particular, estoy cambiando la ubicación de ese bloque de anuncios ad, según corresponda en mis diferentes configuraciones de columna. Este método de nombrar las áreas me parece muy útil en una etapa de prototipado, es fácil jugar con la ubicación de los elementos. Siempre se puede empezar a utilizar la rejilla de esta manera para la creación de prototipos, incluso si no se puede confiar plenamente en ella en producción debido a los navegadores que visitan su sitio.

+ +

Diseño flexible de 12-columnas

+ +

Si has estado trabajando con uno de los muchos frameworks o sistemas de cuadrícula puedes estar acostumbrado a diseñar tu sitio en una cuadrícula flexible de 12 o 16 columnas. Podemos crear este tipo de sistema utilizando CSS Grid Layout. Como ejemplo simple, estoy creando una cuadrícula flexible de 12 columnas que tiene 12 pistas de columna de 1fr -unidad, todas tienen una línea de inicio llamada col-start. Esto significa que tendremos doce líneas de cuadrícula llamadas col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Para demostrar cómo funciona este sistema de rejilla tengo 4 ítems hijos dentro de mi wrapper.

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

Entonces puedo ponerlos en la rejilla usando los nombres de las líneas, y la palabra clave span.

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

Como se describe en la guía de líneas con nombre, estamos utilizando la línea con nombre para colocar nuestro ítem. Como tenemos 12 líneas todas con el mismo nombre usamos el nombre, y luego el index de la línea. También puedes usar el propio index de líneas si lo prefieres y evitar el uso de líneas con nombre.

+ +

En lugar de establecer el número de la línea final, he elegido decir cuántas pistas debe expandir este elemento, utilizando la palabra clave span. Me gusta este enfoque, ya que cuando trabajamos con un sistema de diseño de múltiples columnas normalmente pensamos en bloques en términos del número de vías de la cuadrícula que atraviesan, y los ajustamos para diferentes puntos de ruptura. Para ver cómo se alinean los bloques con las vías, utiliza el Firefox Grid Inspector. Muestra claramente cómo se colocan nuestros ítems.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Existen algunas diferencias clave sobre cómo funciona un diseño de cuadrícula en los sistemas de cuadrícula que se pueden haber utilizado anteriormente. Como puedes ver, no necesitamos añadir ningún marcado para crear una fila, los sistemas de cuadrícula necesitan hacer esto para evitar que los elementos salten a la fila de arriba. Con CSS Grid Layout, podemos colocar las cosas en filas, sin peligro de que suban a la fila de arriba si se dejan vacías. Debido a esta estricta colocación de columnas y filas, también podemos dejar fácilmente espacio en blanco en nuestro diseño. Tampoco necesitamos clases especiales que tiren o empujen cosas, para que se introduzcan en la rejilla. Todo lo que tenemos que hacer es especificar la línea de inicio y final del ítem.

+ +

Construcción de un diseño utilizando el sistema de 12 columnas

+ +

Para ver cómo funciona este método de diseño en la práctica, podemos crear el mismo diseño que creamos con {{cssxref("grid-template-areas")}}, esta vez utilizando el sistema de cuadrícula de 12 columnas. Comienzo con el mismo marcado que el utilizado para el ejemplo de áreas de plantillas de cuadrícula.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Área principal del artículo</h1>
+        <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

Entonces puedo configurar nuestra cuadrícula, como en el ejemplo del diseño de 12 columnas de arriba.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Una vez más vamos a hacer de este un diseño responsivo, pero esta vez usando líneas con nombre. Cada punto de interrupción utilizará una cuadrícula de 12 columnas, sin embargo, el número de pistas que los ítems expandirán cambiará dependiendo del tamaño de la pantalla.

+ +

Empezamos con el móvil primero, y todo lo que queremos para las pantallas más estrechas es que los elementos permanezcan en el orden de origen, y que todos se expandan a lo largo de la cuadrícula.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

En el siguiente punto de ruptura queremos pasar a un diseño de dos columnas. Nuestro encabezado y navegación todavía se extienden por toda la cuadrícula, por lo que no necesitamos especificar ninguna posición para ellos. La barra lateral comienza en la primera línea de la columna llamada col-start, que abarca 3 líneas. Va después de la línea 3 de la fila, ya que la cabecera y la navegación se encuentran en las dos primeras pistas de la fila.

+ +

El panel de anuncios se encuentra debajo de la barra lateral, por lo que comienza en la línea 4 de la fila de la cuadrícula. Luego tenemos el contenido y el pie de página comenzando en col-start 4 y abarcando 9 pistas que los llevan al final de la cuadrícula.

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Finalmente vamos a la versión de tres columnas de este diseño. El encabezado continúa extendiéndose por toda la cuadrícula, pero ahora la navegación se mueve hacia abajo para convertirse en la primera barra lateral, con el contenido y la barra lateral al lado. El pie de página ahora también se extiende por todo el diseño.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

Una vez más el Grid Inspector Grid Inspector es útil para ayudarnos a ver cómo ha tomado forma nuestro diseño.

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

Algo a tener en cuenta a la hora de crear este diseño es que no hemos necesitado posicionar explícitamente cada elemento en la cuadrícula en cada punto de ruptura. Hemos sido capaces de heredar la colocación establecida para puntos de ruptura anteriores - una ventaja de trabajar " mobile first ". También podemos aprovechar la colocación automática de la rejilla. Al mantener los elementos en un orden lógico, la colocación automática realiza una gran cantidad de trabajo por nosotros al colocar los elementos en la cuadrícula. En el último ejemplo de esta guía crearemos un diseño que se basa totalmente en la colocación automática

+ +

Un listado de productos con auto-placement

+ +

Muchos diseños son esencialmente conjuntos de "tarjetas" - listados de productos, galerías de imágenes, etc. Una cuadrícula puede hacer que sea muy fácil crear estos listados de una manera responsiva sin necesidad de añadir media queries para ello. En este siguiente ejemplo estoy combinando CSS Grid y Flexbox Layouts para hacer un sencillo diseño de listado de productos.

+ +

El marcado de mi anuncio es una lista no ordenada de artículos. Cada elemento contiene un encabezado, un texto de altura variable y un enlace para llamar a la acción.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item Uno</h2>
+    <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+    <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+  </li>
+   <li>
+     <h2>Item Dos</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Tres</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p>
+     <p>Este tiene más texto que los demás.</p>
+     <p>Un poquito más</p>
+     <p>¿Podríamos hacer algo diferente con él?</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+    <li>
+     <h2>Item Cuatro</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+     <li>
+     <h2>Item Cinco</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+      <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+</ul>
+
+ + + +

Vamos a crear una cuadrícula con un número flexible de columnas flexibles. Quiero que nunca sean más pequeñas que 200 píxeles, y que luego compartan el espacio restante disponible por igual, de modo que siempre obtengamos pistas de columna de igual ancho. Esto lo logramos con la función minmax() en nuestra notación repeat para el dimensionamiento de pistas.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Tan pronto como añado este CSS, los ítems empiezan a desplegarse como una cuadrícula. Si hago la ventana más pequeña o más ancha, el número de pistas de columna cambia, sin necesidad de añadir puntos de interrupción mediante media queries y redefinir la cuadrícula.

+ +

Luego puedo ordenar el interior de las cajas con un pequeño toque de flexbox. Establezco la lista de ítems como display: flex y la propiedad flex-direction como column. Entonces puedo usar un auto margin en .cta para empujar esta barra hacia abajo hasta el fondo de la caja./p>

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Esta es realmente una de las razones clave por las que usaría flexbox en lugar de grid, si sólo estoy alineando o distribuyendo algo en una sola dimensión, ese es un caso de uso de flexbox.

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas cartas que contienen mucho más contenido que las otras. Podría ser bueno hacer que se expandan a lo largo de dos pistas, y entonces no serán tan altas. Tengo una clase wide en mi ítem más grande, y añado una regla {{cssxref("grid-column-end")}} con el valor span 2. Ahora cuando la rejilla llegue a este ítem, le asignará dos pistas. En algunos puntos de ruptura, esto significa que obtendremos un hueco en la cuadrícula - donde no haya espacio para colocar un elemento de dos pistas.

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}: dense en el grid container. Sin embargo, presta atención al hacer esto, ya que saca los elementos de su orden lógico de origen. Sólo deberías hacerlo si tus ítems no tienen un orden establecido - y en ese caso tener en cuenta características de accesibilidad: el tabulador seguirá el orden de la fuente y no de la visualización reordenada.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

Esta técnica de auto-placement con algunas reglas aplicadas a ciertos ítems es muy útil, y puede ayudarte a lidiar con el contenido que está siendo generado por un CMS, por ejemplo, donde has repetido ítems y quizás puedas añadir una clase a ciertos ítems a medida que son generados en el HTML. with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.

+
+ +

Aprender más

+ +

La mejor manera de aprender a usar el diseño de la cuadrícula es continuar construyendo ejemplos como los que hemos tratado aquí. Escoge algo que normalmente construyes usando tu framework preferido, o usando floats, y ve si puedes construirlo usando grid. No olvides buscar ejemplos que sean imposibles de construir con los métodos actuales. Eso podría significar inspirarse en revistas u otras fuentes ajenas a la web. Grid Layout abre posibilidades que antes no teníamos, no necesitamos estar atados a los mismos viejos layouts para utilizarlo

+ +
    +
  • Para inspirarte mira Layout Labs de Jen Simmons, ella ha estado creando diseños basados en una variedad de fuentes.
    • +
  • ara obtener patrones de diseño comunes adicionales, consulta Grid by Example, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.
    • +
+ + diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

+ +
+

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

+
+ +

Grid y flexbox

+ +

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

+ +

Diseños de Una dimensión vs. dos dimensiones

+ +

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

+ +

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

+ +

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

+ +

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

+ +

El mismo diseño con CSS Grid Layout

+ +

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

+ +
    +
  • ¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
    • +
  • ¿Necesito controlar el diseño por filas y por columnas? – usa grid
    • +
+ +

¿Contenido fuera o layout dentro?

+ +

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

+ +

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

+ +

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

+ +

Alineación de Cajas

+ +

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

+ +

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

+ +

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

+ +

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

+
+ +

Alineación en CSS Grid Layout

+ +

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

+
+ +

La unidad fr y flex-basis

+ +

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

+ +

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

+ +

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

+ +

Auto-filling grid tracks

+ +

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

+ +

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

Una cantidad flexible de pistas

+ +

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

+
+ +

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

+ +

El grid y los elementos absolutamente posicionados

+ +

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

+ +

El grid container como bloque contenedor

+ +

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

+ +

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+ +

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

+
+ +

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

+ +

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

+ +

El grid container como parent

+ +

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

+ +

Image of grid container as parent

+ +

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

+ +

Con un grid area como parent

+ +

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

+ +

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

+
+ +

Grid y display: contents

+ +

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

+ +
+

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

+
+ +

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

+ +

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

+ + diff --git a/files/es/web/css/css_logical_properties/basic_concepts/index.html b/files/es/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..a90c3b016f --- /dev/null +++ b/files/es/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,71 @@ +--- +title: Conceptos básicos de las Propiedades y Valores Lógicos +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

La Especificación de Propiedades y Valores Lógicos introduce asignaciones relativas al flujo para muchas de las propiedades y valores en CSS. Este artículo introduce la especificación y explica las propiedades y valores relativos al flujo.

+ +

¿Por qué necesitamos propiedades lógicas?

+ +

Tradicionalmente CSS ha medido las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, decimos que las cajas tienen un ancho ({{CSSxRef("width")}}) y un alto ({{CSSxRef("height")}}), posicionamos elementos, los flotamos, les asignamos bordes, márgenes y rellenos arriba (top), a la derecha (right), abajo (bottom), a la izquierda ( left), etc. La especificación de Propiedades y valores Logicos define una asignación de esos valores físicos a su lógica, o flujo relativo — por ejemplo, comienzo (start) y final (end) en oposición a izquierda (left) y derecha (right) / arriba (top) y abajo (bottom) .

+ +

Un ejemplo de por qué esas asignaciones podrían ser necesarias es el siguiente: tengo el diseño de una pantalla usando CSS Grid, el contenedor de la rejilla tiene un ancho y estoy usando las propiedades {{CSSxRef("align-self")}} y {{CSSxRef("justify-self")}} para alinear los elementos dentro del contenedor. Esas propiedades son de flujo relativo — justify-self: start alinea el elemento al inicio de la dimensión en línea, align-self: start hace lo mismo en la dimensión bloque.

+ +

A grid in a horizontal writing mode

+ +

Si ahora cambio el modo de escritura para este componente a vertical-rl usando la propiedad {{CSSxRef("writing-mode")}}, la alineación sigue trabajando de la misma forma. La dimensión en línea está ahora de forma vertical y la dimensión bloque de forma horizontal. Sin embargo, la rejilla no se ve igual ya que el ancho asignado para el contenedor es una medida horizontal, vinculada a la posición física y no a la posición lógica o al flujo relativo del texto.

+ +

A grid in vertical writing mode.

+ +

Si en lugar de usar la propiedad width usamos la propiedad lógica {{CSSxRef("inline-size")}}, el componente funciona de la misma forma sin importar en qué modo de escritura se encuentre.

+ +

A grid layout in vertical writing mode

+ +

Puedes probar lo anterior en el siguiente ejemplo en vivo. Cambia la propiedad writing-mode de vertical-rl a horizontal-tb en .box para mirar cómo cambia el diseño con las diferentes propiedades.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

Cuando trabajamos en un sitio con un modo de escritura diferente al predeterminado (horizontal) o por razones creativas, ser capaces de relacionarnos con el flujo del contenido tiene mucho sentido.

+ +

Dimensiones de bloque y en línea

+ +

Dos conceptos claves para trabajar con las propiedades y valores al flujo relativo, son las dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño de CSS como Flexbox y Grid usan los conceptos de bloque (block) y en línea (inline) en vez de usar los conceptos de derecha (right) e izquierda (left) / arriba (top) y abajo (bottom) para alinear elementos.

+ +

La dimensión en línea (inline) es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en español con el texto ejecutándose horizontalmente de izquierda a derecha o un documento árabe con el texto ejecutándose horizontalmente de derecha a izquierda, la dimensión en línea es horizontal. Si cambiamos a un modo de escritura vertical (por ejemplo, un documento japonés), la dimensión en línea ahora es vertical, ya que las líneas en ese modo de escritura se ejecutan verticalmente.

+ +

La dimensión en bloque es la dimensión en la que los bloques —como los párrafos— se muestran uno después del otro. Tanto en español como en árabe, los bloques se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.

+ +

El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura horizontal:

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura vertical:

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Soporte en navegadores

+ +

Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos en términos de la compatibilidad actual del navegador. Algunas de las propiedades son esencialmente asignadas desde la versión física, por ejemplo {{CSSxRef("inline-size")}} por {{CSSxRef("width")}} o {{CSSxRef("margin-inline-start")}} en lugar de {{CSSxRef("margin-left")}}. Esa asignación de propiedades se está comenzando a ver bien en los diferentes navegadores; sin embargo, si miras la página de cada propiedad en la referencia en MDN, verás que el único navegador moderno que no cuenta con estas propiedades es Edge.

+ +

Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.

+ +
+

Nota: CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es #1282.

+
+ +

Pruebas para el soporte en navegadores

+ +

Puedes probar el soporte de las propiedades y valores lógicos usando feature queries. Por ejemplo, {{CSSxRef("width")}}, prueba para {{CSSxRef("inline-size")}} y, si esto es soportado, establece el ancho (width) en automático (auto) y el tamaño en línea (inline-size) al valor del ancho (width) original.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

Mira también

+ + diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html new file mode 100644 index 0000000000..a5a9b4063c --- /dev/null +++ b/files/es/web/css/css_logical_properties/dimensionamiento/index.html @@ -0,0 +1,89 @@ +--- +title: Dimensionamiento para propiedades lógicas +slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

+ +

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

+ +

Asignaciones para dimensiones

+ +

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

+ +

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Ejemplo de ancho y alto

+ +

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

+ +

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Ejemplo de ancho y alto mínimo

+ +

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
+
+ Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

+ +

 

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Ejemplo de ancho y alto máximo

+ +

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Palabras claves para redimensionamiento lógico

+ +

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

+ +

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

+ +

 

+
diff --git a/files/es/web/css/css_logical_properties/floating_and_positioning/index.html b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..2f1654079f --- /dev/null +++ b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,206 @@ +--- +title: Propiedades lógicas para flotantes y posicionamiento +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +
 
+ +

La especificación de Propiedades y Valores Lógicos contiene una asignación para los valores físicos {{cssxref("float")}} y {{cssxref("clear")}}, y también para las propiedades de posicionamiento usadas con positioned layout. Esta guía nos permite saber cómo utilizar estas propiedades.

+ +

Asignando propiedades y valores

+ +

La tabla a continuación detalla las propiedades y valores discutidos en esta guía junto con sus asignaciones físicas. Estas, asumen un modo de escritura ({{cssxref("writing-mode")}}), con una dirección de izquierda a derecha (left-to-right).

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Propiedad o valor lógico

+ 		+

Propiedad o valor lógico

+
+

{{cssxref("float")}}: inline-start

+ 		+

{{cssxref("float")}}: left

+
+

{{cssxref("float")}}: inline-end

+ 		+

{{cssxref("float")}}: right

+
+

{{cssxref("clear")}}: inline-start

+ 		+

{{cssxref("clear")}}: left

+
+

{{cssxref("clear")}}: inline-end

+ 		+

{{cssxref("clear")}}: right

+
+

{{cssxref("inset-inline-start")}}

+ 		+

{{cssxref("left")}}

+
+

{{cssxref("inset-inline-end")}}

+ 		+

{{cssxref("right")}}

+
+

{{cssxref("inset-block-start")}}

+ 		+

{{cssxref("top")}}

+
+

{{cssxref("inset-block-end")}}

+ 		+

{{cssxref("bottom")}}

+
+

{{cssxref("text-align")}}: start

+ 		+

{{cssxref("text-align")}}: left

+
+

{{cssxref("text-align")}}: end

+ 		+

{{cssxref("text-align")}}: right

+
+ +

 

+ +

Además de estas propiedades asignadas, hay algunas propiedades abreviadas adicionales que son posibles al poder abordar las dimensiones de bloque y en línea. Estos no tienen mapeo a las propiedades físicas.

+ + + + + + + + + + + + + + + + + + + + + + +
+

Propiedad lógica

+ 		+

Propósito

+
+

{{cssxref("inset-inline")}}

+ 		+

Establece los dos valores de inserción anteriores para la dimensión en línea simultáneamente.

+
+

{{cssxref("inset-block")}}

+ 		+

Establece los dos valores de inserción anteriores para la dimensión de bloque simultáneamente.

+
+

{{cssxref("inset")}}

+ 		+

Establece los cuatro valores de inserción simultáneamente.

+
+ +

 

+ +

Flotante y ejemplo claro

+ +

Los valores físicos usados con las propiedades {{cssxref("float")}} y {{cssxref("clear")}} son left, right y both. La especificación de las Propiedades Lógicas definen los valores inline-start y inline-end como asignación para left y right.

+ +

En el ejemplo de abajo tenemos dos cajas — la primera tiene una caja flotante con float: left, la segunda con float: inline-start. Si tu cambias el modo de escritura (writing-mode) a vertical-rl o la dirección (direction) a rtl verás que la caja flotando a la izquierda siempre se queda en la izquierda, mientras que el ítem inline-start-floated sigue la dirección (direction) y el modo de escritura (writing-mode).

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

Ejemplo: Propiedades de inserción para diseño posicionado

+ +

El posicionamiento generalmente nos permite posicionar un elemento de una manera relativa al bloque de contención — esencialmente, insertamos el elemento en relación con el lugar donde caería en función del flujo normal. Para hacer esto, hemos usado popiedades físicas como {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} y {{cssxref("left")}}.

+ +

Estas propiedades toman una longitud o un porcentaje como valor y se relacionan con las dimensiones de la pantalla del usuario.

+ +

Se han creado nuevas propiedades en la especificación de Propiedades Lógicas para cuando desee que el posicionamiento se relacione con el flujo de texto en su modo de escritura. Estos son los siguientes: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} y {{cssxref("inset-inline-end")}}.

+ +

En el siguiente ejemplo hemos usado las propiedades inset-block-start y inset-inline-end para posicionar la caja azul usando un posicionamiento absoluto dentro del área con el borde punteado de color gris, que tiene position: relative. Podemos cambiar la propiedad de modo de escritura (writing-mode) a vertical-rl, o agregar direction: rtl, y ver cómo el cuadro de flujo relativo se mantiene con la dirección del texto.

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

Nuevas abreviaciones de dos- y cuatro-valores

+ +

Al igual que con otras propiedades en la especificación, tenemos algunas propiedades abreviadas nuevas, que permiten configurar dos o cuatro valores a la vez. Estos no tienen una equivalencia directa a propiedades físicas.

+ +
    +
  • +

    {{cssxref("inset")}} — pone los cuatro lados juntos.

    +
    • +
  • +

    {{cssxref("inset-inline")}} — pone los dos en línea juntos.

    +
    • +
  • +

    {{cssxref("inset-block")}} — pone los dos bloques juntos.

    +
    • +
+ +
+

Nota: Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.

+
+ +

Ejemplo: Valores lógicos para text-align

+ +

La propiedad {{cssxref("text-align")}} tiene valores lógicos que se relacionan con la dirección del texto. — en lugar de usar left y right usamos start y end. En el siguiente ejemplo tenemos text-align: right en el primer bloque y text-align: end en el segundo.

+ +

Si cambias el valor de la dirección (direction) a rtl verás que la alineación permanece a la derecha para el primer bloque, pero va al extremo lógico en el segundo bloque.

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

Esto funciona de una manera más consistente cuando se usa la alineación de caja que usa inicio y final en lugar de direcciones físicas para la alineación.

diff --git a/files/es/web/css/css_logical_properties/index.html b/files/es/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..3271fee1c4 --- /dev/null +++ b/files/es/web/css/css_logical_properties/index.html @@ -0,0 +1,172 @@ +--- +title: Propiedades y Valores Lógicos de CSS +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - Propiedades lógicas + - Referencia + - Valores lógicos + - Visión general +translation_of: Web/CSS/CSS_Logical_Properties +--- +
{{CSSRef}}
+ +

CSS Logical Properties (las propiedades lógicas en CSS) son un módulo de CSS que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.

+ +

Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en CSS 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.  

+ +

Dimensiones de bloque y en línea

+ +

Las propiedades y valores lógicos usan los términos abstractos de bloque (block) y en línea (inline) para describir la dirección en la que fluyen. El sentido físico de estos términos depende del modo de escritura.

+ +
+
Dimensión de bloque
+
Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.
+
Dimensión en línea
+
Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.
+
+ +

Referencia

+ +

Propiedades para dimensionamiento

+ +
+
    +
  • {{CSSxRef("block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
    • +
+
+ +

Propiedades para márgenes, bordes y relleno

+ +
+
    +
  • {{CSSxRef("border-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-color")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-style")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("border-width")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("margin")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Propiedades para flotantes y posicionamiento

+ +
+
    +
  • {{CSSxRef("clear")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("float")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("inset")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Otras propiedades

+ +
+
    +
  • {{CSSxRef("caption-side")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("resize")}} {{Experimental_Inline}} (block {{Experimental_Inline}} y inline {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("text-align")}} (end {{Experimental_Inline}} y start {{Experimental_Inline}} palabras claves)
    • +
+
+ +

Propiedades obsoletas

+ +
+
    +
  • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
    • +
+
+ +

Guías

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

En general:

+ +
    +
  • Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.
    • +
  • Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.
    • +
  • Edge actualmente no tiene soporte.
    • +
  • Firefox 66 introduce soporte para dos valores abreviados.
    • +
+ +

Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.

diff --git a/files/es/web/css/css_logical_properties/margins_borders_padding/index.html b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..198bf38300 --- /dev/null +++ b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,298 @@ +--- +title: 'Propiedades lógicas para márgenes, bordes y rellenos' +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

La especificación de Propiedades y Valores Lógicos define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.

+ +

Si ha visto la página principal de Propiedades y Valores Lógicos de CSS, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.

+ +

Asignaciones para márgenes, bordes, y rellenos

+ +

La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura ({{cssxref("writing-mode")}}) en uso es horizontal-tb — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y {{cssxref("margin-inline-start")}} debería ser quivalente a {{cssxref("margin-left")}}.

+ +

Si usaste el modo de escritura horizontal-tb con una dirección del texto de derecha a izquierda, entonces {{cssxref("margin-inline-start")}} debería ser el mismo que {{cssxref("margin-right")}}, y en un modo de escritura vertical esto debería ser el mismo que usar {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedad LógicaPropiedad Física
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadPropósito
{{cssxref("border-block")}}Establece {{cssxref("border-color")}}, {{cssxref("border-style")}}, y {{cssxref("border-width")}} para ambos bordes de bloque.
{{cssxref("border-block-color")}}Establece  border-color para ambos bordes de bloque.
{{cssxref("border-block-style")}}Establece  border-style para ambos bordes de bloque.
{{cssxref("border-block-width")}}Establece  border-width para ambos bordes de bloque.
{{cssxref("border-inline")}}Establece  border-color, -style, y -width para ambos bordes en línea.
{{cssxref("border-inline-color")}}Establece  border-color para ambos bordes en línea.
{{cssxref("border-inline-style")}}Establece  border-style para ambos bordes en línea.
{{cssxref("border-inline-width")}}Establece border-width para ambos bordes en línea.
{{cssxref("margin-block")}}Establece todos los {{cssxref("margin")}}s en bloque.
{{cssxref("margin-inline")}}Establece todos los margins en línea.
{{cssxref("padding-block")}}Establece {{cssxref("padding")}} en bloque.
{{cssxref("padding-inline")}}Establece el padding en línea.
+ +

Ejemplo para márgenes

+ +

Las propiedades asignadas para márgenes de {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, y {{cssxref("margin-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.

+ +

En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.

+ +

Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad {{cssxref("direction")}} a rtl para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.

+ +

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

Abreviaciones para márgenes

+ +

Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, {{cssxref("margin-inline")}} y {{cssxref("margin-block")}}, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.

+ +

En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Nota: Las propiedades abreviadas margin-inline y margin-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

+
+ +

Ejemplos para rellenos (Paddings)

+ +

Las propiedades asignadas para rellenos de {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, y {{cssxref("padding-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.

+ +

En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (writing-mode) de horizontal-tb, en ambas cajas aparecerán lo mismo.

+ +

Intenta cambiar la propiedad direction a rtl para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.

+ +

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

Abreviaciones para rellenos (paddings)

+ +

Como con las márgenes, hay dos abreviaciones para rellenos — {{cssxref("padding-inline")}} y {{cssxref("padding-block")}} — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.

+ +

En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note: Las abreviaciones de las propiedades padding-inline y padding-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

+
+ +

Ejemplos para bordes

+ +

Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos longhands para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.

+ +

El siguiente demo usa algunas longhands y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad direction a rtl para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (writing-mode) de horizontal-tb a vertical-rl.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

Nuevas abreviaciones para bordes

+ +

Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Nota: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.

+
+ +

Flujo de propiedades relativas del border-radius

+ +

 

+ +

La especificación ha agregado recientemente valores relativos al flujo para las longitudes {{cssxref ("border-radius")}}. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.

+ +

 

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

Indicating logical values for the 4-value shorthand syntax

+ +

La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de margin, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en este issue.

+ +

El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades longhand por el momento.

+ +

 

diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html new file mode 100644 index 0000000000..320800f82e --- /dev/null +++ b/files/es/web/css/css_modelo_caja/index.html @@ -0,0 +1,165 @@ +--- +title: Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja +tags: + - CSS + - Modelo de Caja CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

+ +

Referencia

+ +

Propiedades

+ +

Propiedades que controlan el flujo del contenido en una caja.

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Propiedades que controlan el tamaño de una caja.

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Propiedades que controlan los márgenes de una caja.

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Propiedades que controlan los rellenos de una caja

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Otras propiedades

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guías y Herramientas

+ +
+
Introduction to the CSS box model
+
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
+
Mastering margin collapsing
+
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
+
Box-shadow generator
+
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" new file mode 100644 index 0000000000..45571faf77 --- /dev/null +++ "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" @@ -0,0 +1,66 @@ +--- +title: Introducción al Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS +tags: + - CSS + - Guía + - Modelo de Caja + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

+ +

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

+ +

CSS Box model

+ +

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

+ +

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

+ +

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

+ +

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

+ +

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

+ +

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

+ +

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

+ +

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

+ +

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{css_key_concepts}}
    • +
  • Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • +
diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..dafdf71855 --- /dev/null +++ b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html @@ -0,0 +1,96 @@ +--- +title: Entendiendo el colapso de margen +slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

+ +

El colapso de margen ocurre en tres casos básicos:

+ +
+
Hermanos adjacentes
+
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
+
Padre y primer/último hijo
+
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
+
Bloques vacíos
+
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
+
+

Cosas a tener en cuenta:

+ + +
    +
  • Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
    • +
  • Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
    • +
  • Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
    • +
  • Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
    • +
+ +

Ejemplos

+ +

HTML

+ +
<p>El margen inferior de este párrafo está colapsado ....</p>
+<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
+
+<div>Este elemento padre contiene dos párrafos!
+  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
+  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
+</div>
+
+<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

+ + + +

 

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

También puedes ver

+ + +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/es/web/css/css_motion_path/index.html b/files/es/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..4d439b2126 --- /dev/null +++ b/files/es/web/css/css_motion_path/index.html @@ -0,0 +1,78 @@ +--- +title: CSS Motion Path +slug: Web/CSS/CSS_Motion_Path +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{seecompattable}}
+ +

Motion Path es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.

+ +

La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un “path”, anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con {{cssxref("offset-path")}} puedes definir un "path" específico  de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando {{cssxref("offset-distance")}}, y variar la rotación en algún punto usando {{cssxref("offset-rotate")}}.

+ +

Ejemplo básico

+ +
<div id="motion-demo"></div>
+
+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

{{EmbedLiveSample('Basic_example', '100%', 150)}}

+ +

Referéncia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-anchor")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-position")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

Espedificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Initial definition.
+ +

Compatibilidad de Browsers

+ +

offset property

+ +
+ + +

{{Compat("css.properties.offset-path")}}

+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Agregando {{ cssxref("z-index") }}

+ +

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

+ +

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

+ +
+

Precaución: z-index solo tiene efecto si un elemento es posicionado.

+
+ +
    +
  • bottom: el más lejano al observador
    • +
  • ...
    • +
  • Capa -3
    • +
  • Capa -2
    • +
  • Capa -1
    • +
  • Capa 0capa de renderizado por defecto
    • +
  • Capa 1
    • +
  • Capa 2
    • +
  • Capa 3
    • +
  • ...
    • +
  • top: el más cercano al observador
    • +
+ +
+

Notas:

+ +
    +
  • Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
    • +
  • Si varios elementos comparten el mismo valor z-index (i.e. están situados en la misma capa), las reglas de apilamiento explicadas en la sección Apilando sin z-index son aplicadas.
    • +
+
+ +

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

+ +

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Adding z-index</title>
+    <style type="text/css">
+
+    div {
+        opacity: 0.7;
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #normdiv {
+        z-index: 8;
+        height: 70px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv1 {
+        z-index: 3;
+        height: 100px;
+        position: relative;
+        top: 30px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv2 {
+        z-index: 2;
+        height: 100px;
+        position: relative;
+        top: 15px;
+        left: 20px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #absdiv1 {
+        z-index: 5;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        left: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        z-index: 1;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        right: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    </style>
+</head>
+
+<body>
+
+    <br /><br />
+
+    <div id="absdiv1">
+        <br /><span class="bold">DIV #1</span>
+        <br />position: absolute;
+        <br />z-index: 5;
+    </div>
+
+    <div id="reldiv1">
+        <br /><span class="bold">DIV #2</span>
+        <br />position: relative;
+        <br />z-index: 3;
+    </div>
+
+    <div id="reldiv2">
+        <br /><span class="bold">DIV #3</span>
+        <br />position: relative;
+        <br />z-index: 2;
+    </div>
+
+    <div id="absdiv2">
+        <br /><span class="bold">DIV #4</span>
+        <br />position: absolute;
+        <br />z-index: 1;
+    </div>
+
+    <div id="normdiv">
+        <br /><span class="bold">DIV #5</span>
+        <br />no positioning
+        <br />z-index: 8;
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Apilamiento y float

+ +

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. +
+ +

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

+ +

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Descendientes en línea en el flujo normal
    5. +
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. +
+ +
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+ +

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+ +

Código fuente de ejemplo

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 1 del contexto de apilamiento

+ +

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

+ +

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

+ +

Stacking context example 1

+ +

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

+ +

Stacking context example 1

+ +

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

+ +

Stacking context example 1

+ +

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

+ +

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+ +

Ejemplo

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 2 del contexto de apilamiento

+ +

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+ +

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

+ +

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

+ +

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +

« CSS « Understanding CSS z-index

+ +

Ejemplo 3 del contexto de apilamiento

+ +

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

+ +

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

+ +

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+ +

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

+ +

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

+ +

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

+ +

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • NIVEL #1 +
        +
      • NIVEL #2 (z-index: 1) +
          +
        • NIVEL #3
          • +
        • ...
          • +
        • NIVEL #3
          • +
        +
        • +
      • NIVEL #2 (z-index: 1)
        • +
      • ...
        • +
      • NIVEL #2 (z-index: 1)
        • +
      +
      • +
    • NIVEL #1
      • +
    • ...
      • +
    • NIVEL #1
      • +
    +
    • +
+ +

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

+ +
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

+ +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

El contexto de apilamiento

+ +

 

+ +

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

+ +

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

+ +
    +
  • sea el elemento raiz (HTML),
    • +
  • tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
    • +
  • un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
    • +
  • sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira la especificación de opacity),
    • +
  • elementos con un valor  {{cssxref("transform")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
    • +
  • elementos con un valor {{cssxref("filter")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("perspective")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("isolation")}} igual a "isolate",
    • +
  • position: fixed
    • +
  • especifican cualquier atributo superior en {{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente (Mira este post)
    • +
  • elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
    • +
+ +

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

+ +

En resumen:

+ +
    +
  • Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
    • +
  • Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
    • +
  • Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
    • +
  • Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
    • +
+ +
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+ +

El ejemplo

+ +

Example of stacking rules modified using z-index

+ +

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

+ +
    +
  • Raíz +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

+ +
+

Notas:

+ +
    +
  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
    • +
  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
    • +
  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
    • +
  • Una forma fácil de descubrir el orden de renderizado de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): +
      +
    • Raíz +
        +
      • El valor z-index de DIV #2 es 2
        • +
      • El valor z-index de DIV #3 es 4 +
          +
        • El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
          • +
        • El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
          • +
        • El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
          • +
        +
        • +
      • El valor z-index de DIV #1 es 5
        • +
      +
      • +
    +
    • +
+
+ +

Ejemplo

+ +

HTML

+ +
    <div id="div1">
+      <h1>Division Element #1</h1>
+      <code>position: relative;<br/>
+      z-index: 5;</code>
+    </div>
+
+    <div id="div2">
+      <h1>Division Element #2</h1>
+      <code>position: relative;<br/>
+      z-index: 2;</code>
+    </div>
+
+    <div id="div3">
+
+      <div id="div4">
+        <h1>Division Element #4</h1>
+        <code>position: relative;<br/>
+        z-index: 6;</code>
+      </div>
+
+      <h1>Division Element #3</h1>
+      <code>position: absolute;<br/>
+      z-index: 4;</code>
+
+      <div id="div5">
+        <h1>Division Element #5</h1>
+        <code>position: relative;<br/>
+        z-index: 1;</code>
+      </div>
+
+      <div id="div6">
+        <h1>Division Element #6</h1>
+        <code>position: absolute;<br/>
+        z-index: 3;</code>
+      </div>
+    </div>
+
+ +

CSS

+ +
* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '556', '396') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+ +
+

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

+
+ +

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

+ +

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

+ +

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+ +
    +
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. +
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. +
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. +
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. +
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. +
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. +
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. +
+ +

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+ +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Fecha de última actualización: 9 de Julio del 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Apilando sin z-index

+ +

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

+ +
    +
  1. El fondo y los bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. +
+ +

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

+ +
+

Notas:

+ +
    +
  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
    • +
  • +

    Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

    +
    • +
+
+ +

understanding_zindex_01.png

+ +

 

+ +

Ejemplo

+ +

HTML

+ +
<div id="absdiv1">
+    <br /><span class="bold">DIV #1</span>
+    <br />position: absolute; </div>
+<div id="reldiv1">
+    <br /><span class="bold">DIV #2</span>
+    <br />position: relative; </div>
+<div id="reldiv2">
+    <br /><span class="bold">DIV #3</span>
+    <br />position: relative; </div>
+<div id="absdiv2">
+    <br /><span class="bold">DIV #4</span>
+    <br />position: absolute; </div>
+<div id="normdiv">
+    <br /><span class="bold">DIV #5</span>
+    <br />no positioning </div>
+
+ +

CSS

+ +
 .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/index.html b/files/es/web/css/css_positioning/index.html new file mode 100644 index 0000000000..84e1b5036f --- /dev/null +++ b/files/es/web/css/css_positioning/index.html @@ -0,0 +1,115 @@ +--- +title: Posicionamiento CSS +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +

{{CSSRef}}

+ +

Posicionamiento CSS es un módulo de CSS que define cómo posicionar elementos absoluta y relativamente en la página.

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("visibility")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

Guías

+ +
+
Entendiendo la propiedad CSS z-index
+
Presenta la noción de contexto de apilamiento y explica cómo funciona el ordenamiento en el eje-Z a través de varios ejemplos.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_properties_reference/index.html b/files/es/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..3c18918a01 --- /dev/null +++ b/files/es/web/css/css_properties_reference/index.html @@ -0,0 +1,314 @@ +--- +title: CSS Properties Reference +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS + - Estilos + - Propiedades + - Referencia +translation_of: Web/CSS/CSS_Properties_Reference +--- +

Propiedades CSS Básicas Referencia

+ +

La siguiente lista es una lista de la propiedades CSS más comunes junto con su equivalente en notación DOM que es cómo son normalmente accedidas desde JavaScript.

+ +
Note:  Es una lista incompleta. Para descubrir más propiedades CSS visita  la referencia principal CSS y  and las Extensiones CSS de Mozilla. Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html new file mode 100644 index 0000000000..59c2a9b328 --- /dev/null +++ b/files/es/web/css/css_reglas_condicionales/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Reglas Condicionales +slug: Web/CSS/CSS_Reglas_Condicionales +tags: + - CSS + - Referencia +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

+ +

Referencia

+ +

Reglas condicionales

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_transforms/index.html b/files/es/web/css/css_transforms/index.html new file mode 100644 index 0000000000..0467567c73 --- /dev/null +++ b/files/es/web/css/css_transforms/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
+
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ 36

+ 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
+ 10.0		10.5{{property_prefix("-o")}}
+ 12.10
+ 15.0{{property_prefix("-webkit")}}
+ 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
+ 36		10.0{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
+ 23		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+ +

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+ +

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+ +

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+ +

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+ +

 

diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.html b/files/es/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..ac73ecaafc --- /dev/null +++ b/files/es/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,225 @@ +--- +title: Uso de CSS transforms +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.

+ +

Propiedades de las transformaciones CSS

+ +

Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }}

+ +
+
{{ cssxref("transform-origin") }}
+
Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.
+
{{ cssxref("transform") }}
+
Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.
+
+ +

Ejemplos

+ +

Esta es una imagen inalterada del logo de MDN:

+ +

MDN Logo

+ +

Ejemplo: Rotando

+ +

Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

+ +

Ejemplo: Torciendo y desplazando

+ +

Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

Propiedades CSS específicas para 3D

+ +

Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.

+ +

Definiendo una perspectiva

+ +

El primer elemento a definir es la perspectiva. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.

+ +

Definímos como de rápido se encogen con la propiedad {{ cssxref("perspective") }}. Cuánto más pequeño sea el valor, más profunda será la perspectiva.

+ +
+ + + + + + + + + + + + + +
perspective:0;perspective:250px;
+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

El segundo elemento a configurar es la posición del espectador, con la propiedad {{ cssxref("perspective-origin") }}. Por defecto, la perspectiva está centrada en el espectad

+ +

{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

+ +

or, pero no siempre es lo adecuado.

+ +
+ + + + + + + + + + + + + +
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;
+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.

+ +

2D elements in the 3D space

+ +

See also

+ + diff --git a/files/es/web/css/css_transitions/index.html b/files/es/web/css/css_transitions/index.html new file mode 100644 index 0000000000..1855888e7d --- /dev/null +++ b/files/es/web/css/css_transitions/index.html @@ -0,0 +1,60 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - Experimental + - Referencia + - Transiciones CSS + - Vista general +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Transiciones CSS es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

Guías

+ +
+
Using CSS transitions
+
Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Definición Inicial
+ +

Ver además

+ +
    +
  • Transiciones relacionadas, CSS Animations pueden producir animaciones independientemente de los cambios en los valores.
    • +
diff --git a/files/es/web/css/css_types/index.html b/files/es/web/css/css_types/index.html new file mode 100644 index 0000000000..bdb0c5386e --- /dev/null +++ b/files/es/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos de datos básicos de CSS +slug: Web/CSS/CSS_Types +tags: + - CSS + - Referencia + - Tipo de Dato CSS + - Visión general +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Los tipos de datos básicos de CSS definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de valor de componente.

+ +

En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".

+ +

Referencia

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<single-transition-timing-function>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definición Inicial.
diff --git a/files/es/web/css/css_writing_modes/index.html b/files/es/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..1eb0bb2d15 --- /dev/null +++ b/files/es/web/css/css_writing_modes/index.html @@ -0,0 +1,52 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS Writing Modes es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y  derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html new file mode 100644 index 0000000000..d8a0080831 --- /dev/null +++ b/files/es/web/css/cursor/index.html @@ -0,0 +1,322 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Referencia_CSS +translation_of: Web/CSS/cursor +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.

+ + + +

Sintaxis

+ +
cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | CSS:inherit ;
+
+ +
cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;
+
+ +

Values

+ +
+
<url> {{ mediawiki.external(' ') }}? 
+
URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea Uso_de_URL_como_valor_de_la_propiedad_cursor para mas detalles.
+
<std-cursor-name>
+
Algunos nombres de cursores se encuentra en la siguiente tabla.
+
+ +

Supported CSS standard values

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categoríanombre de CSSDescripción
GeneralautoEl browser (user agent) determina el cursor que mostrara basado en el contenido presente.
+ E.g. equivalent to text when hovering text
defaultdefault cursor (typically an arrow)
noneno cursor is rendered {{ Fx_minversion_inline(3) }}
Links & statuscontext-menucursor indicating that a context menu is available under the cursor
helpcursor indicating help is available
pointercursor used when over links (typically a hand)
progresscursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for wait)
waitcursor indicating the program is busy (sometimes an hourglass or a watch)
Selectioncellcursor indicating that cells can be selected
crosshaircross cursor, often used to indicate selection in a bitmap
textcursor indicating text can be selected (typically an I-beam)
vertical-textcursor indicating that vertical text can be selected (typically a sideways I-beam)
Drag and dropaliascursor indicating an alias or shortcut is to be created
copycursor indicating that something can be copied
movethe hovered object may be moved
no-dropcursor showing that a drop is not allowed at the current location
not-allowedcursor showing that something cannot be done
Resize & scrollingall-scrollcursor showing that something can be scrolled in any direction (panned)
col-resizecursor for resizing columns horizontally
e-resizecursor for resizing the right edge of a box
ew-resizecursor for resizing left or right
n-resizecursor for resizing the top edge of a box
ne-resizecursor for resizing the top right corner of a box
nesw-resizecursor for resizing in the top-right or bottom-left directions
ns-resizecursor for resizing up or down
nw-resizecursor for resizing the top left corner of a box
nwse-resizecursor for resizing in the top-left or bottom-right directions
row-resizecursor for resizing rows vertically
s-resizecursor for resizing the bottom edge of a box
se-resizecursor for resizing the bottom right corner of a box
sw-resizecursor for resizing the bottom left corner of a box
w-resizecursor for resizing the left edge of a box
+ +

Extended Gecko CSS values

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS nameDescriptionDeprecation
-moz-aliasreplaced by standard value alias as described in the previous tableGecko 1.8a6
-moz-cellreplaced by standard value cell as described in the previous tableGecko 1.8a6
-moz-context-menureplaced by standard value context-menu as described in the previous tableGecko 1.8a6
-moz-copyreplaced by standard value copy as described in the previous tableGecko 1.8a6
-moz-graba cursor value that should indicate that an element or an object in a webpage can be grabbed 
-moz-grabbinga cursor value that should indicate that an element or an object is currently being grabbed 
-moz-spinningreplaced by standard value progress as described in the previous tableGecko 1.7.1
-moz-zoom-inused to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified 
-moz-zoom-outused to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out 
+ +

Examples

+ +

Ver El Ejemplo Vivo

+ +
Inline:
+
+<span style="cursor: crosshair">Some Text</span>
+
+External:
+
+.pointer {
+	cursor: pointer;
+}
+.move {
+	cursor: move;
+}
+
+
+ +

Notes

+ +

While this property works on older browsers, not all values are fully supported.

+ +

Specifications

+ + + +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserLowest Version (<std-cursor-name>)Lowest Version (<url>)
Internet Explorer46 (only .cur files)
Firefox1.01.5
Netscape68
Opera7-
Konqueror3.13.1
Safari1.21.2
Safari (Win)3.03.0
+ +

See also

+ +

{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}

diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

+

Sintaxis

+

La sintaxis de esta propiedad es:

+
cursor: [<url>,]* cursor-genérico;
+
+

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

+

Los siguientes valores están permitidos:

+
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
+
+

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

+

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

+

Un ejemplo de la sintaxis CSS3:

+
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
+
+cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
+
+


+ El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

+

Limitaciones

+

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

+

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

+

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

+

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilidad con otros navegadores

+

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

+
cursor: url(foo.cur);
+
+

O:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/descendant_combinator/index.html b/files/es/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..d5d20aa965 --- /dev/null +++ b/files/es/web/css/descendant_combinator/index.html @@ -0,0 +1,97 @@ +--- +title: Los selectores descendientes +slug: Web/CSS/Descendant_combinator +translation_of: Web/CSS/Descendant_combinator +--- +

{{ CSSRef() }}

+

Sumario

+

El ␣ combinador  (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a selectores hijos , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.

+

Sintaxis

+
selector1 selector2 { propiedades de estilos }
+
+

Ejemplo

+
span { background-color: white; }
+div span { background-color: DodgerBlue; }
+
+
<div>
+  <span>Span 1.
+    <span>Span 2.</span>
+  </span>
+</div>
+<span>Span 3.</span>
+
+

{{ EmbedLiveSample('Example', '', '', '') }}

+

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
Selector CSS Nivel 3{{ Spec2('CSS3 Selectors') }} 
CSS 2.1{{ Spec2('CSS2.1') }} 
CSS 1{{ Spec2('CSS1') }} 
+

Compatibilidad del navegador

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CarracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
CarracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Ver también

diff --git a/files/es/web/css/direction/index.html b/files/es/web/css/direction/index.html new file mode 100644 index 0000000000..7fc0e0cbb8 --- /dev/null +++ b/files/es/web/css/direction/index.html @@ -0,0 +1,54 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/direction +--- +

+

{{ CSSRef() }} +

+

Resumen

+

La propiedad direction se utiliza para indicar en que dirección fluye el texto: {{ Cssxref("rtl") }} para hebreo o árabe y {{ Cssxref("ltr") }} para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código dir en HTML) en lugar que directamente en la hoja de estilo CSS. +

Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad {{ Cssxref("unicode-bidi") }}. Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla. +

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }} +
  • Se aplica a: todos los elementos. +
  • {{ Cssxref("inheritance", "Valor heredado") }}: si +
  • Porcentajes: n/a +
  • Medio: {{ Cssxref("Media:Visual", "visual") }} +
  • {{ Cssxref("computed value", "Valor calculado") }}: +
+

Sintaxis

+
direction: [ ltr | rtl | inherit ] ;
+
+

Valores

+
ltr 
Valor por defecto de direction. El contenido, texto y otros elementos fluyen de izquierda a derecha. +
rtl 
El contenido, texto y otros elementos van de derecha a izquierda.
+

Para que la propiedad direction tenga algún efecto en elementos de tipo en línea (inline), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser embed o override. +

+

Ejemplos

+
blockquote {
+  direction : rtl ;
+}
+
+

Notas

+

Al contrario que el atributo dir en HTML, la propiedad direction no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas. +

+

Especificaciones

+ +

Ver también

+

{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }} +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }} diff --git a/files/es/web/css/display/index.html b/files/es/web/css/display/index.html new file mode 100644 index 0000000000..c5c503619b --- /dev/null +++ b/files/es/web/css/display/index.html @@ -0,0 +1,647 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - Propiedades CSS +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). 

+ +

Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. Vea la siguientes tablas para mas especificaciones individuales.

+ +

Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

+ +
/ * Valores <display-outside> * /
+
+display: block:;
+display: inline;
+display: run-in;
+
+/ * Valores <display-inside> * /
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+display: subgrid;
+
+/ * Valores <display-outside> más valores <display-inside> * /
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/ * Valores <display-listitem> * /
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/ * Valores <display-internal> * /
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/ * Valores <display-box> * /
+display: contents;
+display: none;
+
+/ * Valores <display-legacy> * /
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/ * Valores globales * /
+display: heredar;
+display: initial;
+display: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad display se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:

+ + + +

En la actualidad, es mejor especificar display utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.

+ +

Valores

+ +
+
<display-outside>
+
Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen: + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
blockEl elemento genera un cuadro de elemento de bloque.
inlineEl elemento genera uno o más cuadros de elemento en línea.
run-in {{experimental_inline}}El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.
+
+
<display-inside>
+
Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
flow {{experimental_inline}}El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea). +

Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.

+ +

Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo contexto de formato de bloque para su contenido o integra su contenido en su contexto de formato padre.

+
flow-root {{experimental_inline}}El elemento genera un cuadro de elemento de bloque que establece un nuevo contexto de formato de bloque .
tableEstos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.
flexEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox .
gridEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.
subgrid {{experimental_inline}}Si el elemento padre tiene display:grid, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.
ruby {{experimental_inline}}El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.
+
+
<display-listitem>
+
+

El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.

+ +

Si no se especifica ningún valor <display-inside>, el tipo de pantalla interna de la caja principal es el predeterminado flow. Si no se especifica ningún valor <display-outside>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado block.

+
+
<display-internal>
+
+

Algunos modelos de disposición, como table y ruby, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.

+ +

A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
table-row-groupEstos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML
table-header-groupEstos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.
table-footer-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.
table-rowEstos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.
table-cellEstos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.
table-column-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.
table-columnEstos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.
table-captionEstos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.
ruby-base {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.
ruby-text {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.
ruby-base-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.
ruby-text-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.
+
+
<display-box>
+
Estos valores se definen si un elemento genera cuadros de visualización en absoluto. + + + + + + + + + + + + + + + + + +
ValorDescripción
contents {{experimental_inline}}Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.
none +

Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.

+ +

Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.

+
+
+
<display-legacy>
+
CSS 2 usó una sintaxis de palabra clave única para la propiedad display, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue: + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
inline-block +

El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)

+ +

Es equivalente a inline flow-root.

+
inline-table +

El  valor inline-table no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.

+ +

Es equivalente a  inline table.

+
inline-flex +

El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.

+ +

Es equivalente a  inline flex.

+
inline-gridEl elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Sobre Accesibilidad

+ +

display: none;

+ +

Al utilizar un valor de none en la propiedad display el elemento se elimina del árbol de accesibilidad. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.

+ +

Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar un método alternativo con una combinación de propiedades de CSS.

+ +

display: contents;

+ +

Los navegadores eliminarán el atributo predeterminado de role de cualquier elemento con una propiedad display que tenga un valor de contents del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.

+ +

Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos

+ + + +

Tablas

+ +

Al trabajar con una tabla, si la propiedad display cambia al valor de block, grid o flex se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.

+ +

Para más información por favor referirse a los siguientes artículos:

+ + + +

Ejemplos

+ +

Ocultar Elementos

+ +

Contenido HTML

+ +
<p> Texto visible </ p>
+ +

Contenido CSS

+ +
  display: none;
+ +

Resultado

+ +

{{EmbedLiveSample ("Hide_element", 300, 60)}}

+ +

Ver El Ejemplo Vivo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}{{Spec2 ('Pantalla CSS3')}}Agregado run-in, flow, flow-root, contents, y los valores de varias palabras clave.
{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}{{Spec2 ('CSS3 Ruby')}}Agregado ruby, ruby-base, ruby-text, ruby-base-container, y ruby-text-container.
{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}{{Spec2 ('Cuadrícula CSS3')}}Se agregaron los valores del modelo de cuadrícula.
{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}{{Spec2 ('CSS3 Flexbox')}}Se agregaron los valores del modelo de caja flexible.
{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}{{Spec2 ('CSS2.1')}}Se agregaron los valores del modelo de tabla e inline-block.
{{SpecName ('CSS1', '#display', 'display')}}{{Spec2 ('CSS1')}}Definición inicial. Valores básicos: none, block, inline, y list-item.
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaCromoBordeFirefox (Gecko)explorador de InternetÓperaSafari (WebKit)
none, inlineyblock1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.07,01,0 (85)
inline-block1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}5,5 [4]7,01,0 (85)
list-item1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}6.07,01,0 (85)
run-in {{experimental_inline}}1,0 [5]{{CompatVersionUnknown}}{{CompatNo}}8,07,01,0 (85) [5]
4.0 Eliminado en 325.0 (532.5) Eliminado en 8.0
inline-table1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}8,07,01,0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, Ytable-caption1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}8,07,01,0 (85)
flex +

21.0 {{property_prefix("- webkit")}}

+ +

29,0

+ 		{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}} [1]
+ {{CompatGeckoDesktop("20.0")}}		 +

10 {{property_prefix("- ms")}} [8]
+ 11

+ 		12,50 +

6.1 {{property_prefix("- webkit")}}

+ +

9,0

+
inline-flex21.0 {{property_prefix("- webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}} [1]
+ {{CompatGeckoDesktop("20.0")}}		10 {{property_prefix("- ms")}} [8]
+ 11		12,506.1 {{property_prefix("- webkit")}}
grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatVersionUnknown}} {{property_prefix("- ms")}}{{CompatGeckoDesktop("45.0")}} [6]10.0 {{property_prefix("- ms")}}{{CompatOpera(44)}}TP
inline-grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatVersionUnknown}} {{property_prefix("- ms")}}{{CompatGeckoDesktop("45.0")}} [6]10.0 {{property_prefix("- ms")}}{{CompatOpera(44)}}TP
subgrid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{Experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}} [3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contents {{experimental_inline}}{{CompatChrome(58)}} [7]{{CompatNo}}{{CompatGeckoDesktop("37")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
flow-root{{CompatChrome(58)}}{{CompatUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidBordeFirefox Mobile (Gecko)Teléfono IEOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}7.0 {{property_prefix("- webkit")}}
grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (44)}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (44)}}{{CompatUnknown}}
flow-root{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (45)}}{{CompatUnknown}}
+
+ +

[1] Para activar el soporte de flexbox, para Firefox 18 y 19, el usuario tiene que cambiar la preferencia about: config "layout.css.flexbox.enabled" con true. Flexbox multilínea son compatibles desde Firefox 28.

+ +

[2] Antes de Firefox 37, el valor contents estaba deshabilitado de forma predeterminada, y podría habilitarse configurando el layout.css.display-contents.enabled con preferencia true. En Firefox 37, se habilitó de forma predeterminada, y en Firefox 53 el pref se eliminó por completo.

+ +

[3] CSS Ruby apoyo está detrás de pref "layout.css.ruby.enabled". El usuario tiene que cambiar este pref un verdadero para activarlo.

+ +

[4] Sólo elementos naturales en línea.

+ +

[5]No hay antes de los elementos en línea.

+ +

[6]El soporte de Grid CSS no está prefijado en las compilaciones Nightly / Alpha y detrás de pref "layout.css.grid.enabled" en las compilaciones Beta / Release.

+ +

[7] En Chrome, el valor contents está actualmente desactivado de forma predeterminada, pero se puede habilitar con el indicador "Experimental Plataforma Web características".

+ +

[8] En IE 10, sólo los valores prefijados especiales, -ms-flexboxy -ms-inline-flexbox, se reconocen.

+ +

Ver también

+ +
    +
  • {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}
    • +
  • {{cssxref("flex")}}
    • +
diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html new file mode 100644 index 0000000000..a8bedc65a2 --- /dev/null +++ b/files/es/web/css/elemento_reemplazo/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento de reemplazo +slug: Web/CSS/Elemento_reemplazo +tags: + - CSS + - CSS Referência + - Intermediate +translation_of: Web/CSS/Replaced_element +--- +
+ {{CSSRef()}}
+

Summary

+

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

+

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

+

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

+

Ver tambien:

+
    +
  • {{CSS_key_concepts()}}
    • +
diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html new file mode 100644 index 0000000000..18e6a48310 --- /dev/null +++ b/files/es/web/css/env()/index.html @@ -0,0 +1,27 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - Experimental + - Función CSS + - Variables CSS + - env + - env() +translation_of: Web/CSS/env() +--- +

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

+ +

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

+ +

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.properties.custom-property.env")}}

+
+ +

 

diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html new file mode 100644 index 0000000000..6a42fdb53f --- /dev/null +++ b/files/es/web/css/especificidad/index.html @@ -0,0 +1,239 @@ +--- +title: Especificidad +slug: Web/CSS/Especificidad +tags: + - CSS + - Ejemplo + - Guía + - Principiante + - Web +translation_of: Web/CSS/Specificity +--- +

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

+ +

¿Cómo se calcula?

+ +

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

+ +
+

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

+
+ +

Tipos de selectores

+ +

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

+ +
    +
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. +
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. +
  3. Selectores de ID (p.e., #example).
    4. +
+ +

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

+ +

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

+ +

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

+ +

La excepción !important

+ +

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

+ +

Algunas reglas de oro:

+ +
    +
  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
    • +
  • Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
    • +
  • Nunca uses !important cuando estés intentando escribir un plugin/mashup.
    • +
  • Nunca uses !important en todo el código CSS.
    • +
+ +

En lugar de usar !important, considera:

+ +
    +
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. +
  2. +

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    +
    3. +
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

Cómo se debería usar !important:

+ +
A) Sobrescribiendo los estilos en linea
+ +
    +
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. +
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. +
+ +

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

+ +

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

+ +

B) Otro escenario:

+ +
#someElement p {
+    color: blue;
+}
+
+p.awesome {
+    color: red;
+}
+ +

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

+ +

Cómo sobrescribir !important

+ +

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

+ +

Algunos ejemplos con una gran especificidad:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

B) O añade el mismo selector después de uno existente:

+ +
td {height: 50px !important;}
+ +

C) O reescribe la regla original para evitar el uso de !important.

+ +

Para más información, visita (en inglés):

+ +

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

+ +

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

+ +

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

+ +

http://stackoverflow.com/questions/11178673/how-to-override-important

+ +

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

+ +

La excepción :not

+ +

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

+ +

Aquí tienes un pedazo de CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

cuando se usa con el siguiente HTML:

+ +
<div class="outer">
+  <p>Esto está en el outer div.</p>
+  <div class="inner">
+    <p>Este texto está en el inner div.</p>
+  </div>
+</div>
+
+ +

Debería aparecer en pantalla como:

+ +

Esto está en el outer div
+
+ Este texto está en el inner div

+ +

Especificidad basada en la forma

+ +

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

+ +

Las siguientes declaraciones de estilo:

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

cuando se usan con este marcador:

+ +
<p id="foo">Soy un texto de ejemplo.</p>
+
+ +

Se acabarán viendo así:

+ +

Soy un texto de ejemplo

+ +

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

+ +

Ignorancia de proximidad en el árbol

+ +

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Con el siguiente HTML:

+ +
<html>
+<body>
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+
+ +

Se mostrará como:

+ +

¡Aquí va un título!

+ +

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

+ +

Declaración directa vs estilos heredados

+ +

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +

Con el siguiente HTML:

+ +
<html>
+<body id="parent">
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+ +

Se verá así:

+ +

¡Aquí va un título!

+ +

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

+ +

Consulta también (en inglés)

+ + diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..a60e4408eb --- /dev/null +++ b/files/es/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - Efectos de Filtro + - Función CSS + - Referencia +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

Sintaxis

+ +
blur(radio)
+ +

Parámetros

+ +
+
radio
+
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
+
+ +

Ejemplos

+ +
blur(0)        /* Sin efecto */
+blur(8px)      /* Desenfoque con 8px de radio */
+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/filter-function/brightness()/index.html b/files/es/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..8d51f5d70c --- /dev/null +++ b/files/es/web/css/filter-function/brightness()/index.html @@ -0,0 +1,45 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

Sintaxis

+ +
brightness(valor)
+ +

Parametros

+ +
+
valor
+
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
+
+ +

Ejemplos

+ +
brightness(0%)   /* Completamente negro */
+brightness(0.4)  /* 40% de brillo */
+brightness(1)    /* Sin Efecto */
+brightness(200%) /* Doble de Brillo */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/es/web/css/filter-function/index.html b/files/es/web/css/filter-function/index.html new file mode 100644 index 0000000000..b49712c5d1 --- /dev/null +++ b/files/es/web/css/filter-function/index.html @@ -0,0 +1,65 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - Efectos de Filtro + - Referencia + - Tipos de dato CSS +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

El tipo de datos CSS <filter-function> representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}.

+ +

Sintaxis

+ +

El tipo de datos <filter-function> se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.

+ +
+
blur()
+
Difumina la imagen.
+
brightness()
+
Hace que la imagen sea más brillante o más oscura.
+
contrast()
+
Aumenta o disminuye el contraste de la imagen.
+
drop-shadow()
+
Aplica una sombra paralela detrás de la imagen.
+
grayscale()
+
Convierte la imagen a escala de grises.
+
hue-rotate()
+
Cambia el tono general de la imagen.
+
invert()
+
Invierte los colores de la imagen.
+
opacity()
+
Hace que la imagen sea transparente.
+
saturate()
+
Super-saturado o desaturado la imagen de entrada.
+
sepia()
+
Convierte la imagen a sepia.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}Definición inicial.
+ +

Ver también

+ +
    +
  • Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..e84d5c30d0 --- /dev/null +++ b/files/es/web/css/filter-function/url/index.html @@ -0,0 +1,32 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/filter/index.html b/files/es/web/css/filter/index.html new file mode 100644 index 0000000000..6ae8e8e2dd --- /dev/null +++ b/files/es/web/css/filter/index.html @@ -0,0 +1,1194 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - Filtro + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG +translation_of: Web/CSS/filter +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.

+ +

Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL  a un filtro de un elemento SVG.

+ +
Nota: Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad "filter" no incluida en el estándar que ha quedado en desuso.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
filter: url("filters.svg#filter-id");
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Apply multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

Con una función, use el siguiente código:

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:

+ +
filter: url(file.svg#filter-element-id)
+
+ +

Interpolación

+ +

Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("<url>")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.

+ +
.mydiv { filter: grayscale(50%) }
+
+/* funcion del blanco y negro "grayscale" al 50% y un desenfoque "blur" de 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

Ejemplos del uso de la función  con el recurso SVG se muestran a continuación.

+ +
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+
+ +

Funciones

+ +

Para utilizar la propiedad CSS filter, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones que toman un valor en procentaje (como en el 34%) también aceptan el valor expresado como decimal (como en 0.34 ó .34).

+ +

url()

+ +

La función url() toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.

+ +
filter: url(resources.svg#c1)
+
+ +

blur()

+ +

Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es 0. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.

+ +
filter: blur(5px)
+
+ + + +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','')}}

+ +

brightness()

+ +

Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de 0% convertirá la imagen completamente a negro. Un valor de 100% no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al 100% aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es 1 (equivalente a 100%).

+ +
filter: brightness(0.5)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','')}}

+ +

contrast()

+ +

Ajusta el contraste del elemento. Un valor superior a 0% creará una imagen completamente gris. Un valor de 100% deja al elemento sin cambios. Valores superiores a 100% son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es 1 (equivalente a 100%).

+ +
filter: contrast(200%)
+
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','')}}

+ +

drop-shadow()

+ +

Aplica un efecto de sombra a la imagen. Una  sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo <shadow> (definido en CSS3 Backgrounds), con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad {{cssxref("box-shadow")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro <shadow> son los siguientes:

+ +
+
<offset-x> <offset-y> (requerido)
+
Son dos valores {{cssxref("<length>")}} para establecer la posición de la sobra respecto a la imagen. <offset-x> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <offset-y> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("<length>")}} para unidades posibles.
+ Si ambos valores son 0, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <blur-radius> y/o <spread-radius>).
+
<blur-radius> (opcional)
+
Es un tercer valor {{cssxref("<length>")}}. Mientras mayor sea el valor, mayor será el desenfoque, por lo que la sombra se vuelve más grande y clara. No se permiten valores negativos. Si no es especificado, su valor predeterminado será 0 (el borde de la sombra es nítido).
+
<spread-radius> (opcional)
+
Es el cuarto valor {{cssxref("<length>")}}. Valores positivos harán que la sombra se expanda, y valores negativos harán que la sombra se contraiga. Si no se especifica, su valor predeterminado será 0 (la sombra tendrá el mismo tamaño del elemento). 
+ Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.
+
<color> (opcional)
+
Véanse los valores {{cssxref("<color>")}} para las opciones posibles de palabras clave y notaciones. Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se usa el valor de la propiedad {{cssxref("color")}}. Por otro lado, la sombra en WebKit es transparente, y por lo tanto, es inútil si se omite <color>.
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','')}}

+ +

grayscale()

+ +

Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente a escala de grises. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de 0.

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +

hue-rotate()

+ +

Aplica una rotación de tono (matiz) al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de 0deg deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de 0deg. Aunque no hay valor máximo, el efecto de valores encima de 360deg da la vuelta al círculo de colores.

+ +
filter: hue-rotate(90deg)
+ + + +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+ +

invert()

+ +

Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja a la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de 0.

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +

opacity()

+ +

Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente transparente. Un valor de 100% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de 1. Esta función es similar a la propiedad {{cssxref("opacity")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +

saturate()

+ +

Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente sin saturación. Un valor de 100% deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de 100% son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de 1.

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia()

+ +

Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente sepia. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de 0.

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +

Combinando funciones

+ +

Se puede combinar cualquier número de funciones para manipular la representación de la imagen. Los siguientes ejemplos aumentan el contraste y brillo de la imagen.

+ +
filter: contrast(175%) brightness(3%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome("18.0")}}{{ property_prefix("-webkit") }} [4]{{ CompatGeckoDesktop(35) }} [1] [2]{{ CompatNo() }} [3]{{CompatOpera("15.0")}}{{ property_prefix("-webkit")}}{{ CompatSafari("6.0") }}{{ property_prefix("-webkit") }}
En elementos SVG{{CompatNo}} (See bug 109224){{ CompatGeckoDesktop(35) }}{{ CompatNo}}{{ CompatNo}}{{ CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatAndroid("4.4") }}{{ property_prefix("-webkit")}}{{ CompatGeckoDesktop(35) }} [1] [2]{{ CompatNo() }}22.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}} +

6.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}

+
En elementos SVG{{CompatNo}} (See bug 109224){{ CompatGeckoDesktop(35) }}{{ CompatNo}}{{ CompatNo}}{{ CompatNo}}
+
+ +

[1] Antes de Firefox 34, Gecko solo implementa la forma {{ anch("url()") }} de la propiedad filter; como no estaba implementado el encadenamiento, solo se permitía una url() (o cuando la preferencia layout.css.filters.enabled era establecida a false).
+
+ [2] Los valores funcionales de filter son controlados por la preferencia layout.css.filters.enabled, pero fue deshabiliada en Firefox 34.

+ +

[3] Internet Explorer 4.0 a 9.0 implementan una propiedad filter que no es estándar. La sintáxis era completamente diferente del estándar, y no está documentada aquí.

+ +

[4] En Chrome 18 a 19, la función saturate() solo toma enteros, en vez de decimales o porcentajes. Este bug fue corregido en Chrome 20 y superiores.

+ +

Véase también

+ + diff --git a/files/es/web/css/fit-content/index.html b/files/es/web/css/fit-content/index.html new file mode 100644 index 0000000000..fc3cceef6f --- /dev/null +++ b/files/es/web/css/fit-content/index.html @@ -0,0 +1,119 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS Grid + - Experimental + - Función CSS + - Layout + - Referencia + - Web +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La función CSS fit-content() ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: min(maximum size, max(minimum size, argument)).

+ +
/* <length> values */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> value */
+fit-content(40%)
+
+ +

La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por max-content y el mínimo por auto, el cual es calculado por "auto" (ej. minmax(auto, max-content)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

+ +

También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

+ +

Sintaxis

+ +

Función que acepta un  <length> o un <percentage> como un argumento.

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
Una Longitud Absoluta.
+
{{cssxref("<percentage>")}}
+
Un porcentaje relativo al espacio disponible en los ejes dados.
+
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item con más texto en él. Porque el contenido que es
+    mas grande que el ancho máximo, está restringido a los
+    300 pixeles.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Ejemplo", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Define la función cuando es usada como un tamaño de track.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

+ +

 

diff --git a/files/es/web/css/flex-basis/index.html b/files/es/web/css/flex-basis/index.html new file mode 100644 index 0000000000..726241615a --- /dev/null +++ b/files/es/web/css/flex-basis/index.html @@ -0,0 +1,280 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - Cajas Flexibles de CSS + - Propiedad de CSS +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de CSS flex-basis especifíca la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Especificar <'width'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Palabras clave de dimensionamiento intrínseco */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Tamaño automático basado en el contenido del elemento flexible */
+flex-basis: content;
+
+/* Global values */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

Valores

+ +
+
width
+
Definido por un número seguido de una unidad absoluta tal como px, mm o pt, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.
+
content
+
Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
+
+
Nota: Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando auto junto con un tamaño principal (width o height) en auto.
+ +
+

Nota: Breve historia

+ +
    +
  • Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
    • +
  • Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en bug 1032922.
    • +
  • Después, ese cambio fue revertido en bug 1093316, y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).
    • +
+
+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: -webkit-max-content;
+  flex-basis: -moz-max-content;
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: -webkit-min-content;
+  flex-basis: -moz-min-content;
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: -webkit-fit-content;
+  flex-basis: -moz-fit-content;
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: -webkit-fill-available;
+  flex-basis: -moz-available;
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill/-webkit-fill-available/-moz-available';
+}
+
+ +

Resultados

+ +

{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerEdgeOperaSafari
Soporte Base{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}11[2]1212.107.0{{property_prefix("-webkit")}}[3]
auto{{CompatGeckoDesktop("18.0")}}21.0111212.107.0{{property_prefix("-webkit")}}
content{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}12{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Base{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Para acivar el soporte de caja flexible en Firefox 18 y 19, el usuario debe cambiar en preferencias about:config  en "layout.css.flexbox.enabled" a true. Firefox soporta flexbox multi-línea desde Firefox 28.

+ +

[2] Cuando no se especifíca flex-basis como auto, Internet Explorer 10-11 (pero no 12+) siempre usa el box model mediante la propiedad content-box para calcular el tamaño de un elemento flexible, incluso si se aplica al elemento la propiedad box-sizing: border-box. Ver Flexbug #7 para más información.

+ +

[3] Ver Safari 7.0.

+ +

[4] Ver {{bug("1105111")}}.

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-direction/index.html b/files/es/web/css/flex-direction/index.html new file mode 100644 index 0000000000..82726b33b6 --- /dev/null +++ b/files/es/web/css/flex-direction/index.html @@ -0,0 +1,158 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CCS + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia + - flexbox +translation_of: Web/CSS/flex-direction +--- +

{{CSSRef}}

+ +

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

+ +

{{EmbedInteractiveExample("pages/css/flex-direction.html")}}

+ +

Tenga en cuenta que el valor de row y  row-reverse se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir es ltr, row representa el eje horizontal orientado de  izquierda a derecha, y row-reverse desde la derecha hacia la izquierda; si el atributo dir es rtl, row representa el eje orientado de derecha a izquierda, y  row-reverse de izquierda a derecha.

+ +

Sintaxis

+ +
/* La dirección del texto se presenta en una línea */
+flex-direction: row;
+
+/* Como <row>, pero al revés */
+flex-direction: row-reverse;
+
+/* La dirección en la que se apilas las líneas de texto */
+flex-direction: column;
+
+/* Como <column>, pero al revés */
+flex-direction: column-reverse;
+
+/* Valores globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+ +

Valores

+ +

Se aceptan los siguientes valores:

+ +
+
row
+
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.
+
row-reverse
+
+

Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

+
+
column
+
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.
+
column-reverse
+
Se comporta igual que column pero los puntos principales de inicio y final son intercambiados.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<h4>Esto es un Column-Reverse</h4>
+<div id="content">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>Esto es un Row-Reverse</h4>
+<div id="content1">
+    <div class="box1" style="background-color:red;">A</div>
+    <div class="box1" style="background-color:lightblue;">B</div>
+    <div class="box1" style="background-color:yellow;">C</div>
+</div>
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}

+ +

Sobre Accesibilidad

+ +

Si utilizas flex-direction con un valor de row-reverse o column-reverse en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):

+ + + +

Specificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado +

Comentario

+
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad de Navegadores

+ +

{{Compat("css.properties.flex-direction")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-flow/index.html b/files/es/web/css/flex-flow/index.html new file mode 100644 index 0000000000..8d22dbf764 --- /dev/null +++ b/files/es/web/css/flex-flow/index.html @@ -0,0 +1,135 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Flexible Boxes + - Propiedad CSS + - Referencia +translation_of: Web/CSS/flex-flow +--- +
{{ CSSRef}}
+ +

Resumen

+ +

La propiedad CSS flex-flow  es una propiedad atajo para las propiedades individuales flex-direction y flex-wrap.

+ +

{{cssinfo}}

+ +

Para más propiedades e información ve Utilizando cajas flexibles CSS.

+ +

Sintaxis

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* valores globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

Valores

+ +

Ve flex-direction y flex-wrap para más detalles de los valores.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
element {
+  /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
+  flex-flow: column-reverse wrap;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico28.021.0{{property_prefix("-webkit")}}
+ 29.0		1112.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico28.0{{ CompatUnknown() }}1112.107.1{{ property_prefix("-webkit") }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/flex-grow/index.html b/files/es/web/css/flex-grow/index.html new file mode 100644 index 0000000000..0e1e47f8b7 --- /dev/null +++ b/files/es/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - Elementos flexibles + - Propiedades CSS +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.

+ +

La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}. 

+ +

El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.

+ +

{{cssinfo}}

+ +

Ver Usando las cajas flexibles en CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* <number> valores */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Valores globales */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Valores

+ +
+
<number>
+
Ver {{cssxref("<number>")}}. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatGeckoDesktop("18.0")}}[1]21.0{{property_prefix("-webkit")}}1112.106.1{{property_prefix("-webkit")}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]49.0{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatGeckoMobile("18.0")}}[1]{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox soporta sólo Caja flexible de línea simple hasta Firefox 27. Para activar el soporte de caja flexible para Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config el layout.css.flexbox.enabled en true.

+ +

Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en true.

+ +

[2] Antes de Firefox 32, Gecko no era capaz de animar los valores de inicio o parada en 0(Spec, Demo).

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-shrink/index.html b/files/es/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..01d3740fd3 --- /dev/null +++ b/files/es/web/css/flex-shrink/index.html @@ -0,0 +1,185 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

La propiedad CSS flex-shrink especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número flex-shrink , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.

+ +
flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valores globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ + + +
{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}
+ +

{{cssinfo}}

+ +

 

+ +

Sintaxis

+ +

La propiedad flex-shrink se especifica como un único <número>.

+ +

Valores

+ +
+
<número>
+
Véase{{cssxref("<number>")}}. Los valores negativos no son válidos
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
+
<p>El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.</p>
+<p>A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2</p>
+<p>El ancho de D y E es menor al de los otros.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Vea también

+ + + +

diff --git a/files/es/web/css/flex-wrap/index.html b/files/es/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..66066fd25e --- /dev/null +++ b/files/es/web/css/flex-wrap/index.html @@ -0,0 +1,121 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +translation_of: Web/CSS/flex-wrap +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Resumen

+ +

La propiedad flex-wrap de CSS  especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.

+ +

{{cssinfo}}

+ +

Ver Usando cajas flexibles CSS para conocer más propiedades e información.

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("flex-wrap")}}
+
+ +
flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+
+ +

Valores

+ +

Se aceptan los siguientes valores:

+ +
+
nowrap
+
Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor cross-start es equivalente a start o before según el valor de {{cssxref("flex-direction")}}.
+
wrap
+
Los elementos flex son colocados en varias líneas. El valor cross-start equivale a start o before dependiendo del valor flex-direction y cross-end implicaría lo opuesto a lo especificado por cross-start.
+
wrap-reverse
+
Actúa como wrap pero cross-start y cross-end están intercambiados.
+
+ +

Ejemplos

+ +
element {
+  flex-wrap: nowrap;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico28.0 {{bug(939901)}}21.0{{ property_prefix("-webkit") }}11.012.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico28.0 {{bug(939901)}}4.411.012.107.0{{ property_prefix("-webkit") }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html new file mode 100644 index 0000000000..9e89e10b6b --- /dev/null +++ b/files/es/web/css/flex/index.html @@ -0,0 +1,208 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Resumen

+ +

 

+ +

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

+ +

{{cssinfo}}

+ +

 

+ +

Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

+ +

Sintáxis

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valor, número sin unidades: flex-grow */
+flex: 2;
+
+/* Un valor, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Dos valores: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Dos valores: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tres valores: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valores globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valores

+ +
+
<'flex-grow'>
+
+

Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

+
+
<'flex-shrink'>
+
Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
+
<'flex-basis'>
+
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades  width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
+
none
+
Esta palabra clave se computa a 0 0 auto.
+
+

Sintaxis normal

+
+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Resultado

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}
+ {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}[3]
+ 11.0[3]		12.10 +

6.1{{property_prefix("-webkit")}}
+ 9.0

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias about:config en layout.css.flexbox.enabled, por defecto en false.

+ +

[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.

+ +

[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de calc() en la parte flex-basis de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver Flexbug #8 para más info. Además una declaración flex  con un valor sin unidad en su parte flex-basis es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte flex-basis del valor abreviador flex. Ver Flexbug #4 para más info.

+ +

Ver también

+ + diff --git a/files/es/web/css/float/index.html b/files/es/web/css/float/index.html new file mode 100644 index 0000000000..26077edca5 --- /dev/null +++ b/files/es/web/css/float/index.html @@ -0,0 +1,241 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Float + - CSS Posicionamiento + - CSS Propiedad + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/float +--- +

{{CSSRef}}

+ +

La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del  posicionamiento absoluto).

+ +

{{EmbedInteractiveExample("pages/css/float.html")}}

+ + + +

Un elemento flotante es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de float no es igual a none.

+ +

Como float implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor especificadoValor Computado
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
otrossin cambios
+ +

Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto element.style, hay que tener en cuenta que los navegadores modernos soportan float pero en navegadores más antiguos hay que escribir la propiedad como cssFloat, otros navegadores como Internet Explorer 8 y anteriores utilizan styleFloat. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre camel-case (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).

+ +

Sintáxis

+ +
/* Valores clave || Keyword values */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valores globales || Global values */
+float: inherit;
+float: initial;
+float: unset;
+ +

Valores

+ +

left 

+ +

El elemento debe flotar a la izquierda de su bloque contenedor.

+ +

right 

+ +

El elemento debe flotar a la derecha de su bloque contenedor.

+ +

none 

+ +

El elemento no deberá flotar.

+ +

inline-start

+ +

El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts ltr y el lado derecho con scripts rtl.

+ +
+
inline-end
+
El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts ltr y el lado izquierdo con scripts rtl.
+
+ +

Definición Formal

+ +

{{cssinfo}}

+ +

Sintáxis Formal

+ +
+
+ 
{{csssyntax}}
+
+
+
+ +

Ejemplos

+ +

Como son ubicados los elements flotantes 

+ +

Ver El Ejemplo Vivo

+ +

Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u otro elemento flotante.

+ +

En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.

+ +

Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre width: 100% y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.

+ +

HTML

+ +
<section>
+  <div class="left">1</div>
+  <div class="left">2</div>
+  <div class="right">3</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
+</section>
+ +

CSS

+ +
section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}
+ +

RESULTADO:

+ +

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+ +

Limpiando (clearing) flotantes:

+ +

A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}

+ +
+

Categorías

+ +

Interwiki Language

+
diff --git a/files/es/web/css/font-family/index.html b/files/es/web/css/font-family/index.html new file mode 100644 index 0000000000..13a3e01b72 --- /dev/null +++ b/files/es/web/css/font-family/index.html @@ -0,0 +1,61 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-family +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-family: <familia o nombre genérico> [, <familia o nombre genérico>]* | inherit
+
+ +

Valores

+ +
+
<nombre de familia o genérico>
+
puede ser un <nombre de familia> o un <nombre genérico>
+
nombre de familia 
+
El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").
+
nombre genérico 
+
Se han definido los siguientes nombres genéricos: serif, sans-serif, cursive, fantasy, monospace. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+
+ +

Notas

+ +

Un nombre genérico debería ser siempre el último de la lista en una propiedad font-family.

+ +

La propiedad font-family especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes no se detiene en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realizacarácter a carácter, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.

+ +

Cuando una fuente no está disponible en algún {{ Cssxref("font-style", "estilo de fuente") }}, {{ Cssxref("font-variant", "variantes de fuente") }}, o {{ Cssxref("font-size", "tamaño de fuente") }}, estas propiedades pueden influir en la elección de la fuente.

+ +

Especificaciones

+ + + +

Compatibilidades

+ +

TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)

diff --git a/files/es/web/css/font-size-adjust/index.html b/files/es/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..99d499dd78 --- /dev/null +++ b/files/es/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/font-size-adjust +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad {{ Cssxref("font-size-adjust") }} especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.

+ +

Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en {{ Cssxref("font-family") }} no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).

+ +

Para hacer esto de forma que sea compatible con los navegadores que no soportan {{ Cssxref("font-size-adjust") }}, se ha especificado de forma que sea el número por el que está multiplicada la propiedad {{ Cssxref("font-size") }}. Esto quiere decir que el valor especificado para la propiedad debería ser el valor deratio o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente font-size: 16px; font-size-adjust: 0.5, realmente estamos especificando que las letras minúsculas de la fuente deben tener 8px de alto (16px multiplicado por 0.5).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font-size-adjust: <número> | none | {{ Cssxref("inherit") }}

+ +

Valores

+ +
+
none 
+
Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.
+
<número> 
+
+

Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea elnúmero de veces el tamaño de {{ Cssxref("font-size") }}.

+ +

El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad {{ Cssxref("font-family") }}. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad {{ Cssxref("font-size-adjust") }}.

+
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
p{
+  font: 12px Verdana, sans-serif;
+  font-size-adjust: 0.58;
+}
+
+
+ +

Especificaciones

+ + + +

Compatibilidades

+ +

Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.

diff --git a/files/es/web/css/font-size/index.html b/files/es/web/css/font-size/index.html new file mode 100644 index 0000000000..6b2dffe670 --- /dev/null +++ b/files/es/web/css/font-size/index.html @@ -0,0 +1,69 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-size especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font-size: xx-small | x-small | small | medium | large | x-large | xx-large

+ +

font-size: smaller | larger

+ +

font-size: <longitud> | <porcentaje> | {{ Cssxref("inherit") }}

+ +

Valores

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large 
+
un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es medium). De forma parecida a las sentencias HTML <font size="1"> hasta <font size="7"> donde el tamaño por defecto es <font size="3">.
+
larger, smaller 
+
más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.
+
<longitud> 
+
una unidad positiva de longitud.
+
+ +
+
<Porcentaje> 
+
un porcentaje positivo del cuerpo de letra del elemento padre.
+
+ +

Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como longitud absoluta en unidades distintas a em o ex. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades px (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.

+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
+p { font-size: xx-large }
+
+/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
+ * del texto. */
+h1 { font-size: 250% }
+
+/* Ajusta el texto incluido en span a 16px */
+span { font-size: 16px; }
+
+ +

Notas

+ +

Las unidades em y ex en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades em y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.

+ +

Especificaciones

+ + diff --git a/files/es/web/css/font-style/index.html b/files/es/web/css/font-style/index.html new file mode 100644 index 0000000000..f467769af0 --- /dev/null +++ b/files/es/web/css/font-style/index.html @@ -0,0 +1,152 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS + - Web + - tipo de letra +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-style permite definir el aspecto de una familia tipográfica entre los valores: normal, italic (cursiva) y oblique.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Valores globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

Valores

+ +
+
normal
+
Escoge un tipo de letra clasificado como normal dentro de una {{Cssxref("font-family", "familia de fuente")}}.
+
italic
+
Escoge un tipo de letra etiquetado como italic, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como oblique en lugar de eso.
+
oblique
+
Escoge un tipo de letra etiquetado como oblique, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como italic en lugar de eso.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

El ejemplo muestra los valores diferentes de font-style.

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Ejemplo') }}

+ +

Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para oblique y italic, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente. Un ejemplo de representación de una fuente con ambos tipos de letra:

+ +

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Definición inicial
+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo básico1.0{{CompatGeckoDesktop("1")}} [1]4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Apoyo básico1.0{{CompatGeckoMobile("1")}} [1]6.06.01.0
+
+ +

[1] Antes de Firefox 44, Gecko no hacía diferencia entre oblique y italic. Desde entonces, Gecko usa el tipo de letra correcto si está disponible.

diff --git a/files/es/web/css/font-variant-alternates/index.html b/files/es/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..a1995762a0 --- /dev/null +++ b/files/es/web/css/font-variant-alternates/index.html @@ -0,0 +1,155 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - Fuentes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/font-variant-alternates +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS font-variant-alternates controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.

+ +

Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (stylistic, styleset, character-variant, swash, ornament o annotation), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Global values */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+
+ +

Valores

+ +
+
normal
+
Se deshabilita el uso de glifos alternos.
+
historical-forms
+
Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType hist.
+
stylistic()
+
Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType salt, como salt 2.
+
styleset()
+
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType ssXY, como ss02.
+
character-variant()
+
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a styleset(), aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType cvXY, como cv02.
+
swash()
+
Esta función habilita la muestra de glifos de tipografía swash. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType swsh y cswh, como swsh 2 y cswh 2.
+
ornaments()
+
Esta función habilita la muestra de ornamentas, que son florones y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType ornm, como ornm 2. +
Nota: para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
+
+
annotation()
+
Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType nalt, como nalt 2.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Firefox rocks!</p>
+<p class="variant">Firefox rocks!</p>
+
+ +

CSS

+ +
p.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(2);
+}
+ +

Resultado

+ +

Nota: se necesita la fuente Open Type Leitura Display Swashes instalada para que este ejemplo funcione

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatGeckoDesktop("34")}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{CompatGeckoMobile("34")}}[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia layout.css.font-features.enabled, con valor predeterminado de true, solamente disponible en Nightly y Aurora.

diff --git a/files/es/web/css/font-variant/index.html b/files/es/web/css/font-variant/index.html new file mode 100644 index 0000000000..972022db38 --- /dev/null +++ b/files/es/web/css/font-variant/index.html @@ -0,0 +1,47 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-variant selecciona entre los aspectos normal y small-caps para la {{ Cssxref("font-family", "familia de fuente") }} determinado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
+
font-variant: {{ mediawiki.external('normal | small-caps') }} ;
+
+ +

Valores

+ +
+
normal
+
Especifica un aspecto de letra normal.
+
+ +
+
small-caps
+
Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.
+
+ +

Ejemplos

+ +
h1 { font-variant: small-caps }
+p { font-variant: small-caps}
+
+ +

Especificaciones

+ + diff --git a/files/es/web/css/font-weight/index.html b/files/es/web/css/font-weight/index.html new file mode 100644 index 0000000000..747efcfd61 --- /dev/null +++ b/files/es/web/css/font-weight/index.html @@ -0,0 +1,181 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-weight de CSS especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en normal y bold.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-weight: normal;
+font-weight: bold;
+
+/* Relativo al padre */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Valores globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

Valores

+ +
+
normal 
+
Peso/grueso normal de la fuente. Igual que 400.
+
bold 
+
Grueso ancho (negrita). Igual que 700.
+
lighter 
+
Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).
+
bolder 
+
Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).
+
100, 200, 300, 400, 500, 600, 700, 800, 900 
+
Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.
+
+ +

Ejemplos

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Poner texto del párrafo en negrita. */
+p {
+  font-weight: bold;
+}
+
+/* Poner texto del div a dos pasos más oscuro que lo
+   normal pero menos que una negrita estándar. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Define font-weight como animable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Apoyo básico2.0{{CompatGeckoDesktop(1.0)}}3.03.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Apoyo básico1.0{{CompatGeckoMobile(1.0)}}6.06.03.1
+
diff --git a/files/es/web/css/font/index.html b/files/es/web/css/font/index.html new file mode 100644 index 0000000000..a97451bd1d --- /dev/null +++ b/files/es/web/css/font/index.html @@ -0,0 +1,123 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

+ +

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

+ +

font: {{ Cssxref("inherit") }}

+ +

Valores

+ +

La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.

+ +

Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.

+ +

También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},en lugar de tener que especificar cada propiedad individualmente:

+ +
+
caption 
+
el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).
+
icon 
+
el tipo de letra usado para etiquetar iconos.
+
menu 
+
el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).
+
message-box 
+
el tipo de letra usado en cajas de diálogo.
+
small-caption 
+
el tipo de letra usado para etiquetar pequeños controles (small control).
+
status-bar 
+
el tipo de letra usado en la barra de estado de la ventana.
+
-moz-window 
+
 
+
-moz-document 
+
 
+
-moz-workspace 
+
 
+
-moz-desktop 
+
 
+
-moz-info 
+
 
+
-moz-dialog 
+
 
+
-moz-button 
+
 
+
-moz-pull-down-menu 
+
 
+
-moz-list 
+
 
+
-moz-field 
+
 
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
+p { font: 12pt/14pt sans-serif }
+
+ +
/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
+p { font: 80% sans-serif }
+
+ +
/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
+p { font: bold italic large serif }
+
+ +

Notas

+ +

Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.

+ +

Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: normal. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).

+ +

La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (none) cuando se usa la propiedad general {{ Cssxref("font") }}.

+ +

Especificaciones

+ +
    +
  • CSS 1
    • +
  • CSS 2 (para {{ Cssxref("font-size-adjust") }})
    • +
  • CSS 2.1
    • +
  • css3-ui (para los nuevos valores de fuentes de sistema])
    • +
+ +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer3
Netscape4
Opera3.5
diff --git a/files/es/web/css/frequency/index.html b/files/es/web/css/frequency/index.html new file mode 100644 index 0000000000..24d700b2ff --- /dev/null +++ b/files/es/web/css/frequency/index.html @@ -0,0 +1,161 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - Presentación + - Referencia + - Tipos de datos CSS + - Unidad CSS + - Web +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <frequency> denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

Las siguientes unidades deben ser usadas:

+ +
    +
  • Hz, que representa una frecuencia en Hertz. Ejemplos: 0Hz, 1500Hz, 10000Hz.
    • +
  • kHz, que representa una frecuencia en kilohertz. Ejemplos: 0kHz, 1.5kHz, 10kHz.
    • +
+ +

Aunque todas las unidades representen la misma frecuencia para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: 0, no es válido, y no representa 0Hz, 0kHz. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para Hz y kHz, como indica el SI, siendo Hertz un apellido.

+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valores de frecuencia permitidos
CódigoSignificado
12HzEntero positivo.
-456kHzEntero negativo.
4.3HzNo entero.
14KhZLa unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI.
+0HzCero, con un símbolo + y la unidad.
-0kHzCero, con un símbolo - y la unidad (Aunque no sea común, es un valor permitido).
+ + + + + + + + + + + + + + + + + + + + + + + +
CódigoSignificado
Valores de frecuencia no permitidos
12.0Éste es un tipo {{cssxref("<number>")}}, no un tipo <frequency>, debe tener una unidad.
7 HzNo se permite espacio entre el número {{cssxref("<number>")}} y la unidad.
0El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("<length>")}}, no para <frequency>.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}Definición inicial
+ +

Este tipo de dato fue introducido inicialmente en CSS Nivel 2 para el ya obsoleto grupo de merios aural, donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos <frequency> ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.

+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Algunas versiones de Opera pueden tener (partialmente) soporte para el grupo de medios aural obsoleto, y con soporte al tipo de datos <frequency> a través de la propiedad de tono.

diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html new file mode 100644 index 0000000000..ae187f2521 --- /dev/null +++ b/files/es/web/css/gradiente/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/CSS/Gradiente +tags: + - CSS + - CSS tipo de datos + - Degradado + - Diseño + - Gradiente + - Referencia + - graficos +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

+ +

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

+ +

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

+ +

Funciones de las Gradientes

+ +

Hay tres tipos de gradientes de color:

+ +
    +
  • Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. + + + + 
    body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
    + +

    {{ EmbedLiveSample('linear-gradient', 600, 20) }}

    +
    • +
  • Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. + + + 
    body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
    + +

    {{ EmbedLiveSample('radial-gradient', 600, 20) }}

    +
    • +
  • Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. + + + 
    body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}
    + +

    {{ EmbedLiveSample('repeating-gradient', 600, 20) }}

    +
    • +
+ +

Interpolación

+ +

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
+ +

Compatibilidad del navegador

+ +

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

+ +

Ver también

+ +
    +
  • Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..18d241f7b6 --- /dev/null +++ b/files/es/web/css/grid-auto-columns/index.html @@ -0,0 +1,209 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - CSS Grid + - Experimental + - Propiedades CSS + - Referencia +translation_of: Web/CSS/grid-auto-columns +--- +

La propiedad de css grid-auto-columns   especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
+ + + +

Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para  {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.

+ +

Sintaxis

+ +
/* Keyword values */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* <length> values */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* <percentage> values */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* <flex> values */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* minmax() values */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* fit-content() values */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+
+ +

Values

+ +
+
<length>
+
Es una longitud no negativa.
+
<percentage>
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático.
+
<flex>
+
Es una dimensión -valor- no negativa con la unidad fr especificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como <flex> tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factor fr-.
+
Si aparece en una función minmax() implica un mínimo automático (ejemplo: minmax(auto, <flex>)).
+
max-content
+
Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla.
+
min-content
+
Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla.
+
minmax(min, max)
+
Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a min y menor que o igual a max. Si max es menor que min, entonces max será ignorado y la función será tratada como un min. Si establecemos un valor máximo como <flex>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como <flex>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).
+
fit-content(argument)
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula similar a auto (por ejemplo: minmax(auto, max-content)), excepto que el track size o espacio entre celdas es mayor que el auto mínimo.
+
auto
+
Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.
+
+

Note: Los valores de tamaño auto  (y solo los auto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .

+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Contenido CSS 

+ +
#grid {
+  height: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Example", "410px", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilidad con Navegadores

+ + + +

Vea también

+ + + + diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html new file mode 100644 index 0000000000..b50943f3c2 --- /dev/null +++ b/files/es/web/css/grid-auto-rows/index.html @@ -0,0 +1,204 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - Grilla CSS + - Propiedad CSS +translation_of: Web/CSS/grid-auto-rows +--- +

La propiedad grid-auto-rows de CSS especifíca el tamaño de una nueva fila creada de forma implícita.

+ +
/* Keyword values */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* <length> values */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* <percentage> values */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* <flex> values */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* minmax() values */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* multiple track-size values */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+
+ +

Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
<length>
+
Es una medida no negativa.
+
<percentage>
+
Es un {{cssxref("percentage", "<percentage>")}} no negativo relativo al tamaño del bloque del contenedor de la grilla. Si el tamaño del bloque del contenedor de la grilla es indefinido, el valor del porcentaje es tratado como auto.
+
<flex>
+
Es una dimensión no negativa con la unidad fr especificando el factor flex de la pista (track). Cada pista con valor <flex> toma una parte del espacio restante en proporción con su factor flex. +

Cuando aparece fuera de una notación minmax(), implica un mínimo automático (p.e. minmax(auto, <flex>)).

+
+
max-content
+
representa el largo maximo del contenido de cada uno de los items de la pista en la cuadricula(grid)
+
min-content
+
+ +

representa el largo minimo del contenido de cada uno de los items de la pista en la cuadricula(grid)

+ +
+
minmax(minimo, maximo)
+
es una notacion funcional que define el rango del tamano, dicho tamano debe ser mayor o igual al (minimo) y menor o igual al (maximo). si el parametro (maximo) es mas pequeno que el parametro (minimo), entonces el parametro (maximo) es ignorado y la funcion se tratara con el parametro (minimo). De otra manera si, a valor <flex> pone como minimo el factor flex de la pista, sera tratado como cero( or el contenido minimo, si el contenedor grid es inicializado con el tamano minimo permitido ).
+
+ +
+
auto
+
Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por  {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla.
+
+

Nota: los tamaños de la pista auto (y sólo los tamaños de la pista auto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS Content

+ +
#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "210px", "210px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-auto-rows")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html new file mode 100644 index 0000000000..4fb514cc7f --- /dev/null +++ b/files/es/web/css/grid-column-gap/index.html @@ -0,0 +1,157 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +--- +

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

+ +
/* <length> values */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* <percentage> value */
+grid-column-gap: 10%;
+
+/* Global values */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
<length-percentage>
+
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
+ +

Compatibilidad en navegadores

+ +

 

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

 

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html new file mode 100644 index 0000000000..4b0c156d44 --- /dev/null +++ b/files/es/web/css/grid-gap/index.html @@ -0,0 +1,251 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +

Resumen

+ +

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

+ +

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor <longitud> */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Un valor <porcentaje> */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Dos valores <longitud> */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Uno o dos valores <porcentaje> */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Valores Globales */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Valores

+ +
+
<longitud>
+
Es el ancho del calalón que separa las lineas de las rejillas.
+
<percentage>
+
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Contenido CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[6] Experimental implementation available in Safari Technological Preview.

+ +

See also

+ + + + diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..b97dd3ef69 --- /dev/null +++ b/files/es/web/css/grid-template-areas/index.html @@ -0,0 +1,233 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +

La propiedad CSS grid-template-areas especifica nombres para cada una de las {{glossary("grid areas")}}.

+ +
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.
+
<string>+
+
Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari(10.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile(44)}}{{CompatSafari(10.3)}}
+
+ +

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..4dd982b375 --- /dev/null +++ b/files/es/web/css/grid-template-columns/index.html @@ -0,0 +1,188 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +translation_of: Web/CSS/grid-template-columns +--- +

La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid column", "grid columns")}}.

+ +
/* Keyword value */
+grid-template-columns: none;
+
+/* <track-list> values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-columns")}}.
+
{{cssxref("<length>")}}
+
Es una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como auto.
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
+
{{cssxref("<flex>")}}
+
Es una dimensión no negativa con la unidad fr especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <flex> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación minmax(), implica un mínimo automático (es decir, minmax(auto, <flex>)).
+
max-content
+
Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
min-content
+
Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor <flex> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
+
auto
+
Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
+
+

Nota: Los tamaños de vía auto  (y sólo los tamaños de vía auto ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula de forma similar a auto (es decir, minmax(auto, max-content)), excepto que el tamaño de la vía se fija a argument si es mayor que el mínimo.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "100%", "20px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS3 Grid")}}Condición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..b04eed1ea3 --- /dev/null +++ b/files/es/web/css/grid-template-rows/index.html @@ -0,0 +1,215 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +tags: + - CSS + - Propiedad CSS + - Referencia + - grid css +translation_of: Web/CSS/grid-template-rows +--- +

La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
+ +

Sintaxis

+ +
/* Keyword value */
+grid-template-rows: none;
+
+/* <track-list> values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+grid-template-rows: subgrid;
+
+/* <auto-track-list> values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+
+ +

Esta propiedad puede especificarse como:

+ +
    +
  • el valor de la palabra clave none
    • +
  • o un valor de <track-list>
    • +
  • o un valor de <auto-track-list>.
    • +
+ +

Valores

+ +
+
none
+
Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-rows")}}.
+
{{cssxref("<length>")}}
+
Es una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como auto.
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
+
{{cssxref("<flex_value>","<flex>")}}
+
Es una dimensión no negativa con la unidad fr especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <flex> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación minmax(), implica un mínimo automático (i.e. minmax(auto, <flex>)).
+
max-content
+
Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
min-content
+
Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor <flex> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
+
auto
+
Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
+
+

Nota: Los tamaños de vía auto  (y sólo los tamaños de vía auto ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula de forma similar a auto (es decir, minmax(auto, max-content)), excepto que el tamaño de la vía se fija a argument si es mayor que el mínimo auto.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de filas que muestran un patrón recurrente se escriban de una manera más compacta.
+
subgrid
+
El valor subgrid indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.
+
+ +
+

El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Result

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}{{Spec2("CSS3 Grid")}}Definición inicial
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}{{Spec2("CSS Grid 2")}}Incorpora subgrid
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.properties.grid-template-rows")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html new file mode 100644 index 0000000000..7a14af42b6 --- /dev/null +++ b/files/es/web/css/grid/index.html @@ -0,0 +1,237 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +

La propiedad CSS grid es un shorthand que permite definir todas las propiedades grid explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a gutter ({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.

+ +
/* <'grid-template'> values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +
+

Nota: Sólo se pueden especificar las propiedades explícitas o bien las propiedades implícitas en una sola declaración grid. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'grid-template'>
+
Define el {{cssxref("grid-template")}} incluyendo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-areas")}}.
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
Implementa un auto-flow asignando los row tracks explícitamente mediante {{cssxref("grid-template-rows")}} (definiendo {{cssxref("grid-template-columns")}} en none) y especificando como auto-repetir los column tracks mediante {{cssxref("grid-auto-columns")}} (definiendo {{cssxref("grid-auto-rows")}} en auto). {{cssxref("grid-auto-flow")}} es seteado en column en consecuencia, con dense si se especifica.
+ Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
Implementa un auto-flow asignando los column tracks explícitamente mediante {{cssxref("grid-template-columns")}} (definiendo {{cssxref("grid-template-rows")}} en none) y especificando como auto-repetir los row tracks mediante {{cssxref("grid-auto-rows")}} (definiendo {{cssxref("grid-auto-columns")}} en auto). {{cssxref("grid-auto-flow")}} es seteado en row en consecuencia, con dense si se especifica.
+ Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari("10.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile}}{{CompatSafari("10.3")}}
+
+ +

[1] Implementado detrás del flag experimental Web Platform features en chrome://flags desde Chrome 29.0.

+ +

[2] Implementado detrás de la preferencia layout.css.grid.enabled desde Gecko 40.0 {{geckoRelease("40.0")}}, false por defecto. Desde Gecko 52.0 true por defecto.

+ +

[3] Internet Explorer y Edge implementan una version antigua de la especificación, que no define el shorthand grid. Ver el pedido para actualizar la implementación.

+ +

[4] Implementado detrás del flag Enable experimental Web Platform features en chrome://flags desde Opera 28.0.

+ +

Ver también

+ + + + diff --git a/files/es/web/css/height/index.html b/files/es/web/css/height/index.html new file mode 100644 index 0000000000..202c379583 --- /dev/null +++ b/files/es/web/css/height/index.html @@ -0,0 +1,231 @@ +--- +title: height +slug: Web/CSS/height +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

+ +

Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+height: auto;
+
+/* Valores <length> */
+height: 120px;
+height: 10em;
+
+/* Valores <percentage> */
+height: 75%;
+
+/* Valores globales */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Valores

+ +
+
<length>
+
Ver {{cssxref("<length>")}} para unidades disponibles.
+
<percentage>
+
Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la altura del bloque contenedor
+
border-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.
+
content-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.
+
auto
+
El navegador calculará y seleccionará la altura para el elemento especificado.
+
fill {{experimental_inline}}
+
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
+
max-content {{experimental_inline}}
+
La altura preferida intrínseca.
+
min-content {{experimental_inline}}
+
La altura mínima intrínseca.
+
available {{experimental_inline}}
+
La altura del bloque contenedor menos su margen vertical, borde y padding.
+
fit-content {{experimental_inline}}
+
El mayor entre: +
    +
  • la altura mínima intrínseca
    • +
  • la menor entre la altura prefereida intrínseca y la altura disponible
    • +
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="red">
+  <span>I'm 50 pixels tall.</span>
+</div>
+<div id="green">
+  <span>I'm 25 pixels tall.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>I'm half the height of my parent.</span>
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Incluye height como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Añade soporte para valores {{cssxref("<length>")}} y especifica a qué elementos es aplicable.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Definición inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Añade nuevas palabras clave de tamaño para width y height
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.07.01.0
fill, fit-content, min-content, max-content{{CompatChrome(46.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0{{CompatVersionUnknown}}
fill, fit-content, min-content, max-content{{CompatUnknown}}{{CompatChrome(46.0)}}    {{CompatChrome(46.0)}}
+
+ +

Véase también

+ +
    +
  • box model, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..b99e7afaa3 --- /dev/null +++ b/files/es/web/css/herramientas/cubic_bezier_generator/index.html @@ -0,0 +1,320 @@ +--- +title: Generador de curvas de bézier +slug: Web/CSS/Herramientas/Cubic_Bezier_Generator +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +
+
+
<html>
+    <canvas id="bezier" width="336" height="336">
+    </canvas>
+    <form>
+       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
+       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
+       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
+       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
+       <br>
+       <output id="output">Log</output>
+    </form>
+</html>
+
+ +
.field {
+    width: 40px;
+}
+
+ +
function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value < 0) { x1.value = 0; }
+            if (x1.value > 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value < 0) { x2.value = 0; }
+            if (x2.value > 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+
+
+ +

{{draft}}

+ +

Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!

+ +

{{EmbedLiveSample("Tool", 1000, 2000)}}

+
+ +

 

diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html new file mode 100644 index 0000000000..59cd1febfa --- /dev/null +++ b/files/es/web/css/herramientas/index.html @@ -0,0 +1,28 @@ +--- +title: Herramientas +slug: Web/CSS/Herramientas +tags: + - CSS +translation_of: Web/CSS/Tools +--- +
 
+ +

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

+ +

{{LandingPageListSubpages}}

+ +

Otras herramientas

+ +
    +
  • +

    Animación CSS - Stylie

    +
    • +
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • +
  • Menus CSS- cssmenumaker.com
    • +
+ +

Temas relacionados

+ + diff --git a/files/es/web/css/hyphens/index.html b/files/es/web/css/hyphens/index.html new file mode 100644 index 0000000000..98669f5e30 --- /dev/null +++ b/files/es/web/css/hyphens/index.html @@ -0,0 +1,148 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +
La propiedad CSS hyphens especifica cómo deben dividirse las palabras cuando el texto se ajusta a través de múltiples líneas. Puede impedir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto o dejar que el navegador inserte los guiones automáticamente donde corresponda.
+ +
+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo lang y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo xml:lang.

+ +
+

Nota: Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.

+
+ +

Sintaxis

+ +
/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

La propiedad hyphens se especifica con una única palabra de la lista a continuación.

+ +

Valores

+ +
+
none
+
Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea. Las líneas solo se distribuyen en el espacio en blanco.
+
manual
+
Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo para detalle.
+
auto
+
El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo) anularán la separación automática cuando exista.
+
+ +
+

Nota: El comportamiento del valor auto dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo lang de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Sugiriendo oportunidades de separación de línea

+ +

Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:

+ +
+
U+2010 (HYPHEN)
+
El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión.
+
U+00AD (SHY)
+
Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML puedes usar &shy; para insertar una separación "suave".
+
+ +

Ejemplo

+ +

Este ejemplo usa tres clases, una por cada posible configuración de la propiedad hyphens.

+ +

HTML

+ +
<ul>
+  <li><code>none</code>: sin separación; se desbordará si es preciso
+    <p lang="es" class="none">Una extrema&shy;damente larga palabra</p>
+  </li>
+  <li><code>manual</code>: separación sólo en &amp;hyphen; o &amp;shy; (si fuera necesario)
+    <p lang="es" class="manual">Una extrema&shy;damente larga palabra</p>
+  </li>
+  <li><code>auto</code>: separará donde decida el algoritmo (si fuera necesario)
+    <p lang="enes class="auto">Una extrema&shy;damente larga palabra</p>
+  </li>
+</ul>
+
+ +

CSS

+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

Resultado

+ +
+

{{EmbedLiveSample("Example", "100%", 490)}}

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

Ver también

+ +
    +
  • {{Cssxref("content")}}
    • +
diff --git a/files/es/web/css/id_selectors/index.html b/files/es/web/css/id_selectors/index.html new file mode 100644 index 0000000000..0f7f177d2f --- /dev/null +++ b/files/es/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: Selectores de ID +slug: Web/CSS/ID_selectors +tags: + - CSS + - Referencia + - Referencia CSS + - Selectores +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.

+ +
/* El elemento con id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

Sintaxis

+ +
#id_value { style properties }
+ +

Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Ejemplo

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">¡Este div tiene un ID especial!</div>
+<div>Este solo es un div regular.</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", '100%', 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.id")}}

diff --git a/files/es/web/css/image-rendering/index.html b/files/es/web/css/image-rendering/index.html new file mode 100644 index 0000000000..98dae57cdc --- /dev/null +++ b/files/es/web/css/image-rendering/index.html @@ -0,0 +1,108 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS image-rendering provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.

+ +
/* Keyword values */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Global values */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+ +

Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es 100×100px pero el autor de la página especifica sus dimenciones como  200×200px (o 50×50px), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).

+ +
+

Un Canvas puede proveer una solución de respaldo para crisp-edge/optimize-contrast a través de la manipulación manual de datos de la imagen.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa remuestreo bilinear (alta calidad).
+
+ +
+
crisp-edges
+
La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso. Los algoritmos adecuados incluyen algoritmos de escalamiento nearest-neighbor y otros algoritmos de escalabilidad tales como algoritmos 2×SaI y hqx-family. Este valor está destinado a imágenes pixel-art, como en juegos de navegador.
+
pixelated
+
Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes. Cuando se reduce la escala, esto es lo mismo que 'auto'.
+
+ +
Nota: Los valores optimizeQuality y optimizeSpeed presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor auto.
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
/* aplica a imágenes GIF y PNG; eviar bordes borrosos */
+img[src$=".gif"], img[src$=".png"] {
+  image-rendering: crisp-edges;
+}
+
+ +
div {
+  background: url(chessboard.gif) no-repeat 50% 50%;
+  image-rendering: crisp-edges;
+}
+ +

Ejemplos interactivos

+ +

image-rendering: auto;

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: crisp-edges; (-webkit-optimize-contrast)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}}Initial definition
+ +
+

Nota: Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora.

+
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.properties.image-rendering")}}

+ +

 

diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html new file mode 100644 index 0000000000..de998cc146 --- /dev/null +++ b/files/es/web/css/image/index.html @@ -0,0 +1,209 @@ +--- +title: +slug: Web/CSS/image +tags: + - Gráfico + - Imagen CSS + - Tipo de Dato CSS +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <image> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.

+ +

CSS puede manejar diferentes tipos de imágenes:

+ +
    +
  • imágenes con dimensiones intrínsecas, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.
    • +
  • imágenes con varias dimensiones intrínsecas, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.
    • +
  • imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.
    • +
  • imágenes sin dimensiones intrínsecas, ni relación de aspecto intrínseca, como un degradado CSS, por ejemplo.
    • +
+ +

CSS determina el tamaño concreto del objeto usando estas dimensiones intrínsecas, el tamaño específico en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el tamaño predeterminado del objeto definido por el tipo de propiedad con el que se usa la imagen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamaño de objeto predeterminado
{{cssxref("background-image")}}El tamaño del área de posicionamiento de fondo de la imagen
{{cssxref("list-style-image")}}El tamaño de un caracter de 1em
{{cssxref("border-image")}}El tamaño del área de imagen de borde de un elemento
{{cssxref("cursor")}}Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso
Contenido reemplazado
+ como cuando se combina la propiedad CSS {{cssxref("content")}}
+ con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}		Un rectángulo de 300px × 150px
+ +

El tamaño concreto del objeto es calculado usando los siguientes algoritmos:

+ +
    +
  • Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.
    • +
  • Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.
    • +
  • Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.
    • +
+ +

Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.

+ +
Nota: No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de compatibilidad de navegadores para una lista detallada.
+ +

Sintáxis

+ +

La representación de un tipo de dato CSS <image> puede ser una de las siguientes:

+ +
    +
  • Una imagen denotada por un tipo de dato {{cssxref("<uri>")}} y la función url();
    • +
  • Un degradado CSS ({{cssxref("<gradient>")}});
    • +
  • Una parte de la página, definida por la función {{cssxref("element", "element()")}}.
    • +
+ +

Ejemplos

+ +

Estos son valores válidos para imágenes:

+ +
url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
+linear-gradient(to bottom, blue, red)  /* Un degradado (<gradient>) */
+element(#colonne3)                     /* Una párte de la página, usando la función element(),
+                                          mientras colonne3 sea un identificador CSS existente en la página. */
+
+ +

Estos son valores incorrectos para imágenes:

+ +
cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
+url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
+element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}} +

Antes de CSS3, no había un tipo de dato <image> definido. Las imágenes solo podían ser definidas usando notaciones funcionales url().

+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}IE 10{{property_prefix("-ms")}}{{CompatVersionUnknown}}{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ +
    +
  • Degradados CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}
    • +
  • {{cssxref("element", "element()")}}
    • +
diff --git a/files/es/web/css/ime-mode/index.html b/files/es/web/css/ime-mode/index.html new file mode 100644 index 0000000000..58a8c5b0ed --- /dev/null +++ b/files/es/web/css/ime-mode/index.html @@ -0,0 +1,50 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/ime-mode +--- +

 

+

{{ CSSRef() }} {{ Fx_minversion_header(3) }}

+

Resumen

+

La propiedad ime-mode controla el estado del método de entrada del editor para campos de texto.

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
  • Se aplica a: campos de texto.
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
  • Porcentajes: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+

Sintaxis

+
ime-mode: <mode>
+
+

Valores

+
auto 
No hay cambios en el estado actual del editor. Opción por defecto.
normal 
El estado IME debería ser normal. Este valor puede ser usado en cualquier hoja de estilo del usuario para sobrescribir los parámetros de la página. Este valor no es soportado por Internet Explorer.
active 
El editor de entradas, está inicialmente activo y usado para la entrada de datos, hasta que el usuario lo desactive específicamente. No soportado en Linux.
inactive 
el editor de entradas está inicialmente inactivo, pero el usuario puede activarlo en cualquier momento. No soportado por Linux.
disabled 
El editor de entradas está desactivado y no puede ser activado por el usuario.
+
+

Ejemplos

+
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+
+

Este ejemplo inhabilita/desactiva el editor de entradas para este campo. Esto podría ser necesario para los campos que entran datos en una base de datos que no soporta el juego de caracteres extendido, por ejemplo.

+

Notas

+

A diferencia de Internet Explorer, la implementación de Firefox de ime-mode permite aplicar esta propiedad a los campos de edición de clave de usuario (passwords). Sin embargo, no es la mejor experiencia para el usuario y los campos de clave de usuario deberían desactivar el IME. Los usuarios pueden corregir el comportamiento inapropiado de los sitios que no sigan esta recomendación poniendo la siguiente regla CSS en su archivo de reglas CSS:

+
input[type=password] {
+	ime-mode: auto !important;
+}
+
+
+
Nota: En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.
+
+

La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor disabled.

+
+
Nota: Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.
+
+

Especificaciones

+ +

Compatibilidad entre navegadores

+

La propiedad ime-mode es soportada en Firefox 3 y posteriores, así como en Internet Explorer.

+ +
+

Categorías

+

Interwiki Languages zh tw:CSS:ime-mode

+
+

{{ languages( { "en": "en/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode", "zh-tw": "zh_tw/CSS/ime-mode" } ) }}

diff --git a/files/es/web/css/index.html b/files/es/web/css/index.html new file mode 100644 index 0000000000..25c39d556c --- /dev/null +++ b/files/es/web/css/index.html @@ -0,0 +1,113 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Diseño + - Estilo + - Hojas de Estilo en Cascada + - Hojas de estilo + - Referencia +translation_of: Web/CSS +--- +

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (incluyendo varios languages basados en XML como SVG, MathML o {{Glossary("XHTML")}}). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.

+ +

CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permiía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.

+ +

Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes modulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo desarrollar y publicar recomendaciones separadas por módulos. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las ultimas espcificaciones estables de CSS.

+ +
+
    +
  • Introducción a CSS + +

    Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de conceptos básicos de CSS para saber qué es CSS y cómo usarlo.

    +
    • +
  • Tutoriales CSS +

    Nuestra área de aprendizaje de CSS contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.

    +
    • +
  • Referencia CSS +

    Nuestra exhaustiva referencia de CSS para desarrolladores web experimentados describe cada propiedad y concepto de CSS.

    +
    • +
+ +
+
+

Tutoriales

+ +

Nuestra área de aprendizaje CSS presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.

+ +
+
Primeros pasos en CSS
+
CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.
+
+ +
+
Bloques de construcción CSS.
+
Este módulo continúa a partir de donde dejó el módulo de primeros pasos de CSS. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más. Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (debugging) y mucho más.
+
El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como estilo de textos y diseño CSS.
+
+ +
+
Estilo de texto
+
Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS. Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto. Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.
+
Diseño de CSS
+
En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer.
+
Uso de CSS para resolver problemas comunes
+
proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web.
+
+
+ +
+

Referencia

+ + + +

Cookbook

+ +

El libro de cocina de diseño CSS tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios. Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.

+ +

Herramientas para el desarrollo de CSS

+ + + +

Meta errores

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/inherit/index.html b/files/es/web/css/inherit/index.html new file mode 100644 index 0000000000..513c3165c9 --- /dev/null +++ b/files/es/web/css/inherit/index.html @@ -0,0 +1,64 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/inherit +--- +

<< Volver

+ + + +

Resumen

+ +

inherit es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre.

+ +

Para propiedades heredadas

+ +

Para las propiedades heredadas, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:

+ +
  /* hacer las cabeceras de segundo nivel, verdes */
+  h2 { color: green; }
+
+  /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */
+  #sidebar h2 { color: inherit; }
+
+ +

Ten en cuenta que en este ejemplo, el elemento h2 dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:

+ +
 div#current { color: blue; }
+
+ +

el elemento será azul.

+ +

Para propiedades no heredadas

+ +

Para las propiedades no heredadas, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.

+ +

Notas

+ +

Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ +

Ver también

+ +

initial

+ + + +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "fr": "fr/CSS/inherit", "en": "en/CSS/inherit" } ) }}

diff --git a/files/es/web/css/inheritance/index.html b/files/es/web/css/inheritance/index.html new file mode 100644 index 0000000000..780d5d49ea --- /dev/null +++ b/files/es/web/css/inheritance/index.html @@ -0,0 +1,66 @@ +--- +title: Herencia +slug: Web/CSS/inheritance +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/inheritance +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

El resumen de cada definición de propiedad CSS indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.

+ +

Propiedades heredadas

+ +

Cuando no se especifica un valor para un elemento de una propiedad inherited property, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad.

+ +

Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo:

+ +
 p { color: green }
+
+ +

y el código HTML siguiente:

+ +
 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
+
+ +

las palabras "texto enfatizado" aparecerá en verde, ya que el elemento em ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento p.No recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).

+ +

Propiedades no heredadas

+ +

Si no se especifica un valor para una propiedad no heredada (non-inherited property) (a veces llamada reset property en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad).

+ +

Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo:

+ +
 p { border: medium solid }
+
+ +

y la etiqueta HTML:

+ +
 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
+
+ +

las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es none).

+ +

Notas

+ +

Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.

+ +

Ver también

+ +

{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }}

+ +

 

+ +
+

Categorías

+ +


+ Interwiki Languages

+
+ +

{{ languages( { "en": "en/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance", "pl": "pl/CSS/Dziedziczenie" } ) }}

diff --git a/files/es/web/css/initial/index.html b/files/es/web/css/initial/index.html new file mode 100644 index 0000000000..aff090e21f --- /dev/null +++ b/files/es/web/css/initial/index.html @@ -0,0 +1,46 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial +--- +

Guía de referencia de CSS +


+

+

Resumen

+

initial es un valor permitido en todas las propiedades CSS. Fuerza la utilización del valor inicial de la propiedad para el elemento al cual se aplica. +

+

Para propiedades no heredadas

+

Para las propiedades no heredadas, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo: +

+
 /* definimos un borde verde de un encabezamiento de segundo nivel */
+ h2 { border: medium solid green }
+
+ /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad color */
+ #sidebar h2 { border-color: initial; }
+
+ /* ...en CSS1 se obtiene usando 'border: medium solid' */
+
+

Para propiedades heredadas

+

Para las propiedades heredadas, se usa menos ya que no refuerza el comportamiento por defecto. +

+

Especificaciones

+ +

Compatibilidad

+

Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión). +

+

Ver también

+

inherit +


+

+
+

Categorías +

Interwiki Languages Links +

+
+{{ languages( { "fr": "fr/CSS/initial", "en": "en/CSS/initial" } ) }} diff --git a/files/es/web/css/inline-size/index.html b/files/es/web/css/inline-size/index.html new file mode 100644 index 0000000000..d39bac491c --- /dev/null +++ b/files/es/web/css/inline-size/index.html @@ -0,0 +1,97 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inline-size define el tamaño horizontal o vertical de un  bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor de  {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* <percentage> values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de inline-size se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es {{cssxref("block-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad inline-size toma los mismos valores de las propiedades {{cssxref("width")}} y {{cssxref("height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/inset-block-end/index.html b/files/es/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..b117a0595c --- /dev/null +++ b/files/es/web/css/inset-block-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block-end define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Note: Antes de Firefox 63 esta propiedad fue implementada como offset-block-end. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-block-end: 10%;
+
+/* Keyword value */
+inset-block-end: auto;
+
+/* Global values */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block-end toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-block-start/index.html b/files/es/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..4cd4a2c732 --- /dev/null +++ b/files/es/web/css/inset-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block-start define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-block-start. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-block-start: 10%;
+
+/* Keyword value */
+inset-block-start: auto;
+
+/* Global values */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block-start toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-block/index.html b/files/es/web/css/inset-block/index.html new file mode 100644 index 0000000000..633a84475d --- /dev/null +++ b/files/es/web/css/inset-block/index.html @@ -0,0 +1,97 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +translation_of: Web/CSS/inset-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* value applied to start and end */
+
+/* <percentage>s of the width or height of the containing block */
+inset-block: 10% 5%;
+
+/* Keyword value */
+inset-block: auto;
+
+/* Global values */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+
+ +

La abreviación para la otra dimensión {{cssxref("inset-inline")}}, que es una abreviación para {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline-end/index.html b/files/es/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..633306a67c --- /dev/null +++ b/files/es/web/css/inset-inline-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline-end define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-end. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline-end: 10%;
+
+/* Keyword value */
+inset-inline-end: auto;
+
+/* Global values */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline-end toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline-start/index.html b/files/es/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..ef9b26bc2c --- /dev/null +++ b/files/es/web/css/inset-inline-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline-start define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, o {{cssxref("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-start. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline-start: 10%;
+
+/* Keyword value */
+inset-inline-start: auto;
+
+/* Global values */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline-start toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline/index.html b/files/es/web/css/inset-inline/index.html new file mode 100644 index 0000000000..07a9d797d8 --- /dev/null +++ b/files/es/web/css/inset-inline/index.html @@ -0,0 +1,97 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +translation_of: Web/CSS/inset-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* value applied to start and end */
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline: 10% 5%;
+
+/* Keyword value */
+inset-inline: auto;
+
+/* Global values */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+
+ +

La abreviación para la otra dimensión es {{cssxref("inset-block")}}, que es la abreviación para {{cssxref("inset-block-start")}}, y {{cssxref("inset-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset/index.html b/files/es/web/css/inset/index.html new file mode 100644 index 0000000000..cd3260e72c --- /dev/null +++ b/files/es/web/css/inset/index.html @@ -0,0 +1,96 @@ +--- +title: inset +slug: Web/CSS/inset +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  inset define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* value applied to all edges */
+
+/* <percentage>s of the width or height of the containing block */
+inset: 10% 5% 5% 5%;
+
+/* Keyword value */
+inset: auto;
+
+/* Global values */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/integer/index.html b/files/es/web/css/integer/index.html new file mode 100644 index 0000000000..2075d52e37 --- /dev/null +++ b/files/es/web/css/integer/index.html @@ -0,0 +1,16 @@ +--- +title: +slug: Web/CSS/integer +translation_of: Web/CSS/integer +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

Un valor entero usado para algunas propiedades CSS que no tiene unidades.

+ +

Usado en

+ +
    +
  • {{ Cssxref("-moz-column-count") }}
    • +
diff --git "a/files/es/web/css/introducci\303\263n/boxes/index.html" "b/files/es/web/css/introducci\303\263n/boxes/index.html" new file mode 100644 index 0000000000..1feede593a --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/boxes/index.html" @@ -0,0 +1,334 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.

+ +

Información: Cajas

+ +

Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.

+ +

En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El gris pálido muestra partes del diseño.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.

+ +

Coloreando

+ +

El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El elemento tiene un fondo verde .

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

Borders

+ +

Puede utilizar los bordes para decorar elementos con líneas o cuadros.
+
+ Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
+
+ Los estilos son:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

También puede establecer el estilo a none ( ninguno) o hidden (oculto),  para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.

+ +

Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde  solo en un lado, o diferentes los bordes en diferentes lados.

+ +
+
Ejemplo
+ +


+ Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

Stylish heading

+
+ +

Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultado se ve así:

+ + + + + + + + +
Image:Image:Blue-rule.png
+
+ +

Márgenes y relleno

+ +


+ Use  márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
+
+ Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el  relleno con sus anchuras respectivamente.
+
+ Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
+
+ Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
+
+ Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.

+ +
+
Ejemplo
+ +


+ Esta norma delimita párrafos con la  class remark, dándoles un borde rojo a su alrededor.
+
+ El padding (relleno) separa un poco todo el borde del texto .
+
+ A la izquierda una  sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

A continuación es un párrafo normal.

+ +

Aqui con la clase remark.

+
+
+ +
+
Más detalles
+ +

Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
+
+ Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
+
+ Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
+
+ Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.

+
+ +

Acción: Agregar bordes

+ +

Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualice el navegador para ver el resultado:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
El reto
+ +


+ Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)

+
+ +

Ver una solución a este desafío.

+ +

What next?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}Al especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.

diff --git "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" new file mode 100644 index 0000000000..64bf0dd443 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" @@ -0,0 +1,124 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.

+ +

Información: Cascada y herencia

+ +

El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.

+ +

Tres principales fuentes de información de estilo forman una cascada. Estas son:

+ +
    +
  • Estilos por defecto del navegador para del lenguaje de marcado.
    • +
  • Estilos especificados por un usuario que está leyendo el documento.
    • +
  • Los estilos relacionados en el documento por su autor. Estos pueden ser especificados en tres lugares: +
      +
    • En un archivo externo: este tutorial aborda principalmente este método para definir los estilos.
      • +
    • En una definición al principio del documento: utilice este método únicamente para los estilos que se utilizan sólo en esa página .
      • +
    • En un elemento específico en el cuerpo del documento: este es el método menos fácil de mantener, pero puede ser utilizado para la probar.
      • +
    +
    • +
+ +

El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.

+ +
+
Ejemplo
+ +

Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.

+ +

Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.

+ +

Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.

+
+ +

Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.

+ +

El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.

+ +

El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.

+ +

Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector,  por defecto de tu navegador.

+ +

Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.

+ +

Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.

+ +
+
Más detalles
+ +

El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.

+ +

Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.

+ +

Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.

+
+ +

Acción: El uso de la herencia 

+ +
    +
  1. Edite su archivo  CSS de ejemplo.
    2. +
  2. Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento {{ HTMLElement("p") }} es el elemento padre del elemento  {{ HTMLElement("strong") }} : + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} han heredado el estilo subrayado de su elemento padre {{ HTMLElement("p") }}.
    + +

    Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .

    +
    4. +
+ + +
+ + + + + + + + +
Antes
Cascading Style Sheets
+ + + + + + + + +
Después
Cascading Style Sheets
+ +
+
Problema
+Cambie su hoja de estilo de manera que aparecen subrayados sólo las letras rojas: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Ver una solución al desafío.
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.

diff --git "a/files/es/web/css/introducci\303\263n/color/index.html" "b/files/es/web/css/introducci\303\263n/color/index.html" new file mode 100644 index 0000000000..578f1e6898 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/color/index.html" @@ -0,0 +1,363 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+ +

+ +

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

+ +

Información: Color

+ +

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ +
+
+
Detalles
+ +

Su navegador puede soportar muchos más colores con nombre, como:

+
+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

+
+ +

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +


+ Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

+ +
+
+
Ejemplo
+ +

Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comience con el rojo puro: #f00
Para que sea más pálido, añadir un poco de verde y azul: #f77
Para hacerlo más naranja, añadir un poco de verde adicional: #fa7
Para oscurecer, reducir todos sus componentes: #c74
Para reducir su saturación, hacer que sus componentes más iguales: #c98
Si usted los pone exactamente iguales, se obtiene gris: #ccc
+ +

Para un tono pastel como el azul pálido:

+ + + + + + + + + + + + + + +
Comience con blanco puro: #fff
Reducir los otros componentes un poco: #eef
+
+ +
+
+
Más detalles
+ +

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

+ +

Por ejemplo, este es de color granate (rojo oscuro)dark red:

+
+ +
RGB (128, 0, 0)
+ +

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

+ +

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

+
+ +

Propiedades de Color

+ +

Ya ha utilizado la propiedad color  en el texto.

+ +

También puede utilizar la propiedad background-color para cambiar fondos elementos.

+ +

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

+ +
+
+
Ejemplo
+ +

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

+ +
background-color : # fffff4 ;
+ +
 
+ +

Los Más detalles cajas utilizan este gris pálido:

+ +
background-color : # F4F4F4 ;
+
+
+ +

 

+ +

Acción: El uso de códigos de color

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.) + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    +
    3. +
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
    4. +
+ + + + + + + +
+ + + + + + + + + +
C ascading S tyle S heets
C ascading S tyle S heets
+
+ +
+
+
Desafío
+ +

En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.

+ +

(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)

+Ver una solución para el desafío.
+
+ +

¿Y ahora qué?

+ +

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

diff --git "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" new file mode 100644 index 0000000000..7940c9a060 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" @@ -0,0 +1,127 @@ +--- +title: Cómo funciona el CSS +slug: Web/CSS/Introducción/How_CSS_works +tags: + - CSS + - 'CSS:' + - 'CSS:Empezando' + - Diseño + - Guía + - Inicio + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}Esta tercera parte del tutorial Empezando CSS explica cómo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted también aprenderá cómo analizar el documento de muestra.

+ +

Información: Cómo funciona CSS

+ +

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

+ +
    +
  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
    2. +
  2. El navegador muestra el contenido de la DOM.
    3. +
+ +

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

+ +

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

+ +

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

+ +

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.

+ +
+
Ejemplo
+En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Ejemplo en vivo

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en sí mismos padres, con los nodos de texto como sus hijos:

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Acción: Analizando un DOM

+ +

El uso del Inspector DOM

+ +

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo tendrá que instalar el complemento (ver más detalles abajo).

+ +
    +
  1. Utilice el navegador Mozilla para abrir el documento en versión HTML.
    2. +
  2. Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM. +
    +
    Más detalles
    + +

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    + +

    Si no desea instalar Domi (o estás usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente sección. O bien, puede omitir esta sección e ir directamente a la página siguiente. Saltarse esta sección no interfiere con el resto del tutorial.

    +
    +
    3. +
  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas. +

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vacíos, que se pueden pasar por alto.

    + +

    Parte del resultado podría tener este aspecto, según qué nodos has expandido:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar más cosas sobre él. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    + +

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de información en su panel de la derecha. La información de estilo es sólo una parte de la información que proporciona.

    +
    4. +
+ +
+
Problema
+ +

En el DOMi , haga clic en un nodo STRONG.

+ +

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es más relevante que el texto normal.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Ocultar solución
+Ver la solución para el problema.
+ +

Utilizando Web X-Ray Goggles

+ +

Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.

+ +
    +
  1. Ir a la página principal de la Web X-Ray Goggles.
    2. +
  2. Arrastre el enlace bookmarklet en esa página a tu barra de herramientas del navegador.
    3. +
  3. Abra el documento en versión HTML.
    4. +
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
    5. +
  5. Mueva el puntero del ratón por encima de su documento para comprobar los elementos en el documento.
    6. +
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}Si tomaste el reto, usted vera que la información de estilo  interactúa en más de un lugar, para crear el estilo final de un elemento. La siguiente página explica más acerca de estas interacciones.

diff --git "a/files/es/web/css/introducci\303\263n/index.html" "b/files/es/web/css/introducci\303\263n/index.html" new file mode 100644 index 0000000000..678ec25622 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/index.html" @@ -0,0 +1,93 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +--- +

Presentación

+ +

Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).

+ +

Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo. Está dividido en dos partes.

+ +
    +
  • La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.
    • +
+ +
    +
  • La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.
    • +
+ +

El tutorial se basa en la Especificación CSS 2.1 .

+ +

¿Quién debe usar este tutorial?

+ +

Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.

+ +

Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo. A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.

+ +

Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.

+ +

Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.

+ +

¿Qué se necesita antes de empezar?

+ +

Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite). También debes saber cómo utilizarlos de forma básica.

+ +

Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.

+ +

Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla. Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas. El otro software de Mozilla al que hace referencia este tutorial incluye:

+ + + +

Nota: CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él. Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.

+ +

Cómo utilizar este tutorial

+ +

Para utilizar este tutorial, lee las páginas con atención y en orden. Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.

+ +

En cada página, utiliza la sección de Información para entender cómo funciona CSS. Usa la sección Acción para tratar de usar CSS en tu propio equipo.

+ +

Para controlar que has comprendido los contenidos, acepta el reto al final de cada página. Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.

+ +

Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título Más detalles. Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.

+ +

Parte I del tutorial

+ +

Una guía paso a paso básica para CSS.

+ +
    +
  1. Qué es CSS
    2. +
  2. Por qué usar CSS
    3. +
  3. Cómo funciona CSS
    4. +
  4. Cascada y herencia
    5. +
  5. Selectores
    6. +
  6. CSS legibles
    7. +
  7. Estilos de texto
    8. +
  8. Color
    9. +
  9. Contenido
    10. +
  10. Listas
    11. +
  11. Cajas
    12. +
  12. Diseño
    13. +
  13. Tablas
    14. +
  14. Multimedia
    15. +
+ +

Parte II del tutorial

+ +

Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. Enlaces XBL
    3. +
  3. Interfaces de usuario XUL
    4. +
  4. Gráficos SVG
    5. +
  5. Datos XML
    6. +
+ +

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git "a/files/es/web/css/introducci\303\263n/layout/index.html" "b/files/es/web/css/introducci\303\263n/layout/index.html" new file mode 100644 index 0000000000..31a86194bf --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/layout/index.html" @@ -0,0 +1,383 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.

+ +

Informacion: Layout

+ +

Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.

+ +

Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.

+ +

Esta página describe algunas técnicas sencillas que puedes probar.

+ +

Estructura del documento

+ +

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

+ +

El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.

+ +
+
+

Ejemplo

+ +

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

+ +

Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.

+ +

Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:

+
+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

  El resultado se ve así: 

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unidades de tamaño

+ +

Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.

+ +

Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.

+ +
+
+

Ejemplo

+ +

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

+ +

El borde de la derecha tiene su tamaño especificado en ems.

+ +

En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:

+
+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
+

Más detalles

+ +

Para otros dispositivos, otras unidades de longitud son apropiadas.

+ +

Hay más información sobre esto en una página posterior de este tutorial.

+ +

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

+
+
+ +

Diseño del texto

+ +

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

+ +

{{Cssxref ('text-align')}}

+ +


+   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
+ {{Cssxref ('texto-sangría')}}
+     Indente el contenido en una cantidad que especifique.

+ +

Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.

+ +
+
+

Ejemplo

+ +

Para centrar los títulos:

+
+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultado:

+ + + + + + + +
+

(A) The oceans

+
+ +

En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.

+
+ +

Floats

+ +

La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.

+ +

El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.

+ +
+
+

Ejemplo

+ +

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

+ +

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

+
+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultado sería:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

+ +

Posicionamiento

+ +

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.

+ +

Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.

+ +

relativo

+ +


+   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.
+ fijo
+     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.
+ absoluto
+     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.
+ estático
+     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

+ +

Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.

+ +
+
+

Ejemplo

+ +

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

+
+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no hay margenes alrededor del elemento */
+  top: 0px; /* distancia desde la parte superior */
+  left: 0px; /* distancia desde la izquierda */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
+

Más detalles

+ +

La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.

+ +

Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.

+
+
+ +

Action: Specifying layout

+ +
    +
  1. Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.
    2. +
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.
    3. +
+ +
+
+

Cambios

+ +

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

+
+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

+ +

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

+ +

Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 See a solution to this challenge.

+ +

What next?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.

diff --git "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" new file mode 100644 index 0000000000..676ea9caf9 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" @@ -0,0 +1,155 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+ +

Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.

+ +

Los estilos de texto: Información

+ +

CSS tiene varias propiedades de estilo de texto .

+ +

Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:

+ +
    +
  • Negrita, cursiva, y small-caps (versalita)
    • +
  • El tamaño
    • +
  • La altura de la línea
    • +
  • El tipo de letra
    • +
+ +
+
+
Ejemplo
+ +
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }
+
+ +

Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.

+ +

El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre,  y el interlíneado se establece en 125% (un poco más separados de lo normal).

+ +

El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).

+ +

La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):

+
+ +

Tipos de fuentes

+ +

No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.

+ +

Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.

+ +

Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente

+ +

Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.

+ +

Los tamaños de la fuente

+ +

Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.

+ +

Puede utilizar algunos valores incorporados para tamaños de fuentes,  like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.

+ +

Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora. Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.

+ +

Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.

+ +

Altura de línea

+ +

El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.

+ +

Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .

+ +

Decoración

+ +

La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none )  para eliminar expresamente cualquier decoración.

+ +

Otras propiedades

+ +

Para especificar cursiva por su cuenta, use font-style : italic;
+ Para especificar audaz por su cuenta, use font-weight : bold;
+ Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;

+ +

Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.

+ +
+
Mas detalles
+ +

Puede especificar estilos de texto de diversas maneras.

+ +

Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.

+ +

En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).

+ +

Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .

+ +

Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.

+
+ +

Acción: Especificaciónes de las fuentes

+ +

Para un simple documento, puede establecer la fuente del elemento  <body> y el resto del documento hereda la configuración.

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga: + 
    body {font: 16px "Comic Sans MS", cursive;}
    + +
     
    +
    3. +
  3. Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
    4. +
  4. Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
    6. +
+ +
+
Desafío
+ +

Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Ver una solución para el desafío.
+ +

¿Y ahora qué?

+ +

El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .

+ +

 

diff --git "a/files/es/web/css/introducci\303\263n/media/index.html" "b/files/es/web/css/introducci\303\263n/media/index.html" new file mode 100644 index 0000000000..bb7bb0bd23 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/media/index.html" @@ -0,0 +1,394 @@ +--- +title: Media +slug: Web/CSS/Introducción/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

+ +

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

+ +

Información: Media

+ +

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

+ +

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

+ +

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

+ +
+
Ejemplo
+ +

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

+ +

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

+ +

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Algunos de los tipos de medios comunes son:

+ + + + + + + + + + + + + + + + + + + + +
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
+ +
+
Mas detalles
+ +

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

+ +

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

+ +

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

+ +

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

+ +

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

+ +

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

+
+ +

Imprimir

+ +

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

+ +

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

+ +

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

+ +

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

+ +
+
Ejemplo
+ +

Esta regla determina los márgenes a una pulgada en todos los lados:

+ +
@page {margin: 1in;}
+
+ +

Esta regla asegura que cada elemento H1 empiece en una nueva página:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Más detalles
+ +

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

+ +

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

+
+ +

Interfaces de Usuario

+ +

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

+ +

No existe un tipo especial de medio para aparatos con interfaz de usuario.

+ +

Si existen cinco selectores especiales:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
+ +
+

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

+
+ +

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

+ +

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
+ +

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

+ +

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Ejemplo
+ +

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+ +

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

+
+ +
+
Más detalles
+ +

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

+ +

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

+
+ +

Acción: Imprimir un documento

+ +
    +
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. +
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. +

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

+ +

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

+
+ +

Ver soluciones a estos retos.

+ +

¿Qué sigue?

+ +

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

+ +

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git "a/files/es/web/css/introducci\303\263n/selectors/index.html" "b/files/es/web/css/introducci\303\263n/selectors/index.html" new file mode 100644 index 0000000000..5d63b82547 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/selectors/index.html" @@ -0,0 +1,415 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

+ +

Información: Selectores

+ +


+ CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

+ +
strong {
+  color: red;
+}
+
+ +

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

+ +
+
Más detalles
+ +

La parte interior de las llaves es la declaración.

+ +

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

+ +

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

+ +

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

+
+ +

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

+ +

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

+ +

Dos atributos tienen un estatus especial para CSS. Son class e id.

+ +

Class: Selectores de clase

+ +

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

+ +

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

+ +

Selectores ID

+ +

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
+  

+ +

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

+ +
+
Ejemplo
+ +

Esta etiqueta HTML tiene un atributo class y un atributo id:

+ +
<p class="key" id="principal">
+
+ +

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

+ +

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

+ +
.key {
+  color: green;
+}
+
+ +

Esta regla hace que el único elemento de id principal este en negrita:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

+ +
+
Más detalles
+ +

También se pueden combinar selectores, haciendo un selector más específico.
+
+ Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

+ +

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

+
+ +

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

+ +

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

+ +

Las pseudo-clases de los selectores

+ +

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

+ +

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

+ +
+
Sintaxis
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Listado de pseudo-classes:

+ +
    +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":nth-child") }}
    • +
  • {{ Cssxref(":nth-last-child") }}
    • +
  • {{ Cssxref(":nth-of-type") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":disabled") }}
    • +
+ +

Información: Los selectores basados en relaciones (relationships)

+ +

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectores comunes basados en relaciones
SelectorSelects
A ECualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > ECualquier elemento E que es un hijo de un elemento A
E:first-childCualquier elemento E que es el primer hijo de su padre
B + ECualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)
+ +

Usted puede combinarlas para expresar relaciones complejas.
+
+ También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

+ +
+
Ejemplo
+ +

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

+ +
    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+
+ +

El resultado se ve así:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Más detalles
+ +

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

+ +

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

+ +

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

+ +

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

+
+ +

Action: Using class and ID selectors

+ +
    +
  1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
    2. +
  2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Ahora edite su archivo CSS. Reemplazar todo el contenido con: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guarde los archivos y actualizar el navegador para ver el resultado: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

    + +

    Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

    + +

    El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

    +
    5. +
+ +
+
Desafíos
+ +
    +
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul: + + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Action: Using pseudo-classes selectors

+ +
    +
  1. Cree un HTML como el siguiente: + + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Ahora edite su archivo CSS. Reemplace todo el contenido con: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Acción: Uso de selectores basados en las relaciones y pseudo-clases

+ +

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

Aplicararemos a una estructura de HTML como el siguiente:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

+ +

¿Y ahora qué?

+ +

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/es/web/css/isolation/index.html b/files/es/web/css/isolation/index.html new file mode 100644 index 0000000000..e4e6cf32d4 --- /dev/null +++ b/files/es/web/css/isolation/index.html @@ -0,0 +1,158 @@ +--- +title: Isolation +slug: Web/CSS/isolation +tags: + - CSS + - Composición CSS + - Propieiedad CSS +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS isolation define si el elemento debe crear un nuevo {{glossary("stacking context")}}.

+ +

Esto es especialmente útil en conjunto con {{cssxref("background-blend-mode")}} que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+isolation: auto;
+isolation: isolate;
+
+/* Global values */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

Valores

+ +
+
auto
+
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.
+
isolate
+
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('Examples', "230", "230") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Initial definition
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoDesktop('36')}}{{CompatNo()}}307.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoMobile('36')}}{{CompatNo()}}368.0
+
+ +

También puedes ver

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/justify-content/index.html b/files/es/web/css/justify-content/index.html new file mode 100644 index 0000000000..56e6af1ff7 --- /dev/null +++ b/files/es/web/css/justify-content/index.html @@ -0,0 +1,222 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.

+ +

El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.

+ +
+

No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para extender su uso a cualquier elemento en bloque. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.

+
+ +
{{cssinfo}}
+ +

Véase Using CSS flexible boxes para más propiedades e información.

+ +

Sintaxis

+ +
/* Alinear items flex desde el comienzo */
+justify-content: flex-start;
+
+/* Alinear items desde el final */
+justify-content: flex-end;
+
+/* Alinear items en el centro */
+justify-content: center;
+
+/* Distribuir items uniformemente
+El primer item al inicio, el último al final */
+justify-content: space-between;
+
+/* Distribuir items uniformemente
+Los items tienen el mismo espacio a su alrededor */
+justify-content: space-around;
+
+/* Valores globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

Valores

+ +
+
flex-start
+
Los items flex se colocan comenzando desde el comienzo principal. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.
+
flex-end
+
Los items flex se colocan comenzando desde el final principal. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente.
+
center
+
Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.
+
space-between
+
Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.
+
space-around
+
Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Contenido HTML

+ +
<div id="container">
+  <p>justify-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+ +

CSS

+ +
#container > div {
+  display: flex;
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+#container > div > div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+
+ +

Resultados en:

+ +

{{ EmbedLiveSample('Ejemplos', 600, 550) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soprte básico{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]
+ {{CompatGeckoDesktop("20.0")}}		21.0{{property_prefix("-webkit")}}1112.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soprte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox soporta sólo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia  about:config "layout.css.flexbox.enabled" a true.

+ +

Ver también

+ + diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..1b46384b51 --- /dev/null +++ b/files/es/web/css/layout_cookbook/index.html @@ -0,0 +1,77 @@ +--- +title: Libro de recetas de maquetación CSS +slug: Web/CSS/Layout_cookbook +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.

+ +
+

Nota: Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro módulo de aprendizaje de diseño CSS, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.

+
+ +

Las recetas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecetaDescripciónMetodos de maquetación
Objetos mediaUna caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet.CSS Grid, alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}}
ColumnasCuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas.CSS Grid, Multicol, Flexbox
Centrar un elementoCómo centrar un elemento horizontal y verticalmente.Flexbox, Box Alignment
Pies de página pegajososCreación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto.CSS Grid, Flexbox
Navegación divididaUn patrón de navegación en el que algunos enlaces se separan visualmente de los demás.Flexbox, {{cssxref("margin")}}
Navegación con migas de panCrear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. +

Flexbox

+
Lista de grupos con insigniasUna lista de elementos con una insignia para mostrar un conteo.Flexbox, Box Alignment
PaginaciónEnlaces a páginas de contenido (como los resultados de búsqueda).Flexbox, Box Alignment
TarjetaUn componente de tarjeta, que se muestra en una rejilla de tarjetas.Grid Layout
+ +

Aporta con una receta

+ +

Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. Revisa esta página para obtener una plantilla y pautas para escribir su propio ejemplo.

diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html new file mode 100644 index 0000000000..5e671c9806 --- /dev/null +++ b/files/es/web/css/layout_mode/index.html @@ -0,0 +1,31 @@ +--- +title: Layout mode +slug: Web/CSS/Layout_mode +tags: + - CSS + - Layout + - Referencia +translation_of: Web/CSS/Layout_mode +--- +
{{cssref}}
+ +

Un modo de diseño CSS(CSS layout mode), a veces simplemente llamado "layout", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:

+ +
    +
  • El block layout, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(float) elementos o distribuirlos en múltiples columnas.
    • +
  • El inline layout, diseñado para presentar texto.
    • +
  • El table layout, diseñado para presentar tablas.
    • +
  • El positioned layout, diseñado para posicionar elementos sin demasiada interacción con otros elementos. 
    • +
  • El flexible box layout, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.
    • +
  • El grid layout, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).
    • +
+ +
+

Nota: No todas las propiedades CSS aplican a todos los modos de diseño. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.

+
+ +

Ver También

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/es/web/css/left/index.html b/files/es/web/css/left/index.html new file mode 100644 index 0000000000..8a7912b86d --- /dev/null +++ b/files/es/web/css/left/index.html @@ -0,0 +1,144 @@ +--- +title: left +slug: Web/CSS/left +translation_of: Web/CSS/left +--- +

{{CSSRef}}

+ + +

La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

+ +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

+ +
{{EmbedInteractiveExample("pages/css/left.html")}}
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
left: <length> | <percentage> | auto | inherit ;
+
+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud, un valor negativo, cero, un valor positivo.
+
{{cssxref("<percentage>")}}
+
Un porcentaje del ancho del bloque contenedor.
+
+ +

Ejemplos

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+  </div>
+</div>
+ +

{{EmbedLiveSample('Ejemplos',1200,650)}}

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + +

{{Compat("css.properties.left")}}

+ + +

Ver también

+ +
    +
  • {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}
    • +
diff --git a/files/es/web/css/length/index.html b/files/es/web/css/length/index.html new file mode 100644 index 0000000000..1b66b63ef9 --- /dev/null +++ b/files/es/web/css/length/index.html @@ -0,0 +1,332 @@ +--- +title: +slug: Web/CSS/length +tags: + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <length> denota medidas de distancia. Es un valor {{cssxref("<number>")}} seguido por una unidad de longitud (px, em, pc, in, mm, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("<number>")}} 0.

+ +

Muchas propiedades CSS (CSS properties) reciben valores <length>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.

+ +

Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("<percentage>")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <length>, no son valores <length> en sí.

+ +

Interpolación

+ +

Los valores de tipo <length> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("<timing-function>")}} asociada a la animación.

+ +

Unidades

+ +

Unidades de longitud relativa

+ +

Longitudes relativas a la fuente

+ +
+
em
+
Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente heredado por el elemento. +
Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el ritmo vertical de la página, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en em.
+
+
ex
+
Esta unidad representa la altura de la x de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; 1ex ≈ 0.5em en muchas fuentes.
+
ch
+
Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento.
+
rem
+
Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial. +
Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades em, aunque estas son ligeramente más complejas.
+
+
+ +

Longitudes de porcentaje del viewport

+ +

Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).

+ +

En conjunto con overflow:auto, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de overflow:scroll, sí lo es.

+ +

En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.

+ +
+
vh
+
1/100 de la altura del viewport.
+
vw
+
1/100 de la anchura del viewport.
+
vmin
+
1/100 del valor mínimo entre la altura y anchura del viewport.
+
vmax
+
1/100 del valor máximo entre la altura y anchura del viewport.
+
+ +

Unidades de longitud absoluta

+ +
+
+ +

Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.

+ +

Para dispositivos de ppp bajo, la unidad px representa el píxel de referencia físico, y el resto son definidos con relación a éste. Así, 1in es definido como 96px, que equivalen a 72pt. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (in), centrímetros (cm), milímetros (mm) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.

+ +

Para dispositivos de alto ppp, las pulgadas (in), centrímetros (cm), milímetros (mm) son definidos como su contraparte física. De esta forma, la unidad px es definida con relación a ellas (1/96 de 1 pulgada).

+ +
+

Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como em o rem.

+
+ +
+
px
+
Relativa al dispositivo de visualización.
+ Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.
+ Para impresoras y pantallas de muy alta resolución, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.
+
mm
+
Un milímetro.
+
q
+
Un cuarto de milímetro (1/40° de centímetro).
+
cm
+
Un centímetro (10 milímetros).
+
in
+
Una pulgada (2.54 centímetros).
+
pt
+
Un punto (1/72° de pulgada).
+
pc
+
Una pica (12 puntos).
+
mozmm {{non-standard_inline}}
+
Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.
+
+ +

Unidades CSS y puntos por pulgada (dots-per-inch)

+ +

La unidad in no representa una pulgada física en pantalla, sino 96px. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán 96ppp. En dispositivos con mayor densidad de píxeles, 1in será menor que una pulgada física. De forma similar, mm, cm, y pt no son longitudes absolutas.

+ +

Algunos ejemplos específicos:

+ +
    +
  • 1in siempre son 96px,
    • +
  • 3pt siempre son 4px,
    • +
  • 25.4mm siempre son 96px.
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Añadidos ch, rem, vw, vh, vmin, vmax y q
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}pt, pc, px son definidos explícitamente (fueron definidos implícitamente en CSS1)
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}} 

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1{{ CompatGeckoDesktop("1.0")}}3.03.51.0
ch +

27

+ 		{{ CompatGeckoDesktop("1.0")}}[1]9.020.07.0
ex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rem4 (532.3){{ CompatGeckoDesktop("1.9.2")}}9.011.64.1
vh, vw20{{CompatGeckoDesktop("19")}}9.020.06.0
vmin +

20

+ 		{{CompatGeckoDesktop("19")}}9.0[2]20.06.0
vmax26{{CompatGeckoDesktop("19")}}{{CompatNo}}20.0{{CompatVersionUnknown}}
Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
mozmm {{non-standard_inline}}{{CompatNo}}{{ CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
1in siempre es 96ppp{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
q{{CompatNo}}{{CompatGeckoDesktop("49.0")}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ch{{CompatNo}}{{CompatVersionUnknown}}7.8{{CompatUnknown}}7.1.1
ex{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rem2.1{{CompatVersionUnknown}}{{CompatUnknown}}12.04.0
vh, vw, vmin{{CompatVersionUnknown}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}6.0
vmax1.5{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}4.0
Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}{{CompatUnknown}}{{CompatGeckoMobile("21.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
q{{CompatUnknown}}{{CompatGeckoMobile("49.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch era la anchura de 'M', y no funcionaba para las propiedades CSS {{CSSxref("border-width")}} y {{CSSxref("outline-width")}}.

+ +

[2] Internet Explorer implementa esto con el nombre no estándar vm.

diff --git a/files/es/web/css/line-height/index.html b/files/es/web/css/line-height/index.html new file mode 100644 index 0000000000..4d5429ef2c --- /dev/null +++ b/files/es/web/css/line-height/index.html @@ -0,0 +1,125 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías + - para_revisar + - páginas_a_traducir +translation_of: Web/CSS/line-height +--- +
https://developer.mozilla.org/en-US/docs/Web/CSS{{ CSSRef() }}
+/*Keyword value*/
+line-height: normal;
+
+/
+ + + +

Resumen

+ +

La propiedad  CSS line-height establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }}
    • +
  • Aplicable a: todos los elementos.
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
    • +
  • Porcentajes: se refieren a tamaño de la fuente del elemento mismo.
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: para los valores <length> y <percentage>, el valor absoluto, en otro caso, como se especifica.
    • +
+ +

Syntax

+ + + +
/* Keyword value */
+line-height: normal;
+
+/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente
+del elemento */
+line-height: 3.5;
+
+/* <longitud> valores */
+line-height: 3em;
+
+/* <porcentaje> valores */
+line-height: 34%;
+
+/* Valores absolutos */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+ + + +

Valores

+ +
+
normal 
+
+

Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas 1.2, dependiendo del font-family del elemento.

+
+
<número> 
+
El valor utilizado es este <número> sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el <número> especificado. En la mayoría de los casos, esta es la forma preferida de establecer line-height y evitar resultados inesperados debido a la herencia.
+
<longitud> 
+
La <longitud> especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades em pueden producir resultados inesperados (ver ejemplo más abajo).
+
<porcentaje> 
+
En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <porcentaje> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación).
+
+ +

Ejemplos

+ +
/* Todas las reglas debajo ofrecen la misma line-height resultante */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* número/unitless */
+div { line-height: 1.2em; font-size: 10pt; }   /* longitud */
+div { line-height: 120%;  font-size: 10pt; }   /* porcentaje */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */
+ +

A menudo es más conveniente establecer el line-height usando {{cssxref("font")}} abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad font-family.

+ +

Notas

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer?
Firefox1
Netscape?
Opera?
Safari?
+ +

Ver también

+ +

{{ Cssxref("font-size") }}

diff --git a/files/es/web/css/linear-gradient()/index.html b/files/es/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..4a68a3b365 --- /dev/null +++ b/files/es/web/css/linear-gradient()/index.html @@ -0,0 +1,261 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - Función CSS + - Imágenes CSS + - Plantilla + - Referencia + - Web + - graficos +translation_of: Web/CSS/linear-gradient() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función CSS linear-gradient() crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.

+ +

{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}

+ +

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.

+ +

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

+ +

linear-gradient.png

+ +

La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.

+ +

El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.

+ +

De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.

+ +

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

+ +

Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.

+ +

La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.

+ +

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.

+ +
Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.
+For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
+ +

Syntax

+ +
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                                  \---------------------------------/ \----------------------------/
+                                    Definition of the gradient line         List of color stops
+
+                      where <side-or-corner> = [left | right] || [top | bottom]
+                        and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+
+ +

Values

+ +
+
<side-or-corner>
+
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
+
<angle>
+
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
+
<color-stop>
+
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+
+ +

History of the syntax

+ +

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+ +

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+ +

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+ +
    +
  • The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.
    • +
  • The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.
    • +
+ +

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

This should be the final syntax.

+ +

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+ +

Examples

+ +

Gradient at a 45 degree angle

+ +

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+ +

lingradexample.png

+ +

Gradient with multiple color stops

+ +

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+ +

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+ +
A rainbow made from a gradient
+ +
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
+ +

Repeating a linear gradient

+ +

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+ +

Using transparency

+ +
Linear with transparency
+ +
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+ +

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+ +

Notes

+ +

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
linear-gradient(to top left, blue, red);
+ +

is almost the same as:

+ +
-moz-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

Cross-browser gradients

+ +

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+ +

See also

+ + diff --git a/files/es/web/css/list-style-image/index.html b/files/es/web/css/list-style-image/index.html new file mode 100644 index 0000000000..c41f13541c --- /dev/null +++ b/files/es/web/css/list-style-image/index.html @@ -0,0 +1,72 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-image +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La imagen de lista (list-style-image) define la imagen que será utilizada como marcador del listado.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o none
    • +
+ +

Sintaxis

+ +
list-style-image: <uri> | none | inherit
+
+ +

Valores

+ +
+
uri 
+
directorio donde se encuentra la imagen que se utilizará como marcador.
+
+ +

Ejemplos

+ +

HTML

+ +
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}

+ +

{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "en": "en/CSS/list-style-image" } ) }}

diff --git a/files/es/web/css/list-style-position/index.html b/files/es/web/css/list-style-position/index.html new file mode 100644 index 0000000000..823553b62d --- /dev/null +++ b/files/es/web/css/list-style-position/index.html @@ -0,0 +1,97 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-position +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La posición de la lista (list-style-position) especifica donde será colocado el marcador de la lista en relación a la caja principal.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como especificado
    • +
+ +

Sintaxis

+ +
list-style-position: inside | outside | inherit
+
+ +

Valores

+ +
+
outside 
+
el marcador se encuentra fuera de la caja principal.
+
inside 
+
el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.
+
+ +

Ejemplos

+ +

HTML

+ +
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","420")}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}

+ +

{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}

diff --git a/files/es/web/css/list-style-type/index.html b/files/es/web/css/list-style-type/index.html new file mode 100644 index 0000000000..f118ce0358 --- /dev/null +++ b/files/es/web/css/list-style-type/index.html @@ -0,0 +1,117 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-type +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del listado.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: según se especificó
    • +
+ +

Sintaxis

+ +
 list-style-type:  <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
+
+ +

Valores

+ +
+
<std-list-style-name>
+
un nombre de estilo de lista estándar: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
+
disc
+
un disco.
+
circle
+
un círculo.
+
square
+
un cuadrado.
+
decimal
+
números decimales empezando con 1.
+
decimal-leading-zero
+
números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).
+
lower-roman
+
números romanos en minúscula (i, ii, iii, iv, v, etc.).
+
upper-roman
+
números romanos en mayúscula (I, II, III, IV, V, etc.).
+
lower-greek
+
letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...
+
lower-latin
+
letras ASCII en minúscula (a, b, c, ... z).
+
upper-latin
+
letras ASCII en mayúscula (A, B, C, ... Z).
+
armenian
+
numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).
+
georgian
+
numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).
+
lower-alpha
+
es igual que lower-latin.
+
upper-alpha
+
es igual que upper-latin.
+
none
+
nada.
+
+ +

Ejemplos

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+ +

HTML

+ +
<ol class="normal">List 1
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+<ol class="shortcut">List 2
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","300")}}

+ +

Notas

+ +

Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con lower-latin no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}

diff --git a/files/es/web/css/list-style/index.html b/files/es/web/css/list-style/index.html new file mode 100644 index 0000000000..bf92a28951 --- /dev/null +++ b/files/es/web/css/list-style/index.html @@ -0,0 +1,82 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad de estilo de lista (list-style) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +

list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit

+ +

Valores

+ +
+
ver {{ Cssxref("list-style-type", "list-style-type") }}.
+
ver {{ Cssxref("list-style-image", "list-style-image") }}.
+
ver {{ Cssxref("list-style-position", "list-style-position") }}.
+
+ +

Ejemplos

+ +

HTML

+ +
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+
+ +

CSS

+ +
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position")}}

diff --git a/files/es/web/css/margin-block-start/index.html b/files/es/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..1ec94d7b76 --- /dev/null +++ b/files/es/web/css/margin-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +translation_of: Web/CSS/margin-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

+ +
{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-block-start: 10px;  /* An absolute length */
+margin-block-start: 1em;   /* relative to the text size */
+margin-block-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-block-start: auto;
+
+/* Global values */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset;
+
+ +

Esto corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Se relaciona con {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento. 

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-block-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-block/index.html b/files/es/web/css/margin-block/index.html new file mode 100644 index 0000000000..680b41219d --- /dev/null +++ b/files/es/web/css/margin-block/index.html @@ -0,0 +1,108 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +translation_of: Web/CSS/margin-block +--- +

{{CSSRef}}{{SeeCompatTable}}  

+ +

La propiedad de CSS margin-block define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.

+ +
/* <length> values */
+margin-block: 10px 20px;  /* An absolute length */
+margin-block: 1em 2em;   /* relative to the text size */
+margin-block: 5% 2%;    /* relative to the nearest block container's width */
+margin-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+margin-block: auto;
+
+/* Global values */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ + + +

Estos valores corresponden a {{CSSxRef("margin-top")}} y  {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} depende de los valores definidos para {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.

+ +

Propiedades que lo constituyen

+ +

Los valores se pueden establecer individualmente como {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. La propiedad de dirección en línea es {{CSSxRef("margin-inline")}} que establece {{CSSxRef("margin-inline-start")}}, y {{CSSxRef("margin-inline-end")}}.

+ +

Sintaxis

+ +

Valores

+ +

La propiedad margin-block toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.

+ +

Definición formal

+ +

{{cssinfo}}

+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Definiendo el comienzo del bloque y el fin de los margenes

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-bottom/index.html b/files/es/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7d2b61a238 --- /dev/null +++ b/files/es/web/css/margin-bottom/index.html @@ -0,0 +1,139 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef()}}
+ +

Summary

+ +

The effect of the CSS margin-bottom property on the element boxEl margin-bottom CSS  (margen-inferior) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.

+ +

Esta propiedad no tiene ningun efecto sobre los elementos en linea non-replaced , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("margin-bottom")}}
+ +
margin-bottom: 10px;        /* Una longitud absoluta (sin redimension) */
+margin-bottom: 1em;         /* Una longitud en relacion con el tamaño del texto */
+margin-bottom: 5%;          /* Un margen respecto al ancho de su objeto padre (el que lo contiene)  */
+margin-bottom: auto;
+
+margin-bottom: inherit; /*margen heredado*/
+
+ +

Values

+ +
+
<length>
+
Specifies a fixed width. See {{cssxref("<length>")}} for possible values.
+
<percentage>
+
A {{cssxref("<percentage>")}} always relative to the width of the containing block.
+
auto
+
See {{cssxref("margin")}}.
+
+ +

Examples

+ +
.content { margin-bottom:   5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+#header  { margin-bottom:  1em; }
+
+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No significant change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defines margin-bottom as animatable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Removes its effect on inline elements.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/es/web/css/margin-inline-end/index.html b/files/es/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..2ce32be63e --- /dev/null +++ b/files/es/web/css/margin-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +translation_of: Web/CSS/margin-inline-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS margin-inline-end define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+
+ +

Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, que define las otras márgenes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-inline-end toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline-end")}}

+ +

Mira también

+ +
    +
  • {{cssxref("margin-inline-start")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-inline-start/index.html b/files/es/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..c0f734b017 --- /dev/null +++ b/files/es/web/css/margin-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +translation_of: Web/CSS/margin-inline-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

The margin-inline-start define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-inline-start: 10px;  /* An absolute length */
+margin-inline-start: 1em;   /* relative to the text size */
+margin-inline-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+
+ +

Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-inline-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline-start")}}

+ +

Mira también

+ +
    +
  • {{cssxref("margin-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-inline/index.html b/files/es/web/css/margin-inline/index.html new file mode 100644 index 0000000000..9bff11e577 --- /dev/null +++ b/files/es/web/css/margin-inline/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline +slug: Web/CSS/margin-inline +translation_of: Web/CSS/margin-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS margin-inline define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.

+ +
/* Valores <largo> */
+margin-inline: 10px 20px;  /* Un largo absoluto */
+margin-inline: 1em 2em;    /* relativo al tamaño del texto */
+margin-inline: 5% 2%;      /* relativo al ancho del container del bloque más cercano */
+margin-inline: 10px;       /* settear tanto el valor inicial como el final*/
+
+/* Valores keyword */
+margin-inline: auto;
+
+/* Valores globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+
+ +

Estos valores corresponden a las propiedades {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} dependiendo de los valores definidos por {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.

+ +

Los valores pueden ser establecidos indibidualmente como {{CSSxRef("margin-inline-start")}} y {{CSSxRef("margin-inline-end")}}. La propiedad de dirección de bloque es {{CSSxRef("margin-block")}} que establece {{CSSxRef("margin-block-start")}}, y {{CSSxRef("margin-block-end")}}.

+ +

Sintaxis

+ +

Valores

+ +

La propiedad margin-inline toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.

+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-right/index.html b/files/es/web/css/margin-right/index.html new file mode 100644 index 0000000000..7d7f2b6486 --- /dev/null +++ b/files/es/web/css/margin-right/index.html @@ -0,0 +1,26 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +translation_of: Web/CSS/margin-right +--- +

Definicion

+

El margen derecho de propiedad establece el margen derecho de un elemento.

+
    +
  • Nota: Los valores negativos son permitidas.
    • +
  • Heredado: No.
    • +
+

Sintaxis JavaScript

+

CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"

+

Ejemplo

+
h1
+{
+margin-right: 10px
+}
+h2
+{
+margin-right: -20px
+}
+
+
    +
  • Fuente: []
    • +
diff --git a/files/es/web/css/margin/index.html b/files/es/web/css/margin/index.html new file mode 100644 index 0000000000..bd0acd9524 --- /dev/null +++ b/files/es/web/css/margin/index.html @@ -0,0 +1,214 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen:  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.

+ +

También se permiten valores negativos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Aplica a todos los cuatro lados */
+margin: 1em;
+
+/* Vertical | Horizontal */
+margin: 5% auto;
+
+/* Arriba | Horizontal | Abajo */
+margin: 1em auto 2em;
+
+/* Arriba | Derecha | Abajo | Izquierda */
+margin: 2px 1em 0 auto;
+
+/* Valores globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

Valores

+ +

Acepta uno, dos , tres  o cuatro valores de los siguientes:

+ +
+
<length>
+
Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("<length>")}} para conocer las posibles unidades.
+
<percentage>
+
Un {{cssxref("<percentage>")}} relativo al ancho del bloque contenedor. Se permiten valores negativos.
+
auto
+
auto es reemplazado por algún valor apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
+ div { width:50%;  margin:0 auto; } centrará el div horizontalmente.
+
+ +
    +
  • Un único valor aplicará para todos los cuatro lados.
    • +
  • Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha.
    • +
  • Tres  valores aplicarán: El primero para arriba, el segundo para izquierda y derecha, el tercero para abajo.
    • +
  • Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda)
    • +
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo simple

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

Otro ejemplo

+ +
margin: 5%;                /* 5% para todos los lados */
+
+margin: 10px;              /* 10px para todos los lados */
+
+margin: 1.6em 20px;        /* 1.6em arriba y abajo, 20px izquierda y derecha */
+
+margin: 10px 3% 1em;       /* 10px arriba, 3% izquierda y derecha, 1em abajo */
+
+margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
+
+margin: 1em auto;          /* 1em arriba y abajo, centrado horizontalmente */
+
+margin: auto;              /* 0px de margen vertical, centrado horizontalmente */
+
+ +

Centrado horizontal con  margin: 0 auto;

+ +

Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center; .

+ +

Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html new file mode 100644 index 0000000000..5707a6ce0f --- /dev/null +++ b/files/es/web/css/max-block-size/index.html @@ -0,0 +1,178 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +translation_of: Web/CSS/max-block-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS max-block-size especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}. Esto es, si la dirección de escritura es horizontal, entonces max-block-size es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, max-block-size es lo mismo que {{cssxref("max-width")}}.

+ +

La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.

+ +

Esto es útil porque max-width siempre se utiliza para tamaños horizontales y max-height siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.

+ +

En cualquier momento usarías normalmente max-height o max-width, en su lugar deberías usar max-block-sizepara establecer el máximo "height" del contenido (even though this may not be a vertical value) y max-inline-size para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.

+ +
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* <percentage> values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

El valor de la propiedad max-block-size puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:

+ +

{{page("/en-US/docs/Web/CSS/max-width", "Values")}}

+ +

Cómo writing-mode afecta la directionalidad

+ +

Los valores de writing-mode afecta la asignación de max-block-size a max-width o max-height como sigue:

+ + + + + + + + + + + + + + + + + + +
Valores de writing-modemax-block-size es equivalente a
horizontal-tb, lr {{deprecated_inline}}, lr-tb {{deprecated_inline}}, rl {{deprecated_inline}}, rb {{deprecated_inline}}, rb-rl {{deprecated_inline}}{{cssxref("max-height")}}
vertical-rl, vertical-lr, sideways-rl {{experimental_inline}}, sideways-lr {{experimental_inline}}, tb {{deprecated_inline}}, tb-rl {{deprecated_inline}}{{cssxref("max-width")}}
+ +
+

The writing-mode values sideways-lr and sideways-rl were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

+
+ +
+

The writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel {{interwiki("wikipedia", "Moby-Dick")}}) es presentado en ambos modos de escritura: horizontal-tb y vertical-rl.

+ +

Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.

+ +

Contenido HTML 

+ +

El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases horizontal o vertical. Ambas cajas comparten la clase standard-box, que simplemente establece colores, relleno, y sus respectivos valores de max-block-size.

+ +
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
+<div class="standard-box horizontal">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+
+<p>Writing mode <code>vertical-rl</code>:</p>
+<div class="standard-box vertical">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+ +

Contenido CSS 

+ +

El CSS está definido por tres clases. La primera, standard-box, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.

+ +

Después que vienen las clases horizontal y vertical, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para horizontal-tb o vertical-rl dependiendo en qué clase se usa.

+ +
.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+ +

Resultado

+ +

Las dos cajas se ven así al final:

+ +

{{EmbedLiveSample("Ejemplo", 600, 850)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.max-block-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}
    • +
  • Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/max-height/index.html b/files/es/web/css/max-height/index.html new file mode 100644 index 0000000000..01c24aa995 --- /dev/null +++ b/files/es/web/css/max-height/index.html @@ -0,0 +1,94 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/max-height +--- +

 

+ +

<< Volver

+ +

Resumen

+ +

La propiedad max-height se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de max-height.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a : elementos de bloque o remplazados
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: se refiere a la altura del bloque contenedor.
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+ +

Sintaxis

+ +
max-height: <length> | <percentage>
+
+ +

Valores

+ +
    +
  • none : la {{ Cssxref("height", "altura") }} no tiene valor máxima.
    • +
  • length : puede ser en px, cm, in (píxel, centímetro o inches)
    • +
  • percentage : % especificado como un porcentaje de la altura del bloque contenedor.
    • +
+ +

Ejemplos

+ +
table { max-width: 75%; }
+
+form { max-width: none; }
+
+ +

Notas

+ +

{{ Cssxref("max-height") }} sobrescribe {{ Cssxref("height") }}, pero no {{ Cssxref("min-height") }}.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}

+ +

 

+ +
+

Categorías

+ +

Interwiki Languages

+ +
 
+
+ +

{{ languages( { "en": "en/CSS/max-height", "fr": "fr/CSS/max-height" } ) }}

diff --git a/files/es/web/css/max-inline-size/index.html b/files/es/web/css/max-inline-size/index.html new file mode 100644 index 0000000000..b5406c7dc6 --- /dev/null +++ b/files/es/web/css/max-inline-size/index.html @@ -0,0 +1,94 @@ +--- +title: max-inline-size +slug: Web/CSS/max-inline-size +translation_of: Web/CSS/max-inline-size +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  max-inline-size define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades {{cssxref("max-width")}} o {{cssxref("max-height")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}. Si el modo de escritura esta orientado verticalmente, el valor de max-inline-size relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con {{cssxref("max-block-size")}}, que define la otra dimensión del elemento.

+ +
{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* <percentage> values */
+max-inline-size: 75%;
+
+/* Keyword values */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Global values */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad max-inline-size toma los mismos valores como las propiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.max-inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/max-width/index.html b/files/es/web/css/max-width/index.html new file mode 100644 index 0000000000..55fa03d4ee --- /dev/null +++ b/files/es/web/css/max-width/index.html @@ -0,0 +1,158 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - Referencia_CSS +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

The max-width CSS property sets the maximum width of an element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified by max-width.

+ +
/* <length> value */
+max-width: 3.5em;
+
+/* <percentage> value */
+max-width: 75%;
+
+/* Keyword values */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Global values */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
The maximum width, expressed as a {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
The maximum width, expressed as a {{cssxref("<percentage>")}} of the containing block's width.
+
+ +

Keyword values

+ +
+
none
+
The width has no maximum value.
+
max-content{{experimental_inline()}}
+
The intrinsic preferred width.
+
min-content{{experimental_inline()}}
+
The intrinsic minimum width.
+
fill-available{{experimental_inline()}}
+
The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)
+
fit-content{{experimental_inline()}}
+
The same as max-content.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

The fit-content value can be used to set the width of an element based on the intrinsic size required by its content:

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.max-width")}}

+ +

See also

+ +
    +
  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
    • +
  • The box model, {{ Cssxref("box-sizing") }}
    • +
diff --git a/files/es/web/css/media_queries/index.html b/files/es/web/css/media_queries/index.html new file mode 100644 index 0000000000..630dc94b9c --- /dev/null +++ b/files/es/web/css/media_queries/index.html @@ -0,0 +1,107 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Las consultas de medios le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.

+ +

Son un componente clave del responsive design. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.

+ +

En CSS, use la {{cssxref ("@ media")}} at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use {{cssxref ("@ import")}} para aplicar condicionalmente una hoja de estilo completa.

+ +

 

+ +

Consultas de medios en HTML

+ +

En HTML, las consultas de medios se pueden aplicar a varios elementos:

+ +

     En el atributo {{HTMLElement ("link")}} {{htmlattrxref ("media", "link")}} del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
+      En el atributo {{HTMLElement ("source")}} {{htmlattrxref ("media", "source")}} del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos {{HTMLElement ("picture")}}.)
+      En el atributo {{HTMLElement ("style")}} del elemento {{htmlattrxref ("media", "style")}}, definen los medios a los que se debe aplicar el estilo.

+ +

 

+ +

Consultas de medios en JavaScript

+ +

 

+ +

En JavaScript puede usar el método {{domxref ("Window.matchMedia ()")}} para probar la ventana contra una consulta de medios. También puede usar {{domxref ("MediaQueryList.addListener ()")}} para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.

+ +

Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios.

+ +

Referencias

+ +

At-rules

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Usando consultas de medios
+
Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.
+
Probando las consultas de medios programáticamente
+
Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).
+
Usando consultas de medios en accesibilidad
+
Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidades con navegadores

+ +

@media rule

+ + + +

{{Compat("css.at-rules.media")}}

+ +

Ver también

+ +
    +
  • Use {{cssxref ("@ apoya")}} para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.
    • +
diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html new file mode 100644 index 0000000000..52f81e5765 --- /dev/null +++ b/files/es/web/css/min()/index.html @@ -0,0 +1,120 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - CSS Function + - CSS Grid + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +--- +
{{CSSRef}}
+ +

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

+ +
{{EmbedInteractiveExample("pages/css/function-min.html")}}
+ + + +

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

+ +

Sintaxis

+ +

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

+ +

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

+ +

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

+ +
    +
  • Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado auto
    • +
  • Es permitido anidar  max() y otros funciones min() como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion calc() en si.
    • +
  • La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <length>.
    • +
  • Usted puede (y con frecuencia necesitara) combinar los valores  min() y max(), o usar min() dentro de las funciones  clamp() o calc().
    • +
  • Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.
    • +
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Probemas de accesibilidad

+ +

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

+ + + +

Ejemplos

+ +

Setting a maximum size for a label and input

+ +

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

+ +

Veamos algo de CSS:

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

+ +
<form>
+  <label>Escribe algo:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.types.min")}}

+ +

Ver también

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("max", "max()")}}
    • +
  • CSS Values
    • +
diff --git a/files/es/web/css/min-block-size/index.html b/files/es/web/css/min-block-size/index.html new file mode 100644 index 0000000000..91847cba2d --- /dev/null +++ b/files/es/web/css/min-block-size/index.html @@ -0,0 +1,94 @@ +--- +title: min-block-size +slug: Web/CSS/min-block-size +translation_of: Web/CSS/min-block-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  min-block-size define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o a la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-block-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* <percentage> values */
+min-block-size: 10%;
+
+/* Keyword values */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Global values */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de min-block-size se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es {{cssxref("min-inline-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad min-block-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  min-block-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.min-block-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/min-height/index.html b/files/es/web/css/min-height/index.html new file mode 100644 index 0000000000..d61f0edf4e --- /dev/null +++ b/files/es/web/css/min-height/index.html @@ -0,0 +1,72 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad min-height se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (min-height).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Values

+ +
    +
  • length : puede ser en px, cm, in (píxel, centímetro o inches)
    • +
  • percentage : % especificado como un porcentaje de la altura del bloque contenedor.
    • +
+ +

Examples

+ +
table {min-height: 75%;}
+
+form {min-height: 0;}
+
+ +

Notes

+ +

{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}.

+ +

Esdpecificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}

diff --git a/files/es/web/css/min-inline-size/index.html b/files/es/web/css/min-inline-size/index.html new file mode 100644 index 0000000000..bf650c31a7 --- /dev/null +++ b/files/es/web/css/min-inline-size/index.html @@ -0,0 +1,95 @@ +--- +title: min-inline-size +slug: Web/CSS/min-inline-size +translation_of: Web/CSS/min-inline-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  min-inline-size define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* <percentage> values */
+min-inline-size: 10%;
+
+/* Keyword values */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Global values */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de  min-inline-size se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es {{cssxref("min-block-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad min-inline-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.min-inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/min-width/index.html b/files/es/web/css/min-width/index.html new file mode 100644 index 0000000000..efe24d19b1 --- /dev/null +++ b/files/es/web/css/min-width/index.html @@ -0,0 +1,80 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - Referencia_CSS +translation_of: Web/CSS/min-width +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

La propiedad min-width se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que min-width.

+ +
    +
  • {{ Xref_cssinitial() }}: 0
    • +
  • Aplicable a: elementos de tipo bloque.
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: se refieren a la anchura del bloque contenedor.
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}:
    • +
+ +

Sintaxis

+ +

min-width: <longitud> | <porcentaje> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

+ +

Valores

+ +
    +
  • length : puede ser expresado en px, cm, in
    • +
  • percentage : expresado con "%" es un porcentaje del ancho del elemento contenedor.
    • +
  • -moz-max-content : el ancho intrínseco preferido {{ Fx_minversion_inline(3) }}
    • +
  • -moz-min-content : el ancho intrínseco mínimo {{ Fx_minversion_inline(3) }}
    • +
  • -moz-available : el ancho del contenedor menos el margen horizontal, borde y padding {{ Fx_minversion_inline(3) }}
    • +
  • -moz-fit-content : igual que -moz-min-content {{ Fx_minversion_inline(3) }}
    • +
+ +

Ejemplos

+ +
table{min-width: 75%;}
+
+form{min-width: 0;}
+
+ +

Notas

+ +

{{ Cssxref("min-width") }} sobrescribe los valores de {{ Cssxref("max-width") }} y {{ Cssxref("width") }}.

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

box model, {{ Cssxref("min-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("max-width") }}

diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html new file mode 100644 index 0000000000..eefc519566 --- /dev/null +++ b/files/es/web/css/minmax()/index.html @@ -0,0 +1,214 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS Grid + - Diseño + - Función CSS + - Referencia + - Rejilla CSS + - Web +translation_of: Web/CSS/minmax() +--- +

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

+ +
/* valores <ancho no-flexible>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* valores <ancho fijo>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* valores <ancho no-flexible>, <ancho fijo> */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Sintáxis

+ +

Una función que toma dos parámetros, min y max.

+ +

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

+ +

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una medida no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
+
max-content
+
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
+
min-content
+
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
+
+ +

Sintáxis formal

+ +
{{csssyntax}}
+ +

Propiedades CSS

+ +

La función minmax() puede ser usada dentro de: 

+ + + +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Elemento tan ancho como el contenido,<br/>
+    pero de máximo 300 píxeles.
+  </div>
+  <div>
+    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+  </div>
+  <div>
+    Elemento inflexible de 150 píxeles de ancho.
+  </div>
+</div>
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Mira también

+ + + + diff --git a/files/es/web/css/mozilla_extensions/index.html b/files/es/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..8a6f0cb5bc --- /dev/null +++ b/files/es/web/css/mozilla_extensions/index.html @@ -0,0 +1,616 @@ +--- +title: Extensiones CSS de Mozilla +slug: Web/CSS/Mozilla_Extensions +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Mozilla soporta ciertas extensiones de CSS con el prefijo -moz-.

+ +

Algunas de estas propiedades han sido incluidas en una especificación de CSS en borrador para incluirlas en la recomendación final, pero aún están en proceso experimental. La propiedad final estándar puede ser diferente de la implementación actual con prefijo. Algunas de estas propiedades no estándares solo son aplicables en elementos XUL.

+ +

Cuando se estandarizan y se añade el soporte para la variante sin prefijo, las propiedades prefijadas se abandonan.

+ +

Propiedades estándares prefijadas de Mozilla

+ +
A + +
    +
  • {{Cssxref("-moz-appearance")}}
    • +
+B + +
    +
  • {{Cssxref("-moz-background-inline-policy")}}
    • +
  • {{cssxref("box-sizing", "-moz-box-sizing")}}
    • +
+C D E + +
    +
  • {{Cssxref("clip-path")}} (aplicado en SVG y otros)
    • +
  • {{Cssxref("-moz-column-count")}}
    • +
  • {{Cssxref("-moz-column-fill")}}
    • +
  • {{Cssxref("-moz-column-gap")}}
    • +
  • {{Cssxref("-moz-column-width")}}
    • +
  • {{Cssxref("-moz-column-rule")}}
    • +
  • {{Cssxref("-moz-column-rule-width")}}
    • +
  • {{Cssxref("-moz-column-rule-style")}}
    • +
  • {{Cssxref("-moz-column-rule-color")}}
    • +
+F G + +
    +
  • {{Cssxref("filter")}} (aplicado en SVG y otros)
    • +
  • {{Cssxref("-moz-font-feature-settings")}}
    • +
  • {{cssxref("-moz-font-language-override")}}
    • +
+H + +
    +
  • {{Cssxref("-moz-hyphens")}}
    • +
+I—O + +
    +
  • {{Cssxref("mask")}} (aplicado en SVG y otros)
    • +
+P + +
    +
  • {{Cssxref("pointer-events")}} (aplicado en SVG y otros)
    • +
+Q—T + +
    +
  • {{cssxref("-moz-text-align-last")}}
    • +
  • {{Cssxref("text-decoration-color","-moz-text-decoration-color")}}
    • +
  • {{Cssxref("text-decoration-line","-moz-text-decoration-line")}}
    • +
  • {{Cssxref("text-decoration-style","-moz-text-decoration-style")}}
    • +
+
+ +

Propiedades no estándar prefijadas propietarias de Mozilla (no usar en sitios web)

+ +
A B + +
    +
  • {{Cssxref("-moz-binding")}}
    • +
  • {{Cssxref("-moz-border-bottom-colors")}}
    • +
  • {{Cssxref("-moz-border-end")}}
    • +
  • {{Cssxref("-moz-border-end-color")}}
    • +
  • {{Cssxref("-moz-border-end-style")}}
    • +
  • {{Cssxref("-moz-border-end-width")}}
    • +
  • {{Cssxref("-moz-border-left-colors")}}
    • +
  • {{Cssxref("-moz-border-right-colors")}}
    • +
  • {{Cssxref("-moz-border-start")}}
    • +
  • {{Cssxref("-moz-border-start-color")}}
    • +
  • {{Cssxref("-moz-border-start-style")}}
    • +
  • {{Cssxref("-moz-border-start-width")}}
    • +
  • {{Cssxref("-moz-border-top-colors")}}
    • +
  • {{Cssxref("-moz-box-align")}}
    • +
  • {{Cssxref("-moz-box-direction")}}
    • +
  • {{Cssxref("-moz-box-flex")}}
    • +
  • {{Cssxref("-moz-box-ordinal-group")}}
    • +
  • {{Cssxref("-moz-box-orient")}}
    • +
  • {{Cssxref("-moz-box-pack")}}
    • +
+ +

C—F

+ +
    +
  • {{Cssxref("-moz-float-edge")}}
    • +
  • {{Cssxref("-moz-force-broken-image-icon")}}
    • +
+ +

G H I

+ +
    +
  • {{Cssxref("-moz-image-region")}}
    • +
+ +

J—M

+ +
    +
  • {{Cssxref("-moz-margin-end")}}
    • +
  • {{Cssxref("-moz-margin-start")}}
    • +
+ +

N O

+ +
    +
  • {{cssxref("-moz-orient")}}
    • +
  • {{Cssxref("-moz-outline-radius")}}
    • +
  • {{Cssxref("-moz-outline-radius-bottomleft")}}
    • +
  • {{Cssxref("-moz-outline-radius-bottomright")}}
    • +
  • {{Cssxref("-moz-outline-radius-topleft")}}
    • +
  • {{Cssxref("-moz-outline-radius-topright")}}
    • +
+ +

P Q R

+ +
    +
  • {{Cssxref("-moz-padding-end")}}
    • +
  • {{Cssxref("-moz-padding-start")}}
    • +
+ +

S

+ +
    +
  • {{Cssxref("-moz-script-level")}}
    • +
  • {{Cssxref("-moz-script-min-size")}}
    • +
  • {{Cssxref("-moz-script-size-multiplier")}}
    • +
  • {{Cssxref("-moz-stack-sizing")}}
    • +
+ +

T U V

+ +
    +
  • {{Cssxref("-moz-user-focus")}}
    • +
  • {{Cssxref("-moz-user-input")}}
    • +
  • {{Cssxref("-moz-user-modify")}}
    • +
  • {{Cssxref("-moz-user-select")}}
    • +
+ +

W—Z

+ +
    +
  • {{Cssxref("-moz-window-shadow")}}
    • +
+
+ +

Propiedades prefijadas anteriormente, ahora estándar

+ +
    +
  • {{Cssxref("animation", "-moz-animation")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-delay", "-moz-animation-delay")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-direction", "-moz-animation-direction")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-duration", "-moz-animation-duration")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-name", "-moz-animation-name")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("background-clip", "-moz-background-clip")}}
    • +
  • {{Cssxref("background-origin", "-moz-background-origin")}}
    • +
  • {{Cssxref("background-size", "-moz-background-size")}}
    • +
  • {{Cssxref("border-image","-moz-border-image")}}
    • +
  • {{Cssxref("opacity","-moz-opacity")}}
    • +
  • {{Cssxref("outline","-moz-outline")}}
    • +
  • {{Cssxref("outline-color","-moz-outline-color")}}
    • +
  • {{Cssxref("outline-offset","-moz-outline-offset")}}
    • +
  • {{Cssxref("outline-style","-moz-outline-style")}}
    • +
  • {{Cssxref("outline-width","-moz-outline-width")}}
    • +
  • {{Cssxref("perspective", "-moz-perspective")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("perspective-origin","-moz-perspective-origin")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform", "-moz-transform")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform-origin", "-moz-transform-origin")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform-style", "-moz-transform-style")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition", "-moz-transition")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-delay", "-moz-transition-delay")}}  [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-duration", "-moz-transition-duration")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-property", "-moz-transition-property")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Aún se acepta la versión con prefijo]
    • +
+ +

Valores

+ +

Para todas las propiedades

+ +
    +
  • {{cssxref("initial","-moz-initial")}}
    • +
+ +

{{Cssxref("-moz-appearance")}}

+ +
    +
  • button
    • +
  • button-arrow-down
    • +
  • button-arrow-next
    • +
  • button-arrow-previous
    • +
  • button-arrow-up
    • +
  • button-bevel
    • +
  • checkbox
    • +
  • checkbox-container
    • +
  • checkbox-label
    • +
  • checkmenuitem
    • +
  • dialog
    • +
  • groupbox
    • +
  • listbox
    • +
  • menuarrow
    • +
  • menucheckbox
    • +
  • menuimage
    • +
  • menuitem
    • +
  • menuitemtext
    • +
  • menulist
    • +
  • menulist-button
    • +
  • menulist-text
    • +
  • menulist-textfield
    • +
  • menupopup
    • +
  • menuradio
    • +
  • menuseparator
    • +
  • -moz-mac-unified-toolbar {{Fx_minversion_inline(3.5)}}
    • +
  • -moz-win-borderless-glass
    • +
  • -moz-win-browsertabbar-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-communications-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-glass
    • +
  • -moz-win-media-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-window-button-box
    • +
  • -moz-window-button-box-maximized
    • +
  • -moz-window-button-close
    • +
  • -moz-window-button-maximize
    • +
  • -moz-window-button-minimize
    • +
  • -moz-window-button-restore
    • +
  • -moz-window-titlebar
    • +
  • -moz-window-titlebar-maximized
    • +
  • progressbar
    • +
  • progresschunk
    • +
  • radio
    • +
  • radio-container
    • +
  • radio-label
    • +
  • radiomenuitem
    • +
  • resizer
    • +
  • resizerpanel
    • +
  • scale-horizontal
    • +
  • scalethumb-horizontal
    • +
  • scalethumb-vertical
    • +
  • scale-vertical
    • +
  • scrollbarbutton-down
    • +
  • scrollbarbutton-left
    • +
  • scrollbarbutton-right
    • +
  • scrollbarbutton-up
    • +
  • scrollbar-small
    • +
  • scrollbarthumb-horizontal
    • +
  • scrollbarthumb-vertical
    • +
  • scrollbartrack-horizontal
    • +
  • scrollbartrack-vertical
    • +
  • separator
    • +
  • spinner
    • +
  • spinner-downbutton
    • +
  • spinner-textfield
    • +
  • spinner-upbutton
    • +
  • statusbar
    • +
  • statusbarpanel
    • +
  • tab
    • +
  • tabpanels
    • +
  • tab-scroll-arrow-back
    • +
  • tab-scroll-arrow-forward
    • +
  • textfield
    • +
  • textfield-multiline
    • +
  • toolbar
    • +
  • toolbarbutton-dropdown
    • +
  • toolbox
    • +
  • tooltip
    • +
  • treeheadercell
    • +
  • treeheadersortarrow
    • +
  • treeitem
    • +
  • treetwisty
    • +
  • treetwistyopen
    • +
  • treeview
    • +
  • window
    • +
+ +

{{cssxref("background-image")}}

+ +
    +
  • Gradientes {{Gecko_minversion_inline("1.9.2")}} +
      +
    • {{cssxref("-moz-linear-gradient")}}
      • +
    • {{cssxref("-moz-radial-gradient")}}
      • +
    +
    • +
  • Elementos {{gecko_minversion_inline("2.0")}} +
      +
    • {{cssxref("-moz-element")}}
      • +
    +
    • +
  • Sub-imágenes +
      +
    • {{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}
      • +
    +
    • +
+ +

{{Cssxref("border-color")}}

+ +
    +
  • -moz-use-text-color {{Deprecated_inline}} Usar {{Cssxref("currentColor")}}
    • +
+ +

{{Cssxref("border-style")}}  y  {{Cssxref("outline-style")}}

+ +
    +
  • -moz-bg-inset | -moz-bg-outset | -moz-bg-solid {{obsolete_inline}}  abandonado en Gecko 1.9 (Firefox 3.0)
    • +
+ +

Palabras clave de {{cssxref("<color>")}}

+ +
    +
  • -moz-activehyperlinktext
    • +
  • -moz-hyperlinktext
    • +
  • -moz-visitedhyperlinktext
    • +
  • -moz-buttondefault
    • +
  • -moz-buttonhoverface
    • +
  • -moz-buttonhovertext
    • +
  • -moz-default-background-color {{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-default-color {{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-cellhighlight
    • +
  • -moz-cellhighlighttext
    • +
  • -moz-field
    • +
  • -moz-fieldtext
    • +
  • -moz-dialog
    • +
  • -moz-dialogtext
    • +
  • -moz-dragtargetzone
    • +
  • -moz-mac-accentdarkestshadow
    • +
  • -moz-mac-accentdarkshadow
    • +
  • -moz-mac-accentface
    • +
  • -moz-mac-accentlightesthighlight
    • +
  • -moz-mac-accentlightshadow
    • +
  • -moz-mac-accentregularhighlight
    • +
  • -moz-mac-accentregularshadow
    • +
  • -moz-mac-chrome-active {{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-chrome-inactive {{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-focusring
    • +
  • -moz-mac-menuselect
    • +
  • -moz-mac-menushadow
    • +
  • -moz-mac-menutextselect
    • +
  • -moz-menuhover
    • +
  • -moz-menuhovertext
    • +
  • -moz-win-communicationstext {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-mediatext {{gecko_minversion_inline(1.9)}}
    • +
  • -moz-nativehyperlinktext {{Gecko_minversion_inline("1.9.1")}}
    • +
+ +

{{Cssxref("display")}}

+ +
    +
  • -moz-box
    • +
  • -moz-inline-block {{obsolete_inline}}
    • +
  • -moz-inline-box
    • +
  • -moz-inline-grid
    • +
  • -moz-inline-stack
    • +
  • -moz-inline-table {{obsolete_inline}}
    • +
  • -moz-grid
    • +
  • -moz-grid-group
    • +
  • -moz-grid-line
    • +
  • -moz-groupbox
    • +
  • -moz-deck
    • +
  • -moz-popup
    • +
  • -moz-stack
    • +
  • -moz-marker
    • +
+ +

{{cssxref("empty-cells")}}

+ +
    +
  • -moz-show-background (valor por defecto en modo no estándar quirks mode)
    • +
+ +

{{Cssxref("font")}}

+ +
    +
  • -moz-button
    • +
  • -moz-info
    • +
  • -moz-desktop
    • +
  • -moz-dialog (también un color)
    • +
  • -moz-document
    • +
  • -moz-workspace
    • +
  • -moz-window
    • +
  • -moz-list
    • +
  • -moz-pull-down-menu
    • +
  • -moz-field (también un color)
    • +
+ +

{{Cssxref("font-family")}}

+ +
    +
  • -moz-fixed
    • +
+ +

{{Cssxref("image-rendering")}}

+ +
    +
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • +
+ +

{{cssxref("<length>")}}

+ +
    +
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • +
+ +

{{Cssxref("list-style-type")}}

+ +
    +
  • -moz-arabic-indic
    • +
  • -moz-bengali
    • +
  • -moz-cjk-earthly-branch
    • +
  • -moz-cjk-heavenly-stem
    • +
  • -moz-devanagari
    • +
  • -moz-ethiopic-halehame
    • +
  • -moz-ethiopic-halehame-am
    • +
  • -moz-ethiopic-halehame-ti-er
    • +
  • -moz-ethiopic-halehame-ti-et
    • +
  • -moz-ethiopic-numeric
    • +
  • -moz-gujarati
    • +
  • -moz-gurmukhi
    • +
  • -moz-hangul
    • +
  • -moz-hangul-consonant
    • +
  • -moz-japanese-formal
    • +
  • -moz-japanese-informal
    • +
  • -moz-kannada
    • +
  • -moz-khmer
    • +
  • -moz-lao
    • +
  • -moz-malayalam
    • +
  • -moz-myanmar
    • +
  • -moz-oriya
    • +
  • -moz-persian
    • +
  • -moz-simp-chinese-formal
    • +
  • -moz-simp-chinese-informal
    • +
  • -moz-tamil
    • +
  • -moz-telugu
    • +
  • -moz-thai
    • +
  • -moz-trad-chinese-formal
    • +
  • -moz-trad-chinese-informal
    • +
  • -moz-urdu
    • +
+ +

{{Cssxref("overflow")}}

+ +
    +
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • +
+ +

{{Cssxref("text-align")}}

+ +
    +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-center")}}
    • +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-left")}}
    • +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-right")}}
    • +
+ +

{{Cssxref("text-decoration")}}

+ +
    +
  • -moz-anchor-decoration
    • +
+ +

{{Cssxref("-moz-user-select")}}

+ +
    +
  • -moz-all
    • +
  • -moz-none
    • +
+ +

{{Cssxref("width")}},  {{Cssxref("min-width")}}  y  {{Cssxref("max-width")}}

+ +
    +
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-available {{Fx_minversion_inline(3)}}
    • +
+ +

Pseudoelementos y pseudoclases

+ +
    +
  • {{Cssxref("::-moz-anonymous-block")}} eg@:- bug 331432
    • +
  • {{Cssxref("::-moz-anonymous-positioned-block")}}
    • +
  • {{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref(":-moz-any-link")}} (selecciona :link y :visited)
    • +
  • {{Cssxref(":-moz-bound-element")}}
    • +
  • {{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref("::-moz-canvas")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-cell-content")}} eg@:- bug 331432
    • +
  • {{Cssxref(":-moz-drag-over")}}
    • +
  • {{Cssxref(":-moz-first-node")}}
    • +
  • {{cssxref("::-moz-focus-inner")}}
    • +
  • {{cssxref("::-moz-focus-outer")}}
    • +
  • {{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}
    • +
  • {{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}
    • +
  • {{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{Cssxref("::-moz-inline-table")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-last-node")}}
    • +
  • {{Cssxref(":-moz-list-bullet")}}
    • +
  • {{cssxref(":-moz-list-number")}}
    • +
  • {{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("::-moz-math-stretchy")}}
    • +
  • {{Cssxref(":-moz-only-whitespace")}}
    • +
  • {{Cssxref("::-moz-page")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-page-sequence")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-pagebreak")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-pagecontent")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}
    • +
  • {{Cssxref("::-moz-progress-bar")}}
    • +
  • {{Cssxref("::-moz-range-thumb")}}
    • +
  • {{Cssxref("::-moz-range-track")}}
    • +
  • {{Cssxref(":-moz-read-only")}}
    • +
  • {{Cssxref(":-moz-read-write")}}
    • +
  • {{cssxref("::selection","::-moz-selection")}}
    • +
  • {{Cssxref("::-moz-scrolled-canvas")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-scrolled-content")}} eg@:- bug 331432
    • +
  • {{Cssxref("::-moz-scrolled-page-sequence")}} eg@:- bug 331432
    • +
  • {{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("::-moz-svg-foreign-content")}} example at resource://gre/res/svg.css , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}
    • +
  • {{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}
    • +
  • {{Cssxref("::-moz-table")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-cell")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-column")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-column-group")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-outer")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-row")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-row-group")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-tree-checkbox")}}
    • +
  • {{Cssxref(":-moz-tree-cell")}}
    • +
  • {{Cssxref(":-moz-tree-cell-text")}}
    • +
  • {{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-tree-column")}}
    • +
  • {{Cssxref(":-moz-tree-drop-feedback")}}
    • +
  • {{Cssxref(":-moz-tree-image")}}
    • +
  • {{Cssxref(":-moz-tree-indentation")}}
    • +
  • {{Cssxref(":-moz-tree-line")}}
    • +
  • {{Cssxref(":-moz-tree-progressmeter")}}
    • +
  • {{Cssxref(":-moz-tree-row")}}
    • +
  • {{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-tree-separator")}}
    • +
  • {{Cssxref(":-moz-tree-twisty")}}
    • +
  • {{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref("::-moz-viewport")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-viewport-scroll")}} eg@:- resource://gre/res/ua.css
    • +
  • {{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("::-moz-xul-anonymous-block")}} eg@:- resource://gre/res/ua.css
    • +
+ +

Reglas arroba (At-rules)

+ +
    +
  • {{Cssxref("@-moz-document")}}
    • +
+ +

Media Queries

+ +
    +
  • {{Cssxref("Media_queries#-moz-images-in-menus","-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-mac-graphite-theme","-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-maemo-classic","-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-device-pixel-ratio","-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-end-backward","-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-end-forward","-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-start-backward","-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-start-forward","-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-thumb-proportional","-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-touch-enabled","-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-classic","-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-compositor","-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-default-theme","-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-theme","-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}
    • +
+ +

Otros

+ +
    +
  • {{Cssxref("-moz-alt-content")}} ({{Bug("11011")}})
    • +
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html new file mode 100644 index 0000000000..fc9f25382b --- /dev/null +++ b/files/es/web/css/normal/index.html @@ -0,0 +1,10 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +--- +

Sumario

+

El valor normal en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.

+

Ejemplos

+

En la propiedad font-style: normal establece que el tipo de fuente no es italic ni oblique.

+

El la propiedad font-size: normalse establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.

diff --git a/files/es/web/css/number/index.html b/files/es/web/css/number/index.html new file mode 100644 index 0000000000..fcbaad3c7a --- /dev/null +++ b/files/es/web/css/number/index.html @@ -0,0 +1,8 @@ +--- +title: +slug: Web/CSS/number +translation_of: Web/CSS/number +--- +

{{ CSSRef() }}

+ +

Un valor para una propiedad CSS, un número incluyendo un valor entero {{ Cssxref("integer") }}.

diff --git a/files/es/web/css/object-fit/index.html b/files/es/web/css/object-fit/index.html new file mode 100644 index 0000000000..0239910a6b --- /dev/null +++ b/files/es/web/css/object-fit/index.html @@ -0,0 +1,164 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - Imágenes CSS + - Layout + - Propiedad CSS + - Referencia + - css layout + - object-fit + - 'recipe:css-property' + - size +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.

+ +

Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ +

Sintaxis

+ +

La propiedad object-fit se especifica con una de las palabras claves elegidas de la siguiente lista de valores.

+ +

Valores

+ +
+
contain
+
El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.
+
cover
+
El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.
+
fill
+
Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.
+
none
+
El contenido reemplazado no se redimensiona.
+
scale-down
+
El contenido se dimensiona como si none o contain estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: none</h2>
+  <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+</section>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Definicion inicial.
+ +

Compatibilidad

+ +

{{Compat("css.properties.object-fit")}}

+ +

Ver también

+ +
    +
  • Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
  • {{cssxref("background-size")}}
    • +
diff --git a/files/es/web/css/object-position/index.html b/files/es/web/css/object-position/index.html new file mode 100644 index 0000000000..0d76669bdc --- /dev/null +++ b/files/es/web/css/object-position/index.html @@ -0,0 +1,150 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

Summary

+ +

La propiedad object-position determina el alineamiento del elemento dentro de la caja.

+ +

{{cssinfo}}

+ +

Sinstaxis

+ +
/* <position> valores */
+object-position: 100px 50px;
+
+/* Valores globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Valores

+ +
+
<position>
+
{{ cssxref("<position>") }}, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.
+
+ +

Sitaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Ejemplo de HTML

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+
+ +

Ejemplo de CSS

+ +
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 360, 120) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}} +

Las  palabras clave from-image y flip an sido añadidas.

+
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Definición incial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}
+ 19.0		{{ CompatNo }}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}
+ 24		{{ CompatNo }}
+
+[1] WebKit Nightly fixed in bug 122811.
+ +

Contenido relacionado

+ +
    +
  • Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html new file mode 100644 index 0000000000..154e4d7d82 --- /dev/null +++ b/files/es/web/css/opacity/index.html @@ -0,0 +1,216 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Reference + - CSS3 + - css3-color +translation_of: Web/CSS/opacity +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS opacity define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.

+ +

Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
opacity:  <valor alfanumérico>
+ +

Valores

+ +
+
<alphavalue>
+
Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano. + + + + + + + + + + + + + + + + + + + +
valorSignificado
0El elemento es transparente (invisible).
Cualquier valor entre 0 y 1El elemento es translúcido.
1El elemento es opaco (sólido).
+
+
+ +

Ejemplos

+ +
hbox.example {
+  opacity: 0.5; /* see the background through the hbox */
+}
+ +

Live Example

+ +
pre {                               /* make the box translucent (20% opaque) */
+   border: solid red;
+   opacity: 0.2;
+   filter: alpha(opacity=20);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +
pre {                               /* make the box translucent (50% opaque) */
+   border: solid red;
+   opacity: 0.5;
+   filter: alpha(opacity=50);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +
pre {                               /* make the box translucent (80% opaque) */
+   border: solid red;
+   opacity: 0.8;
+   filter: alpha(opacity=80);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +

Variando la opacidad con :hover

+ +
<!doctype html>
+<html>
+<head>
+<style>
+img.opacity {
+   opacity: 1;
+   filter: alpha(opacity=50);
+   zoom: 1;
+ }
+
+img.opacity:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=100);
+   zoom: 1;
+ }
+</style>
+</head>
+
+<body>
+<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}{{ Spec2('CSS3 Transitions') }}Define opacity como una animación.
{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}{{ Spec2('CSS3 Colors') }}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.7") }}9.09.01.2 (125)
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.7") }}9.09.03.2
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ +
    +
  • History:  Prior to Mozilla 1.7 (Firefox 0.9) the -moz-opacity property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity.  Since then -moz-opacity was supported just as an alias for opacity.
    • +
  • Gecko 1.9.1 (Firefox 3.5) and later do not support -moz-opacity and support for MozOpacity in javascript was removed in Gecko 13.  By now, you should be using simply opacity.
    • +
  • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
    • +
  • IE4 to IE9 supported the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
    • +
  • IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10
    • +
  • Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
    + Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.
    • +
+ +

Más información

+ + diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html new file mode 100644 index 0000000000..fa8484670f --- /dev/null +++ b/files/es/web/css/order/index.html @@ -0,0 +1,172 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS order especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el código fuente.

+ +
+

Nota: order sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. order no se debe usar en un medio no visual tal como un speech (sintetizador de voz).

+
+ +

{{cssinfo}}

+ +

Ver Uso de cajas flexibles de CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Valor numérico incluyendo números negativos */
+order: 5;
+order: -5;
+
+/* Valores Globales */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Valores

+ +
+
<integer>
+
Representa el grupo ordinal al que el elemento flexible ha sido asignado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Aquí tiene un trozo de HTML básico:

+ +
<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+   <article>Article</article>
+   <nav>Nav</nav>
+   <aside>Aside</aside>
+</div>
+<footer>...</footer>
+ +

El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.

+ +

#main { display: flex;  text-align:center; }

+ +
#main > article { flex:1;        order: 2; }
+#main > nav     { width: 200px;  order: 1; }
+#main > aside   { width: 200px;  order: 3; }
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}

+ +

Sobre Accesibilidad

+ +

Utilizar la propiedad order rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.

+ +

Para más información por favor, referirse a estos artículos:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}
+ 29		{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}[2]		 +

10.0{{property_prefix("-ms")}}[3]
+ 11

+ 		12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("20.0")}}[2]		{{CompatUnknown}}12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +

[1] Para activar el soporte Flexbox en  Firefox 18 and 19, el usuario debe cambiar en preferencias about:config layout.css.flexbox.enabled a true. Las cajas flexibles multi-línea son soportadas desde Firefox 28.

+ +

Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.

+ +

[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en true.

+ +

[3] En Internet Explorer 10, un contenedor flexible se declara usando display:-ms-flexbox y no display:flex. La propiedad está implementada bajo el monbre no-estándar -ms-flex-order.

+ +

Ver también

+ + diff --git a/files/es/web/css/outline-color/index.html b/files/es/web/css/outline-color/index.html new file mode 100644 index 0000000000..f2d6f9c18c --- /dev/null +++ b/files/es/web/css/outline-color/index.html @@ -0,0 +1,152 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-color establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-color: invert;
+outline-color: red;
+
+/* Valores globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

Valores

+ +
+
<color>
+
Ver {{cssxref("<color>")}} para las diferentes palabras clave y notaciones de colores.
+
invert
+
Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p class="example">My outline is blue, da ba dee.</p>
+ +

CSS

+ +
.example {
+  /* primero debe definirse la propiedad "outline" */
+  outline: 2px solid;
+  /* hacer el contorno azul */
+  outline-color: #0000FF;
+}
+ +

En vivo:

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Define outline-color como propiedad que se puede animar.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.8")}} [1]8.07.01.2 (125)
valor invert{{CompatNo}}{{CompatNo}} [2]8.0{{CompatNo}} [3]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En versiones previas a Gecko 1.8: -moz-outline-color.

+ +

[2] El soporte fue retirado en la versión 3.0 (1.9).

+ +

[3] Soportado en Opera 7 pero el soporte fue retirado en Opera 15 con la adopción del motor Chromium/Blink.

diff --git a/files/es/web/css/outline-offset/index.html b/files/es/web/css/outline-offset/index.html new file mode 100644 index 0000000000..85bd0c33d7 --- /dev/null +++ b/files/es/web/css/outline-offset/index.html @@ -0,0 +1,136 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.

+ +

{{cssinfo}}

+ +

El espacio será transparente (el elemento padre determinará el fondo).

+ +

Sintaxis

+ +
/* Valores <length> */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valores globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

Valores

+ +
+
<length>
+
La anchura del espacio. Ver {{cssxref("<length>")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
p {
+  outline: dashed thin;
+  /* Mueve el contorno 10px lejos del borde */
+  outline-offset: 10px;
+  border:1px solid black;
+}
+
+ +

Html

+ +
<p>outline: offset 10px. Border is solid and outline is dashed</p>
+ +

El código anterior producirá este efecto:

+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+ +

Otro ejemplo:

+ +

outline: multiple offsets;

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}{{ Spec2('CSS3 Transitions') }}Define outline-offset como propiedad que se puede animar.
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.8")}}{{ CompatNo() }}9.51.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/outline-style/index.html b/files/es/web/css/outline-style/index.html new file mode 100644 index 0000000000..68b1f9abd4 --- /dev/null +++ b/files/es/web/css/outline-style/index.html @@ -0,0 +1,263 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.

+ +

Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de outline-style, outline-width y outline-color por separado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valores globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

Valores

+ +

<br-style> puede ser uno de los siguientes:

+ +
+
none
+
+
Sin contorno ({{Cssxref("outline-width")}} es 0).
+
dotted
+
+
Línea punteada. El contorno es una serie de puntos.
+
dashed
+
+
Línea discontinua. El contorno es una serie de segmentos de línea cortos.
+
solid
+
+
El contorno es una línea simple.
+
double
+
+
El contorno son dos líneas paralelas. El valor de {{Cssxref("outline-width")}} es la suma de los dos líneas y el espacio entre ellas.
+
groove
+
+
El contorno parece estar tallado dentro del lienzo.
+
ridge
+
+
Lo opuesto a groove: el contorno parece salir del lienzo.
+
inset
+
+
El contorno hace a la caja verse como si estuviera embedida dentro del lienzo.
+
outset
+
+
Lo opuesto a inset: el contorno hace a la caja verse como si estuviera saliendo del lienzo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo 1 - dotted y dashed

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+ +

Ejemplo 2 - solid y double

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+ +

Ejemplo 3 - groove y ridge

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+ +

Ejemplo 4 - inset y outset

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Se añade el valor auto
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.5 (1.8)[1]8.07.01.2 (125)
auto{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatGeckoMobile("46")}}10123.2
auto{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En navegadores anteriores a Gecko 1.8 (Firefox 1.5) este efecto podía lograrse usando la CSS de Mozilla {{Cssxref("-moz-outline-style")}}.

diff --git a/files/es/web/css/outline-width/index.html b/files/es/web/css/outline-width/index.html new file mode 100644 index 0000000000..1b52fef25b --- /dev/null +++ b/files/es/web/css/outline-width/index.html @@ -0,0 +1,176 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-width es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valores <length> */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valores globales */
+outline-width: inherit;
+
+ +

Valores

+ +
+
thin
+
Depende del Agente Usuario. Generalmente 1px en navegadores de escritorio como Firefox.
+
medium
+
Depende del Agente Usuario. Generalmente 3px en navegadores de escritorio como Firefox.
+
thick
+
Depende del Agente Usuario. Generalmente 5px en navegadores de escritorio como Firefox.
+
<length>
+
Ver valores {{cssxref("<length>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Contenido HTML

+ +
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="twopixels">2px</span>
+<span id="oneex">1ex</span>
+<span id="twoem">2em</span>
+
+ +

Contenido CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#twoem {
+  outline-width: 2em;
+}
+
+
+ +

{{EmbedLiveSample('Examples', '100%', '80')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}{{Spec2('CSS3 Transitions')}}Define outline-width como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.5 (1.8)[1]8.07.01.2 (125)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En navegadores previos a Gecko 1.8 (Firefox 1.5) se podía lograr esencialmente el mismo efecto usando la Extensión CSS de Mozilla {{Cssxref("-moz-outline-width")}}.

diff --git a/files/es/web/css/outline/index.html b/files/es/web/css/outline/index.html new file mode 100644 index 0000000000..288c5fca34 --- /dev/null +++ b/files/es/web/css/outline/index.html @@ -0,0 +1,128 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

La propiedad CSS outline es una forma reducida para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ +

Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.

+ +

Border vs outline

+ +

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

+ +
    +
  • Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}.
    • +
  • Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A diferencia de los bordes, el contorno no está abierto en algunos lados: +

    Ejemplo: contorno aplicado a
    + varias líneas

    + +

    Ejemplo: borde aplicado a
    + varias líneas

    +
    • +
+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+ +

Valores

+ +

Uno, dos o tres valores, en orden arbitrario:

+ +
+
<outline-width>
+
Ver {{Cssxref("outline-width")}}.
+
<outline-style>
+
Ver {{Cssxref("outline-style")}}.
+
<outline-color>
+
Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad {{Cssxref("color")}} del elemento (color de primer plano). Ver {{Cssxref("outline-color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<a href="#">Este link tiene un estilo especial para el foco</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.properties.outline")}}

+
diff --git a/files/es/web/css/overflow-y/index.html b/files/es/web/css/overflow-y/index.html new file mode 100644 index 0000000000..7650175806 --- /dev/null +++ b/files/es/web/css/overflow-y/index.html @@ -0,0 +1,138 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Modelo de Caja + - Propiedad CSS +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

La propiedad CSS overflow-y define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.

+ +
+

Si {{cssxref("overflow-x")}} es hidden, scroll o auto y esta propiedad es visible (por defecto) se calculará implícitamente como auto.

+
+ +

{{EmbedInteractiveExample("pages/css/overflow-y.html")}}

+ + + +

Sintaxis

+ +
/* Valores con una palabra clave */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* Valores globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+ +

La propiedad overflow-y es especificada con una sola palabra clave escogida de la lista de abajo.

+ +

Valores

+ +
+
visible
+
El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.
+
hidden
+
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.
+
scroll
+
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan  cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.
+
auto
+
Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad visible, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+
+ +

Resultado

+ +
+

{{EmbedLiveSample("Ejemplo", "100%", "780")}}

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}{{Spec2('CSS3 Box')}}
+ +

Compatibilidad con navegadores

+ +
{{Compat("css.properties.overflow-y")}}
+ +

Ver también

+ +
    +
  • Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/es/web/css/overflow/index.html b/files/es/web/css/overflow/index.html new file mode 100644 index 0000000000..bdc053d2d4 --- /dev/null +++ b/files/es/web/css/overflow/index.html @@ -0,0 +1,118 @@ +--- +title: overflow (excedente) +slug: Web/CSS/overflow +translation_of: Web/CSS/overflow +--- +
{{ CSSRef() }}
+ +

Sumario

+ +

La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

+ +

Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.

+ +

Nótese que, cambiando programáticamente el valor de scrollTop al elemento HTML relevante, incluso cuando overflow tenga el valor hidden un elemento podría necesitar ser desplazado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintáxis formal: {{csssyntax("overflow")}}
+ +
overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+
+ +

Valores

+ +
+
visible
+
Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
+
hidden
+
El contenido es recortado y no se muestran barras de posición.
+
scroll
+
El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.
+
auto
+
Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.
+
+ +

Extensiones de Mozilla

+ +
+
-moz-scrollbars-none {{ obsolete_inline() }}
+
Usar overflow:hidden.
+
-moz-scrollbars-horizontal {{ Deprecated_inline() }}
+
Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.
+
-moz-scrollbars-vertical {{ Deprecated_inline() }}
+
Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.
+
-moz-hidden-unscrollable {{ non-standard_inline() }}
+
Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <html>, <body> usando las flechas del teclado o la rueda del ratón.
+
+ +

Ejemplos

+ +
p {
+     width: 12em;
+     border: dotted;
+     overflow: visible;   /* dibuja barras si es necesario */
+}
+
+ +

visible (por defecto)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* no se dibujan barras */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* se dibujan ambas barras */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* se dibujan barras según se necesite */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}{{ Spec2('CSS3 Box') }}Sin cambios.
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad en navegadores

+ +

{{Compat("css.properties.overflow")}}

+ +

Véase también

+ +
    +
  • Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} (
    • +
diff --git a/files/es/web/css/padding-block-end/index.html b/files/es/web/css/padding-block-end/index.html new file mode 100644 index 0000000000..f853d3bd67 --- /dev/null +++ b/files/es/web/css/padding-block-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-end +slug: Web/CSS/padding-block-end +translation_of: Web/CSS/padding-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-block-end define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-block-end: 10px;      /* An absolute length */
+padding-block-end: 1em;       /* A length relative to the text size */
+
+/* <percentage> value */
+padding-block-end: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-block-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-block-start/index.html b/files/es/web/css/padding-block-start/index.html new file mode 100644 index 0000000000..3beaf5ca81 --- /dev/null +++ b/files/es/web/css/padding-block-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-start +slug: Web/CSS/padding-block-start +translation_of: Web/CSS/padding-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  padding-block-start define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por  {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-block-start: 10px;      /* An absolute length */
+padding-block-start: 1em;       /* A length relative to the text size */
+
+/* <percentage> value */
+padding-block-start: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-block-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-block/index.html b/files/es/web/css/padding-block/index.html new file mode 100644 index 0000000000..c237b61c4b --- /dev/null +++ b/files/es/web/css/padding-block/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block +slug: Web/CSS/padding-block +translation_of: Web/CSS/padding-block +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  padding-block define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.

+ +
/* <length> values */
+padding-block: 10px 20px;  /* An absolute length */
+padding-block: 1em 2em;   /* relative to the text size */
+padding-block: 5% 2%;    /* relative to the nearest block container's width */
+padding-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-block: auto;
+
+/* Global values */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+
+ +

Estos valores corresponde a las propiedades {{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Los valores pueden ser establecidos individualmente como {{cssxref("padding-block-start")}} y {{cssxref("padding-block-end")}}. La propiedad de dirección en línea es {{cssxref("padding-inline")}} que establece {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad padding-block toma los mismos valores que la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-bottom/index.html b/files/es/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..8e025a0c83 --- /dev/null +++ b/files/es/web/css/padding-bottom/index.html @@ -0,0 +1,135 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +translation_of: Web/CSS/padding-bottom +--- +

{{CSSRef}}

+ +

Sumario

+ +

La propiedad padding-bottom CSS establece el espacio de relleno requerido en la parte inferior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-bottom, valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values (Valores fijos)*/
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value (Valores porcentuales)*/
+padding-bottom: 10%;
+
+/* Global values (Valores globales)*/
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

Valores

+ +
+
<length>
+
Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.
+
<percentage>
+
Especifica un porcentaje con respecto al bloque que lo contiene.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defines padding-bottom as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/padding-inline-end/index.html b/files/es/web/css/padding-inline-end/index.html new file mode 100644 index 0000000000..dd30fe2d15 --- /dev/null +++ b/files/es/web/css/padding-inline-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-end +slug: Web/CSS/padding-inline-end +translation_of: Web/CSS/padding-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-inline-end define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-inline-end: 10px;   /* An absolute length */
+padding-inline-end: 1em;    /* A length relative to the text size */
+
+/* <percentage> value */
+padding-inline-end: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-inline-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-inline-start/index.html b/files/es/web/css/padding-inline-start/index.html new file mode 100644 index 0000000000..696b045077 --- /dev/null +++ b/files/es/web/css/padding-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-start +slug: Web/CSS/padding-inline-start +translation_of: Web/CSS/padding-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-inline-start define el relleno de inicio lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, y {{cssxref("padding-inline-end")}}, que define los rellenos de los otros elementos.

+ +
{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-inline-start: 10px;   /* An absolute length */
+padding-inline-start: 1em;    /* A length relative to the text size */
+
+/* <percentage> value */
+padding-inline-start: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-inline-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-inline/index.html b/files/es/web/css/padding-inline/index.html new file mode 100644 index 0000000000..9e471d734e --- /dev/null +++ b/files/es/web/css/padding-inline/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline +slug: Web/CSS/padding-inline +translation_of: Web/CSS/padding-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  padding-inline define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.

+ +
/* <length> values */
+padding-inline: 10px 20px;  /* An absolute length */
+padding-inline: 1em 2em;   /* relative to the text size */
+padding-inline: 5% 2%;    /* relative to the nearest block container's width */
+padding-inline: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-inline: auto;
+
+/* Global values */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+
+ +

Estos valores corresponden a las propiedades{{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Los valores pueden ser establecidos individualmente como {{cssxref("padding-inline-start")}} y {{cssxref("padding-inline-end")}}. La propiedad de la dirección bloque es {{cssxref("padding-block")}} que establece {{cssxref("padding-block-start")}}, y {{cssxref("padding-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad padding-inline toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-top/index.html b/files/es/web/css/padding-top/index.html new file mode 100644 index 0000000000..a635951fcc --- /dev/null +++ b/files/es/web/css/padding-top/index.html @@ -0,0 +1,135 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +translation_of: Web/CSS/padding-top +--- +

{{CSSRef}}

+ +

Sumario

+ +

La propiedad padding-top CSS establece el espacio de relleno requerido en la parte superior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-top, valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values (valores fijos) */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> value (valores porcentuales) */
+padding-top: 10%;
+
+/* Global values (valores globales) */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

Valores

+ +
+
<length>
+
Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.
+
<percentage>
+
Especifica un porcentaje con respecto al bloque que lo contiene.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defines padding-top as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html new file mode 100644 index 0000000000..fdff58428a --- /dev/null +++ b/files/es/web/css/padding/index.html @@ -0,0 +1,178 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - Propiedades CSS +translation_of: Web/CSS/padding +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

+ +

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

+ +

{{EmbedInteractiveExample("pages/css/padding.html")}}

+ +
+

Nota: Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("padding")}}
+ +

Valores

+ +

Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:

+ +
+
<length>
+
Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} .
+
<percentage>
+
Con respecto a la anchura("width") del bloque que lo contiene.
+
+ +
    +
  • Uno: un valor unico se aplica a los 4 lados.
    • +
  • Dos: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
    • +
  • Tres: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
    • +
  • Cuatro: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. 
    • +
+ +

Ejemplos

+ +
 padding: 5%;               /* aplica 5% de padding en todos los lados*/
+
+ +
 padding: 10px;              /* aplica 10px de padding en todos los lados */
+
+ +
 padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
+                             /* izquierda y derecha, 20px de padding */
+
+ +
 padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
+                             /*  izquierda y derecha, 3% de padding */
+                             /*  bottom, 20px padding       */
+
+ +
 padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
+                             /*  derecha  3px  padding  */
+                             /*  abajo 30px padding  */
+                             /*  izquierda   5px  padding
+                 /* en dirección de las agujas del reloj */
+
+ +

border:outset; padding:5% 1em;

+ +

Ver ejemplo

+ +

HTML

+ +
<h4>¡Hola Mundo!</h4>
+<h3>El padding es diferente en esta linea.</h3>
+
+ +

CSS

+ +
h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+
+ +

{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}Sin cambio.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}Sin cambio.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html new file mode 100644 index 0000000000..6ab1d25783 --- /dev/null +++ b/files/es/web/css/perspective/index.html @@ -0,0 +1,196 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - Capas + - Propiedad CSS + - Referencia + - Transformaciones CSS + - Web + - graficos +translation_of: Web/CSS/perspective +--- +

{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad perspective CSS determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.

+ +

Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.

+ +

La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.

+ +

Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo contexto de apilamiento.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Sintaxis Formal: {{csssyntax("perspective")}}
+ +
perspective: none
+perspective: 20px     /* <longitud> valores */
+perspective: 3.5em
+
+perspective: inherited
+
+ +

Valores

+ +
+
none
+
Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.
+
<length>
+
Es una {{cssxref("<length>")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento  y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.
+
+ +

Ejemplos

+ +
+ + + + + + + + + + + + + +
perspective:250px;perspective:350px;perspective:500px;
+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecifiaciónEstadoComentario
{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}{{ Spec2('CSS3 Transforms') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoDesktop("16") }}		1015{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico3.0{{ property_prefix('-webkit') }}{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoMobile("16") }}		{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html new file mode 100644 index 0000000000..c6629803fe --- /dev/null +++ b/files/es/web/css/porcentaje/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/CSS/porcentaje +translation_of: Web/CSS/percentage +--- +

{{CSSRef}}

+ +

Sumario

+ +

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

+ +

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

+ +
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
+ +

Interpolación

+ +

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

+ +

Examples

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+ +

El codigo de arriba se va a renderizar así:

+ +
+
Width: 50%, Left margin: 20%
+ +
Width: 30%, Left margin: 60%
+
+ +

 

+ +
<div style="font-size:18px;">
+  Full size text (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+
+ +

El codigo de arriba de renderizara así:

+ +
Full size text (18px) 50% 200%
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
+
diff --git a/files/es/web/css/position/index.html b/files/es/web/css/position/index.html new file mode 100644 index 0000000000..c9181f456f --- /dev/null +++ b/files/es/web/css/position/index.html @@ -0,0 +1,305 @@ +--- +title: position +slug: Web/CSS/position +tags: + - Referencia_CSS +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.

+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

Tipos de posicionamiento

+ +
    +
  • Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static).
    • +
  • Un elemento posicionado relativamente es un elemento cuyo valor computado de position es relative. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.
    • +
  • Un elemento posicionado absolutamente es un elemento cuyo valor computado de  position es absolute o fixed. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y  {{Cssxref("left")}} especifican el desplazamiento desde los bordes del bloque contenedor del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido
    • +
  • Un elemento posicionado fijamente es un elemento cuyo valor de  position computado es sticky. Es tratado como un elemento posicionado relativamente hasta que su bloque contenedor cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su bloque contenedor.
    • +
+ +

La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de auto.

+ +

A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):

+ +
    +
  • Si ambos, top y bottom están especificados (técnicamente, no auto), top gana.
    • +
  • Si ambos, left y right, están especificados,  left gana cuando {{Cssref("direction")}} es ltr (Inglés, japonés horizontal, etc.) y right gana cuando {{Cssxref("direction")}} es rtl (Persa, árabe, hebreo, etc.).
    • +
+ +

Sintaxis

+ +

La propiedad position es especificada como una palabra única elegida de la siguiente lista de valores.

+ +

Valores

+ +
+
static
+
El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} no tienen efecto. Este es el valor por defecto.
+
relative
+
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo, con base en los valores de top, right, bottom, and left. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera static. Este valor crea un nuevo contexto de apilamiento, donde el valor de z-index no es auto. El efecto que tiene relative sobre los elementos table-*-group, table-row, table-column, table-cell, y table-caption no está definido.
+
absolute
+
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al bloque contenedor inicial. Su posición final está determinada por los valores de top, right, bottom, y left.
+
Este valor crea un nuevo contexto de apilamiento cuando el valor de z-index no es auto. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.
+
fixed
+
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al bloque contenedor inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad transform, perspective, o filter establecida en algo que no sea none (ver CSS Transforms Spec), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con perspective y filter contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de top, right, bottom, y left.
+
Estos valores siempre crean un nuevo contexto de apilamiento. En documentos impresos, el elemento se coloca en la misma posición en cada página.
+
sticky {{experimental_inline}}
+
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a su ancestro que se desplace más cercano y su bloque contenedor (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de top, right, bottom, y left. El desplazamiento no afecta la posición de ningún otro elmento.
+
Estos valores siempre crean un nuevo contexto de apilamiento. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el overflow es hidden, scroll, auto, o bien overlay), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el Github issue en W3C CSSWG).
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Examples

+ +

Posicionamiento relativo

+ +

Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}

+ +

Posicionamiento absoluto

+ +

Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a suancestro posicionado más cercano (es decir, el ancestro más cercano que no es static). Si no hay ningún ancestro posicionado se ubica relativo al bloque contenedor inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <body> del documento.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+ +

{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}

+ +

Posicionamiento fijo

+ +

El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el viewport. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}

+ +

Posicionamiento sticky

+ +

El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...

+ +
#one { position: sticky; top: 10px; }
+ +

...posicionaría el elemento con id uno relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.

+ +

Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.  Se debe especificar un umbral con al menos uno de top, right, bottom, or left para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.

+ +

HTML

+ +
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}

+ +
    +
+ +

Consideraciones de accesibilidad

+ +

Asegurarse de que los elementos posicionados con valor absolute o fixed no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.

+ + + +

Performance y accesibilidad

+ +

Los elementos que se desplazan que contienen contenido fixed o sticky content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 fps, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Añade valor de la propiedad sticky.
+ +

{{cssinfo}}

+ +

Compatibilidad

+ + + +

{{Compat("css.properties.position")}}

diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html new file mode 100644 index 0000000000..36c2fa1317 --- /dev/null +++ b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html @@ -0,0 +1,118 @@ +--- +title: Preguntas frecuentes sobre CSS +slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +tags: + - CSS + - Proyecto MDC +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Mi CSS es válida, pero no se representa correctamente

+

Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

+

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

+
  • Quirks mode (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración DOCTYPE incompleta, incorrecta o faltante o con una declaración DOCTYPE conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
  • Standards Mode (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración DOCTYPE moderna será renderizada con el Modo estándar.
    • +
+

Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

+

Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

+
<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

Diferencia entre id y class

+

Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

+

Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

+

Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

+

Consulta Selectores CSS

+

Restaurar el valor de la propiedad predeterminado

+

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

+

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

+

Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

+

Estilos derivados

+

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

+

Asignación de múltiples clases

+

A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo class, con un espacio en blanco para separarlas.

+
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... contenido de las noticias de hoy ...
+</ div>
+
+

Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

+

Normas de estilo que no funcionan

+

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

+
Jerarquía de los elementos HTML
+

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

+
.news { color: black; }
+. corpName {font-weight: bold; color: red;}
+
+<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
+<div class="news">
+   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
+</ div>
+
+

En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

+
Regla de estilo explícitamente redefinida
+

En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

+
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  otras reglas             */
+/*  otras reglas             */
+/*  otras reglas             */
+.stockSymbol { font-weight: normal; }
+
+<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

+
Uso de una propiedad abreviada
+

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

+
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

+
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana; / * font-weight es ahora normal * /
+}
+
+
Uso del selector *
+

El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

+
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</ div>
+
+

En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

+
Especificidad en CSS
+

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

+
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+

Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

+

¿Qué hacen las propiedades -moz-*?

+

Por favor, consulta la página Extensiones CSS de Mozilla.

+

 

+

{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html new file mode 100644 index 0000000000..c6eb218230 --- /dev/null +++ b/files/es/web/css/primeros_pasos/index.html @@ -0,0 +1,39 @@ +--- +title: Primeros pasos +slug: Web/CSS/Primeros_pasos +--- +

 

+

Introducción

+

Este tutorial es una introducción a las hojas de estilo en cascada (CSS).

+

Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.

+
  • La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.
    • +
+
  • La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.
    • +
+

El tutorial está basado en la especificación 2.1 de CSS 2.1.

+

¿Quién debe usar este tutorial?

+

Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.

+

Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.

+

Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.

+

Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.

+

¿Qué necesitas antes de empezar?

+

Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.

+

Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.

+

Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:

+ +

Nota:  CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.

+

Cómo usar este tutorial

+

Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.

+

En cada página, usa la sección de Información para entender cómo funciona CSS. Usa la sección Acción para probar el uso de CSS en tu propio equipo.

+

Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.

+

Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título Más detalles. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.

+

Primera parte del tutorial

+

Una guía básica paso a paso de CSS.

+
  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media
    15. +
+

Segunda parte del tutorial

+

Ejemplos que muestran el alcance del CSS en Mozilla.

+
  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
    6. +
+

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/pseudo-classes/index.html b/files/es/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..05c4789b5f --- /dev/null +++ b/files/es/web/css/pseudo-classes/index.html @@ -0,0 +1,135 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Referencia CSS + - Selectores + - pseudo-clases +translation_of: Web/CSS/Pseudo-classes +--- +

{{ CSSRef() }}

+ +

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo,  {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

+ +
div:hover {
+  background-color: #F89B4D;
+}
+ +

Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).

+ +
+

Nota: En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una parte específica de un elemento.

+
+ +

Sintaxis

+ +
selector:pseudoclase { propiedad: valor; }
+
+ +

Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.

+ +

Indice de las pseudo-clases estándar

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}Definido :fullscreen.
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}Ningún cambio desde {{ SpecName('HTML5 W3C') }}.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Definido :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches().
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido).
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}Define el significado semántico en el contexto HTML de :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate.
+ Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, y :dir().
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, y :read-write, pero sin el significado semántico asociado.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Definido :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, y :not().
+ Define la sintaxis de :enabled, :disabled, :checked, y :indeterminate, pero sin el significado semántico asociado.
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Definido :lang(), :first-child, :hover, y :focus.
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definido :link, :visited, y :active, pero sin el significado semántico asociado.
diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html new file mode 100644 index 0000000000..c65b904163 --- /dev/null +++ b/files/es/web/css/pseudoelementos/index.html @@ -0,0 +1,86 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

+ +

Sintaxis

+ +
selector::pseudo-elemento { propiedad: valor; }
+ +

Lista de pseudoelementos

+ +
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
+ +

Notas

+ +

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

+ +
Nota: ::selection siempre se escribe con dos puntos dobles (::).
+ +

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
+ +

 

diff --git a/files/es/web/css/quotes/index.html b/files/es/web/css/quotes/index.html new file mode 100644 index 0000000000..138b4dce41 --- /dev/null +++ b/files/es/web/css/quotes/index.html @@ -0,0 +1,86 @@ +--- +title: quotes +slug: Web/CSS/quotes +tags: + - CSS + - Layout + - Maquetación + - Referencia + - Web +translation_of: Web/CSS/quotes +--- +
{{CSSRef}}
+ +

Sumario

+ +

La propiedad CSS quotes indica cómo debe renderizar las citas el navegador.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valor con palabras clave */
+quotes: none;
+
+/* Valor <string> */
+quotes: "«" "»";           /* Especifica open-quote y close-quote a las marcas de cita francesas */
+quotes: "«" "»" "‹" "›";   /* Especifica dos niveles de marcas de cita */
+
+/* Valores globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+
+ +

Valores

+ +
+
none
+
Los valores open-quote y close-quote de la propiedad {{cssxref("content")}} no renderiza marcas de cita.
+
[<string> <string>]+
+
Uno o más pares de valores {{cssxref("<string>")}} para open-quote y close-quote. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+
+ +

Notas

+ +

Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando -moz-initial. Esto no es posible en versiones anteriores de Firefox.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoCommentario
{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}Definición inicial
+ +

Compatibilidad con navegadores

+ +{{Compat("css.properties.quotes")}} + +

Ver también

+ +
    +
  • {{ Cssxref("content") }}
    • +
diff --git a/files/es/web/css/radial-gradient()/index.html b/files/es/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..097caadf49 --- /dev/null +++ b/files/es/web/css/radial-gradient()/index.html @@ -0,0 +1,299 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +tags: + - Función CSS + - Gráficos(2) + - Imagen CSS +translation_of: Web/CSS/radial-gradient() +--- +

{{CSSRef}}

+ +

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

+ +

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

+ +

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

+ +

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

+ +

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

+ +

Sintaxis

+ +
// Definición de la figura
+radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
+radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
+radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
+radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
+radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
+
+// Definición de la posición de la figura
+radial-gradient ( … at <position>, … )
+
+// Definición de los stops de colores
+radial-gradient ( …, <color-stop>, … )
+radial-gradient ( …, <color-stop>, <color-stop> )
+ +

Valores

+ +
+
<position>
+
Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es center.
+
<shape>
+
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
+
<color-stop>
+
Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.
+
<extent-keyword>
+
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescripción
closest-sideLa figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
+ Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
+
+ +

Sintaxis formal

+ +
radial-gradient(
+  [ [ circle || {{cssxref("<length>")}} ]                         [ at {{cssxref("<position>")}} ]? , |
+    [ ellipse || [ <length> | {{cssxref("<percentage>")}} ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop> [ , <color-stop> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

Ejemplo 1

+ +

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}
+ +

{{ EmbedLiveSample('Example_1') }}

+ +

Ejemplo 2

+ +

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+}
+ +

{{ EmbedLiveSample('Example_2') }}

+ +

Ejemplo 3

+ +

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+}
+ +

{{ EmbedLiveSample('Example_3') }}

+ +

Ejemplo 4

+ +

Este código producirá un círculo difuso con radio de 16px:

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}
+ +

{{ EmbedLiveSample('Example_4') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
+ 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

+ +

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

+ +

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/referencia_css/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +
+

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

+ +

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

+ +

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

+Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
+ +

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

+ +

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

+ +

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

+ +

Sintaxis de regla básica

+ +

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

+ +

Sintaxis de regla de estilo

+ +
selectorlist {
+   property: value; 
+   [more property:value; pairs] 
+}
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+Ver selector, pseudo-elemento, pseudo-clase más abajo.
+
+
+ +

Ejemplos de reglas de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

+ +

Sintaxis de las reglas-at (@rules)

+ +

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

+ +

Índice de palabras clave

+ +
+

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

+
+ +
{{CSS_Ref}}
+ +

Selectores

+ +

Selectores básicos

+ + + +

Combinadores

+ + + +

Pseudo-clases

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(':any')}}
    • +
  • {{ Cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":defined") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":focus-visible") }}
    • +
  • {{ Cssxref(":host") }}
    • +
  • {{ Cssxref(":host()") }}
    • +
  • {{ Cssxref(":host-context()") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudo-elementos

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

+
+ +

Conceptos

+ +

Sintaxis y semántica

+ + + +

Valores

+ + + +

Diseño

+ + + +

DOM-CSS / CSSOM

+ +

Tipos de objetos principales

+ + + +

Métodos importantes

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+ +

Tutoriales CSS3

+ +

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

+ + + +

Ver también

+ + diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/referencia_css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntax

+ +
/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
{{cssxref("<blend-mode>")}}
+
El modo de mezcla que debería ser aplicado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

Ejemplo vivo

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+
+ +

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Véase también

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html new file mode 100644 index 0000000000..04b53caa45 --- /dev/null +++ b/files/es/web/css/repeat()/index.html @@ -0,0 +1,147 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +--- +
{{cssref}}
+ +

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

+ +

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

Síntaxis

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
+
max-content
+
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
+
min-content
+
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
+
auto-fill
+
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
+
auto-fit
+
+

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

+ +

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

+ +

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

+
+
+ +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 100 pixels.
+  </div>
+</div>
+ +

Resultados

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/resize/index.html b/files/es/web/css/resize/index.html new file mode 100644 index 0000000000..7f40b09236 --- /dev/null +++ b/files/es/web/css/resize/index.html @@ -0,0 +1,194 @@ +--- +title: resize +slug: Web/CSS/resize +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

Valores

+ +
+
none
+
El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.
+
both
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.
+
horizontal
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.
+
vertical
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.
+
+ +
Nota: resize no aplica abloques en los cuales la propiedad {{cssxref("overflow")}} es configurada como visible.
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Deshabilitando la capacidad de cambio de tamaño de areas de texto

+ +

CSS

+ +

Por defecto, los elementos {{HTMLElement("textarea")}} permiten cambiar el tamaño en {{gecko("2.0")}} (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:

+ +
textarea.example {
+  resize: none; /* disables resizability */
+}
+
+ +

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto","200","100")}}

+ +

Utilizando resize con elementos arbitrarios

+ +

Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque {{HTMLElement("div")}} contiene un parrafo (elemento {{HTMLElement("p")}}) que permite cambiar su tamaño:

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  </p>
+</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspacificaciónEstadoComentario
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}} 
+ +

Compatibilidad de Navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{ property_prefix("-moz") }}{{CompatNo}}{{CompatNo}}3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{ CompatGeckoDesktop("5.0") }}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ +
    +
  • {{HTMLElement("textarea")}}
    • +
diff --git "a/files/es/web/css/resoluci\303\263n/index.html" "b/files/es/web/css/resoluci\303\263n/index.html" new file mode 100644 index 0000000000..b480413bb1 --- /dev/null +++ "b/files/es/web/css/resoluci\303\263n/index.html" @@ -0,0 +1,151 @@ +--- +title: +slug: Web/CSS/resolución +tags: + - CSS + - CSS tipo de datos + - Diseño + - Estilos + - Referencia +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

+ +

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

+ +

Unidades

+ +
+
dpi
+
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
+
dpcm
+
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
+
dppx
+
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
+
+ +

Ejemplos

+ +

Éstos son algunos de los usos correctos de valores <resolution>:

+ +
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
+@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
+
+ +

Here are some incorrect uses:

+ +
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
+ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
+0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

+ +

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

+ +

Ver también

+ + diff --git a/files/es/web/css/resolved_value/index.html b/files/es/web/css/resolved_value/index.html new file mode 100644 index 0000000000..f4da84636d --- /dev/null +++ b/files/es/web/css/resolved_value/index.html @@ -0,0 +1,38 @@ +--- +title: Valor resuelto +slug: Web/CSS/resolved_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

El valor resuelto (resolved value) de una propiedad CSS es el valor devuelto por {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Para la mayoría de las propiedades, esto es el {{cssxref("computed_value", "valor calculado") }}, pero para algunas propiedades antiguas (incluyendo {{cssxref("width")}} y {{cssxref("height")}}), éste es el {{cssxref("used_value", "valor usado")}}. Véase el enlace a la especificación a continuación para más detalles por propiedad.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definición inicial
+ +

Véase también

+ +
    +
  • Referencia CSS
    • +
  • {{CSS_key_concepts}}
    • +
  • {{domxref("window.getComputedStyle")}}
    • +
diff --git a/files/es/web/css/right/index.html b/files/es/web/css/right/index.html new file mode 100644 index 0000000000..db23189f44 --- /dev/null +++ b/files/es/web/css/right/index.html @@ -0,0 +1,93 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS Reference + - NeedsTechnicalReview + - Referencia_CSS +translation_of: Web/CSS/right +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

+ +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.

+ +
    +
  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
    • +
  • Se aplica a: positioned elements
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: se refiere al ancho del bloque contenedor.
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.
    • +
+ +

Sintaxis

+ +
right: <length> | <percentage> | auto | inherit ;
+
+ +

Valores

+ +
+
{{cssxref("<length>")}} 
+
Una longitud, puede ser un valor negativo, cero, o un valor positivo.
+
{{cssxref("<percentage>")}} 
+
Un porcentaje del ancho del bloque contenedor.
+
+ +

Ejemplos

+ +
div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+}
+
+ +

Notas

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer?
Firefox1
Netscape?
Opera?
Safari?
+ +

Ver también

+ +

{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}

diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html new file mode 100644 index 0000000000..1fd8c9f45d --- /dev/null +++ b/files/es/web/css/rtl/index.html @@ -0,0 +1,22 @@ +--- +title: rtl +slug: Web/CSS/rtl +--- +

Sumario

+

El valor rtl es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. +


+

+

Ejemplos

+
div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+   direction: rtl;
+}
+
+


+

+

Ver también

+

{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} +

diff --git a/files/es/web/css/scroll-behavior/index.html b/files/es/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..b7b591d520 --- /dev/null +++ b/files/es/web/css/scroll-behavior/index.html @@ -0,0 +1,165 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - Propiedad CSS + - Referencia + - Vista CSSOM +translation_of: Web/CSS/scroll-behavior +--- +
{{ CSSRef }}
+ +

La propiedad CSS scroll-behavior especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM. Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.

+ +

Esta propiedad puede ser ignorada por los agentes de usuario.

+ +
/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
La caja de desplazamiento realiza el desplazamiento instantáneamente.
+
smooth
+
La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+ +

CSS

+ +
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+
+ +

Output

+ +

{{ EmbedLiveSample('Example', "100%", 250) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico61[1]{{ CompatGeckoDesktop("36") }}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{ CompatGeckoDesktop("36") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Soportado en Chrome and Opera activando las opciones"Smooth Scrolling" o "Enable experimental web platform features".

diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html new file mode 100644 index 0000000000..a7b59d03c6 --- /dev/null +++ b/files/es/web/css/selectores_atributo/index.html @@ -0,0 +1,241 @@ +--- +title: Selectores de atributo +slug: Web/CSS/Selectores_atributo +tags: + - Atributos + - CSS + - Selectores + - Selectores de Atributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

+ +
/* Elementos <a> con un atributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elementos <a> con un href que coincida con "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elementos <a> con un href que contenga "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elementos <a> con un href que comience con "#" */
+a[href^="#"] {
+  color: #001978;
+}
+
+/* Elementos <a> con un href que termine en ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+
+ +
+
[attr]
+
Selecciona los elementos que tienen el atributo attr.
+
[attr=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
+
[attr~=value]
+
+

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

+
+
[attr|=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
+
[attr^=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
+
[attr$=value]
+
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
+
[attr*=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
+
[attr operator value i]
+
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
+ +

Ejemplos

+ +

Enlaces

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Enlaces internos, comenzando con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Enlaces con "example" en cualquier parte de la URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Enlaces con "insensitive" en cualquier parte de la URL,
+   independientemente de las mayúsculas */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Enlaces que terminan en ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Enlace interno</a></li>
+  <li><a href="http://example.com">Enlace de ejemplo</a></li>
+  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
+  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Enlaces')}}

+ +

Idiomas

+ +

CSS

+ +
/* Todos los divs con un atributo `lang` están en negrita. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Todos los divs en inglés de EE. UU. son azules. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Todos los divs en portugués son verdes. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Todos los divs en chino son rojos, ya sean
+   simplificados (zh-CN) o tradicionales (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Todos los divs con `data-lang` Traditional Chinese
+   son de color púrpura. */
+/* Nota: también puede usar atributos con guiones
+   sin comillas dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Idiomas')}}

+ +

Listas Ordenadas

+ +

{{SeeCompatTable}}

+ +

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

+ +

CSS

+ +
/*
+Los tipos de lista requieren poder distinguir entre mayúsculas
+y minúsculas debido al peculiar comportamiento que tiene HTML
+con el atributo "type"
+*/
+
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Result

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Ver también

+ +
    +
  • Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}
    • +
  • Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}
    • +
  • Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html new file mode 100644 index 0000000000..20baaf25a6 --- /dev/null +++ b/files/es/web/css/selectores_css/index.html @@ -0,0 +1,164 @@ +--- +title: Selectores CSS +slug: Web/CSS/Selectores_CSS +tags: + - CSS + - Referencia + - Selectores + - Selectores de CSS + - Visión general +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

+ +

Selectores básicos

+ +
+
Selector de tipo
+
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
+ Sintaxis: eltname
+ Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
+
Selector de clase
+
Selecciona todos los elementos que tienen el atributo de class especificado.
+ Sintaxis: .classname
+ Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
+
Selector de ID
+
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
+ Sintaxis: #idname
+ Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
+
Selector universal
+
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
+ Sintaxis: * ns|* *|*
+ Ejemplo: * se aplicará a todos los elementos del documento.
+
Selector de atributo
+
Selecciona elementos basándose en el valor de un determinado atributo.
+ Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
+
+ +

Combinadores

+ +
+
Combinador de hermanos adyacentes
+
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
+ Sintaxis: A + B
+ Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
+
Combinador general de hermanos
+
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
+ Sintaxis: A ~ B
+ Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
+
Combinador de hijo
+
El combinador > selecciona los elementos que son hijos directos del primer elemento.
+ Sintaxis: A > B
+ Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
+
Combinador de descendientes
+
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
+ Sintaxis: A B
+ Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
+
Combinador de columna {{Experimental_Inline}}
+
El combinador || selecciona los elementos especificados pertenecientes a una columna.
+ Sintaxis: A || B
+ Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
+
+ +

Pseudoclases

+ +
+
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
+
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
+
+ +

Pseudoelementos

+ +
+
+

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

+
+
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html new file mode 100644 index 0000000000..fe51517a2b --- /dev/null +++ b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html @@ -0,0 +1,67 @@ +--- +title: 'Usando la pseudo-clase :target en selectores' +slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' +tags: + - CSS + - CSS3 + - Selectores +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+ +

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

+ +

Seleccionando un objetivo (target)

+ +

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

+ +

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

+ +
h2:target {font-weight: bold;}
+ +

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

+ +
#Example:target {border: 1px solid black;}
+ +

Aplicando estilos a todos los elementos objetivo

+ +

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

+ +
:target {color: red;}
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusión

+ +

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

+ + + + + +
+

Información del Documento Original

+ +
    +
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • +
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • +
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • +
+
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html new file mode 100644 index 0000000000..1200c4bd61 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_adyacentes/index.html @@ -0,0 +1,135 @@ +--- +title: Selectores de hermanos adyacentes +slug: Web/CSS/Selectores_hermanos_adyacentes +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

+ +

Sintaxis

+ +
elemento_anterior + elemento_afectado { estilos }
+
+ +

Ejemplo

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Uno</li>
+  <li>Dos</li>
+  <li>Tres</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

+ +

Ver también

+ + diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html new file mode 100644 index 0000000000..96c87148b9 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_generales/index.html @@ -0,0 +1,117 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/Selectores_hermanos_generales +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Resumen

+ +

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

+ +

Sintaxis

+ +
elemento ~ elemento { estilos }
+
+ +

Ejemplo

+ +
p ~ span {
+  color: red;
+}
+ +
<span>Este span no es rojo.</span>
+<p>Aquí hay un párrafo.</p>
+<code>Aquí hay algo de código.</code>
+<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
+ +

{{ EmbedLiveSample('Example', 320, 150) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ +

 

+ + diff --git a/files/es/web/css/shorthand_properties/index.html b/files/es/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..7e6cb6a359 --- /dev/null +++ b/files/es/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propiedades abreviadas +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guía + - Propiedades + - Referencia + - abreviatura + - propiedades abreviadas +translation_of: Web/CSS/Shorthand_properties +--- +

Definición

+ +

Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

+ +

La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad  {{cssxref("background")}} de CSS es una propiedad abreviada que puede definir el valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, y {{cssxref("background-position")}}. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación {{cssxref("font")}}, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación {{cssxref("margin")}}.

+ +

Casos especiales delicados

+ +

Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:

+ +
    +
  1. Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto: + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    +  no pondrá el color en rojo sino al valor por defecto de {{cssxref("background-color")}} , transparent, puesto que la segunda regla tiene precedencia.
    2. +
  2. Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit.
    3. +
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: +
      +
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + + + + + + + + + + + + + + + + + + + +
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png +

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

      +
      +
      2. +
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + + + + + + + + + + + + + + + + + + + +
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png +

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

      +
      +
      3. +
    +
    4. +
+ +

Propiedades Background

+ +

Un fondo con las siguientes propiedades...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

... puede acortarse con una sola declaración:

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +

(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)

+ +

Propiedades Font

+ +

Las siguientes declaraciones:

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

... pueden ser abreviadas como sigue:

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a font-variant: normal y font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+ +

Propiedades Border

+ +

Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

... puede ser simplificada como

+ +
border: 1px solid #000;
+ +

Propiedades Margin y Padding

+ +

Versiones abreviadas de margin y padding funcionan de la misma forma. Las siguientes declaraciones CSS:

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)

+ +
margin: 10px 5px 10px 5px;
+ +

La propiedad abreviada universal

+ +

CSS provee una propiedad abreviada universal, {{cssxref("all")}}, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:

+ +

{{page("/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance", "Controlling_inheritance")}}

+ +

Ver Cascade and inheritance o Introducing the CSS Cascade para más información acerca de como trabaja la herencia en CSS.

+ +

Ver también

+ +
    +
  • CSS Reference
    • +
  • {{css_key_concepts}}
    • +
  • Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}, {{cssxref("flex")}}.
    • +
diff --git "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" new file mode 100644 index 0000000000..90d5ea8b75 --- /dev/null +++ "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" @@ -0,0 +1,402 @@ +--- +title: Sintaxis de definición de valor +slug: Web/CSS/Sintaxis_definición_de_valor +translation_of: Web/CSS/Value_definition_syntax +--- +

{{CSSRef()}}

+ +

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

+ +

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

+ +

Tipos de valor de los componentes

+ +

Palabras clave

+ +

Palabras clave genéricas

+ +

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

+ +

El caso específico de inherit e initial

+ +

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

+ +

Literales

+ +

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

+ +

Ambos símbolos aparecen literalmente en una definición de valor.

+ +

Tipos de dato

+ +

Tipos de dato básicos

+ +

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Tipos de dato no terminales

+ +

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

+ +

Los tipos de dato no terminales son de dos tipos::

+ +
    +
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • +
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • +
+ +

Combinadores de los valores de componentes

+ +

Corchetes

+ +

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

+ +
bold [ thin && <length> ]
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Pero no con:

+ +
    +
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • +
+ +

Yuxtaposición

+ +

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

+ +
bold <length> , thin
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Pero no con:

+ +
    +
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • +
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • +
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • +
+ +

Doble ampersand

+ +

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

+ +
bold && <length>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Pero no con:

+ +
    +
  • bold porque ambos componentes deben aparecer en el valor
    • +
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • +
+ +
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
+ +

Barra doble

+ +

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Pero no con:

+ +
    +
  • blue yellow porque un componente debe aparecer al menos una vez.
    • +
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • +
+ +
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
+ +

Barra simple

+ +

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Pero no

+ +
    +
  • center 3% porque solo uno de los componentes debe estar presente
    • +
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • +
+ +
+

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

+
+ +

Multiplicadores de valores de componentes

+ +

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

+ +

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

+ +

Asterisco (*)

+ +

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

+ +
bold smaller*
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • +
+ +

Suma (+)

+ +

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

+ +
bold smaller+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Pregunta (?)

+ +

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

+ +
bold smaller?
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Pero no:

+ +
    +
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • +
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Llaves ({ })

+ +

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

+ +
bold smaller{1,3}
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • +
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Hash (#)

+ +

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

+ +
bold smaller#
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Sumario

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/es/web/css/specified_value/index.html b/files/es/web/css/specified_value/index.html new file mode 100644 index 0000000000..a13d57f4e1 --- /dev/null +++ b/files/es/web/css/specified_value/index.html @@ -0,0 +1,43 @@ +--- +title: Valor especificado +slug: Web/CSS/specified_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/specified_value +--- +

{{CSSRef}}

+ +

El valor especificado (specified value) de una propiedad CSS es establecido de una de las siguientes maneras:

+ +
    +
  1. Si la hoja de estilos del documento tiene un valor especificado para la propiedad, éste será usado. Por ejemplo, si la propiedad {{cssxref("color")}} es establecida con valor green, el color del texto del elemento que corresponda será verde.
    2. +
  2. Si la hoja de estilos del documento no tiene un valor especificado para la propiedad, se heredará del elemento padre (si es posible). Por ejemplo, si tenemos un párrafo ({{HTMLElement("p")}}) dentro de un {{HTMLElement("div")}}, y el {{HTMLElement("div")}} tiene el valor de su propiedad font como "Arial", y el {{HTMLElement("p")}} no tiene definida la propiedad font, se heredará la fuente Arial.
    3. +
  3. Si ninguna de las anteriores está disponible, se aplica el valor inicial del elemento segun la especificación CSS.
    4. +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/css/syntax/index.html b/files/es/web/css/syntax/index.html new file mode 100644 index 0000000000..25ff30fa71 --- /dev/null +++ b/files/es/web/css/syntax/index.html @@ -0,0 +1,81 @@ +--- +title: Sintaxis +slug: Web/CSS/Syntax +tags: + - CSS + - Guía + - Principiante + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.

+ +
    +
  • La propiedad que es un identificador, un nombre leíble por humanos, que define qué característica es considerada.
    • +
  • +

    El valor que describe como las características deben ser manejadas por el motor. Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador.

    +
    • +
+ +

Declaraciones de CSS

+ +

Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos.

+ +

Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, ':' (U+003A COLON), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.

+ +

css syntax - declaration.png

+ +

Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es considerada inválida y es completamente ingorada por el motor del CSS.

+ +

Bloques de declaraciones en CSS

+ +

Las declaraciones son agrupada en bloques, que es una estructura delimitada por una llave de apertura, '{' (U+007B LEFT CURLY BRACKET), y una de cierre, '}' (U+007D RIGHT CURLY BRACKET). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coindidir.

+ +

css syntax - block.png

+ +

Esos bloques son naturalmente llamados bloques de declaraciones y las declaraciones dentro de ellos están separadas por un punto y coma, ';' (U+003B SEMICOLON). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una buena práctica porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.

+ +

css syntax - declarations block.png

+ +
El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo  style de HTML.
+ +

Sets de reglas CSS

+ +

Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento.

+ +

CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un selector, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de set de reglas, o simplemente una regla.

+ +

css syntax - ruleset.png

+ +

Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo cascada.

+ +
Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.
+
+Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el selector entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también).
+ +

Declaraciones CSS

+ +

Los sets de reglas son los bloques principales de una hoja de estilos, que generalmente consiste en una larga lista de ellos. Pero existe otro tipo de innformación que el autor web puede transmitir en la hoja de estilos, como el set de caracteres, otra hoja de estilos a importar, font face o listar descripciones de contador, entre otros. Se usarán tipos de declaracionnes específicas para esto mismo.

+ +

Una declaración es un bloque que empieza con un caracter (no espacio) y termina con la primer llave de cierre o punto y coma (fuera de una cadena, sin escape y no incluñido dentro de otro par de {}. () o []).

+ +

css syntax - statements Venn diag.png

+ +

Existen dos tipos de declaraciones:

+ +
    +
  • Sets de reglas (o reglas) que, como lo visto, asocian una colección de declaraciones CSS a una condición descrita como selector.
    • +
  • Reglas At que inician con un símbolo '@' (U+0040 COMMERCIAL AT), seguido de un identificados y luego el resto de la declaración que finaliza con un punto y coma (;) por fuera de un bloque o al inicio del próximo bloque. Cada tipo de reglas at, definidas por un identificador, tienen su propia sintaxis interna, y semántica por supuesto. Se utilizan para establecer información de meta datos (como {{ cssxref("@charset") }} o {{ cssxref("@import") }}), información condicional (como {{ cssxref("@media") }} o {{ cssxref("@document") }}), o información descrciptiva (como {{ cssxref("@font-face") }}).
    • +
+ +

Toda declaración que no es un set de reglas ni una regla at es considerada inválida e ignorada.

+ +

Existe otro grupo de declaraciones: las declaraciones anidadas. Estass son declaraciones que pueden ser usadas en un subset específico de reglas at (las reglas de grupo condicionales). Estas declaraciones sólo aplican si una condición específica se cumple: el contenido de la regla at @media se aplica sóllo si el dispositivo en el que el navegaddor se encuentra corriendo cumple dadas condiciones; el contenido de la regla at @document se aplica sólo si la página actual cumple dadas condiciones, y así. En CSS1 y CSS2.1, sólo los sets de reglas pueden ser usados dentro de reglas de grupo condicionales. Esto era muy restrictivo y se dejó de aplicar en CSS Conditionals Level 3. Actualmente, aunque sigue siendo experimental y no es soportado por todos los navegadores, las reglas de grupo condicional pueden contener varios sets de reglas, e incluso, aunque no todas, reglas at.

+ +

Ver también

+ +
    +
  • {{ CSS_key_concepts()}}
    • +
diff --git a/files/es/web/css/text-decoration-color/index.html b/files/es/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..1310ee9c30 --- /dev/null +++ b/files/es/web/css/text-decoration-color/index.html @@ -0,0 +1,148 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - Propiedad CSS + - Referencia + - Texto CSS +translation_of: Web/CSS/text-decoration-color +--- +
{{ CSSRef }}
+ +

Resumen

+ +

La propiedad text-decoration-color establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad {{ cssxref("text-decoration-line") }}. El color especificado será el mismo para los tres tipos de línea.

+ +

CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad text-decoration-line), y especificando un color de línea (usando text-decoration-color) propio para cada elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* valores <color> */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valores globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+
+ +

Valores

+ +
+
<color>
+
La propiedad color acepta varlos nombres clave y notaciones numéricas. Vea {{cssxref("<color>")}} para más detalles.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+
+ +

El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<style>
+.example {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.example:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+</style>
+</head>
+<body>
+<span class="example">
+  <span style="color:black;">texto negro con subrayado rojo, y azul con el cursor encima</span>
+</span>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatGeckoDesktop("6.0") }} - {{ CompatGeckoDesktop("39.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("36.0") }} without prefix		{{ CompatNo }}{{ CompatNo }}7.1 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatGeckoMobile("6.0") }} - {{ CompatGeckoMobile("39.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("36.0") }} without prefix		{{ CompatNo }}{{ CompatNo }}8 {{ property_prefix("-webkit") }}
+
diff --git a/files/es/web/css/text-decoration-line/index.html b/files/es/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..6fcbbc2d7c --- /dev/null +++ b/files/es/web/css/text-decoration-line/index.html @@ -0,0 +1,100 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-line +--- +
{{CSSRef}}
+ +

La propiedad CSS text-decoration-line establece el tipo de decoración de línea que se agregará a un elemento.

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
+ +

When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.

+ +

La decoración underline posiciona el subrayado debajo del texto, la decoración overline posiciona el subrayado encima del texto, y la decoración line-through posiciona la línea en medio del texto.

+ +

Sintaxis

+ +
/* Valores de clave */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: underline overline;                /* Dos líneas de decoración */
+text-decoration-line: overline underline line-through;   /* Múltiples líneas de decoración */
+
+/* Valores globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

Valores

+ +

none

+ +
+
No agrega decoración al texto.
+
underline
+
Cada línea del texto lleva subrayado inferior.
+
overline
+
Cada línea del texto lleva subrayado superior.
+
line-through
+
Cada línea del texto lleva una línea atravesando por en medio del mismo.
+
blink {{deprecated_inline}}
+
El texto parpadea (se alterna entre visible e invisible). Según los ajustes del agente usuario, el texto puede simplemente no parpadear. Este valor está en desuso, en favor de las Animaciones.
+
-moz-anchor-decoration {{non-standard_inline}}
+
El texto es decorado con el estilo de un ancla; no adecuado para contenido web.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p>¡Aquí hay texto con subrayado inferior rojo ondulado!</p>
+ +

Contenido CSS

+ +
p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+ +

{{EmbedLiveSample('example', 300, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.
+ +

Compatibilidad de navegadores

+ +

{{Compat("css.properties.text-decoration-line")}}

+ +

Ver también

+ +
    +
  • When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.
    • +
diff --git a/files/es/web/css/text-decoration-style/index.html b/files/es/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..d698913b8f --- /dev/null +++ b/files/es/web/css/text-decoration-style/index.html @@ -0,0 +1,200 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS text-decoration-style define el estilo de las líneas especificadas por {{ cssxref("text-decoration-line") }}. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por text-decoration-line.

+ +

Si la decoración especificada tiene un significado semántico propio, como line-through, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como {{ HTMLElement("del") }} o {{ HTMLElement("s") }}. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valores globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+
+ +

Valores

+ +
+
solid double dotted dashed wavy
+
Es una de las siguientes palabras clave: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Palabra claveDescripciónComentario
solidDibuja una línea simple 
doubleDibuja una línea doble 
dottedDibuja una línea punteada 
dashedDibuja una línea discontinua 
wavyDibuja una línea ondulada 
-moz-none{{ non-standard_inline }} No dibuja una líneaNo usarse: usar {{ cssxref("text-decoration-line") }}: none en su lugar
+
+
inherit
+
Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
.example {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: red;
+}
+
+ +
<p class="example">Así se ve el resultado.</p>
+
+ +

{{ EmbedLiveSample('Ejemplos', '', '', '') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("36.0") }}		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
wavy{{ CompatGeckoDesktop("6.0") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("36.0") }}		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
wavy{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoMobile("6.0") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
diff --git a/files/es/web/css/text-decoration/index.html b/files/es/web/css/text-decoration/index.html new file mode 100644 index 0000000000..7a3675657b --- /dev/null +++ b/files/es/web/css/text-decoration/index.html @@ -0,0 +1,202 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

La propiedad CSS text-decoration se usa para establecer el formato de texto a subrayado (underline) y suprarrayado (overline), tachado (line-through) o parpadeo (blink). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.

+ +

Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p>, la regla de estilos p { text-decoration: underline; } causará que el párrafo entero tenga subrayado. La regla em { text-decoration: none; } no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla em { text-decoration: overline; } causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".

+ +
+

Nota: El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+text-decoration: none;                 /* Sin decoración */
+text-decoration: underline red;        /* Subrayado rojo */
+text-decoration: underline wavy red;   /* Subrayado rojo ondulado */
+
+/* Valores globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+
+ +

Valores

+ +

La propiedad text-decoration es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, y {{cssxref("text-decoration-style")}}

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+
+ + + +

{{EmbedLiveSample('Examples','100%','310')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}} +

Transformada a propiedad reducida. Soporte agregado para el valor de {{cssxref('text-decoration-style')}}.

+
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Sin cambios significativos
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("1.0")}}1.03.03.51.0
valor blink{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("23.0")}}[1]		{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]4.0
+ 15.0[1]		{{CompatVersionUnknown}}[1]
Propiedad reducida{{CompatGeckoDesktop("6.0")}}[3]
+ {{CompatGeckoDesktop("36.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}7.1[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
valor blink{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("23.0")}}[1]		{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]4.0[1]{{CompatVersionUnknown}}[1]
Propiedad reducida{{CompatGeckoMobile("6.0")}}[3]
+ {{CompatGeckoMobile("36.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}8[1]
+
+ +

[1] El valor blink no tiene ningún efecto.

+ +

[2] Safari no soporta {{cssxref("text-decoration-style")}}.

+ +

[3] Esta versión de Gecko tiene una implementación parcial.

+ +

Véase también

+ +
    +
  • El atributo {{cssxref("list-style")}} controla la apariencia de los items en listas {{HTMLElement("ol")}} y {{HTMLElement("ul")}} de HTML.
    • +
diff --git a/files/es/web/css/text-emphasis-color/index.html b/files/es/web/css/text-emphasis-color/index.html new file mode 100644 index 0000000000..10c814748e --- /dev/null +++ b/files/es/web/css/text-emphasis-color/index.html @@ -0,0 +1,103 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - Colores HTML + - Decoración de Texto CSS + - Estilizando HTML + - Estilos CSS + - Propiedad CSS + - Referencia + - text-decoration-color + - Énfasis de Texto +translation_of: Web/CSS/text-emphasis-color +--- +
{{CSSRef}}
+ +

La propiedad CSS text-emphasis-color (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo {{cssxref("text-emphasis")}}

+ +
/* Valor inicial*/
+text-emphasis-color: currentColor;
+
+/* <color>  */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valores globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+
+ +

{{cssinfo}}

+ +

Sintáxis

+ +

Valores

+ +
+
<color>
+
Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es currentColor (color actual).
+
+ +

Sintáxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

CSS

+ +
h3 {
+  text-emphasis-color: #555;
+  text-emphasis-style: "*";
+}
+ +

HTML

+ +
<p>Este es un ejemplo:</p>
+
+<h3>Esto está marcado con énfasis!</h3>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", 450, 100)}}Ejemplo incrustado en vivo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Initial definition
+ +

Compatibilidad de Navegadores

+ + + +

{{Compat("css.properties.text-emphasis-color")}}

+ +

Ver También

+ +
    +
  • El tipo de dato {{cssxref("<color>")}}.
    • +
  • Las otras propiedades de marcas de énfasis relacioanadas: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, y {{cssxref("text-emphasis-position")}}.
    • +
  • Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • Aplicando color a los elementos HTML utilizando CSS.
    • +
diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..94979eb8af --- /dev/null +++ b/files/es/web/css/text-emphasis/index.html @@ -0,0 +1,178 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +translation_of: Web/CSS/text-emphasis +--- +
+

La propiedad CSS  de text-emphasis, es una propiedad abreviada para establecer los valores de text-empahasis-style y text-emphasis-color, en una sola declaración.

+ +

Esta propiedad aplicara el  énfasis a cada carácter especificado en el texto del elemento,  a excepción de caracteres separados como espacios y caracteres de control .

+
+ +
/* Valor Inicial */
+text-emphasis: none; /* No emphasis marks */
+
+/* <string> valor */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */
+
+/* Valor de la Palabra Clave */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valor de la Palabra clave combinada con un color */
+text-emphasis: filled sesame #555;
+
+/* Valores Globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+
+ +

La propiedad text-emphasis es diferente a la propiedad text-decoration.

+ +

Text-decoration no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad test-emphasis si hereda, lo que significa que es posible cambiar el énfasis para los descendientes.

+ +

The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.

+ +
+

text-emphasis doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
No emphasis marks.
+
filled
+
The shape is filled with solid color. If neither filled nor open is present, this is the default.
+
open
+
The shape is hollow.
+
dot
+
Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).
+
circle
+
Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB). This is the default shape in horizontal writing modes when no other shape is given.
+
double-circle
+
Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).
+
triangle
+
Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).
+
sesame
+
Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46). This is the default shape in vertical writing modes when no other shape is given.
+
<string>
+
Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.
+
<color>
+
Defines the color of the mark. If no color is present, it defaults to currentColor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

A heading with emphasis shape and color

+ +

This example draws a heading with triangles used to emphasize each character.

+ +

CSS

+ +
h2 {
+  text-emphasis: triangle #D55;
+}
+ +

HTML

+ +
<h2>This is important!</h2>
+ +

Resultado

+ +

{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("46")}}[1]25.0{{property_prefix("-webkit")}}{{CompatNo()}}15.0{{property_prefix("-webkit")}}6.1{{property_prefix("-webkit")}}
+ 7.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatGeckoDesktop("46")}}[1]4.4{{property_prefix("-webkit")}}{{CompatNo()}}33{{property_prefix("-webkit")}}7.1
+
+ +

[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true. Activated by default in Firefox 46, this preference was removed in Firefox 49.

+ +

Ver también

+ +
    +
  • The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.
    • +
  • The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.
    • +
diff --git a/files/es/web/css/text-orientation/index.html b/files/es/web/css/text-orientation/index.html new file mode 100644 index 0000000000..82b6f3295b --- /dev/null +++ b/files/es/web/css/text-orientation/index.html @@ -0,0 +1,104 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - Formas de Escritura CSS + - Orientacion del Texto CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/text-orientation +--- +
{{CSSRef}}
+ +

La propiedad  CSS  text-orientation define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando {{cssxref("writing-mode")}} no está establecido cómo horizontal-tb. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.

+ +
/* Palabras clave valor */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valores globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad text-orientation puede tener cómo valor una de las palabras clave listadas a continuación.

+ +

Valores

+ +
+
mixed
+
Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.
+
upright
+
Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para {{cssxref("direction")}} es forzado a ser ltr.
+
sideways
+
Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.
+
sideways-right
+
Un alias para sideways que se mantiene para propositos de compatibilidad.
+
use-glyph-orientation
+
En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas glyph-orientation-vertical y glyph-orientation-horizontal.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<p>Lorem ipsum dolet semper quisquam.</p>
+ +

CSS

+ +
p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.properties.text-orientation")}}

+ +

 

+ +

Vea tambien

+ +
    +
  • Las otras propiedades CSS relacionadas con escritura vertical: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, y {{cssxref("unicode-bidi")}}.
    • +
diff --git a/files/es/web/css/text-overflow/index.html b/files/es/web/css/text-overflow/index.html new file mode 100644 index 0000000000..3d559cae8f --- /dev/null +++ b/files/es/web/css/text-overflow/index.html @@ -0,0 +1,308 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +translation_of: Web/CSS/text-overflow +--- +
{{CSSRef}}
+ +

La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('…', U+2026 Horizontal Ellipsis), o mostrar una cadena de texto personalizada.

+ +
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+ +

La propiedad text-overflow no fuerza a que ocurra un desbordamiento. Para hacer que un texto desborde a su contenedor debes poner algunas otras propiedades de CSS. Por ejemplo:

+ +
overflow: hidden;
+white-space: nowrap;
+ +

La propiedad text-overflow solo afecta al contenido que está rebasando un elemento de contenedor en bloque en su dirección de progresión inline (no así, a un texto que rebase por el bottom del contenedor, por).

+ +

Sintaxis

+ +

La propiedad text-overflow ha de ser especificada usando uno o dos valores. Si se define solo un valor, este determinará el comportamiento del overflow para el final de la línea (el extremo derecho en un texto izquierda-a-derecha o el extremo izquierdo en un texto derecha-a-izquierda). Si se definen dos valores, el primero hará referencia al comportamiento overflow para para el extremo izquierdo y el segundo al extremo derecho de la línea.

+ +

Cada valor se especificará como una de las siguientes opciones:

+ +
    +
  • Una palabra clave: clip, ellipsis, fade
    • +
  • La función fade(), que recibe {{cssxref("<length>")}} o {{cssxref("<percentage>")}} para controlar la distancia de desvanecimiento
    • +
  • Un <string>.
    • +
+ +

Values

+ +
+
clip
+
The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: '';.
+
ellipsis
+
This keyword value will display an ellipsis ('…', U+2026 Horizontal Ellipsis) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.
+
<string> {{experimental_inline}}
+
The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.
+
fade {{experimental_inline}}
+
This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
+
fade( <length> | <percentage> ) {{experimental_inline}}
+
This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
+
The argument determines the distance over which the fade effect is applied. The {{cssxref("<percentage>")}} is resolved against the width of the line box. Values lower than 0 are clipped to 0. Values greater than the width of the line box are clipped to the width of the line box.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +

CSS

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+
+ +

HTML

+ +
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+ +

Result

+ +

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS valuedirection: ltrdirection: rtl
Expected ResultLive resultExpected ResultLive result
visible overflow1234567890 +
1234567890
+ 		0987654321 +
1234567890
+
text-overflow: clipt-o_clip.png +
123456
+ 		t-o_clip_rtl.png +
1234567890
+
text-overflow: ''12345 +
123456
+ 		54321 +
1234567890
+
text-overflow: ellipsis1234… +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: '.'1234. +
1234567890
+ 		.4321 +
1234567890
+
text-overflow: clip clip123456 +
1234567890
+ 		654321 +
1234567890
+
text-overflow: clip ellipsis1234… +
1234567890
+ 		6543… +
1234567890
+
text-overflow: clip '.'1234. +
1234567890
+ 		6543. +
1234567890
+
text-overflow: ellipsis clip…3456 +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: ellipsis ellipsis…34… +
1234567890
+ 		…43… +
1234567890
+
text-overflow: ellipsis '.'…34. +
1234567890
+ 		…43. +
1234567890
+
text-overflow: ',' clip,3456 +
1234567890
+ 		,4321 +
1234567890
+
text-overflow: ',' ellipsis,34… +
1234567890
+ 		,43… +
1234567890
+
text-overflow: ',' '.',34. +
1234567890
+ 		,53. +
1234567890
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS4 UI')}}Added the values <string> and fade and the fade() function
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Initial definition
+ +

A previous version of this interface reached the Candidate Recommendation status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the Working Draft level, explaining why browsers implemented this property unprefixed, though not at the CR state.

+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.text-overflow")}}

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • +
  • CSS properties that control line breaks in words: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}
    • +
diff --git a/files/es/web/css/text-shadow/index.html b/files/es/web/css/text-shadow/index.html new file mode 100644 index 0000000000..1e0cd7ee53 --- /dev/null +++ b/files/es/web/css/text-shadow/index.html @@ -0,0 +1,197 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad {{cssxref("text-decoration","text-decorations")}} del elemento.

+ +

Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.

+ +

Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.

+ +

Esta propiedad aplica para los pseudo-elementos {{cssxref("::first-line")}} y {{cssxref("::first-letter")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Se usan los valores predeterminados para color y blur-radius */
+text-shadow: 5px 10px;
+
+/* Valores globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

Valores

+ +
+
<color>
+
Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. {{note("Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.")}}
+
<offset-x> <offset-y>
+
Requeridos. Estos valores length especifican el ófset de la sombra del texto. <offset-x> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <offset-y> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son 0, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor <blur-radius>).
+ Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.
+
<blur-radius>
+
Opcional. Éste es un valor {{cssxref("length")}}. Si no se especifica, su valor predeterminado es 0. Mientras más alto sea el valor, mayor será la difuminación; la sombra se vuelve más amplia y clara.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example1', '689px', '90px')}}

+ +
+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}
+ +
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example2', '689px', '180px')}}

+ +
+
.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}
+ +
<p class="gold-on-gold">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example3', '689px', '90px')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Incluye text-shadow en la lista de propiedades que pueden ser animadas.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}La propiedad CSS text-shadow fue inadecuadamente definida en CSS2 y descartada en CSS2 (Nivel 1). La especificación del Módulo de Textos Nivel 3 de CSS mejoró y clarificó la sintaxis. Más adelante fue movido al nuevo borrador de trabajo del Módulo de Textos Nivel 3 de CSS.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico2.0{{CompatGeckoDesktop("1.9.1")}}[1]10[3]9.5[2]1.1 (100)[4]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko teóricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 {{geckoRelease("2.0")}} y superiores limitan el radio de difuminación a 300 por razones de rendimiento. Si el valor <color> no es especificado, Gecko usará el valor de la propiedad {{cssxref("color")}} del elemento.

+ +

[2] Opera soporta un máximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminación está limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la última que se define).

+ +

[3] Internet Explorer 5.5 soporta la propiedad Shadow and DropShadow Filter de Microsoft.

+ +

[4] En Safari, cualquier sombra que no especifique explícitamente un color es transparente. Safari 1.1 a 3.2 sólo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan múltiples sombras de texto.
+ Konqueror soporta sombras de texto desde la versión 3.4.

+ +

Véase también

+ +
    +
  • {{cssxref("box-shadow")}}
    • +
diff --git a/files/es/web/css/text-transform/index.html b/files/es/web/css/text-transform/index.html new file mode 100644 index 0000000000..342d952edf --- /dev/null +++ b/files/es/web/css/text-transform/index.html @@ -0,0 +1,499 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - Layout + - Propiedad CSS + - Referencia + - Texto +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS text-transform especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.

+ +

La propiedad text-transform toma en cuenta las reglas específicas del idioma, como:

+ +
    +
  • +

    en lenguas turcas, como turco (tr), azerí (az), tártaro de Crimea (crh), tártaro de Volga (tt), y baskir (ba), hay dos tipos de i, con y sin punto, y dos pares de mayúscula/minúscula: i/İ e ı/I.

    +
    • +
  • +

    En alemán (de), la ß se vuelve SS en mayúsculas.

    +
    • +
  • +

    En holandés (nl), el dígrafo ij se vuelve IJ, aún con text-transform: capitalize, que solamente convierte la primera letra de una palabra en mayúsculas.

    +
    • +
  • +

    En griego (el), las vocales pierden su acento cuando la palabra completa está en mayúsculas (ά/Α), excepto por la eta disyuntiva (ή/Ή). Además, los diptongos con acento en la primera vocal cambian el acento por diéresis en la segunda vocal (άι/ΑΪ).

    +
    • +
  • +

    En griego (el), el caracter sigma en minúscula tiene dos formas: σ y ς. ς es usada solamente cuando la sigma termina la palabra. Cuando se aplica text-transform: lowercase a una sigma mayúscula (Σ), el navegador necesita elegir la minúscula correcta de acuerdo con el contexto.

    +
    • +
+ +

Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:

+ +
    +
  • en gaélico (ga), una letra prefijo se mantiene en minúsculas cuando la inicial base es convertida a mayúscula, así, en este ejemplo, el símbolo h- no debería cambiar a mayúscula: text-transform: uppercase cambiará Meud na h-aplacaid a MEUD NA H-APLACAID, lo cual viola las reglas ortográficas, cuando debería ser MEUD NA h-APLACAID.
    • +
+ +

El idioma es definido por el atributo HTML lang o el atributo xml:lang.

+ +

El soporte para estos casos específicos varía de un navegador a otro, véase la tabla de compatibilidad de navegadores.

+ +

{{cssinfo}}

+ +

Sintáxis

+ +
/* Valores clave */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Valores globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +

Valores

+ +
+
capitalize
+
+

Es una palabra clave que fuerza a que la primera letra de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.

+ +
Los autores no deben esperar que capitalize siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
+
+
uppercase
+
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.
+
lowercase
+
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a minúsculas.
+
none
+
Es una palabra clave que previene que sea cambiado el tamaño de los caracteres.
+
full-width {{experimental_inline}}
+
Es una palabra clave que fuerza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).
+ +
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

none

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: none
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+
+ +
span {
+  text-transform: none;
+}
+strong { float: right; }
+ +

Esto muestra ninguna transformación de texto.

+ +

{{ EmbedLiveSample('none', '100%', '100px') }}

+ +

capitalize (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra un texto con la primera letra de cada palabra en mayúsculas.

+ +

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

+ +

capitalize (Puntuación)

+ +
<p>Initial String
+  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.

+ +

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

+ +

capitalize (Símbolos)

+ +
<p>Initial String
+  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.

+ +

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

+ +

capitalize (Dígrafo ij holandés)

+ +
<p>Initial String
+  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo el dígrafo holandés ij debe ser manejado como una sola letra.

+ +

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

+ +

uppercase (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Esto muestra la transformación de texto a mayúsculas.

+ +

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

+ +

uppercase (Vocales griegas)

+ +
<p>Initial String
+  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Esto muestra cómo las vocales griegas, excepto la disyuntiva eta no deben tener acento, y el acento de la primera vocal en un par de vocales se convierte a diéresis en la segunda vocal.

+ +

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

+ +

lowercase (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Esto muestra la transformación de texto a minúsculas.

+ +

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

+ +

lowercase (Σ griega)

+ +
<p>Initial String
+  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Esto muestra cómo el caracter griego sigma (Σ) es trsnformado a sigma minúscula regular (σ) o a la variante de final de palabra (ς), conforme al contexto.

+ +

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

+ +

full-width (General)

+ +
<p>Initial String
+  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
+</p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.

+ +

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

+ +

Sobre Accesibilidad

+ +

Usuarios con discapacidades cognitivas como dislexia pueden encontrar dificultad al leer textos largos cuando se aplica la propiedad text-transform con el valor de uppercase.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}De {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, se añade la palabra clave full-size-kana y permite que la palabra clave full-width sea usada junto con otro valor.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}De {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de capitalize para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave full-width para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}De {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extiende las letras a alfabetos no latinos bicamerales
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.07.01.0
capitalize (versión de CSS3){{CompatUnknown}}[1]{{CompatGeckoDesktop("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoDesktop("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ e ı → I{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dígrafo holandés IJ{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Letras griegas acentuadas30{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ o término de palabra ς30{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
capitalize (versión de CSS3){{CompatUnknown}}[1]{{CompatGeckoMobile("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ e ı → I{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dígrafo holandés IJ{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Letras griegas acentuadas{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ o término de palabra ς{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La palabra clave capitalize fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo ⓐ, como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea capitalize en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.

+ +

Véase también

+ +
    +
  • {{cssxref("font-variant")}}
    • +
diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html new file mode 100644 index 0000000000..f0c3c934b6 --- /dev/null +++ b/files/es/web/css/texto_css/index.html @@ -0,0 +1,123 @@ +--- +title: Texto CSS +slug: Web/CSS/Texto_CSS +tags: + - CSS + - Texto CSS + - Vista general +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
  • {{cssxref("word-wrap")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
+
diff --git a/files/es/web/css/time/index.html b/files/es/web/css/time/index.html new file mode 100644 index 0000000000..9bdf3f145d --- /dev/null +++ b/files/es/web/css/time/index.html @@ -0,0 +1,84 @@ +--- +title: