CSS and HTML5: background image in buttons

Tweet

Would you like to do something like:

Or maybe you prefer it another way, like:

They look the same, don't they? However they are a bit different in the making. Let's see how...

The first way to do such thing is to use the <button> tag:

<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" />
</button>

The image is just like any text we usually put inside the tag.

CSS: create a post-it note

Tweet

I've recently needed to create some sort of post-it note for a web site. The general look of the homepage was like a working desk, and it was suggested to add a yellow post-it somewhere in the upper right corner of the viewport.
Because I know that time is money and that we don't really need to reinvent the wheel, I have collected some solutions I've found on the web.
If you're interested, please keep on reading.

CSS: rotate background images

Tweet

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

CSS3: border-image

Tweet

With CSS3 we can use images as border of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:

div
{
-webkit-border-image:url(myborder.png) 30 30 round;
-o-border-image:url(myborder.png) 30 30 round;
border-image:url(myborder.png) 30 30 round;
}

The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:
1) border-image-source which is the path to our image;
2) border-image-slice which is the inward offsets of the image;
3) border-image-width which is the widths of the image;
4) border-image-outset which defines the portion of the image that goes beyond the box;
5) border-image-repeat which sets the way the image will be repeated.

CSS3: use hyphens to control text flow

Tweet

It seems that I somehow discovered CSS3 lately. I am aware that recently I wrote a lot about it, but today I feel like sharing the following info.
Have you ever needed to control the text flow in web page?
With the CSS3 hyphens property we can really do interesting things.

An intro
We can use hyphens to automatically hyphenate a justified text, giving it the same flow as we can see on books, magazines and newspapers.

CSS: button generators

Tweet

Ever needed to create buttons in pure CSS?
The following is a list of the best on-line CSS code generators available.
This time is an easy post, but, as you may understand, I do need a break sometimes.
Enter and enjoy the list!

CSS3: can we use it or not?

Tweet

Do you like CSS3? Do you think it gives you a big help in doing things you've never dreamed of?
Are you aware of what browser is supporting your wonderful new CSS?
Let's see those obscure CSS3 properties and whether we can use them freely or not...

CSS: Firefox 16 and prefixes

Tweet

I don't know if you are using Firefox or not, but the following information are quite important to any web developer.
We are talking about some CSS3 properties which are now supported by Firefox with prefixes.

I've already showed a way of removing those annoying prefixes from our code in a specific article, however it seems that the new version of Firefox (the 16th) will get rid of some of them.

According to Paul Rouget (who work at Mozilla) there's an unprefixing work in progress for Firefox 16. Specifically they are going to remove prefixes for:
- CSS3 Animations
- CSS3 Transitions
- CSS3 Transforms
- CSS3 Gradients
- IndexedDB
and probably for calc() as well.

What's in for us, web developer? A possible nightmare if we have been not very careful.
In fact in the near future, the unprefixed properties will be the only one supported by the browser. It means that we are facing a potential complete review of our CSS code. If we forgot to use unprefixed properties, the prefixed ones will not work. And the nightmare is not finished: what about users who don't update their browsers?
We need to consider all possible situation. If in the past we had to use prefixes for Mozilla and for Webkit, now we have to be sure the unprefixed property is there as well.

I'm sure that if you're reading The web thought, you already know how important is to plan your code. And if so, you have already taken into account the possibility of unprefixed properties.
If not, well it's better to start worrying and to start planning a review of your CSS code.

CSS: the resize property

Tweet

With the introduction of CSS3, one of the new properties available is resize. With it we are able to make an element resizable vertically, horizontally or both.
We have to take note that the property is available only for Firefox, Chrome and Safari. For those browsers, some elements like the textarea are considered resizable by default (and you may have already noticed that).
Let's see how to use it.

CSS: backgrounds with CSS3

Tweet

As I can see from the web thought statistics, there's a increasing interest in how to manage backgrounds with CSS and specifically with CSS3. So I decided to write down the following short tutorial. We are going to explore three interesting CSS properties: background-clip, background-origin and background-size.
I know, I've partially covered the subject in another post, however here we are going to see it more in depth.

Are you ready? Ok then, follow me...

CSS: text to path generator with csswarp

Tweet

Today I would like to share an online tool which some of you might find interesting, at least as an clever example on what we could do with CSS3 and HTML5.
But before showing you this "wonder", I would like to spend a few general words and possibly gather your ideas on the matter.

I've recently read that in 2012 there will be an incredible expansion of HTML5 webapp. The use of the not-so-new HTML version will help developers in building specific applications that will work with recent browsers. For what I have seen lately, the most of those new webapp are basically drawing tools. Canvas, trasformation and animation are wisely used in order to allow free hand drawing using only the browser.
In a perfect future, we might end up without desktop applications, while the web will be the place where everyone can find the right tool, when needed.
It is an old idea that I've partially already encountered in a book by Jeremy Rifkin, in the early 2000. People will eventually use software on-demand and they will just pay for the time they use it. That could be the future... the not so far future, as I can see. Following the reasoning, we might just need a pc with a minimum set of system tools, while when we will need to write a document, prepare a spreadsheet or retouch a photo, we will just open the browser and go to the appropriate web site where the application will be always updated and ready to be used. With that in mind, it won't matter which will be our hardware: it could a smartphone, a tablet or a pc. At the same time, it won't matter where we will be - we will just need a data connection.

