Cookie

TheJoe.it Into the (open) source

22Jan/140

Enable the plugin “zen coding” su gedit

zen-coding

For those who do not know, gedit is the text editor of choice for any Linux distribution based on Gnome. It is preinstalled on most Linux distributions, with the exception of those based on different window managers from Gnome (Where, xfce, enlightenment, etc..). It is primarily used for editing configuration files for system, but supports a large number of programming languages ​​and is expandable with plugins dedicated.

For this reason, before use Brackets, I used Gedit also for editing HTML and CSS.

This is gedit.

10Jun/130

CSS: remove the border “a puntini” dei link

outline_ico

In today's article we see a simple CSS rule, already present in many CSS Reset. I'm talking about the property "outline". If the regola "outline" do not set the browser will display a dotted box around each link clicked. The default setting for this is because it is thought also to those who use the TAB key to navigate, and beading without any lose focus on that link no longer understand it happened. I'm also thinking of those who can not use the mouse to visual defect. By removing the beading renderesti the site inaccessible to them.

4May/130

CSS: property “z-index”

aces

Today we see an important property of CSS, also inherited from the last version, i CSS3. I'm talking about (as you will be guessed from the title) property "z-index".

The properties "height" and "width" impostarenno height and width, while "z-index" we need to move items into the third dimension of depth (the asse "The"). The third dimension is perpendicular to the screen and it will be easier to understand for those familiar with plans for the use of levels.

Imagine the screen as a table on which lay some playing cards, in this way:

9Oct/120

Some fonts, or rather some set of icons

foundation_free_icon_font

Sometimes on the internet ran into some ingenious solutions, that resolve in a few clicks a job that otherwise would last a few minutes (you, ok, we are talking about minutes, but is always a time-saving). The resources that we mark today (taken from the English blog SixRevisions) are simple font, whose characters consist of monochrome icons ready to be included in the web (with the CSS rule "@font-face"), a technique in use for some time, but that hardly see applied.

24Feb/120

CSSDeck: many ideas from web design professionals

pressable_button

From the birth of CSS3 web designers are literally crazy for countless new possibilities available. Some of the most striking are the ability to create a 'shading (also blurred) below the text or to any element, the possibility of rotate the pieces how many degrees you want, effects fade-in and fade-out and some simple animations in bother. The trend seems to be to abandon (the comunque diminuire) the use of computer graphics in favor of sophisticated rendering via CSS.

21Nov/112

30 days to learn HTML5 and CSS3

30dayz

Today I report an important series of tutorials (lasting a mese) that promises to teach web design to those who design is fasting in just thirty days. The course starts from zero, and it is also addressed to those who do not know anything about web design. And by no mean zero.

The lessons are structured so as not to be too heavy, the first try not to "put too many irons in the fire" and run out in about ten minutes at the most, as a result are then introduced i shadow tag in the order of use. Particular attention has been devoted to compliance with the standards, all'accessibility and in how they interact HTML and CSS.

18May/111

He was born BlueGriffon, an HTML editor based on the rendering engine of Firefox

logo_bluegriffon

Not so long ago themselves parlava of KompoZer: an HTML editor created by the code of abandoned NCE, who was born in the Code of abandoned Mozilla Composer and Netscape Gold. From 10 May, instead arises BlueGriffon, another fork of the project released under the triple license: "Mozilla Public License 1.1", "GNU General Public License Version 2" and "GNU Lesser General Public License Version 2.1". The first announcement on the official website (dated 30 September two years ago) reads these words:

8Apr/110

Enter a font “custom” by CSS, without upload

loremipsum

Today we see a useful tool made available by Google. For some time I have in two articles on the site custom font, but I never decided to finalize, and today I come up with custom font di Google. We start from the recent past to get to the, I like to do things backwards, and maybe in one of my future articles you will see how to include your custom fonts on web pages by uploading, or how to install OpenOffice on a Commodore 64.

The font that we take as an example is "Just another hand", font un tipo "handwritten" that we could use for the security.

25Mar/114

Buttons navigation menu with CSS Sprites

dito_cattelan2

In today's tutorial we talk again about HTML graphics and CSS integration. In my article a few months ago I talked about the technical (also widely used by Google) of CSS sprites. In practice consists in inserting the majority of images repeated several times within the page into one big image, that will be called multiple times with our CSS.

As a matter of personal preference I tend to avoid using Gimp every time I have to create a different menu item navigation, I prefer to create only the backgrounds of buttons and then think about the styles using CSS. In this way, the first menu is better indexed by search engines, secondly I avoid "waste" the time to create me to every button a new image.

12Jan/111

Add a caption to the photo pop-up with CSS3

preview

In today's tutorial we see how set the images of our site so that it appears to hover a caption at the bottom of the photo with fade-in effect / fade-out.

This technique makes use of some of the features implemented in the CSS3, the latest version. Unfortunately, not all browsers are still conformed to this specification, know that depending on the browser might not work. Newer browsers that support CSS3 are Firefox 4, Safari 5, Mobile Safari and Opera 10. Explore purtroppo do not support (apparently not even the next version: IE9), but however we will try not to forget IE users.