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

Fancy FAQ page using CSS3 only

Usually, a FAQ page is that long page with lots of questions and answers, the one we are searching for when we need some extra info regarding a subject. So, for example, if you own a website that sells stuff, then you will need a page like that.

In this article I’ll show you how to create a fancy FAQ page using CSS3 only, no JavaScript.

css3-faq-page

The idea

When I visited Facebook’s Help Center section (theirs FAQ’s), I noticed a cool effect for the answers previews. They show a small, faded and clipped text preview for the answer, and then, when the question is clicked, the complete answer is revealed.

After seeing it, of course I immediately thought about how can I create a similar effect using CSS3 only. So, further you’ll see how I made it.

The HTML

We will start as usual with the markup structure:

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Question?</label>
    <p>... The intro paragraph that will be clipped ...</p>
    <p>... Extra and optional paragraph ...</p>
</section>

fancy-faq-page-using-css3-only-markup

  • In the above image, the label is the proper heading of the section. But, if you want to use better semantic, you can wrap the label into a h1.
  • Using label::before allow us to create the right triangle shape. On a side note, double colon for pseudo-elements is the CSS3 way.
  • The first paragraph for each section is the intro preview for the complete answer. For this example, I used the adjacent sibling combinator to target it.

How it works?

There’s no rocket science here. The technique we will use today is called the checkbox hack and it relies on the ability of toggle-ing an <input type="checkbox" id="abc"> using the<label for="abc">. Also, in the same time, the checkbox input will be hidden.

I played before with this cool technique, but never had the opportunity to create a practical example actually. So, this is my shot! 🙂

If you want to read more about this technique, Chris Coyier wrote a while ago an article where he shows some cool stuff you can do with the checkbox hack.

The CSS

Below you have the styles, I commented some lines for a better understanding:

/*Add some spacing*/
.faq-section{
        margin: 40px 0;
        position: relative;
}

/*Hide the paragraphs*/
.faq-section p{
        display: none;
}       

/*Hide the checkboxes */
.faq-section input{
        position: absolute;
        z-index: 2;
        cursor: pointer;
        opacity: 0;
        display: none\9; /* IE8 and below */
        margin: 0;
        width: 100%;
        height: 36px;
}

/*Show only the clipped intro */
.faq-section label+p{
        display: block;
        color: #999;
        font-size: .85em;
        transition: all .15s ease-out;
        /* Clipping text */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
}

/*If the checkbox is checked, show all paragraphs*/
.faq-section input[type=checkbox]:checked~p{
        display: block;
        color: #444;
        font-size: 1em;
        /* restore clipping defaults */
        text-overflow: clip;
        white-space: normal;
        overflow: visible;
}

/*Style the label*/
.faq-section label{
        font-size: 1.2em;
        background: #eee;
        display: block;
        position: relative;
        height: 20px;
        padding: 7px 10px;
        font-weight: bold;
        border: 1px solid #ddd;
        border-left: 3px solid #888;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        transition: all .15s ease-out;
}

/*Remove text selection when toggle-ing*/
.faq-section label::selection{
        background: none;
}

.faq-section label:hover{
        background: #f5f5f5;
}

/*If the checkbox is checked, style the label accordingly*/
.faq-section input[type=checkbox]:checked~label{
        border-color: #ff7f50;
        background: #f5deb4;
        background-image: linear-gradient(to bottom, #fff, #f5deb4);
        box-shadow: 0 0 1px rgba(0,0,0,.4);
}

/*Label's arrow - default state */
.faq-section label::before{
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        margin-top: -6px;
        border: 6px solid transparent;
        border-left-color: inherit;
}

/*Update the right arrow*/
.faq-section input[type=checkbox]:checked~label::before{
        border: 6px solid transparent;
        border-top-color: inherit;
        margin-top: -3px;
        right: 10px;
}

Browser support

What about the older browsers? That’s a normal question, and the answer is graceful degradation:

fancy-faq-page-graceful-degradation

Using the following snippet, we’re targeting browsers like IE8 and below. So, we’ll enable the HTML5 elements like section and then add some custom styles in order to keep the FAQ’s content readable.

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <style>
                .faq-section label,
                .faq-section label:hover{
                        cursor: default;
                        background: #eee;
                }
                body .faq-section p{ /* Increase specificity */
                        display: block;
                        color: #444;
                        font-size: 1em;
                        text-overflow: clip;
                        white-space: normal;
                        overflow: visible;
                }
    </style>
<![endif]-->

Update: i0S support

You asked for it, now you have it: iOS browser support. I had some time to think about it and I made updates regarding hiding the checkbox.

Here’s my fix, tested on iPhone and iPad using the latest iOS versions:

.faq-section input{
        position: absolute;
        z-index: 2;
        cursor: pointer;
        opacity: 0;
        display: none\9; /* IE8 and below */
        margin: 0;
        width: 100%;
        height: 36px;
}
  • position: absolute – While .faq-section wrapper is relative positioned, we’ll need this to visually place our checkbox above the label.
  • z-index: 2 – Make sure it will be above section content, including label.
  • cursor: pointer – Optionally, this will add a pointer cursor when you hover on it.
  • opacity: 0 and display: none\9 – Visually hide the checbox, while on browsers like Internet Explorer 8 and below will be hidden.
  • margin: 0 – Remove default margin.
  • width: 100% and height: 36px – The checkbox height value matches the height of the label. Also, using 100% for the width will expand the checbox in order to fully cover the label.

Done!

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas about the result.

Posted by: Dhiraj kumar