Dreamdealer.nl RSS feed

Behind the scenes: CSS-only Clock

I like to create little experiments on Codepen.io and I get a lot of questions about how I made certain elements or effects. In a series of "behind the scenes" I try to dissect a few interesting pens. In this first episode I'll show you how I made the CSS-only clock with the single element clock face.

Intelligent image cropping with focal point

Responsive images are new and there's no actual accepted implementation yet. There are numerous projects that try to fill this void, but the all lack something. Now there is a new project called Focal Point that allows you to intelligently crop images in responsive designs.

image-rendering: pixelated

A very insignificant addition to the CSS specs is the new image-rendering property. It defines how scaled images should be handled by the browser.

Don't forget about inherit

An often forgotten, but so powerfull value in CSS is the "inherit" value. Learn to use this value and save a lot of time, bytes and irritation!

Are you still using PX for font sizing?

Ah yes, the same old font sizing issue... PX or EM, support Internet Explorer or not, blablabla. But if you, like me, have always ignored this debate a little, you might wonder what the fuss was all about. Let me remind you what were the pro's and con's of using PX or EM, and what solves all your problems (well, the font size ones).

The amazing Shadow DOM

Today I watched this talk by Angelina Fabbro about the Shadow DOM. I think this new functionality is something that will be available quite soon in the major browsers because it is something we developers really want and I guess it will get really popular when the word gets around.

Positioning an element relative to another element

Using position absolute can be a little scary, because positioning elements to the viewport is quite random due to the various viewport sizes.

Point the streetview camera to a marker

If you add a Google Streetview element to your page and set it to a certain location it often had not got the right heading and "looks" somewhere else. The visitors of your page have to rotate the view to look at the object you want to show them. There is a function in the API to put streetview on a certain location and let it look towards a marker.

New interactive demo's

I've added some awesome new functionality to this website which enables me to make inline interactive demo's.

Localstorage vs. Cookies vs. The law

I guess you know a thing or two about internet, so I don't bother to explain what cookies are. Localstorage though is something not everybody is familiar with. Localstorage is a way to store data on the clients computer. Yes, that's also what cookies do. But they are different and serve different purposes.

Connecting a 1602A LCD display and a light sensor to Arduino UNO

This tutorial shows how to connect the 1602A LCD display and a light sensor to your Arduino (UNO) and display the light intensity on the screen.

Using geolocation to automatically generate a route and directions in Google Maps

In this tutorial we will create a google map with directions that use your current location as starting point on mobile devices (or other devices that support geolocation).

Pure CSS Chrome Logo

And there's another pure CSS logo. Now I found a challenge in the Chrome logo. The challenge was in the shading and overlapping of the three colored parts in the logo.

CSS only version of the NBC logo

And another adition to the CSS logo gallery with the NBC logo in pure CSS. This version has a little twist. Open the demo and hover over the logo with your mouse!

CSS only DC Shoes logo

I like recreating famous logo's in pure CSS with a minimum of HTML elements used. This time I decided to take on the DC logo.

Pure CSS Nissan logo

Next in the series of car logo's is the Nissan logo.

Pure CSS Toyota logo

It has been a while since I created my last CSS-only logo recreation, but here's another one. Now it's the Toyota logo.

Adding travel modes and waypoints to Google Maps directions

In earlier tutorials we've learned how to add google maps with directions to your site and how to add a custom marker icon and in this tutorial we'll learn how to add buttons to switch between all available travel modes (driving, bicycling, public transportation and walking).

How to create a bottle cap border

In this supershort tutorial we'll learn how to create a so-called bottle cap border in Illustrator.

Creating a layout with fluid and fixed columns

This sample shows you how to create a three-column layout with one fluid column and two fixed width columns.

How to create 3D links rolling on hover

This article shows you how to make a nice 3D rolling link effect.

Why does parseInt('08') return 0 in Javascript?

When passing a value padded with a 0, mostly when working with time, the Javascript parseInt() function returns 0 when the value is higher than 07.

How to: format dates in PHP

This short how-to shows you how to format dates in PHP

How to get SCSS and LESS files to open in Dreamweaver