CSS: iPhone 4 in pure CSS3

Tweet

Yesterday I've received an interesting link from a friend of mine. I won't comment it but I would like you to say what you think (in case you still have time and need to do it).
Here's the link:

iPhone 4 in pure CSS3

Enjoy and see you next time...

CSS: word-wrap, how to use it

Tweet

Word wrap is an almost obscure CSS property. It's rarely used, but it can save your day sometimes. So, to get to the point, which one of the two following boxes do you prefer?

ThisIsAVeryLongTextThatWon'tBreakUnlessForcedToDoSo

ThisIsAVeryLongTextThatWillBreakBecauseWasForcedToDoSo

I bet you prefer the second one. How to do it? Just one line of code! Follow me...

CSS3 and HTML5: Adobe expressive web

Tweet

I've recently stumbled upon an interesting new web site by Adobe: the expressive web (beta). Launched at the beginning of August, it deals with CSS3 and HTML5 in a new and interesting way.

The site explains in details the new features, in a totally interactive and original way. It uses small coloured cubes, which with effective animations, gather to form shapes, explaining in details the effect of those new features.

The expressive web shows examples, browser support, fall back strategies and resources for CSS3:

• animations;
• gradients;
• media queries;
• shadows;
• transforms;
• transitions;
• web fonts.

As for HTML5:

• audio;
• canvas;
• forms;
• video;
• web storage.

I know it is difficult to imagine, following my explanation, how the site is working. It is definetly better to visit it.

Please remember that the site is still in beta, so it might still have things to be adjusted.

CSS: use CSS3 for columns

Tweet

In the past, when we wanted to create columns we used a table. Today, CSS3 has a style called column that can do the trick easily. Unfortunately that is not working with Internet Explorer, but in that case, we can use the Columnizer jQuery Plugin. In this post, we will concentrate on the CSS3 rules, while we might talk about Columnizer in the near future.

Multiple columns

To create a rule for columns we use the following style:

.threecol
{
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
}

An the result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, felis at vulputate tincidunt, turpis nisl egestas felis, sit amet auctor velit massa quis libero. Fusce tincidunt neque ut mi tincidunt sollicitudin. Mauris sed scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis ligula quis velit luctus ullamcorper sed ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas urna ac libero sagittis lobortis. Donec sapien nunc, porta at pharetra imperdiet, ornare eget eros. Fusce placerat nisi et libero faucibus ac condimentum nisl lacinia. Donec ut enim non dui tristique tristique sit amet a nunc. Nullam placerat felis a dolor aliquam auctor. Nulla pellentesque sem eu ligula aliquam ut blandit ipsum rhoncus. Integer tincidunt posuere nisi vehicula vulputate. Aenean non metus sit amet leo varius euismod in quis tellus. Pellentesque ut tempus metus.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

CSS: pure css GUI icons

Tweet

Imagine you don't need images anymore. We've seen something similar in CSS: create shapes in pure css last April, but what we will see here is pure madness... at least at first sight. The GUI icons set you see on the right is an image, however there's a guy who did them all using css. Sounds crazy? Well, that's what I thought the first time I saw them, but as the author - Nicolas Gallagher - states on the project page, all the idea is just an experiment.

Basically, Nicolas is using css pseudo elements (:before and :after) and semantic HTML to create a 84 icons set. Let me immediately warn you: with Internet Explorer you won't see things as they were conceived. If you open the demo page in IE8, for example, you will see the icons with some css attributes missing and the whole effect will be missed.

I suggest to visit Nicolas page and have a look at his works. Just keep in mind that pure css GUI icons are just an experiment.

CSS: float center? Yes, we can do it!

Tweet

Can we trick the float property and create something like float:center?
This very article is demonstrating that it is actually possible with CSS.
As you can see, the CSS3 logo is staying at the center of the two columns and we are actually using placeholder pseudo elements to obtain the desired effect.
We are basically carving a place for our image and

 then insert it using an absolute positioning. Isn't that impressive? The technique is quite easy to understand and has little code, but a few things should be remembered. We will use placeholders for each column (two divs in the example), using the float property: one column will float right, and one will float left. The pseudo element will have the height of the image and nearly the half of the width. Now let's see the code behind it.

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.

CSS: @media (are you ready for the new mobile users generation?)

Tweet

As said before, 2011 and 2012 will be the tablets years. Recently we have witnessed the wide spread of new generation devices increasingly used to surf the web. Because of that, web developers have been aware of possible restyling of old web sites needed to satisfy the new mobile users. It's really a matter of determining your audience. Is people visiting your site using mobile devices? Are you really interested in developing a new look for your site just to satisfy that portion of your audience?
That is quite an interesting point. I suspect that before jumping to conclusions, we need to analyse our audience, know who they are, what they want, what they expect from our web site, and how they want to browse the web site. Basically we need to know if we really need to make those changes to the structure of the site and if it's worth working on it, after all.

At-Rules

I don't know if you already have used CSS at-rules. Basically they enclose a set of CSS rules and apply them to a specific item. We have talked about one of them in the @font-face article. The at-rules are quite interesting and become handy when dealing with different medias. The usual scenario was when we needed to create a specific style for printing pages. However the @media rule can be used to style pages according to different situation.