Tweet
Is your preferred browser suddenly displaying all the basic fonts in an unclear and garbled way? Before starting to pull your hair off, it might be that something got in the way and some Windows preference has been changed.
What happened to me once, is that Firefox, Chrome and Safari started displaying system fonts strangely, while Internet Explorer was rendering the text in the correct way.
I remember that I started searching for a solution, and, at first I thought it was something related to my system font files that got corrupted. But it wasn't that.
I noticed that other programs and applications were displaying the menus and text in a strange way.
I decided to rebuild the font system folder. Nothing changed...
Well, to make a long story short, it was the Clear Type option.
In Windows 7, there's a control panel section that's taking care of Clear Type fonts: ClearType tuning.
In Windows XP and Vista, we need to download ClearType Tuner from Microsoft.
If for some reason, the clear type option has been turned off, the result will be that all the fonts in your applications will be in some way less clear (sorry for the pun). And even your browser will display system fonts in that way.
Just turn ClearType on again and everything will be fine.
More info here.
Web development, web design and programming.
Wednesday, 29 February 2012
Monday, 27 February 2012
jQuery: fadeIn and fadeOut for IE8
Tweet
If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.
I don't think I have to explain much about it, so I will get into it very quickly and shortly.
If we have an element to which we applied a fade effect using jQuery, we should have something like:
If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.
I don't think I have to explain much about it, so I will get into it very quickly and shortly.
If we have an element to which we applied a fade effect using jQuery, we should have something like:
<div id="fading" style="display:none;">Some content</div>
in the body of our page.Friday, 24 February 2012
CSS & HTML: solution for border radius not working on IE8
Tweet
Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.
Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.
A little bit of background
How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.
Wednesday, 22 February 2012
Web Development: optimise JavaScript and CSS
Tweet
Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.
I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).
Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.
I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).
Monday, 20 February 2012
Web Design: free images deposits
Tweet
When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:
In the meantime, happy coding!
When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:
- Flickr: Creative Commons
- MorgueFile: free photos
- FreePhotosBank
- FreeMediaGoo (audio, images, textures and flash)
- FreeDigitalPhotos
- InterfaceLift Icons
In the meantime, happy coding!
Friday, 17 February 2012
JavaScript: live character count
Tweet
In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.
In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.
Wednesday, 15 February 2012
SQL: the alter table statement
Tweet
In SQL we usually create tables, pre-deciding the columns and their characteristics, like default values and data types. It is possible to insert new columns and eventually alter them afterwards, using the alter table statement.
In the following post we are going to see what we can do with it.
With alter table, we can add, change the data type or delete a column inside a table.
In SQL we usually create tables, pre-deciding the columns and their characteristics, like default values and data types. It is possible to insert new columns and eventually alter them afterwards, using the alter table statement.
In the following post we are going to see what we can do with it.
With alter table, we can add, change the data type or delete a column inside a table.
Monday, 13 February 2012
ASP: convert a string into a link
Tweet
If you often visit social networks or, generally speaking, discussion web sites, you surely have noticed that sometimes when you insert a message or a post, every possible link is automatically recognised and "transformed" into a clickable link. How is it done?
With ASP we can manipulate a given string, find a possible link and change it.
If you often visit social networks or, generally speaking, discussion web sites, you surely have noticed that sometimes when you insert a message or a post, every possible link is automatically recognised and "transformed" into a clickable link. How is it done?
With ASP we can manipulate a given string, find a possible link and change it.
Friday, 10 February 2012
CSS: 3d text!
Tweet
Can you see anything special in the following text?
How can it be achieved?
Let me explain it to you.
Can you see anything special in the following text?
3D Text
If you see it just as a big text, your browser is not compatible. Try to use the latest version of Firefox, Chrome, Safari, Opera or IE10.How can it be achieved?
Let me explain it to you.
Wednesday, 8 February 2012
CSS: image preloader
Tweet
Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:
which will be displayed while the main image is being loaded.
Let's see how we can do it.
Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:
Let's see how we can do it.
Monday, 6 February 2012
CSS: image zoom effect
Tweet
Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.
Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.
Friday, 3 February 2012
HTML & CSS: text overlay with shadows and round corners
Tweet
Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:
It will be an easy solution with full browser compatibility... please follow me...
Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:
Wednesday, 1 February 2012
CSS: Ultimate CSS Gradient Generator
Tweet
Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.
If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.
Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.
If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.
Subscribe to:
Posts (Atom)