Dreamweaver doesn't recognize .SCSS (sass) and .LESS files and if you get it to open the file it doesn't highlight the code. Syntax highlighting is very desirable when working in stylesheets. You can enable this in a few easy steps.

Create an awesome Facebook timeline cover

This tutorial teaches you how to create an awesome Facebook timeline cover. Or header. Or banner. Or whatever you want to call it. Free PSD template included!

Javascript Performance Tips and Tricks

A few conclusions on javascript performance optimization from the slides of Thomas Fuchs' presentation at jsconf in 2009.

Placing multiple markers on a Google Map

In the other two tutorials we've learned how to create a map with directions and a map with a custom marker on it and in this tutorial we'll learn how to put multiple markers on your map. With info window popups!

Faux Font Outline

This is al little trick I discovered when trying to replicate a border/outline effect around a custom font.

Call for action on vendor prefixes!

Now that we have gotten to the point that we are almost rid of all the problems caused by IE6, we are about to go back to square one. Vendor prefixes, a necessary evil, seem to cause IE6-like-problems. We frontend developers have to stand up and do something!

Collapsing Margins

Part of the CSS Box Model is the concept of collapsing margins. Where the box model concept might be a bit hard to grasp, collapsing margins are even more difficult. This article explains what it is and why.

Frontend Certification

Quite some time ago the Dutch association for Frontend Developers started working on certification. Then it went dark, as all the volunteers had too much other stuff to do. That is, until last autumn. During the last Fronteers conference some members signed up as volunteers. As I have some time on my hands now we have decided to get things started again.

Custom marker icons using the Google Maps API

How to create a custom marker icon with the new V3 of the Google Maps API.

The awesome internet (week 48)

This week: stitched text effect, angry clients, oil spills, selecting countries, typography, more typography and advent calendars!

The awesome internet (week 46)

I've skipped one week because I had a very nasty flu, but The Awesome Internet is back with another roundup of coolness!

One minute 3D flag

In Photoshop it is really easy to create a realistic looking flag that's flowing in the wind. This only takes one minute!

The awesome internet (week 44)

This week's The Awesome Internet is about CSS3 (what else), money, charting, HTML5 gaming, the CSSWG, Chris Coyier and cheatsheets.

The awesome internet (week 43)

Another roundup of the most awesome stuff on the internet. Naked day, new zealand, CSS specifity, local storage, optimizing CSS code, etc.

CSS3 calc(), min() and max() functions

One of the most awesome new features of the CSS3 spec is the calc() function. Currently only supported by Firefox and IE9 but on its way to become part of the spec.

The awesome internet (week 42)

Second week of the awesome internet roundup. This week Adobe's expressive web, regular expressions, typefaces, funnies, twitter stats, wacom, the jwerty plugin, css1k and social media policies.

Free CSS3 iPhone icon

With no apparent reason I created these iPhone icons in pure CSS with no extra markup. Crab the code and do something cool with them!

The awesome internet (week 41)

From today on I will post a list of the most awesome stuff I come across every week. You can see this as a weekly chart of the best of the internet, seen from the eyes of a webdeveloper.

CSS terms poster

I created a handy cheatsheet poster for CSS terms so you don't emberace yourself again when you speak about CSS.

Kern Type, the kerning game

I normally don't do this, but this little game is só awesome I have to post it!

Why is the logo of this site still an image?

Somebody must have been wondering why the logo at the top of this page is still a simple PNG image while I recreate the Apple and Android logo with pure CSS...

Google releases Dart

Today on the 11th of October 2011, Google released Dart, its new "Structured Web Programming" language. It's been said it is Google's aim to replace JavaScript with Dart as the main built-in prgramming language of browsers.

Proper scrollbar page shift fix

You've probably heard this many times in calls with clients: "My page shifts 15 pixels to the left when I go from this page to that page" and there are a few fixes, but this one from HTML5 boilerplate is the best.

Smooth scrolling back-to-top link

With jQuery it's very easy to create a smooth scrolling back-to-top button on your website.

Using the data attribute as content in CSS

Today CSS master Joshua Hibbert pointed out to me that it's possible to use values from data attributes as value in CSS content.

