TheJoe.it Into the (open) source

29Jan/142

WordPress: warn the reader that the post is old

clocky

Often (writing software and technology) that the article is now present, tomorrow has already passed. There is at least un plugin per WordPress to notify the reader that the post you're reading was written long ago, that is a perfect solution and ready for use, groped but I also wanted to change the code of my theme to add this simple function automatically.

I state that the following steps create a box (in this case yellow) before the title of the article.

14Dec/130

Buttons using only CSS

css-code

In today's article we see how to turn a simple form, One button is not formatted in an equally simple form with a button formatted. All colors, gradients and shadows will be "built" using the CSS rules for the version 3. These are a few simple rules to take a little 'with pliers, because they work perfectly with the browser based on Webkit (Safari, Konquerror, iPad/iPhone) e Gecko (Firefox e simili), but they are useless on all versions

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.

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.

18Feb/115

The best HTML editor for non-commercial Linux

HTML_Icon_Final

Anyone who has ever tried to create piagne HTML with Linux you will certainly clashed with the lack of WYSIWYG software developed ad hoc for our favorite operating system. Fortunately, today this "gap" is filled only in part due to the development of some open source programs that attempt to compensate for the lack of development in Dreamweaver (or still commercial alternatives) su piattaforma Linux, but in many ways we are still far from having reached the usability of Dreamweaver or similar.

Today we see some of the best software for 'editing WYSIWYG developed natively for Linux. Thank you the blog web distortion translated for the advice that I report below.

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.