Cool inset Text Effect with CSS3 Text-Shadow

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow.

Introduction

I played around with trying to hack box-shadow into background-image in the same way that you can add linear gradients to text, but to no avail.

Well, in any case, I finally was able to get something to work, and yes, it is pretty killer.


insetText

That’s it right there. But, let’s take a look at how and why this works.

First let’s start with defining our class and setting our font. We have styled our div and our body and now we want this text to look like it is stamped into to page.

The CSS

.insetText {
        font-family: Lucida Grande;
}

The next step we want to take is to set the background-color of the text to the color that we want the inset to be. So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
}

Next, we are going to use the background-clip CSS3 property to create a clipping mask using the text to mask the background. Now if you are a designer, you probably already know how a clipping mask works. The color black is transparent to the background and the color white is opaque. Thus, the image behind the mask will show through on only the black parts and the white parts will ‘clip’ it. Remember that, because it’s important.

Remember, CSS3 is not standard yet and may not be supported in older browsers. For now, it’s best to use the standard AND browser specific properties for any CSS3, so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}

Now, I know. It doesn’t look like that did anything, whatsoever. We are back where we started, right? Wrong, in truth, the background color has been clipped behind the text, so it only shows through where the text is. The problem is that the browser default CSS is to make text black. So, now we simply use color to make the text transparent.

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
}

Now we’re getting somewhere. We have taken transparent text and used it to clip it’s grey background. Here is where the magic happens. We will use the text-shadow property with rgba colors. Since the text is transparent, the entire shadow, even what is normally hidden by the text in front of it, will show. If we offset the shadow vertically, it will appear as if it is on the inside of the text. And if we blur the edges, it should actually appear like an inset shadow, since the darker clipped background fading into the white shadow right? And the shadow that falls outside of the clipping mask should appear to glow slightly, since that it’s closer in color to the contrasting background! So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,1.0) 0px 3px 3px;
}

Yeah, that looks pretty good, right? I just don’t like how the inside of the text in now white. It looks kind of unnatural, and it really takes away from the outer glow that gives it the inset look. So let’s revise our shadow color by dropping it’s opacity or ‘a’ value to 0.5. Like so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Perfect! Now we have a completely CSS based inset text effect! We can now add this class to any text element on our websites, without having to open Photoshop or Illustrator, create the document, design the effect, save the image, upload the image, and then place the image in our markup where it will slow down our load time. You would add this to your markup like so…

<h1>This is inset text</h1>

This solution is great for headings. The smaller you make your text the smaller you will need to make your text-shadow.

NOTE: This method is currently only supported by Webkit browser like Google Chrome and Apple Safari.

Thanks for reading, and I hope this helped!

view demo

Posted by: Dhiraj kumar

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too :) .

Introduction

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the whole website came alive. I think that’s pretty impressive. In this card you will find texts with different CSS effects like: 3D emboss, continuous spotlight shine effect, text shadow etc.

3d-shine-text-css3-scrolling-background-happy-new-year

The CSS

I have Used multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce.
Works in the latest builds of Safari, Chrome, Firefox, and Opera.

h1 {
  margin:1.2em auto;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}

Text shine Effect created with WebKit-specific CSS3 properties. You’ll need Safari or Chrome to enjoy key-frame animation.

p.shine{
    font-size: 3em;
    margin: 0 auto; padding:0;
    width: 95%;
}
.shine{
    background: #222 -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff), color-stop(1, #f0f)) 0 0 no-repeat;
    background-size: 400px; -webkit-background-size: 400px; 
    -moz-background-size: 400px; -o-background-size: 400px;    
    color: rgba(255, 255, 255, 0.7);	
    background-clip: text; -webkit-background-clip: text; 
        -moz-background-clip: text; -o-background-clip: text;	
	-webkit-animation: shine 2s infinite;
	-moz-animation: shine 2s infinite;
	-o-animation: shine 2s infinite;
	-ms-animation: shine 2s infinite;
	animation: shine 2s infinite; 
}

@-webkit-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-moz-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@-o-keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}
@keyframes shine{
    0%{background-position: top left;}
    100%{background-position: top right;}
}

For page background I used cloud in png format.

body{background:url(bg_clouds.png) 0 0}

The HTML

<h1>Happy New Year 2013</h1>
<p class="shine">The New Year is the time of unfolding horizons and the realization of dreams, may you rediscover new strength and garner faith with you, and be able to rejoice in the simple pleasures that life has to offer and put a brave front for all the challenges that may come your way.<br>
Wishing you a lovely New Year..</p>

The JavaScript – jQuery

We have to add jquery library in body first, after that we animate our page background with css background-position properties. I always prefer to use JavaScript files before close of body tag.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">var scrollSpeed = 70; 
    var current = 0;
    function bgscroll(){
        current -= 1;   
        // move the background with backgrond-position css properties
        $('body').css("backgroundPosition", 1 ? current+"px 0" : "0 " + current+"px");   
    }
     setInterval(bgscroll, scrollSpeed);   </script>

view demo

Happy New Year!

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

Creating CSS Starbursts Design with CSS3 Transform

Working with the new CSS3 rotation property I got that I could create image free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

About these CSS3 Starbursts:

A good thing is if you create your starbursts with CSS3 you can do so much more than with images. You can experiment with different numbers of points/corners, rounded borders, resize, text-shadows and animations also.

To see the animations you will need to use latest browsers like IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+.

css-starburst-design

No CSS Hacks

There are no CSS hacks required for these CSS3 starbursts. CSS is designed to be backwards compatible so any browser that cannot understand CSS3 will simply ignore these new rules without any error.

iPhone, iPod Touch, & iPad Compatible

The Safari browser is one of the most advanced when it comes to CSS3 because it uses the powerful Webkit rendering engine. This means all these animated starbursts will work fine on the iPhone, iPod Touch and the iPad.

