Text Animation & Shadow Effects

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Text Animation & Shadow Effects . If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

What is neumorphism CSS?

Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism.

Who invented Neumorphism?

One such trend is Neumorphism. Neumorphism was coined by Jason Kelley on Michal Malewicz's medium article “What's the next UI design trend?”. Soon this created the buzz in the design community and designers started drooling over it.

Where is neumorphism used?

Neumorphism is meant to be soft on the eyes. It calls for minimal color contrast and very few pops of color. Logically, designers are free to apply neumorphism in any degree they see fit – not having to implement the style in its entirety. Many choose to apply neumorphism to their cards, but keep classic buttons.

Neumorphism

The marriage of minimalism with skeuomorphism is already recognized as the defining feature of neumorphism. To think of it that way makes sense. Compare the austere aesthetic of Material Design with the skeuomorphism's hyper-realistic appearance. Consider Apple's design principles from 2007 to 2012 and compare them to the interfaces it develops today as an alternative.

As a relatively new design trend, "neumorphism," often spelled "neomorphism," has recently drawn a lot of attention. Its distinguishing style is provided by its realistic-looking, minimalist user interface, hence the name. Since the trend's name was given to it in a UX Collective article from December 2019, various design and development groups have frequently discussed it with different perspectives. Chris mocked people on Twitter

In this code we majorly used the text shadow attribute in css.

Uses & Syntax

div {
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 1px 1px 2px black;

  /* color | offset-x | offset-y | blur-radius */
  text-shadow: #fc0 1px 0 10px;

  /* offset-x | offset-y | color */
  text-shadow: 5px 5px #558abb;

  /* color | offset-x | offset-y */
  text-shadow: white 2px 5px;

  /* offset-x | offset-y
/* Use defaults for color and blur-radius */
  text-shadow: 5px 10px;
}

Values

<color>

Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

<offset-x> <offset-y>

Required. These <length> values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.

<blur-radius>

Optional. This is a <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: #e5e5e5;
}
.container{
	width: 1200px;
	height:400px;
	margin: 120px auto;
	background: #e5e5e5;
	border-radius: 120px;
	box-shadow: inset -15px -15px 10px white, inset 15px 15px 10px gray;
}
#box1,#box2,#box3,#box4{
	text-align: center;
	font-size: 10em;
	margin: 90px 3px;
	width: 200px;
	height: 200px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
	text-shadow: 5px 5px 8px red;
}
#box1:hover{
	animation: animate1 2s ease-in-out infinite;
}
#box2:hover{
	animation: animate2 2s ease-in-out infinite;
}
#box3:hover{
	animation: animate3 2s ease-in-out infinite;
}
#box4:hover{
	animation: animate4 2s ease-in-out infinite;
}
#box1{
	margin-left: 180px;
}
@keyframes animate1{
	0%{

}
	50%{
		color: blue;
		font-size: 12em;
		text-shadow: 30px 30px 35px blue;
	}
}
@keyframes animate2{
	0%{

}
	50%{
		color: blue;
		font-size: 12em;
		text-shadow: 30px 30px 35px blue;
		transform: rotateZ(360deg);
	}
}
@keyframes animate3{
	0%{

}
	50%{
		color: blue;
		font-size: 12em;
		text-shadow: 30px 30px 35px blue;
	}
	75%{
		transform: rotateY(360deg);
	}
}
@keyframes animate4{
	0%{

}
	50%{
		color: blue;
		font-size: 12em;
		text-shadow: 30px 30px 35px blue;
		transform: translate(160px,0px);
	}
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever