Web Design & Development Blog
RSS Feed
Subscribe to my
RSS feed
RSS

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more…

Posts for tag: downloads 11

Additional color palettes for the Mac OSX color picker

Mac OSX color palettes

Additional color palettes for Mac OSX

Following on form my previous article: How I created a set of Pantone swatches for the Mac OSX color picker, I have created some more additional Mac OSX color palettes.

The following palettes can be found on my resources page:

  • CSS Named Colors
  • TOYO Swatches
  • Focoltone Swatches
  • Trumatch Swatches

You can download them from the OSX Color Palettes section

Embedded Tweets kit – a design resource for Sketch.app

embedded tweets kit for sketch

Here’s another free resource for all those web designers that are using Sketch (and frankly I can’t imagine going back to Photoshop!). It’s a kit for embedded Tweets with samples: a standard text only Tweet and a Tweet with an image.

So if you’re working on a design for a site that will use embedded Tweets, just drag the appropriate Tweet in to your design and edit it to suit.

You can download the Embedded Tweets kit for Sketch from my Resources page.

Create your own .SVG graphics with the new SVGedit Safari Extension

SVGedit Safari Extension icon

The SVGedit Safari Extension works like a mini vector drawing app, enabling you to create and save SVG (scaleable vector graphic) and PNG images. Once installed it puts a small pencil icon on the main Safari toolbar. Clicking the icon opens the SVG-edit application which has most of the familiar vector app tools and features. From here you can design your graphics, and save them as SVG of PNG.

The SVGedit Safari Extension

The SVGedit Safari Extension has been created using SVG-edit v1.5.2. You can download it now from my Software page →

Cross Browser Pure CSS3 Button Demo

I’ve been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).

They have been tested using Safari 5, Firefox 5, Chrome 12 and Opera 11.5 on the Mac. Sorry if you’re using any form of Internet Explorer, but as it doesn’t have support for some of the CSS3 properties involved I haven’t bothered even trying to see how they render.

You can see the full demo here →

1 My first creation is a transparent button using subtle gradients and box shadows. Basically it’s a pure CSS3 emulation of some buttons that appear on the Apple site. The original buttons use .png graphics to create the effect.

Transparent CSS3 Button


a.transparent:link, a.transparent:visited {
	color: #fff;
	padding: 20px 40px;
	border-style: none;
	background-color: rgba(0,0,0,0);
	font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
}