SEO Friendly

Because the text in each starburst is actually real text it will be crawled and indexed by Google like everything else. It also means that people who are vision impaired can more easily read and understand your web page if they are using a screen reader.

No Images Required

All of the shapes, colours and shadows in the starbursts above are created using CSS3 rules. No images are used at all.

No JavaScript Required

The animations in these demos are made possible with the CSS3 transition rules. No JavaScript is used to create any effects.

Resizable Text Compatible

All the dimensions of the starbursts are set in em measurements. This means that you can increase the text size in your browser and the starburst will grow in size along with all other text. This is great news for web accessibility.

view demo

The HTML

<div class="price-container">
  <div class="price">
    <span class="label">Buy</span>
    <span class="number">$99.95</span>
    <span class="label">Now</span>
  </div>
</div>

I have <div> that, you guessed it, contains the price starburst. I’ll use this for the background of the starburst. The <div> is the container for the text inside (the price info.) That’s it for the markup. From here, I’ll be styling pseudo classes to create the multiple points. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. This markup doesn’t really have anything unnecessary in it.

The CSS

Now on to the fun part. Let me overview what I’m going to do, then I’ll show you the styles needed to achieve it. I’m going to style .price-container.price, and the :before and:after pseudo elements for each. Essentially, I’ve got six elements to work with. I created this background image to apply to each of the elements and I will rotate 15 degrees each:

image used for starburst

The CSS is a little bit longer. I’ve used the rotation rules in the CSS, one is for Firefox (prefixed with -moz-), one is for webkit i.e. Safari and Chrome (prefixed with -webkit-), one is for Internet Explorer (prefixed with -ms-), one is for Opera (prefixed with -o-), and the other is the standard rotation rule as it will be used once this rotation property becomes standard:

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
	height: 8.5em;
	width: 8.5em;
	background: #760B1F url(price-bg.png) top left no-repeat;
	background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
	content: "";
	position: absolute;
}

.price-container {
	margin: 100px auto; /* Centering for demo */
	position: relative; /* Context */
	top: 2.5em;
	left: 2.5em;
	-webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	   -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	       transform: rotate(-45deg);
}

.price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}

.price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}

.price-container .price {
	padding: .5em 0em;
	height: 7.5em; /* height minus padding */
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	   -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	       transform: rotate(45deg);
	z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}

.price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}

A few things I’ll point out about the styles:

  • Notice the order of the rotation angles: This order is important because there is going to be text inside the inner-most element. Therefore, the last element (the one the text going in, in this case .price) has to be straight. Notice that .price-container is rotated -45 degrees and .price is rotated 45 degrees – back to 0.
  • The height and width: The height and width has to be set since we are dealing with background images here. I’ve set it in ems to adjust appropriately when the text size increases.
  • There’s a padding top and bottom on .price-container .price. That’s why the height is a little different than all the others.
  • Everything is positioned absolutely inside the first container. .price-container hasleft: 2.5em and top: 2.5em just to move the whole thing a little. When everything is rotated, the corners go of the page and out of the container a little.
  • z-index: There’s a z-index defined for .price-container .price. This is so the price information inside this div is visible.

Now all that’s left is styling the text.

.price-container .price span {
        position: relative;
	z-index: 100;
	display: block;
	text-align: center;
	color: #FE0;
	font: 1.8em/1.4em 'georgia',Sans-Serif;
	text-transform: uppercase;
}

.price-container .price span.number {
  font-weight: bold;
  font-size: 2.5em;
  line-height: .9em;
  color: #fff;
}

Some more CSS used in hover effect:

.price-container.one:hover {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

Doing It Image-Free

Now, I have some extra stuff in here because the design called for this very subtle inner border. If you don’t like or need the inner border, just remove the bit about background image and background size and design will hold up fine.

Browser Support

This works as-is in IE 9+, Firefox 4.0+, Safari 4.1+ and Chrome 3.0+. IE 8 and below do not support background-size, and Chrome 1.0, Firefox 3.6 and Safari 3.0 will require some vendor prefixes. IE8 does support pseudo elements, however doesn’t support transform.

The fallback would be a colored square. Very likely not a huge problem.

auto-adjustable-dynamic-starburst-design-css3-html5

There You Have It

It’s a price star thing. Flexible enough to grow when you increase your font size. Made with some CSS. You can use this for highlighting prices, discounts etc.

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar

Cool Animated Fire Effects with CSS3 and jQuery

This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check the demo code to see how it’s done. Basically, the Javascript function creates 3 text-shadows (white, yellow and red) with coprime “cycle durations” so the effect looks more random even though it’s totally deterministic.

css3-jquery-animated-fire-effect

Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective.

The CSS

#onfire{
      height:auto;
      padding-top:3em;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
      color:brown;
}

The jQuery

<script type="text/javascript">
var step = 1;
function nextShadow(){
	$('#onfire span').each(function(){
	    y = parseFloat($(this).attr("y_pos"));
	    y += step + Math.random()*3;
	    $(this).attr("y_pos", y);
	    shaking = Math.random();
	    shadow1 = "0px 0px "+(y%5)+"px white";
	    shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red";
	    shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993";
	    shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow";
	    $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3);
	});
}
$(function(){
    $('#onfire span').each(function(){$(this).attr("y_pos","0");});
   setInterval(nextShadow, 50); 
});
</script>

view demo

Update:

I’ve added some randomisation to the algorithm, as well as an individual animation to each of the letters (which, as a drawback, makes the effect run less smooth). I’ve also added a fourth shadow in dark yellow. You can freely use the code by keeping the mention to this site on it.

Thanks for reading and looking forward to read your thoughts!

Posted by: Dhiraj kumar