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 Continue reading →
CSS
CSS, short for Cascading Style Sheets. A CSS file is used on websites to describe how a page looks to the end user. The latest version of CSS is currently CSS3. It is the World Wide Web Consortium (W3C) that defined this standard. Blogposts that have the CSS tag added to it, are often about small code snippets that can be easily copied and modified.
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 Continue reading →
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 Continue reading →
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 Continue reading →
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 Continue reading →
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; Continue reading →
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 Continue reading →
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
Add a fade out effect to the bottom of a webpage (HTML/CSS)
Add a fade out effect to a webpage. You can use this to fade text, for example. However, this example will add a fade out effect to the whole page. This example does work on mobile as well (such as Chrome on Android) and is pure CSS code, so no images are used to reduce Continue reading →
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, Continue reading →