bioneural.net site preferences

Accessibility

Toggle width/ text size:

style

Default/Alternate

Suits visual impairment, mobile devices

Styling

Change the theme:

layout

Sorry, this option is not enabled

Link behaviour

Links with an icon are off-site:

links

Right-click any link to optionally open in a new window or tab


Tag archive for 'css'

 

Geo Mashup implementation guide

Geo Mashup is one of my favourite WordPress plug-ins (and no, that's not just because it adopted the Geotag Icon). It neatly integrates geographically-relevant blog posts with a custom Google Map displayed within your own site. The Maps API in turn allows those willing to dirty their hands with a little JavaScript the option to pull in geotagged content from external sources, including photos (e.g. from Flickr, Panoramio, Picasa Web Albums), content from other blogs (via GeoRSS feeds), and placemarks from Google Earth (uploaded KML/ KMZ files, even with network links). What follows is an implementation guide, sharing some usage tips and the code used on bioneural.net.
Continue reading 'Geo Mashup implementation guide'

 

Web developer widgets

Mac-based web developers may yet find a use for Dashboard. SeeSS is a CSS property reference detailing inheritance, CSS compliance, Safari support, possible and default values, examples, plus an informative description [screenshot]. PHP Function Reference provides offline access to the PHP manual, a cheat sheet, and an interactive date formatter [screenshot].

 

How to safely inject CSS3 using jQuery

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.
Continue reading 'How to safely inject CSS3 using jQuery'

 

Corners, gradients and shadows with jQuery

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.
Continue reading 'Corners, gradients and shadows with jQuery'

 

The best way to do corners and gradients

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!
Continue reading 'The best way to do corners and gradients'

 

IE6, italics, and overflow issues

Since I began revamping my site (mostly under-the-hood) at Xmas I've tracked down and eliminated a number of long-standing bugs. I'm now satisfied that my site renders acceptably using Firefox, Safari, IE6 and 7, and across both my primary and alternate styles. Thankfully the majority of bugs I've encountered have been well described and have had solutions documented. But it's matching your issue to the bug description that's the hard part. One particular IE6 bug took me a while to identify because it seemed so random: some pages were inexplicably wider than the fixed-width of 780px by 3px.
Continue reading 'IE6, italics, and overflow issues'