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 →
HTML
HyperText Markup Language. This is what your browser reads and show to you right now. The most recent version is HTML5.
Make Google Calendar iFrame responsive
Google Calendar allows you to embed one or more calendars on the web using an HTML iFrame. This is a great solution to publish an agenda online since it allows you to quickly share your existing calendar online with just a copy and paste. Still, the output is an outdated iFrame of the Google Calendar Continue reading →
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 →
Adding a print option on your HTML page
Companies and individuals are doing great efforts to print less and “go green”. However, as a web developer, you may still want to add a print option on your website. Printing out a webpage is still often used on some types of website, so offering an easy to use button or link is a good Continue reading →
Enable AMP HTML on your website
AMP HTML is an initiative from Google to speed up page load times drastically. The idea is to only load the essential content of that page, while leaving the Javascript and other non-essential elements behind. AMP stands for Accelerated Mobile Pages. Google, on their official blog, themselves say the following about this project: We hope Continue reading →
Embed a Google Drive folder on your website
If you want to show a folder from Google Drive on your website or blog, you can use an iframe to accomplish this. First, get the public URL of the folder. This might light like this: https://drive.google.com/#folders/unX9VBU8x9m66rJdZv (not an actual link). That last bit is the folder ID: unX9VBU8x9m66rJdZv. The iframe HTML code is: List view This will 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 →
Set toolbar color in Chrome on Android
By using the theme-color meta tag, you set a toolbar color in Chrome on Android 5.0 and up. This color will then be used in the app drawer as well and by using a color, your website can stand out and be recognized immediately. Add the code, as found below, in your <head> of your Continue reading →
Add a custom logo to WordPress’ wp-admin login page
The default image you find when you go to example.org/wp-admin is the WordPress logo. To change this is an image of your choice, let’s say the logo of your company, simply add the following code to your functions.php file which can be found in the wp-content/themes/your-theme directory. Of course, make sure that the /wp-admin/images/wordpress-logo.png file Continue reading →
Dynamic HTML5 meta tags for WordPress header.php file
WordPress dynamically generates the title of your pages, as well as other meta tags which are then displayed to your users as well as search engines. The number of meta tags is, however, limited. To add additional social meta tags to the default HTML5 page, such as Facebook’s Open Graph so search engines can better understand Continue reading →
HTML5 barebone index page
A barebone HTML5 index page which contain some common elements and meta tags to start with. HTML5 barebone index page was last modified: November 2nd, 2014 by Thomas