How to Prevent Superscripts and Subscripts from Affecting Line-Height
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }Css code to stop superscripts from breaking line heights once and for all
Tutorial Prevent Long URL’s From Breaking Out of Container
Or any long bit of text, really.
.comment-text {
word-wrap: break-word;
}A more robust browser support, you'll need more (via):
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
How to hide Bounce Scroll in Lion
Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization).
html, body {
height: 100%;
overflow: hidden;
}Tutorial PNG Hack/Fix for IE 6
For CSS background-images
.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}Cannot be used with repeating, needs fixed with and height.
For inline HTML images
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}This requires a 1x1px transparent GIF image
Tutorial Picross Style Buttons
As in, the game PICROSS3D.
CSS3 Technique
.btn {
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration: none;
text-shadow: -1px -1px 1px #616161;
position: relative;
padding: 15px 30px;
-webkit-box-shadow: 5px 5px 0 #666;
-moz-box-shadow: 5px 5px 0 #666;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
margin: 0 10px 0 0;
}
.btn:hover {
-webkit-box-shadow: 0px 0px 0 #666;
-moz-box-shadow: 0px 0px 0 #666;
top: 5px;
left: 5px;
}jQuery Technique
Smoother, but more markup and CSS needed.
<div class="rela">
<a class="btn green btn1" href="index.html">Jack</a>
<span class="shadow"></span>
</div>.rela {
display: block;
width: 96px;
height: 56px;
position: relative;
margin: 10px;
}
.btn {
display: block;
line-height: 56px;
text-align: center;
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration:none;
text-shadow: -1px -1px 1px #616161;
position: relative;
}
.shadow {
position: absolute;
top:5px;
left: 5px;
background: #666;
z-index: -1;
width: 100%;
height: 100%;
}$(".btn").hover(function(){
$(this).stop().animate({
top: "5",
left: "5"
}, 100 );
},
function(){
$(this).stop().animate({
top: 0,
left: 0
}, 100 );
});Tutorial Perfect CSS Sprite / Sliding Doors Button
Demo
HTML
<a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a>CSS
a.GlobalOrangeButton span {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
display: block;
line-height: 22px;
padding: 7px 0 5px 18px;
color: #fff;
}
a.GlobalOrangeButton {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;
display: block;
float: left;
height: 34px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.GlobalOrangeButton:hover span {
background-position: 0 -34px; color: #fff;
}a.GlobalOrangeButton:hover {
background-position: right -34px;
}
Tutorial Page Curl Shadows
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.