Showing posts with label trick. Show all posts
Showing posts with label trick. Show all posts
Friday, January 8, 2010

Creating Triangles in CSS

Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 40px. To demonstrate here is a div with all sides colored.


HTML

<div class="css-arrow-multicolor">
</div>

CSS

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}

Continue...
Monday, June 29, 2009

Max Width and Max Height for Images in IE

.mainimage {
max-width: 400px;
max-height: 400px;
}
This works great in Firefox, Safari, Opera, and Chrome. But it doesn't work in Microsoft IE6 or IE7 or IE8
I can't believe Microsoft STILL has not made their browsers standards-compliant for simple things like max-width and max-height.

Solution That Works For All Browsers
It turns out there's a way of doing the equivalent of max-width and max-height for IE browsers. If you use the following style, it will work on all browsers:
.mainimage {
max-width: 400px;
max-height: 400px;
width: expression(this.width > 400 ? "400px" : true);
height: expression(this.height > 400 ? "400px" : true);
}
Microsoft web browsers understand the Microsoft-only, non-standard "expression" element inside CSS. The part inside parentheses must be a Javascript expression yielding the string that should be used in place of the expression() portion. No other web browsers understand it, which is good for our situation - we can check and set the width and height elements of our image with it, just for Microsoft browsers.
Saturday, January 3, 2009

Tips, Tricks, Scripts and Tools Web Developers must know

Here is a collection on the tips, tricks, scripts and tools web developers must know:

Tools & Web Apps 

Scripts, Tweaks and Hacks

The Top 40 Free Ajax & Javascript Code for Web Designers
15 Key Elements All Top Web Sites Should Have
Top 10 Tutorials for Converting PSDs to HTML/CSS
30+ Tooltips Scripts With JavaScript, Ajax & CSS
50+ Nice Clean CSS Tab-Based Navigation Scripts
40+ Most Wanted Wordpress Tricks and Hacks and 30+ More
30+ Eye-Opening Web Development Screencasts
19 CSS Menu Tutorials to Spice Up Your Web Designs
34+ free HTML newsletter templates for startups
50 Excellent AJAX Tutorials
15 Helpful In-Browser Web Development Tools
75 (Really) Useful JavaScript Techniques
63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats
The Best (19) Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…)
10 Useful RSS-Tricks and Hacks For WordPress
20 Amazing Javascript Prototype Scripts, Elements, Widgets, Classes..
10 Smart Javascript Techniques to Improve Your UI
20 Excellent AJAX Effects You Should Know
35 Easy to use Free Ajax/Javascript Navigation Solutions
Top 10 CSS buttons tutorial list
10 Free Chart Scripts

Tips 

Sources 

Generators

Plugins and Themes