How to add 3d effect with css

With the help of CSS3 you can add shadow to text and to elements. You can simply add the 3d effects it’s a good way
CSS Code

<style>
h1 {
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}
</style>

And you can insert this in the html tag or class
Html Code

<h1 class="h1-3d">Hello World !</h1>

Preview

Hello World !

 

How to make text blink on my web page

Earlier versions of HTML and Internet browsers supported the <blink> tag to allow a developer to create blinking text on their web pages Today, this tag has been deprecated and is no longer supported in any major browser. To create blinking text, use either the below CSS or JavaScript example.

CSS Example
JavaScript Example

CSS Example

To create a CSS blink class, copy the below CSS code into the head of your web page.

<style type "text/css">
<!--
/* @group Blink */
.blink {
	-webkit-animation: blink .75s linear infinite;
	-moz-animation: blink .75s linear infinite;
	-ms-animation: blink .75s linear infinite;
	-o-animation: blink .75s linear infinite;
	 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
/* @end */
-->
</style>

Once the above CSS code has been inserted, you can use the “blink” class on any element. Below is a paragraph tag using the blink class.

<p class="tab blink">This is an example of blinking text using CSS.</p>

Following all of the above steps gives you blinking text as shown below.

JavaScript Example

To create a JavaScript blink function, copy the below JavaScript code into the head of your page.

<script>
function blinker() {
	$('.blinking').fadeOut(500);
	$('.blinking').fadeIn(500);
}
setInterval(blinker, 1000);
</script>

Once the above JavaScript is inserted in your page, you can call the function by adding the “blinking” class to any element. Below is a paragraph tag using the blinking class.

<p class=”blinking”>This is an example of blinking text using JavaScript.</p>

Following all of the above steps gives you blinking text as shown below. You can adjust the values in the JavaScript to change the appearance of the blinking text.

This is an example of blinking text using JavaScript.

CSS Animations

Animate css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Basic Usage

  1. Include the stylesheet on your document’s <head>
    <head>
      <link rel="stylesheet" href="animate.min.css">
    </head>

    or use the version hosted by CDNJS

    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
  2. Add the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.
  3. Finally you need to add one of the following classes:
    • bounce
    • flash
    • pulse
    • rubberBand..etc

More Details
https://daneden.github.io/animate.css/