{"id":1375,"date":"2021-01-29T10:18:21","date_gmt":"2021-01-29T10:18:21","guid":{"rendered":"https:\/\/pappcseperke.hu\/?p=1375"},"modified":"2023-08-22T18:35:09","modified_gmt":"2023-08-22T16:35:09","slug":"css-gradients-in-text-in-elementor-header","status":"publish","type":"post","link":"https:\/\/pappcseperke.hu\/hu\/css-gradients-in-text-in-elementor-header\/","title":{"rendered":"CSS gradients"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"1375\" class=\"elementor elementor-1375\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a8aa577 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a8aa577\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50579e3\" data-id=\"50579e3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f22d584 elementor-widget elementor-widget-text-editor\" data-id=\"f22d584\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Adding gradient to an elementor text, <br>add the following code into &#8220;Advanced\/Custom css&#8221; of the element&#8217;s property panel:<br><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf54ba6 elementor-widget elementor-widget-text-editor\" data-id=\"cf54ba6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<pre><code>selector {\n  <\/code><code>background: rgb(62,100,112);<\/code><code>\n   background: linear-gradient(90deg, rgba(62,100,112,1) 0%, rgba(137,214,219,1) 80%);<\/code> <code>-webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}<\/code><\/pre>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-409e968 elementor-widget elementor-widget-text-editor\" data-id=\"409e968\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<span class=\"highlight\">Note: <\/span> For <strong>headers<\/strong> throughout the site go to Appearance\/Customize\/Aditional CSS and use similar code for the releavant header: h1, h2, h3 etc.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5224f8 elementor-widget elementor-widget-heading\" data-id=\"f5224f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Highlighted \"Note\" box with gradient:<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3f2e84 elementor-widget elementor-widget-text-editor\" data-id=\"a3f2e84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>CSS:<\/h4>\n<pre><code>span.highlight {\ndisplay: inline; \/* the default for span *\/\npadding: 5px;\nmargin: 5px;\ncolor: #1c1c1c;\nborder-radius: 15px 20px 12px 6px ;\nbackground: rgb(97,154,164);\nbackground: linear-gradient(90deg, rgba(97,154,164,1) 0%, rgba(76,119,126,1) 80%);\n}\n<\/code><\/pre>\n<h4>HTML:<\/h4>\n<pre><code>&lt;span class=&quot;highlight&quot;&gt;Note: &lt;\/span&gt;<\/code><\/pre>\n<div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04d0c68 elementor-widget elementor-widget-html\" data-id=\"04d0c68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<a href=\"https:\/\/cssgradient.io\/\" target=\"_blank\">\n<button class=\"blot\">Generate gradient<br> HERE<\/button><\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb76023 elementor-widget elementor-widget-heading\" data-id=\"cb76023\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Animated button corners<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85107bd elementor-widget elementor-widget-text-editor\" data-id=\"85107bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>While experimenting with the gradients in buttons I realized it would be fun to animate the roundness of the button corners to give a more &#8220;organic&#8221; feel to the site.<\/p><p>There is a great post at <a href=\"https:\/\/chrisruppel.com\/blog\/css-animation-border-radius\/\">chrisruppel.com<\/a> about this, which helped working on the idea.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f75320 elementor-widget elementor-widget-html\" data-id=\"5f75320\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<a href=\"https:\/\/www.gradient-animator.com\/\" target=\"_blank\"><button class=\"blot2\">Animate gradients<br> \nHERE\n<\/button><\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4dd8e9 elementor-widget elementor-widget-heading\" data-id=\"d4dd8e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Further articles on gradients and css animations<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abd756f elementor-widget elementor-widget-text-editor\" data-id=\"abd756f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Animations\/Tips\">Mozilla CSS Animation Tips<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Adding gradient to an elementor text, add the following code into &#8220;Advanced\/Custom css&#8221; of the element&#8217;s property panel: selector { background: rgb(62,100,112); background: linear-gradient(90deg, rgba(62,100,112,1) 0%, rgba(137,214,219,1) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } Note: For headers throughout the site go to Appearance\/Customize\/Aditional CSS and use similar code for the releavant header: h1, h2, h3 etc. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[37,40,24],"tags":[58,60,62],"class_list":["post-1375","post","type-post","status-publish","format-standard","hentry","category-css","category-elementor","category-tools","tag-css","tag-elementor","tag-gradients"],"_links":{"self":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/1375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/comments?post=1375"}],"version-history":[{"count":1,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/1375\/revisions"}],"predecessor-version":[{"id":8861,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/1375\/revisions\/8861"}],"wp:attachment":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media?parent=1375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/categories?post=1375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/tags?post=1375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}