Tag: rainbow

Web development

CSS Rainbow border/ button Animation

Post author By Lena Stanley
Post date May 31, 2022

To create the CSS Rainbow border/ button Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="button"></div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
}

Create the border and style the text:

.button {
  position: relative;
  width: 250px;
  height:100px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  cursor: pointer;
}

.button:before {
  content:"";
  position: absolute;
  width: 240px;
  height: 90px;
  background-color: black;
  top:5px;
  left:5px;
}

.button:after {
  content:"Hover Me";
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  font-family: arial;
  font-weight: 900;
  font-size: 25px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Animate the text and the border on hover:

@keyframes move {
	to {
		background-position: 2500vh;
	}
}

.button:hover {
  animation: move 30s linear infinite;
}

.button:hover:after {
  animation: move 29s linear infinite;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Typing Effect

CSS flip text effect / animation

Tags CSS, HTML, rainbow, rainbowtexteffect

Web development

Pure CSS Rainbow Text Animation

Post author By Lena Stanley
Post date March 5, 2021

The colours of the rainbow are Red, Orange, Yellow, Green, Blue, Indigo(*colour between blue and purple) and Violet.

I will use exactly these colours to create the rainbow text and the animation.

Demo:

*to see the code output on the website click here.

To create the CSS Rainbow Text Effect and the Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="rainbowText">RAINBOW TEXT</div>

Step2.

Add CSS

Set the colour and position of the background and the elements:

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

Style your text.

Create the linear-gradient with 7 colours of the rainbow:

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;

Step3.

Add CSS Animation

@keyframes move {
	to {
		background-position: 4500vh;
	}
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

How to create a rainbow effect in Photoshop?

Post author By Lena Stanley
Post date March 24, 2020

How to create a rainbow effect in Photoshop? It’s easy! Follow the steps below and watch the video tutorial.

In the first part of this tutorial we’ll create the rainbow, and in the second part rainbow effect letters.

Step 1.

Create the new document, and by using Eclipse Tool draw seven circles in different colours.

Tip: Hold the shift key while drawing your circle and it will keep perfect proportions.

Step2.

On the layer panel, click on the eyeball to hide the background.

Hit the right mouse button on the first eclipse and select “Merge Visible“.

You can notice the all seven circles merged in one layer (rainbow layer):

Step 3.

Select the Magic Wand Tool and click on the eclipse in the middle of the circle.

and hit the delete key.

Use Rectangular Marquee Tool and select around half of our circle and hit the delete key.

Step 4.

By clicking the right mouse button on the rainbow layer choose Blending Options…

Tick Bevel & Emboss, and Contour. Change the Highlight Mode to Color Dodge:

Your rainbow is ready. Add background and style the image as you like.

Let’s add some rainbow text to our rainbow image.

Step1.

Create a new document, and draw colourful squares all over.

Step2.

Go to Edit->Define Pattern…

Step 3.

Use Horizontal Type Tool, choose the font and font size and type your text on your rainbow image:

Click by right mouse button on the text layer and select Blending Options…

Select Pattern Overlay, click on Pattern and choose your new rainbow pattern.

Set the Scale to 35%:

Select Bevel & Emboss, and Contour.

Ready!

Watch also the video tutorial: