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.

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: 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.

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!

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...

JavaScript: smooth scroll to the top of the page

Tweet

If you have long pages, it is quite clear that a user will scroll your pages and eventually reach the end of the content area. In some case, however, menus or other relevant elements of the web site will stay at the top of the viewport. How do we create a link which will scroll smoothly back at the top?
We can use a small JavaScript function. Here I explain how...

ASP & jQuery: linked list boxes with AJAX

Tweet

Today, I would like to share a quick and easy solution to link 2 list boxes with jQuery and AJAX.
Situation: we have two list boxes. One (number) is already populated. The second (letter) is populated according to what is selected on the first list box, via AJAX (not reloading the page).
We need to build two ASP pages.
Let's start and have fun!

CSS: create boxes with arrows

Tweet

Today, in this short post, I would like to show you how to easily create something like the following box:

The Web Thought

Isn't it great? We can obtain it with just CSS and a simple div.
There's a good tool that can create all the needed CSS and all you have to do is create the div with a class="arrow_box" and see the result.
Please visit CSS arrow please and see the magic.

Short post for busy days... see you next time.

jQuery, JavaScript & ASP: barcodes resources

Tweet

Following a brief exchange of thoughts with Carlo (one of the web thought readers), I have decided to publish a list of resources aimed to the creation of Barcodes. Originally, Carlo wanted to insert a barcode in a PDF document using FPDF, however the subroutine he found generates a HTML table that is almost impossible to embed in a PDF with FPDF.
Other solution are possible. The point is to create a Barcode image, save it on the server, and then insert it into the PDF. I haven't explored the above idea, but I think that the following resources might help some to accomplish the task.
Here's the list:

Barcode Coder (jQuery)

jQuery-Barcode (jQuery)

Pure ASP Barcode Generator (pure ASP)

ASP Barcode Script (pure ASP - Thanks to Carlo)

Barcode Generator (JavaScript)

Creating a Code 39 Barcode using HTML, CSS and Javascript (JavaScript)

Javascript Code128 Barcode (JavaScript)

Web Development: compress your code

Tweet

When developing web documents, we should always take a close look at the size of the resulting code. While it is very important to keep things minimised in terms of file size, sometimes it's not easy just applying the usual rules, tips and tricks.
It is well known that, for example, it is a good habit to compress jpgs, and images and photos in general. At the same time, it is advisable to use minimised JavaScript libraries, such as reduced versions of jQuery or jQuery tools and plugins.

But sometimes, following all those simple rules could be not enough.
In those cases I've found an online tool which might be used to compress and minimise our code: HTML compressor.

CSS: change image background colour

Tweet

The trick we are going to see today is very basic, but it has many possible implications. It depends on what you are really trying to do, however changing the background colour of an image can be very handy when we want to highlight a picture, or even sections of an image.
Let's see how it is done with just a line of CSS.

The image

The image we are going to highlight needs to have a transparent background. A gif could be what we need.
The only thing we should consider when choosing the right image is that the transparent part of it will be the part changing colour. Thus, if we want to highlight only a specific part of it, we should make only that part transparent. For example, we could make a star sparkle when the mouse gets over it; or we could emulate a shining effect on a polished metal button.

CSS: input text inside table cell without overflow

Tweet

If you ever worked with forms and tables together (and I believe you have at least once in your web developing career), you surely have found that input boxes width can be difficult to manage.
Presume you have a table and inside a <td> you have an input text box which should have a 100% width. The input box should stay inside the <td> and fill all the available space. However that doesn't happen, and the input box overflows the available space. Why?

Explanation

The reason is because you have set borders and paddings. Let me show you an example: your input box has a width set to 100%, a border of 1px each side and a padding of 2px each side. That means, the input box width will be:

100% + 2*(2px+1px) = 100% + 6px

Those extra 6 pixels are your trouble, and the input box will overflow by those 6px.

CSS: simple tooltips

Tweet

When navigating a web page, the user sometimes needs some help on words, links, images, or any other element displayed. Tooltips can be very useful, and I've already published a post about them.

While the mentioned article is explaining a jQuery solution, in the following example we are going to use just plain HTML and some CSS rules.

It will be a simple and straightforward solution, but an effective and efficient one as well.

Let's see how we can do it.

CSS: 3d text!

Tweet

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.

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.

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.