jQuery Image Galleries, Best jQuery Gallery, Modal Windows
|
|
|
|
» CSS - Wrap Text
» Aligning with Float
» Rounded Table Edges
» CSS Shadow
» CSS Gradient
|
CSS - Wrap Text
Ever noticed a page get stretched because of the use of long words? It's a common problem on blog and other sites where visitors can add content. To wrap text to the
next line, regardless of wether or not there is a break in the word (even if there are no spaces 'LLLOOOOOOOLLLLLLLL'), you can use the following code inside a div tag:
|
Style Declaration:
<![CDATA[<style>]]><![CDATA[.textwrap]]>
<![CDATA[{ width:200px; word-wrap:break-word; break-word:break-all; overflow:hidden; }]]>
<![CDATA[</style>]]>
Usage:
<![CDATA[<div class="textwrap">Text to wrap goes here</div>]]>
|
Stretched table:
|
ThisIsaLongSentenceWithoutSpacesByPeopleDontUseSpaceBarIntentionallyToTryAndBreakYourSite
|
Correct table:
|
ThisIsaLongSentenceWithoutSpacesByPeopleDontUseSpaceBarIntentionallyToTryAndBreakYourSite
|
|
|
Back to Top
|
Aligning with Float
Text-align not working?
align="right" not working?
align="left" not working?
Try using:
<![CDATA[<div style="float:right;">Align this to the right please</div>]]>
How it looks:
Align this to the right please
|
|
Back to Top
|
Rounded Table Edges
No longer do we need to create images and place them meticulously to have a site with rounded edges. Welcome CSS 3 and HTML 5! It's peanuts:
|
<![CDATA[<style>]]>
.rounded
{
-moz-border-radius: 15px;
border-radius: 15px;
}
<![CDATA[</style>]]>
|
|
You can also apply it to particular corners like this:
<![CDATA[<style>]]>
.roundedtop
{
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
<![CDATA[</style>]]>
|
|
|
Back to Top
|
CSS Shadow
Creating shadows is now easy with the new CSS 3 and HTML 5. How easy? This easy!
|
<![CDATA[<style>]]>
.shadow
{
box-shadow:0px 5px 5px #000000;
-webkit-box-shadow:0px 5px 5px #000000;
-moz-box-shadow:0px 5px 5px #000000;
}
<![CDATA[</style>]]>
1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
3. The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4. Color
|
|
|
Back to Top
|
CSS Gradient
You can reduce page load time by using the CSS gradient effect as opposed to adding images you've created.
|
<![CDATA[<style>]]>
.gradient
{
background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#eee');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background: -moz-linear-gradient(top, #fff, #eee);
}
<![CDATA[</style>]]>
|
|
|
|
Back to Top
|
|
|
|