Special characters in CSS :before and :after pseudo-classes

Using special characters in CSS pseudo-classes like ::before and ::after can be quite tricky if you don't know what's the catch.

Apple logo in 100% pure CSS

After creating the android logo in CSS only, I decided to skip a few diffeculty levels and try to create the Apple logo in CSS only, using as less DIV's as possible.

Android robot in 100% pure CSS

The Android robot is a cool logo made of fairly simple shapes. My challenge was to recreate the logo with pure CSS and as less HTML as possible.

HTML5 boilerplate title effect

When looking into HTML5 boilerplate I got distracted by the headings they use on the website and I decided to recreate this effect.

Kings of Code 2011

Last saturday and sunday me and three colleagues competed in the prestigious Kings of Code hackbattle in Amsterdam.

CSS only rainbow

When discovering the spread parameter of box-shadow, I concluded that it's now possible to stack as many "borders" to elements as you like.

Rotating 3D CSS cube

When exploring the CSS3 transform- and transition possibilities, I created these rotating cubes. With plain color, semi-transparent and one with textures. Only one image is used as texture for the crate, but the rest is pure CSS!

CSS only progress bar

This progressbar is created using CSS3 with no images. This was a testcase to learn working with gradients as background-images. Firefox and chrome only!

Changing the text selection color with CSS3

Changing the appearance of selected text is mostly a nice-to-have, but sometimes even necessary to imprive legibility.

Creating alternating rows in ColdFusion

One of those things that could be very complex or very easy is creating zebra-striped alternating rows in a table or list. In ColdFusion this is quite easy to achieve. No counters and lengthy if-statements, just one small line of code!

Pure CSS only loading animation

Inspired by a post on Forrst, showing a simple animation of three dots dancing on a line, which can be used for a loading animation. I took things a bit further and created a more fancy loading animation!

Pure CSS ribbon effect

Another great effect of Joshua Hibbert. A pure CSS ribbon menu. Awesome!

Tucked Corners by Joshua N Hibbert

While browsing for inspiration I stumbled over this nice effect by Joshua N Hibbert.

25 usability tips for a user friendly website

Just a short list of important usability tips to create a user friendly website.

IE's hasLayout in short

There are many articles written on IE's hasLayout property, but I'd like to summarize a good article I found on this subject.

10 common PHP security mistakes

Security is an often overlooked part of PHP programming. So therefore, I present you the basics of PHP security: the ten most common PHP security mistakes.

10 essential tools and websites for frontend developers

In this article I will show you 10 tools and websites which are essential for a frontend developer to have and master.

How to get all possible values of an ENUM field

Sometimes it's a little overkill to create an extra table and connecting table to add a parameter to an object. An ENUM field comes in handy, but how about getting these values when setting the field?

Organizing your CSS

There is no such thing as a golden rule for organizing ones CSS file(s). In all the years of working as a frontend developer, I developed a organizing system that works for me. Maybe it works for you too?

CSS3 animations introduction

Maybe somebody noticed, but there are a few CSS3 animations used in this site. In this article a few samples of these transitions.

jQuery Accordion 'Object doesn't support this property or method' error in IE

Today we ran into an 'Object doesn't support this property or method.' error caused by an jQuery UI Accordion effect in a page. The error was vague and the IE Developer Tools Stack trace wasn't making thing clear either.

Using the HTML5 data attribute

HTML5 contains a new attribute wich can be used to store raw data in an element. This raw data isn't visible for the viewers of the page, but can be used by a JavaScript application, for example.

Getting quick user experience feedback with Usaura.com

Today I found out about this new website on www.usaura.com where you can quickly test designs for specific user experience questions...

Find all links without title attribute

To create good and usable sites, it's important to use a title attribute on all your links. When creating a site it's often forgotten, but with this regular expression you can easilly do it afterwards.

What does your customer actually want?

If you're a designer I bet you have talked to a customer once, thought you understood what he wants, created something very nice, but it turned out the customer didn't like it and wanted something completely different...

Fixed width or responsive design?

