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.

 
/* Start Cascading Style Sheet Example */
 .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 */
 

FireFox should display the input box background as Yellow.
With the CSS Example applied the background is White.


 
 

Enlarge Thumbnails with :hover and No Javascript

ExampleExample

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.

 
/* Start HTML Example */
<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 */
 
/* Start Cascading Style Sheet 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

    

Yes, you can find other tips on rounding corners with CSS, but this is my version of the tip. It’s compliant and it works IE6/7 and FF. A live example is wrapped around these two paragraphs.

 

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.

    

 
/* Start HTML Example */
<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 */
 
/* Start Cascading Style Sheet 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
PNG IE 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

PNG
Example #1 above is what a Transparent PNG looks like in IE6. Example #2 to the left is a live working example, which works in FireFox and Internet Explorer. The img src is wrapped in the png-home span which calls the filter goodies in the CSS file and does all the magic for you.


 
/* Start HTML Example */
<span id="png-home"><img src="home.png" width="20" height="20" border="0" alt="home" /></span>
/* End HTML Example */
 
/* Start Cascading Style Sheet 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.


This Article Is Brought To You By:   Yappo Dollars   !
YappoDollars
.: More Amazing Posts :.
.: Visitor Services :.