jQuery Smooth Scroll Howto – Code Sample & Demo

With the jQuery library, you can do a ton of cool things to make a webpage ‘live’. From colours to animations and other special effects, most things are possible. One of these neat things to do is smooth scrolling with jQuery. Ever wondered to see a code example in HTML, CSS and JavaScript for smooth … 

 

Add inner border to an image with CSS

To add an inner border to an image, you can add the following CSS code to your style.css file: img { outline: 1px solid white; outline-offset: -6px; } Change the offset and the outline colour to your liking. Add inner border to an image with CSS was last modified: March 7th, 2017 by Thomas

 

WebRTC in a Nutshell

In a world where almost everyone has a smartphone (or any other smart device, e.g. a smartwatch), the customer is spending an increasing amount of time online such as in the web browser or on mobile apps. Consumer-grade solutions for real-time audio-visual and textual communication are widely available and popular among audiences of all ages. Examples … 

 

Style every other element with CSS

Styling your webpages with CSS is mostly quite basic. Still, sometimes you may be looking for a more challenging task. One I hadn’t had before was styling every other element in CSS. So in essence, I wanted to add a styling to the even or odd elements that occurred in HTML. To exemplify this, let’s … 

 

Add falling snow to your website

It’s Christmas time: let’s make it snow! It’s this time of the year again: Christmas and New Year. Maybe you’ve seen on some sites that the website owner/designer has added a nice snow effect on their webpages. The snow overlay gives a nice, cosy feeling to the visitor. And you may have thought: how did … 

 

Syntaxhighlighter Evolved: add horizontal scrollbar

Plugin name: Syntaxhighlighter Evolved This is a great plugin to show code on your WordPress blog. It supports many languages and is easy to use and modify. However, if a line of code is too long, it will go to the next line instead of adding a horizontal scrollbar. The current situation is not pretty … 

 

CSS3 mouse cursor styles

Here is an overview of most CSS3 cursor styles that you might want to use in your web development applications. All modern browsers should work. Hover with your mouse over the boxes below to see a preview of the cursor style. cursor: alias; cursor: all-scroll; cursor: cell; cursor: col-resize; cursor: context-menu; cursor: copy; cursor: ew-resize; … 

 

Making a div element clickable in HTML

To make an element, for example a <div>, clickable in HTML, you can use the following code: We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable. Making … 

 

Add blur in CSS to text

To obtain a blurry text effect with CSS, simply apply a text shadow and make the color transparant. This should be your CSS: And this your HTML code: Ultimately, you should see something like this: Add blur in CSS to text was last modified: December 1st, 2014 by Thomas

 

Wrap text on line break with CSS

If you have a block of text and you want to display it with linebreaks, such as my public PGP Key, you can add the following style to that paragraph: So this: Becomes this: You might have to add some browser specific prefixes: Wrap text on line break with CSS was last modified: November 4th, …