Cascading Style Sheets is an amazing tool for any Web Developer, so having a few unique CSS Tricks up your sleeve is a must. You can find a vast amount of CSS Tips and Tricks across the Web so I tried to put together a few CSS Tips that you won’t find blasted all over the Internet.
FireFox is showing Yellow Form Fields
This happens because of a declaration made within FireFox’s userChrome.css file. By using the same declaration within your own Websites CSS file you can modify these forced color settings for important form fields.
Using the !important declaration in your own CSS file will give the background property a higher priority and override FireFox’s CSS Settings.
.mail-input {
background: #fff !important;
background-image: none;
color: #000;
}
/* End Cascading Style Sheet Example */
/* Input Form Example */
<input type="text" name="email" size="15" class="mail-input" />
/* end */
With the CSS Example applied the background is White.
Enlarge Thumbnails with :hover and No Javascript
This is a little trick that I plan on using in future blog posts that contain screen shot thumbnails. It’s simple enough; when you mouse over a thumbnail it displays a larger viewable version of the picture. Give it a try with the thumbnail-screenshot to the left.
The HTML example below displays the same thumbnail two times, within the link.
The larger listed thumbnail is turned off within CSS, that is until you :hover over the thumbnail, which turns off the display:none property and making the larger thumbnail display. The first listed thumbnail in the HTML example is the original size thumbnail. The second thumbnail is the smaller thumb and is forced down in size. The smaller thumbnail contains a class called poof, which drops the smaller thumbnail on a hover, correcting issues with IE7 & FireFox.
<div class="wrapthmbs"><a href="#"><img src="example.jpg" class="over" height="200" width="200" /><img src="example.jpg" height="100" width="100" class="poof" /></a></div>
/* End HTML Example */
.wrapthmbs {
background: transparent;
background-image: none;
margin: 0;
padding: 0;
}
.wrapthmbs a .over{
display: none;
}
.wrapthmbs a:hover{
position: relative;
left: -150px;
}
.wrapthmbs a:hover .over{
position: absolute;
display: block;
left: -55px;
top: -35px;
z-index: 1;
}
.wrapthmbs a:hover .poof {
visibility: hidden;
}
/* End Cascading Style Sheet Example */
Rounded CSS Corners with Outline - No Images
Note: In the HTML Example some Spaces need to be removed: Between the span tags is the html character that creates a blank-space. The space between the & and n needs to be removed in 8 locations to make the blank-space work correctly.
<div class="wrap-corners">
<span class="corners-top"><span class="line4">& nbsp;</span><span class="line3">& nbsp;</span><span class="line2">& nbsp;</span><span class="line1">& nbsp;</span></span>
<div class="inside-pad">Place your Text/HTML Here!</div>
<span class="corners-bot"><span class="line1">& nbsp;</span><span class="line2">& nbsp;</span><span class="line3">& nbsp;</span><span class="line4">& nbsp;</span></span>
</div>
/* End HTML Example */
.wrap-corners{
background: transparent;
background-image: none;
width: 600px;
padding: 0;
margin: 0;
}
.inside-pad{
background: #ccc;
background-image: none;
border-right: 1px solid #999;
border-left: 1px solid #999;
margin: 0 1px;
padding: 0 5px;
}
.corners-top, .corners-bot{
background: #fff;
background-image: none;
display:block;
padding: 0;
}
.corners-top span, .corners-bot span{
background-image: none;
overflow: hidden;
display: block;
height: 1px;
padding: 0;
}
.line4{
background: #999;
background-image: none;
border-right: 1px solid #999;
border-left: 1px solid #999;
margin: 0 4px;
padding: 0;
}
.line3{
background: #ccc;
background-image: none;
border-right: 1px solid #999;
border-left: 1px solid #999;
margin: 0 3px;
padding: 0;
}
.line2{
background: #ccc;
background-image: none;
border-right: 1px solid #999;
border-left: 1px solid #999;
margin: 0 2px;
padding: 0;
}
.line1{
background: #ccc;
background-image: none;
border-right: 1px solid #999;
border-left: 1px solid #999;
margin: 0 1px;
padding: 0;
}
/* Unscrew Paragraph Breaks For Wordpress */
.wrap-corners p, .inside-pad p{
margin: 0;
padding: 0;
}
/* End Cascading Style Sheet Example */
Make PNG’s Transparent in Internet Explorer
This isn’t very complex to achieve but most of the examples online use some function in JavaScript to assist with adding CSS around all PNG files. I have PNG’s all over this blog but I only need to apply this to Transparent PNG’s so JavaScript isn’t very practical
<span id="png-home"><img src="home.png" width="20" height="20" border="0" alt="home" /></span>
/* End HTML Example */
#png-home {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘home.png’);
display: inline-block;
margin: 5px 5px 0 8px;
}
#png-home img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
/* End Cascading Style Sheet Example */
This is the starting point of my Cascading Style Sheet Examples. In the future I will be cover other advanced CSS Techniques and many other Basic CSS Topics. I welcome any suggestions, additions or bug reports that you may have.
