Generally Most of the web developers use either javascript
or any server side technology like php to hide the text characters if the text
length is too long.
The major drawback ofusing such technique is your text will be hidden to the
search engines also.But if you use CSS ellipsis property the text length is
going to be hidden and the search engineswill extract your content even if the text is been hidden.
For example,
This is the end result what you are going to see.
Click here Demo
Step1: Start Html code
This is the end result what you are going to see.
Click here Demo
Step1: Start Html code
<div class="gameicon_wrapper"><!-- main div container -->
<div class="icon"><img alt="Ben10" src="images/gameimage.gif"></div>
<div class="game_content">
<h2 class="game_name">Ben10 The Return of Psyphon</h2>
<div class="play_icon"> Play Game </div>
</div>
</div>
<div class="icon"><img alt="Ben10" src="images/gameimage.gif"></div>
<div class="game_content">
<h2 class="game_name">Ben10 The Return of Psyphon</h2>
<div class="play_icon"> Play Game </div>
</div>
</div>
Step2: CSS code
.gameicon_wrapper {
border-radius: 6px;
background-color: #FFFFFF;
float: left;
height: 140px;
box-shadow: 0 0 3px #000000;
margin: 7px 7px 5px;
width: 165px;
padding-bottom: 5px;
}
.icon {
height: 95px;
padding: 3px 3px 0;
position: relative;
width: 159px;
}
.icon img {
height: 100%;
width: 100%;
}
.game_content {
margin-top: 5px;
padding: 0 5px;
width: 152px;
}
.game_name {
color: #000000;
font-size: 13px;
margin-bottom: 5px;
overflow: hidden;
padding-left: 2px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 152px;
}
.play_icon {
background-image: url("../images/play_icon.png");
background-position: 3px 1px;
background-repeat: no-repeat;
color: #F11E23;
font-size: 12px;
font-weight: bold;
padding-left: 18px;
text-decoration: none;
}
border-radius: 6px;
background-color: #FFFFFF;
float: left;
height: 140px;
box-shadow: 0 0 3px #000000;
margin: 7px 7px 5px;
width: 165px;
padding-bottom: 5px;
}
.icon {
height: 95px;
padding: 3px 3px 0;
position: relative;
width: 159px;
}
.icon img {
height: 100%;
width: 100%;
}
.game_content {
margin-top: 5px;
padding: 0 5px;
width: 152px;
}
.game_name {
color: #000000;
font-size: 13px;
margin-bottom: 5px;
overflow: hidden;
padding-left: 2px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 152px;
}
.play_icon {
background-image: url("../images/play_icon.png");
background-position: 3px 1px;
background-repeat: no-repeat;
color: #F11E23;
font-size: 12px;
font-weight: bold;
padding-left: 18px;
text-decoration: none;
}
I hope you enjoyed this basic tutorial. Now its your turn to make your hands dirty.
Thanks For Reading this and Keep Coming for Latest updates.
Thanks For Reading this and Keep Coming for Latest updates.
This post is very usefull for new designers....
ReplyDelete