Inset Text In Pure CSS

 

The first thing that we will do is define gradient background so that our inset text is clearly visible.

 

The next thing that we are going to do is define the style to make the text appear inset. To so that we will make use of text-shadow.

Now we will put these styles in use.

Let’s put it all together

Inset Text In CSS

Inset Text In CSS

 

Doesn’t it looks gorgeous? And we just used the power of CSS to make this.

3D Text In Pure CSS

To make the text look like we will make use of text-shadow. To start lets create a container in which we will place the text. This will give the gray background to the container.

Now let us style the h1 component within this container with some special font and text-shadow. This will make the text look 3D.

And now let us add some html bones to this CSS muscle.

And when we put of this together then we will see the magic.

3D Text In CSS

3D Text In CSS

First Letter Capitalization Using Pure CSS

This is useful at lot of places like articles, news, blogs, etc. to distinctly mark the start of a paragraph. Let’s add the style to do that. In the code below we have defined the font-size of the first-letter in a paragraph as 4 times (4em) the normal size and the font-weight as normal. We have defined this style for the pseudo class first-letter (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). Also we have changed the font weight of the span to be bold so that it’s distinctly visible.

Now let’s put this style in use

Let’s put everything together and then this is how it will look like.

First Letter Caps In CSS

First Letter Caps In CSS

In the above example the first letter takes the space above itself. We could make the first letter slide down by changing the style for pseudoClass first-letter.

 

Let’s put this style to use.

It would look something like below:

 

First Letter Caps In CSS

First Letter Caps In CSS

 

First Line Bold In Pure CSS

To achieve this we will make use of first-line pseudo class (For more details on pseudo class visit http://www.abhishekshukla.com/css/css3-basics-part-1/). We will also make the first letter as bigger and slide below just the way we had it before.

 

Let’s put these styles to use.

When we see this html page in the browser we would see something like below. An interesting point to note it that when we resize the browser then still the first visible line will be bold.

 

First Letter Bold In CSS

First Letter Bold In CSS

 

Rotate Text Using Pure CSS

To rotate we will make use of transform property of the elements. The below style will rotate the elements by 90 degree in the counter clockwise direction.

 

Let’s put the rotate style to use.

It would look something like below.

 

First Letter Bold In CSS

First Letter Bold In CSS

 

The htmls file for this post are available @skydrive and @googledrive.

Any questions, comments and feedback is welcome.