Web Design

Tutorials and reference articles on simple and practical layouts and elements for your designs. We keep it simple and use mostly plain CSS and HTML, along with existing frameworks like Bootstrap.

colpick: a simple online color picker and schemer

Dont't have Photoshop and need a quick color? colpick color picker is an online color picker I developed recently aiming general users and designers. It allows to easily select a color the same way as in Photoshop, giving RGB, HEX and HSB color values. It serves a double purpose as it also helps me maintain the colpick jQuery plugin behind it. Some of its features aim web designers: RGB and HSL codes in CSS format for easy copy/pasting and basic color schemes: analogous, complementary, triad and square. It creates color schemes based on the currently selected color.

colpick

It also allows users to save up to ten colors (using a cookie) and has a list of color hexes used by famous brands (Facebook blue, Android green ...). Users may share the selected color using a short link.

It's main goal is to substitute Photoshop's picker when you don't have it and serve any other color picking need. Please consider adding it to favorites as it may be a handy resource. Any feedback will be appreciated.

Responsive CSS Circles

CSS circles are very easy to create using border-radius. In this article I share the common fixed-width code along with my responsive CSS circles, which may include text. The downside of all CSS circles is that they don't work on IE8 and below because of lack of support for border-radius. If looking for fixed-width or responsive circular buttons, take a look at CSS Round Buttons.

Fixed width CSS circles

Fixed width CSS circles are very easy to implement. Set border radius equal to 50% of the width of a square box:

Continue reading

CSS triangles made responsive

Fixed width CSS triangles can be created easily by specifying two transparent borders and a colored border to a zero width and zero height element. Creating variable width triangles for responsive designs is not straightforward because CSS accepts border widths in pixels only. I came accross this issue recently while working on making my jQuery color picker plugin responsive.

I came up with a simple solution that uses two divs or one div and a pseudo-element to create responsive CSS triangles. Both consist of a large fixed width triangle that is covered/uncovered according to width, effectively faking responsiveness. Partially covering/uncovering the triangle makes it keep its proportions.

Now, to the code. The following are up, down, right and left pointing CSS triangles. The code is presented for both the one and two div versions. The logic used is exactly the same for both. Using two divs makes these pure CSS triangles compatible with IE7, which does not support pseudo-elements. I set up a JSFiddle for playing around with the two-div triangles: jsfiddle.net/josedvq/xEGM4 and one div triangles: jsfiddle.net/josedvq/3HG6d.

Note: For the triangles to work properly box-sizing should be set to content-box (the CSS default). Add this rule to the triangle's class if necessary.

Up-pointing CSS triangles

The following triangle is set to take 25% of the width of its container. Resize it to see the triangle in action.

Continue reading

Enable Facebook comments Moderate button

Facebook comments Moderate button allows website administrators to control more precisely the comments written on their site. Facebook does a good job sorting comments by relevance but sometimes this is not enough. By enabling the button you also enable a "Moderator View" on the Comments plugin. This view just displays a checkbox next to every comment so you can hide several comments at once. The Moderate button appears at the bottom of every comment and displays three options:

Facebook comments Moderate button

Continue reading