{"id":1252,"date":"2024-08-01T17:19:19","date_gmt":"2024-08-01T15:19:19","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1252"},"modified":"2024-08-01T17:19:20","modified_gmt":"2024-08-01T15:19:20","slug":"21-transformacion-de-texto","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/21-transformacion-de-texto\/","title":{"rendered":"21. Transformaci\u00f3n de texto"},"content":{"rendered":"\n

La propiedad text-transform<\/em><\/strong> se utiliza para especificar letras may\u00fasculas y min\u00fasculas en un texto. Se puede usar para convertir todo en letras may\u00fasculas o min\u00fasculas, o poner en may\u00fascula la primera letra de cada palabra.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

p.uppercase {\n  text-transform: uppercase;\n}\n\np.lowercase {\n  text-transform: lowercase;\n}\n\np.capitalize {\n  text-transform: capitalize;\n}<\/pre>\n\n\n\n
Espaciado de texto CSS<\/h2>\n\n\n\n
En este cap\u00edtulo aprender\u00e1s acerca de las siguientes propiedades:<\/p>\n\n\n\n
    \n
  • text-indent<\/em><\/strong><\/li>\n\n\n\n
  • letter-spacing<\/em><\/strong><\/li>\n\n\n\n
  • line-height<\/em><\/strong><\/li>\n\n\n\n
  • word-spacing<\/em><\/strong><\/li>\n\n\n\n
  • white-space<\/em><\/strong><\/li>\n<\/ul>\n\n\n\n
    La propiedad text-indent<\/em><\/strong> se usa para especificar la sangr\u00eda de la primera l\u00ednea de un texto.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    p {\n  text-indent: 50px;\n}<\/pre>\n\n\n\n
    La propiedad letter-spacing<\/em><\/strong> se utiliza para especificar el espacio entre los caracteres de un texto. El siguiente ejemplo demuestra c\u00f3mo aumentar o disminuir el espacio entre caracteres.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    h1 {\n  letter-spacing: 5px;\n}\n\nh2 {\n  letter-spacing: -2px;\n}<\/pre>\n\n\n\n
    La propiedad line-height<\/em><\/strong> se usa para especificar el espacio entre l\u00edneas.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    p.small {\n  line-height: 0.8;\n}\n\np.big {\n  line-height: 1.8;\n}<\/pre>\n\n\n\n
    La propiedad word-spacing<\/em><\/strong> se utiliza para especificar el espacio entre las palabras de un texto. El siguiente ejemplo demuestra c\u00f3mo aumentar o disminuir el espacio entre palabras.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    p.one {\n  word-spacing: 10px;\n}\n\np.two {\n  word-spacing: -2px;\n}<\/pre>\n\n\n\n
    La propiedad white-space<\/em><\/strong> especifica c\u00f3mo se maneja el espacio en blanco dentro de un elemento. Este ejemplo demuestra c\u00f3mo deshabilitar el ajuste de texto dentro de un elemento.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<head>\n<style>\np {\nwhite-space: nowrap;\n}\n<\/style>\n<\/head>\n<body>\n\n<h1>Using white-space<\/h1>\n\n<p>\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\nThis is some text that will not wrap.\n<\/p>\n\n<p>Try to remove the white-space property to see the difference!<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    text-shadow<\/h2>\n\n\n\n
    La propiedad text-shadow<\/em><\/strong> agrega sombra al texto. En su uso m\u00e1s simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px).<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    h1 {\n  text-shadow: 2px 2px;\n}<\/pre>\n\n\n\n
    Ahora vamos a a\u00f1adir un color a la sombra, veamos un ejm.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    h1 {\n  text-shadow: 2px 2px red;\n}<\/pre>\n\n\n\n
    Luego, agregamos un efecto de desenfoque (5px) a la sombra:<\/p>\n\n\n\n
    h1 {\n  text-shadow: 2px 2px 5px red;\n}<\/pre>\n\n\n\n
    Otro ejm<\/strong><\/p>\n\n\n\n
    h1 {\n  color: white;\n  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
    La propiedad text-transform se utiliza para especificar letras may\u00fasculas y min\u00fasculas en un texto. Se puede usar para convertir todo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1252","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"La propiedad text-transform se utiliza para especificar letras may\u00fasculas y min\u00fasculas en un texto. Se puede usar para convertir todo […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1252\/revisions"}],"predecessor-version":[{"id":1254,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1252\/revisions\/1254"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}