a.transparent:hover {
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

a.transparent:active {
	background: rgba(0,0,0,.3);
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}

2 In a previous post I showed how to create a 3D text effect using CSS text shadows. The lettering appears to stand up from a flat surface. I started with this effect, and added a glow to the hover state and made the text shift down for the active state.

CSS3 3D Text Buttons


a.text:link, a.text:visited {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 60px/60px 'ChunkFiveRegular';
	display: inline-block;
}

a.text:hover {
	text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

a.text:active {
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
	margin-top: 4px;
	line-height: 56px;
	color: #dcdcdc;
}

3 The next set of buttons is an exact copy of the .png buttons that I designed when I coded this blog, except that obviously this time no images whatsoever are envolved. The buttons are created entirely with CSS3.

CSS3 Blog Pager Buttons


a.pager1:link, a.pager1:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	margin-right: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 13px 0 0 13px;
	-webkit-border-radius: 13px 0 0 13px;
	border-radius: 13px 0 0 13px;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager2:link, a.pager2:visited {
	font: 14px/26px MisoRegular;
	letter-spacing: 1px;
	text-shadow: #1C9328 0 -1px 0;
	color: #fff;
	background-color: #444;
	display: inline-block;
	padding-right: 15px;
	padding-left: 15px;
	-moz-border-radius: 0 13px 13px 0;
	-webkit-border-radius: 0 13px 13px 0;
	border-radius: 0 13px 13px 0;
	background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
	background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
	background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
	
	-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
	box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}

a.pager1:hover, a.pager2:hover {
	line-height: 22px;
	padding-right: 13px;
	padding-left: 13px;
	border: 2px solid #9433FF;
	background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
	background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
	text-shadow: #37197e 0 -1px 0;
}

a.pager1:active, a.pager2:active {
	line-height: 26px;
	padding-right: 15px;
	padding-left: 15px;
	border-style: none;
	background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
	background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
	background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}

4 And finally – well, who can resist a big red button!

CSS3 Big Red Button!


a.round:link, a.round:visited {
	width: 140px;
	color: #fff;
	font: 28px/30px LeagueGothicRegular;
	text-transform: uppercase;
	text-shadow: #6f0909 0 -1px 1px;
	border: 1px solid #6F0909;
	display: inline-block;
	padding-top: 40px;
	padding-bottom: 40px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px;
	-moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
	background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	transform: rotate(-12deg);
}

a.round:hover {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
	-moz-transform: rotate(0deg);
	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transform: rotate(0deg);
	-o-transition: -o-transform 0.3s ease-out;
}

a.round:active {
	-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
	background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
	background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

You can see a working demo of all the buttons here: Cross browser pure CSS3 buttons →

If you liked this article and the demo, you may be interested in my other CSS demos:

3 cool new Safari Extensions

Announcing 3 new extensions for the Safari web browser!

Search All Safari Extension

1) Search All.

This extension installs a new toolbar to your browser from where you can search up to 15 sites simultaneously from 1 search box. By default the extension comes configured to search the following sites:

  • Google
  • Google Images
  • YouTube
  • Yahoo
  • Bing
  • Wikipedia
  • Facebook
  • Twitter

Each site can be searched individually or, by clicking on the “Search All” button, you can search all at once.

The extension is also highly configurable: want to search stackoverflow.com?* Open the Search All preferences and add it to the list! You can also control exactly which sites to include in the “Search All” results.

Preferences for the Search All extension

* in this case, the site url would be: stackoverflow.com & the query string would be: /search?q=


Typesetter Safari Extension

2) Typesetter.

This is a fairly simple extension. You may have noticed that the standard Safari text rendering tends to result in ‘fat’ looking text. This is especially noticeable when the text is light on a dark background. In some cases it can be difficult to distinguish between bold and normal font weights.

The Typesetter extension resolves this problem by enabling -webkit-font-smoothing. As well as improving the font rendering, the Typesetter extension also enables advanced typographic features such as ligatures.

Preferences for the Typesetter extension


Web Radio Safari Extension

3) Web Radio.

This extension adds a toolbar for accessing your favourite internet radio stations. The ‘radio’ can hold up to 5 stations which cab be configured by entering the URL and station name in to the preferences panel. The rest is pretty intuitive.

‘Out of the box’ it comes pre-configured to the following stations:

  • Planet Rock
  • Absolute Classic Rock
  • Jazz FM
  • Classic FM
  • BBC World Service

Preferences for the Web Radio extension

And finally – I’ve moved all my Safari Extensions to a sub-domain so here’s the place to get them: http://safariextensions.midwinter.dg.com/

Download Safari Extensions

Button Bar: a new Safari Extension

Button Bar Icon

Button Bar is a new Safari Extension that allows you to create a second Bookmarks bar to store important links. Once installed, the Button Bar is displayed or hidden by toggling the button on the main Safari toolbar. You can add links to the Button Bar by opening Safari Preferences (cmd+,) and selecting the extension preferences.

Button Bar Safari Extension

From the Button Bar preferences, you are also able to customize the look of the Button Bar. By default, the style is in keeping with the Safari interface but there are also ‘dark’ & ‘light’ styles, and you are able to specify whether you want the buttons centered, or aligned left or right.

Button Bar Styles

New QR Code Generator Icon

Whilst working on this new extension, I also took the time to update my popular QR Code Generator extension. This has been updated to include similar features: the extension now features a toolbar for generating the QR Codes, and the main toolbar button toggles the status of the QR Code toolbar.

QR Code Generator Safari Extension

You can still change the Character Encoding of the generated codes from the preferences pane, and I have also added options for changing the overall look of the toolbar:

QR Code Generator Styles

You can get both the Button Bar Extension and the QR Code Generator Extension from my downloads page.

