From 47992d913c3a49158c33d7b2cf5a25b9e8abbf06 Mon Sep 17 00:00:00 2001 From: Oluwatoyinah Date: Thu, 21 Jul 2022 14:16:53 +0100 Subject: [PATCH 1/5] added a css tip --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 978441c..85cabcb 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) +1. [Apply a `gradient color` to a text](#apply-a-gradient-color-to-a-text) ### Use a CSS Reset @@ -638,6 +639,27 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei [back to table of contents](#table-of-contents) + +### Apply `gradient color` to text + +Gradient colors can be used with texts and not just as a background. It is important to note that the gradient effect is seen when a minimum of two colors is used. + +```css +.gradient-text{ + background: -webkit-linear-gradient(135deg, #118a2b, #ff0000, #112b8a); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +``` + + + +#### [Demo](https://codepen.io/Toyinn/pen/abJvXdo) + +[back to table of contents](#table-of-contents) + + + ## Support Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. From 2281351214c2f35728fd56970022e34a1f36c469 Mon Sep 17 00:00:00 2001 From: Oluwatoyinah Date: Thu, 21 Jul 2022 14:19:45 +0100 Subject: [PATCH 2/5] linking path --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 85cabcb..fb2d608 100644 --- a/README.md +++ b/README.md @@ -640,7 +640,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei -### Apply `gradient color` to text +### Apply `gradient color` to a text Gradient colors can be used with texts and not just as a background. It is important to note that the gradient effect is seen when a minimum of two colors is used. @@ -652,8 +652,6 @@ Gradient colors can be used with texts and not just as a background. It is impor } ``` - - #### [Demo](https://codepen.io/Toyinn/pen/abJvXdo) [back to table of contents](#table-of-contents) From 93ddbee87c267b13001a6a9a72db05efe15bbfe5 Mon Sep 17 00:00:00 2001 From: Oluwatoyinah Date: Thu, 21 Jul 2022 14:20:54 +0100 Subject: [PATCH 3/5] missing letter added --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fb2d608..afac952 100644 --- a/README.md +++ b/README.md @@ -640,7 +640,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei -### Apply `gradient color` to a text +### Apply a `gradient color` to a text Gradient colors can be used with texts and not just as a background. It is important to note that the gradient effect is seen when a minimum of two colors is used. From 829c9a206ae475425c1634bafbf6e5fde856311f Mon Sep 17 00:00:00 2001 From: Oluwatoyinah Date: Thu, 21 Jul 2022 14:55:18 +0100 Subject: [PATCH 4/5] new update --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index afac952..bf6a089 100644 --- a/README.md +++ b/README.md @@ -642,11 +642,13 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei ### Apply a `gradient color` to a text -Gradient colors can be used with texts and not just as a background. It is important to note that the gradient effect is seen when a minimum of two colors is used. +Multiple colors can be added to a text in form of a gradient with the use of `background`, `-webkit-background-clip` and `-webkit-text-fill-color`. + +**Note:** It is important to note that the gradient effect is seen only when a minimum of two colors are used. You can add as many colors as you like. ```css -.gradient-text{ - background: -webkit-linear-gradient(135deg, #118a2b, #ff0000, #112b8a); +.gradient-text { + background: -webkit-linear-gradient(45deg, #112b8a, #ff0000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } From 5bebad6b6dbed5425abc146da1cbfae56f76e9fc Mon Sep 17 00:00:00 2001 From: Oluwatoyinah Date: Thu, 21 Jul 2022 14:57:32 +0100 Subject: [PATCH 5/5] tip renamed --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bf6a089..6910e51 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) -1. [Apply a `gradient color` to a text](#apply-a-gradient-color-to-a-text) +1. [Add a `gradient color` to text](#add-a-gradient-color-to-text) ### Use a CSS Reset @@ -640,7 +640,7 @@ If you have HTML elements that are empty, i.e., the content has yet to be set ei -### Apply a `gradient color` to a text +### Add a `gradient color` to text Multiple colors can be added to a text in form of a gradient with the use of `background`, `-webkit-background-clip` and `-webkit-text-fill-color`.