I took a look into my statistics to see where my visitors came from, but more important what devices they use, wich resolutions they prefer, etc. Maybe it's time to change some of the patterns I use for a few years now...

Update the order of multiple records in one query

I bet you have had this problem once before: a bunch of pages/documents/whatever with an order column in the DB that all needed to be updated when you changed the order with this nifty jQuery UI Sortable drag-n-drop script.

Placing form fields outside the form tag

I had had numerous encounters with the problem that I needed to place a form element outside a form, but still submit it within this form. In HTML 5 there now is a solution for this problem!

What dateformat should you use?

Programmers and other computer oriented people tend to use dateformats that aren't as clear or logic as we (the nerds) would think.

Speeding up your website with properly included scripts

Today I found out that the cufon I used in a project was slowing down the site. After a short google search i found the problem...

When should you use Cufon or @font-face?

This articles discusses the question when to use Cufón or @font-face.

Create a planner with directions using the Google Maps API

How to create a route planner with directions with the new V3 of the Google Maps API. It has never been so easy to create a planner on your own website! (updated 31 october 2011).

Make your website mobile friendly

In this tutorial you'll learn how to make your website mobile friendly with CSS media queries. This is called responsive webdesign or responsive webdevelopment.

Horizontal menu with CSS, part 1

Learn how to create a horizontal menu with CSS.

Relative and absolute positioning in CSS

Introduction in relative and absolute positioning in CSS.

CSS Box Model

Introduction to the CSS Box Model with examples.

MYSQL basic skills

In this tutorial you'll learn the basic skills to manage a MySQL database. Fetch a record from the database, display it, edit it and delete it.

Benchmark and optimize PHP script speed

Sometimes you create a script that can get slow for several reasons. In this tutorial you'll learn how to analyze what is slowing the script and foremost what you can do about it!

MySQL Join Tutorial

What are joins and how do you make them?

AJAX callbacks with jQuery

In this tutorial we will create an AJAX callback with the jQuery library. The sample is very easy, but you can make it as complicated as you like!

Textwrap in photoshop

Photoshop has the option to make textwrap around an image. In this tutorial you'll learn how to do this in a few easy steps!

Changing the backgroundcolor of the canvas in photoshop

There is an option in photoshop to change the color of your canvas. This can be very handy to create some contrast between the canvas and your image.

Burning a music CD in Nero

In this tutorial you'll learn how to burn a music CD with Nero.

Edit the 'places bar' in your open/save as dialogs

In this tutorials you'lll learn how to edit the so called 'places bar' in your open and save as dialog boxes. Change them in your own favorite folders in Windows Vista and older versions of Windows.

Glowing curves in Photoshop

Learn how to make those nice glowing curves with Adobe Photoshop in a few minutes!

Resizing photo's in Windows XP

Windows created a nifty little programm for Windows XP for you to resize images in a few clicks.

Creating great shadows in Photoshop

This is a tutorial on creating great shadows in Photoshop

The techno effect

Learn how to make this great techno-effect in photoshop

The Cool text effect

Learn how to make a cool text effect with photoshop

Adding color to a black & white photo

In this tutorial you'll learn how to add color to a black and white photo. For example a black and white face with red lips or a coloured tie.

Graffiti with Photoshop

Your own logo on any random wall in just 8 easy steps! No knowledge of photoshop required!

Javascript windows

In this tutorial you'll learn how to use Javascript windows. Asking a name with a Promptbox, asking a question with Confirmboxes en ginving an alert with an Alertbox.

Repeatedly copy and transform a selection in Photoshop

In this tutorial you'll learn how to repeatedly copy and transform a selection in Photoshop. You can use this to create the dashes in a clock for example.

Pimp your text with photoshop

In this tutorial, you'll learn how to pimp your text with Photoshop, in a few easy steps!

How to create a WEB 2.0 style logo

In this tutorial, you'll learn how to create a fancy WEB 2.0 style logo.

WEB 2.0 Style Buttons

In this tutorial you learn how to make those nice WEB 2.0 style buttons.

What's up with all the colors?

Since Carlos Gallupa sponsored me some webspace and unlimited datatraffic, i was finally able to upgrade my website and try to get the best out of it.