Inset Text In Pure CSS
The first thing that we will do is define gradient background so that our inset text is clearly visible.
#insetBackground {
width: 650px;
height: 80px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
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.
h1.inset {
padding-left: 50px;
padding-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.8) -1px 0, rgba(0,0,0,0.4) 0 -1px, rgba(255,255,255,0.8) 0 1px, rgba(0,0,0,0.4) -1px -2px;
}
Now we will put these styles in use.
<div id="insetBackground">
<h1 class="inset">Inset text in Pure CSS</h1>
</div>
Let’s put it all together
<!DOCTYPE html>
<html>
<head>
<style>
#insetBackground {
width: 650px;
height: 80px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
h1.inset {
padding-left: 50px;
padding-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.8) -1px 0, rgba(0,0,0,0.4) 0 -1px, rgba(255,255,255,0.8) 0 1px, rgba(0,0,0,0.4) -1px -2px;
}
</style>
<title>Inset text using only CSS</title>
</head>
<body>
<div id="insetBackground">
<h1 class="inset">Inset text in Pure CSS</h1>
</div>
</body>
</html>
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.
#container{
width: 1024px;
height: 760px;
padding: 50px 10px 0 10px;
margin: 0 auto;
text-align: center;
}
Now let us style the h1 component within this container with some special font and text-shadow. This will make the text look 3D.
#container h1{
font: 75pt Georgia;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.2),
0 0 5px rgba(0,0,0,0.2),
0 1px 3px rgba(0,0,0,0.6),
0 3px 4px rgba(0,0,0,0.4),
0 5px 10px rgba(0,0,0,0.5),
0 10px 20px rgba(0,0,0,0.4),
0 20px 20px rgba(0,0,0,0.3);
}
And now let us add some html bones to this CSS muscle.
<body>
<div id="container">
<h1>Text in 3D</h1>
<h1>This is a simple and easy way to use the drop shadow effect to show text in such a way that it looks 3D</h1>
</div>
</body>
And when we put of this together then we will see the magic.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightgray;
}
#container{
width: 1024px;
height: 760px;
padding: 50px 10px 0 10px;
margin: 0 auto;
text-align: center;
}
#container h1{
font: 75pt Georgia;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.2),
0 0 5px rgba(0,0,0,0.2),
0 1px 3px rgba(0,0,0,0.6),
0 3px 4px rgba(0,0,0,0.4),
0 5px 10px rgba(0,0,0,0.5),
0 10px 20px rgba(0,0,0,0.4),
0 20px 20px rgba(0,0,0,0.3);
}
</style>
<title>3D Text Using Only CSS</title>
</head>
<body>
<div id="container">
<h1>Text in 3D</h1>
<h1>This is a simple and easy way to use the drop shadow effect to show text in such a way that it looks 3D</h1>
</div>
</body>
</html>
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 https://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.
p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
span {font-weight: bold}
Now let’s put this style in use
<div>
<p id="firstCapsUpper">
<span>Lorem ipsum dolor sit amet,</span>; eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
</p>
</div>
Let’s put everything together and then this is how it will look like.
<!DOCTYPE html>
<html>
<head>
<style>
p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
span {font-weight: bold}
</style>
<title>First letter Capital</title>
</head>
<body>
<div>
<p id="firstCapsUpper">
<span>Lorem ipsum dolor sit amet,</span>; eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
</p>
</div>
</body>
</html>
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.
p#firstCapsLower:first-letter {font-size: 4em; font-weight: normal; float: left;}
Let’s put this style to use.
<!DOCTYPE html>
<html>
<head>
<style>
p#firstCapsUpper:first-letter {font-size: 4em; font-weight: normal;}
p#firstCapsLower:first-letter {font-size: 4em; font-weight: normal; float: left;}
span {font-weight: bold}
</style>
<title>First letter Capital</title>
</head>
<body>
<div>
<p id="firstCapsUpper">
<span>Lorem ipsum dolor sit amet,</span> eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
</p>
<p id="firstCapsLower">
<span>Lorem ipsum dolor sit amet,</span> eu omittantur intellegebat sed,<br/>sanctus dissentiunt et per. Meis prompta dolorem no mei. Eam interesset<br/>consequuntur ad, vivendo complectitur te vel. No vim luptatum abhorreant<br/>dissentias, ne tale consul similique usu, vel sanctus officiis ut. Vim <br/>teerat invenire. Id vix alii munere essent.
</p>
</div>
</body>
</html>
It would look something like below:
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 https://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.
p#first::first-letter {font-size: 4em; font-weight: bold; float: left}
p#first::first-line {font-size: 2em; font-weight: bold;}
Let’s put these styles to use.
<!DOCTYPE html>
<html>
<head>
<title>First letter caps and first line bold</title>
<style>
p#first::first-letter {font-size: 4em; font-weight: bold; float: left}
p#first::first-line {font-size: 2em; font-weight: bold;}
</style>
</head>
<body>
<p id="first">Lorem ipsum dolor sit amet, his in tation adipisci assueverit. Has id fugit liberavisse. Cu sed omnis aliquam reprimique. Est ne justo dicant tritani, eos et diam torquatos, eius simul expetendis te nam. Id vis salutatus suscipiantur. Eum unum persequeris et, eu enim nostrud ius, his cu mazim everti petentium. Atqui sonet quando an sea, ei est veniam legimus accumsan.
Eum ut commune praesent dissentiunt. Vel no meis philosophia. Ancillae aliquando vim te, maluisset tincidunt ei usu, debet prodesset has cu. Omnis dicat eu vix, usu ne habeo vocent. Pri quod etiam commodo an, has cu primis commodo delenit, quo reque verterem eu. Ne mea quidam sadipscing, ad qui ullum mentitum reprimique.
Et eum adipisci moderatius, vis eu quando reformidans conclusionemque. Velit docendi sed et, qui periculis reprehendunt ad, labore fierent vel te. Ex mel habeo repudiandae mediocritatem, est no solet equidem corpora, probo facer putant nam ne. No suas maiestatis eum, ei dico dicam conclusionemque eum. Ius laudem ubique doming at, vis ne nostrud suscipiantur. Cibo numquam facilisi mea an, sea platonem consequat ei.</p>
</body>
</html>
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
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.
.rotate {
-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */
}
Let’s put the rotate style to use.
<!DOCTYPE html>
<html>
<head>
<title>First letter caps and first line bold</title>
<style>
.rotate {
-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */
}
</style>
</head>
<body>
<p class="rotate">Lorem ipsum dolor sit amet, his in tation adipisci assueverit. Has,<br/> id fugit liberavisse. Cu sed omnis aliquam reprimique. Est ne justo dicant <br/>tritani, eos et diam torquatos, eius simul expetendis te nam. Id vis salutatus <br/>suscipiantur. Eum unum persequeris et, eu enim nostrud ius, his cu mazim everti <br/>petentium. Atqui sonet quando an sea, ei est veniam legimus accumsan.</p>
</body>
</html>
It would look something like below.
First Letter Bold In CSS
The htmls file for this post are available @skydrive and @googledrive.
Any questions, comments and feedback is welcome.