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

Hover and Click Trigger For CIRCULAR Elements With jQuery

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

CIRCULAR-Elements-With-jQuery

HOW IT WORKS

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

<a href="#" id="circle" class="ec-circle">
    <h3>Hovered</h3>
</a>

And the style will be the following:

.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(HoverClickTriggerCircle.jpg) no-repeat center center;
    box-shadow: 
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
}

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

.ec-circle-hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

.ec-circle:hover{
    box-shadow: 
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

THE JAVASCRIPT

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

$.CircleEventManager            = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

$.CircleEventManager.defaults   = {
    onMouseEnter    : function() { return false },
    onMouseLeave    : function() { return false },
    onClick         : function() { return false }
};

$.CircleEventManager.prototype  = {
    _init           : function( options ) {
        this.options = $.extend( true, {}, $.CircleEventManager.defaults, options );
        // set the default cursor on the element
        this.$el.css( 'cursor', 'default' );
        this._initEvents();

    },
    _initEvents     : function() {
       var _self   = this;
       this.$el.on({
           'mouseenter.circlemouse'    : function( event ) {
               var el  = $(event.target),
               circleWidth   = el.outerWidth( true ),
               circleHeight  = el.outerHeight( true ),
               circleLeft    = el.offset().left,
               circleTop     = el.offset().top,
               circlePos     = {
                       x     : circleLeft + circleWidth / 2,
                       y     : circleTop + circleHeight / 2,
                       radius: circleWidth / 2
                   };

                // save cursor type
                var cursor  = 'default';
                if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
                    cursor = 'pointer';
                el.data( 'cursor', cursor );
                el.on( 'mousemove.circlemouse', function( event ) {
                var distance    = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

                if( !Modernizr.borderradius ) {

                  // inside element / circle
                  el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
                  _self.options.onMouseEnter( _self.$el );

                 }
                 else {

                   if( distance <= circlePos.radius && !el.data('inside') ) {                       // inside element / circle                       el.css( 'cursor', el.data('cursor') ).data( 'inside', true );                       _self.options.onMouseEnter( _self.$el );                                                   }                     else if( distance > circlePos.radius && el.data('inside') ) {

                      // inside element / outside circle
                      el.css( 'cursor', 'default' ).data( 'inside', false );
                      _self.options.onMouseLeave( _self.$el );
                    }
                   }
                }); 
            },
            'mouseleave.circlemouse'    : function( event ) {
              var el  = $(event.target);
              el.off('mousemove');
               if( el.data( 'inside' ) ) {
                  el.data( 'inside', false );
                  _self.options.onMouseLeave( _self.$el );
              }
             },
            'click.circlemouse'         : function( event ) {
              // allow the click only when inside the circle
                var el  = $(event.target);
                if( !el.data( 'inside' ) )
                    return false;
                else
                    _self.options.onClick( _self.$el );
            }
        });         
    },
    destroy             : function() {     
        this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor'); 
    }
}

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

hoverTrigger
Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.
We also only allow the click event when the mouse is inside of the circle.
In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

$('#circle').circlemouse({
    onMouseEnter    : function( el ) {

        el.addClass('ec-circle-hover');

    },
    onMouseLeave    : function( el ) {

        el.removeClass('ec-circle-hover');

    },
    onClick         : function( el ) {

        alert('clicked');

    }
})

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar