This is another example of a card layout with a bordered image with various text in it and a hover effect, designed using HTML, CSS, and JavaScript. The fonts are imported to the form with its URL and JavaScript functions have been used to implement the mouse hover effects. The card is given the styles of font-family as 'Open Sans', Arial, sans-serif, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, color as #ffffff, text-align as center, font-size as 14px, position as relative, padding as 10px, border as 2px solid #e8b563, and box-sizing as border-box. The image has the styles of vertical-align as top, max-width as 100%, and background color as linear-gradient (#000000, #ffffff). The text-transform style for all the titles is set as uppercase to automatically transform the text to uppercase. The header two is given the styles; top as 50%, transform as translateY(-50%), font-size as 2em, and font-family as 'Playfair Display', Arial, sans-serif and half of it is given the color #e8b563. The bottom link is given the styles of font-size: 1.3em, font-weight: 700, and letter-spacing: 2px whereas the styles for the name title is set as font-size: 1.2em, letter-spacing: 1px, font-weight: 400, opacity: 0.9, and font-family: 'Playfair Display', Arial, sans-serif.

This is an interesting snippet with less animation and more of effect. This looks like a swing moving front and back. Each letter is placed in a span where the animation will last for 2 seconds, works alternately and infinite. Alternate letters are set with a delay of 0.5 seconds. A keyframe is used to set the fonts while the animation is complete. Media screen property helps to set the fontzise in smaller devices allowing to view the animation and effect in all types of devices. With this animation, you can add a change of the color along with rotation or flipping. This can be easily used The CSS styling has made it easy to display the tect with effects and animation. As the older browsers don’t support the animation and modern browsers have different methods for setting pixels to make sure while you create animation for text it is effectively seen in the browsers you are recommending.

With the background color and font color matching, the effect makes the letters disappear and appear at specific intervals. The Concert One font with uppercase, the effect spans before the letters. The position set is -3px left of the letter with an animation set for 5 seconds. Keyframes set the animation, with every percentage the rotation and width of the animated object are set. Media property is set to display the font size according to the display screen. This animation is simple with less space requirement can be added for any text messages. The change in background color and font color can create magic. You can add additional properties for this animation like different colors for font, of any other effect like bouncy effect or flip effect. You can experiment with it and can select the best for your page.

With different colors, opacity and text-shadow this is one which can be displayed on the top of the page. With no twisting and flipping, the letters are placed at one position. With just the change in opacity and text-shadow the effect is perfectly fit for any website. The text effect sets the font size and weight the letters are aligned at the center with 0 margins. The linear animation is set to 2000ms with infinity. Animation delay makes the most for this effect. The delay setting is in milliseconds which lets the letter display for some time. The @keyframes sets the opacity, colors, and shadow along with the z-axis set to different colors. The media property sets the font size for different size of screens. These effects can be changes to fit your applications. Make sure to check these effects for popular browsers.

Creating a personalized animation can add extra creativity to your page. This is one such example where each element is to have its opacity, color, and shadow set along with animation and effect. The cursive style of font uses the tag to separate the letters, the span is set with the text-shadow for x, y, and z-axis along with different colors for each letter. The animation is set for 2s and runs forever (infinity). The keyframes set the stage for animation, each percentage set for animation contains different color, opacity and transform with the scale and rotation degree. At 100%, the text-shadow is set along with the color. This snippet also works with different screen as it minimizes the font size as per the screen size. Using this you can set your color and animation which matches your website background.

This is a flip effect for the text using CSS. The letters are separated with a tag in HTML, the CSS adds the effect along with the width, font, and animation. The cursive style of Cookie family matches this fill effect. The animation lasts for 2s and starts over again and goes forever (infinite). The effect is applied to each span element with animation-delay of 1sec each. To maintain the space between the two worlds, the 4th span (letter) is set with the margin to the right. The keyframe property set the animation and rotates each element by 1 turn. The media screen property sets the font size for different screen size. Overall the effect added is easy, with little understanding of CSS styling and animations you can have a perfect text effect for your website. Also, these animations are is not supported in Internet Explorer 9 and earlier versions.