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.

CSS: cursor

Tweet

As you surely already know we can change the cursor type using CSS.
They way we do it is very simple. It is enough to use the cursor property and apply it to any element in our web page:

<style>
.myDiv {
   cursor: crosshair;
}
</style>
<div class="myDiv">The cursor here has a crosshair shape</div>

What are the different option we have?
The answer after the break :-)

CSS: Layers

Tweet

We can use CSS to overlap elements on a page. We are talking about putting one element on top of another.
To do so we can define the z-index. Something like:

Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus.

CSS: visibility: hidden vs display: none

Tweet

Writing for the web thought becomes more complicated everyday. It goes down to the fact that I've wrote more than 380 posts since July 2010 and thinking about new things to talk about is getting harder and harder. However, some times a short conversation with a friend or a colleague might ignite a sparkle and might give me new ideas for a short post like the following.

I was in fact talking with a friend when it came to my mind that the difference between visibility and display properties in CSS is some times completely missed. Specifically, the difference between visibility: hidden and display: none.
The point is not that complicated, so in just a few words we are going to see the difference, and we are going to explore when to use visibility instead of display.

HTML: IDs and classes

Tweet

As I said in the last post, it's quite interesting to explore the differences between IDs and classes in CSS.

First of all, they are both selectors. But they are very different:
1) IDs are unique identifiers;
2) classes are not unique.

The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.

HTML & CSS: common mistakes

Tweet

Today we are going to see something half way between funny and serious: common mistakes we make while using HTML and CSS.

Why is it funny? Because sometimes those mistakes are so basic that when talking about them we usually react saying we don't make such mistakes. But then... when it happens, for any reason - even the most incredible - the only thing we can do is laugh. Mistakes are always just around the corner. The better we know them, the easier we are going to avoid them.

And when it happens... well... just have a laugh!

CSS: overflow

Tweet

Working with containers in a web page could be tricky, especially if we need to manage large text. There's a CSS declaration which we need to fully understand in that matter: overflow.

When we create a container - let's call it "box" - the overflow declaration helps the browser to understand what to do with the eventual content that doesn't fit in the container. If the container has a fixed height, what will happens to the content that doesn't fit in the box?
When the box has not a fixed height, the content will fit in any case and the box will enlarge, giving the needed space to the content. When the height is fixed, we might need to use the overflow declaration.

The overflow declaration
There are four possible values for overflow:
1) visible
2) hidden
3) auto
4) scroll

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: colours!

Tweet

What would the world be without colours?
We work with colours every day, especially with CSS. But, do we really know what are all the available colours values types?
Well... following the previous post about measurements values - drums roll - here we go with colours...

CSS: measurement values

Tweet

Have you ever wondered what pc stands for in a CSS file?
Measurment values in CSS can be different and they usually have different use.
It is quite normal to use pixels or percentage and I believe we all consider them the most important. However, when for example we are working on a fluid or responsive layout, we might even need other kind of measurment values.

Let's see them!

CSS: a shadow on just one side of a box

Tweet

The following trick is quite interesting: we are going to create a box shadow only on one side of a box with CSS.
Just to be clear, something like:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I just added a white background to make it more clear...
Do you like it? Let's see how to do it.

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.

DocHub: a reference to almost all programming things

Tweet

Today I would like to share a web site I recently found and which might be of interest for many of you.

The place is called DocHub - Instant Documentation Search and has references to all things in programming CSS, HTML, JavaScript, DOM, JQuery, PHP and Python.
Well, as you can see ASP is not there (while there's PHP and Python) but the resource is really incredible and it is a quick and complete guide to the above programming languages.

The site is made of two panels: the left one allow us to search the wanted term (and it's a free search box), while on the right panel the searched information are made available when selected.
Believe me when I say the database is very well done and it has many valuable information either for the experienced programmer or the newbie.

So... what you're waiting for? Go there and have a look for yourself!

CSS: Less!

Tweet

I don't know if you are already aware of LESS. If not, you will probably find it quite interesting. In fact if you're programming using CSS a lot, LESS is a powerful add on which will make things easier for you.

"LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino"

If you are intrigued by LESS and don't know about it already, please follow me...

Web Development: Adobe Brackets

Tweet

As I told you in my last post, I'm actually away from my beloved desk at work. I'm on vacation for a while, but to keep your attention high, here are some interesting news for those of us who like to explore new way of writing code.
We are talking about Brackets, a new code editor by Adobe. How is Brackets different from other editors? Well... as a start:

"[...] Brackets [is] a code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript."

Not bad eh?

Interested in more info?
Well, just follow the above link and read the "read me" section... There, you will find everything you need to know.
If you have already used Brackets, just use the comments section below to share your experience...

CSS: menu generators

Tweet

We all like to build CSS menus from scratch! However, sometimes time is not enough and even related costs are too high. If you need a helping hand in creating a good CSS menu, here's a collection of online tools which will speed up the developing process.
I hope you find it useful!
Here we go, my friends...

CSS: grouping and nesting

Tweet

One of the basic things to know about CSS is how to select elements in a page. However, not many of us know how to do it efficiently.
In this short post, we are going to see how to group and nest CSS selectors.