{"id":6179,"date":"2013-11-29T21:27:08","date_gmt":"2013-11-29T21:27:08","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6179"},"modified":"2019-03-02T09:14:05","modified_gmt":"2019-03-02T09:14:05","slug":"css3-linear-gradients","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/","title":{"rendered":"CSS3 Linear Gradients"},"content":{"rendered":"<p>Con CSS3 Gradients podemos visualizar en los navegadores modernos transiciones suaves entre dos o m\u00e1s colores especificados.<\/p>\n<p>Anteriormente, se ten\u00eda que utilizar im\u00e1genes para conseguir estos efectos. Sin embargo, mediante el uso de los Linear Gradients de CSS3 se puede reducir el tiempo de carga y el uso de ancho de banda. Adem\u00e1s, los elementos con los gradients se ven mejor cuando se hace zoom, ya que el gradient es generado por el navegador.<\/p>\n<p>CSS3 define dos tipos de gradientes:<\/p>\n<ul>\n<li>Degradados lineales (abajo \/ arriba \/ izquierda \/ derecha \/ diagonal)<\/li>\n<li>Degradados radiales (definido por su centro)<\/li>\n<\/ul>\n<p>Navegadores:<\/p>\n<ul>\n<li>Funciona en Internet Explorer 10 +, Firefox 16 +, Chrome 26 + y Opera 12.1 +.<\/li>\n<li>Para Safari 5.1 + requiere el prefijo-webkit-.<\/li>\n<li>Para Chrome 10 a 25 requiere el prefijo-webkit-.<\/li>\n<li>Para Opera 11,1-12,0 requiere el prefijo-O-.<\/li>\n<li>Firefox 3,6-15 requieren el prefijo-moz-.<\/li>\n<li>Internet Explorer 9 y versiones anteriores no son compatibles con gradients.<\/li>\n<\/ul>\n<p>Puede generar degradados f\u00e1cilmente con <a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ultimate CSS Gradient Generator<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/linear-gradients\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver un ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con CSS3 Gradients podemos visualizar en los navegadores modernos transiciones suaves entre dos o m\u00e1s colores especificados. Anteriormente, se ten\u00eda que utilizar im\u00e1genes para conseguir estos efectos. Sin embargo, mediante el uso de los Linear Gradients de CSS3 se puede reducir el tiempo de carga y el uso de ancho de banda. Adem\u00e1s, los elementos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS3 Linear Gradients - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Linear Gradients - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Con CSS3 Gradients podemos visualizar en los navegadores modernos transiciones suaves entre dos o m\u00e1s colores especificados. Anteriormente, se ten\u00eda que utilizar im\u00e1genes para conseguir estos efectos. Sin embargo, mediante el uso de los Linear Gradients de CSS3 se puede reducir el tiempo de carga y el uso de ancho de banda. Adem\u00e1s, los elementos [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-29T21:27:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:14:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"365\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/\",\"name\":\"CSS3 Linear Gradients - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"datePublished\":\"2013-11-29T21:27:08+00:00\",\"dateModified\":\"2019-03-02T09:14:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png\",\"width\":365,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Linear Gradients\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Linear Gradients - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS3 Linear Gradients - Jose Aguilar Blog","og_description":"Con CSS3 Gradients podemos visualizar en los navegadores modernos transiciones suaves entre dos o m\u00e1s colores especificados. Anteriormente, se ten\u00eda que utilizar im\u00e1genes para conseguir estos efectos. Sin embargo, mediante el uso de los Linear Gradients de CSS3 se puede reducir el tiempo de carga y el uso de ancho de banda. Adem\u00e1s, los elementos [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-11-29T21:27:08+00:00","article_modified_time":"2019-03-02T09:14:05+00:00","og_image":[{"width":365,"height":512,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/","url":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/","name":"CSS3 Linear Gradients - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","datePublished":"2013-11-29T21:27:08+00:00","dateModified":"2019-03-02T09:14:05+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/css3.png","width":365,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/css3-linear-gradients\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Linear Gradients"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6179"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5609"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}