Introduction:
Description:
In previous articles I explained change default text selection color with css, jQuery add/remove css class to div, jQuery add more or less link to text, Rounded corners css for div without images, jQuery Dropdown menu with css and many articles relating to
JQuery,
JavaScript, asp.net,
code snippets. Now I will explain how to display
testimonials with jQuery, CSS.
Generally some of the sites will display testimonials
regarding their sites with different styles. To implement those kind of styles
we need to write code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Best CSS Testimonial Example</title>
<style type="text/css">
.testimonial
{
margin: 0;
background: #B7EDFF;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #666;
border-radius: 5px;
font-style: italic;
text-shadow: 0 1px 0 #ECFBFF;
background-image: linear-gradient(#CEF3FF,
#B7EDFF);
}
.testimonial:before, .testimonial:after
{
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #999;
font-style: normal;
}
.testimonial:before
{
top: 0;
left: 10px;
}
.testimonial:after
{
content: "\201D";
right: 10px;
bottom: -0.5em;
}
.arrow-down
{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #B7EDFF;
margin: 0 0 0 25px;
}
.testimonial-author
{
margin: 0 0 0 25px;
font-family: Arial, Helvetica, sans-serif;
color: #999;
text-align:left;
}
.testimonial-author span
{
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div style="width:50%">
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our
asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Ram Says:</b>
<blockquote class="testimonial">
<p>I really enojyed reading this site and it's very nice and
helpful for us to solve our asp.net, sql server, c#, jquery, json etc realted
problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Rohit Says:</b>
<blockquote class="testimonial">
<p>This site is very nice and helpful for us to solve our
asp.net, sql server, c#, jquery, json etc realted problems. Thanks.</p>
</blockquote>
<div class="arrow-down"></div>
<b>Kumar Says:</b>
</div>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
nice thanks sir
great thanks sir
sir i want html report in asp.net
hello sir can we make dynamic testimonial
pls a dynamic testimonial
Note: Only a member of this blog may post a comment.