(Added 19-3-2011) I have updated the Button Bar Extension (v.1.1) to include coloured ‘labels’ that can be added to any button.

Button Bar Safari Extension

New Google Chrome version of the QR Code Generator extension

Chrome Extension - QR Code Generator

Back in February I created a Safari Extension to generate QR codes from the current URL. I’ve just completed coding an alternate version for Google’s Chrome Browser.

When installed, the extension creates a new button on the browser toolbar. Clicking the button will open a popup containing a QR barcode generated from the URL of the current open tab. The barcode can then be scanned by any compatible device.

Chrome Extension - QR Code Generator

You can get the QR Code Extension for Google Chrome from my downloads page

Introducing Text Tools – a simple text manipulating Plugin for Coda on the Mac

Coda Plugin - Text Tools

I recently released my first Plugin for Coda (Un-Encode Entities), now follow on from that I have created another: Text Tools.

The Text Tools Plugin for Coda adds several options for quickly manipulating text in your html / php / javascript etc… files. The options it adds are as follows:

  • Convert to UPPERCASE
  • Convert to lowercase
  • Convert to Caps Case
  • Newline to <br />
  • Add Slashes to Quotes
  • Strip Slashes from Quotes

Text Tools Plugin for Coda

You can download the Text Tools Plugin from my Downloads page. (Requires Coda for Mac OSX).

Un-Encode Entities: a plugin for Coda

Coda Plugin - Un-Encode Entities

I’ve been using Coda on the Mac since it first came out (2007 I think), and well, I’ve just discovered how simple it is to create plugins using nothing more complicated than PHP. So here it is: Un-Encode Entities, a Plugin for Coda.

It works like this. Basically if you have something like this:


&lt;blockquote&gt;&lt;p&gt;&#8220;Arte non &egrave; mai finita, &egrave; solo abbandonata&#8221;&lt;/p&gt;&lt;/blockquote&gt;

or this:


&#60;&#98;&#108;&#111;&#99;&#107;&#113;&#117;&#111;&#116;&#101;&#62;&#60;&#112;&#62;&#38;&#35;&#56;&#50;&#50;&#48;&#59;&#65;&#114;&#116;&#101;&#32;&#110;&#111;&#110;&#32;&#232;&#32;&#109;&#97;&#105;&#32;&#102;&#105;&#110;&#105;&#116;&#97;&#44;&#32;&#232;&#32;&#115;&#111;&#108;&#111;&#32;&#97;&#98;&#98;&#97;&#110;&#100;&#111;&#110;&#97;&#116;&#97;&#38;&#35;&#56;&#50;&#50;&#49;&#59;&#60;&#47;&#112;&#62;&#60;&#47;&#98;&#108;&#111;&#99;&#107;&#113;&#117;&#111;&#116;&#101;&#62;

Then the Un-Encode Entities plugin will convert it to this:


<blockquote><p>&#8220;Arte non è mai finita, è solo abbandonata&#8221;</p></blockquote>

You can download it here: Un-Encode Entities for Coda. (Requires Coda for Mac OSX).

New Safari Extension – QR Code Generator

Safari Extension - QR Code Generator

Following on from yesterday’s QR Code generating widget…
…I’ve just completed a Safari Extension for generating QR Codes.

The Extension works simply by adding a new button to the Safari toolbar. Clicking the button will generate a new tab containing the QR Code. By opening the Safari Preferences pane and selecting ‘Extensions’, then ‘QR Code Generator’ you can select what size you would like generated QR codes to be.

Safari Extension - QR Code Generator preferences

3 New Dashboard Widgets for 2011

I’ve just completed 3 new dashboard widgets for Mac OS X. In addition to my previous 5 widgets (which you can find on my downloads page), I have now completed ‘Terremoti in Italia’, ‘UK Earthquake Monitor’ & ‘NASA Video Podcast Viewer’.

3 New Dashboard Widgets

‘Terremoti in Italia’ & ‘UK Earthquake Monitor’ both chart seismic activity in Italy & UK respectively, & ‘Nasa Video Podcast Viewer’ allows you to browse and view all 12 of NASA’s video podcast feeds in one widget!

HOME