Guymon » layout

Fancy Scrolling

admin — Thu, 15 Sep 2011 09:34:51 +0000

Chris Coyier hat einige sehr schicke Beispiele zusammengetragen für Webseiten die “Fancy Scrolling” einsetzen. activatedrinks.com und artofflightmovie.com fand ich sehr nett.

Possibly related posts (automatically generated)

Fold Out Popups

admin — Fri, 02 Sep 2011 11:42:19 +0000

Das ist auch mal ein schicker Effekt für moderne Browser.

The trick with using hidden checkboxes/radio buttons, the :checked pseudo class selector, and adjacent sibling (~) combinators really enables some neat functional possibility with pure CSS1.
Let’s exploit it again to build “fold out popups”. That is, links/buttons you can click to reveal tooltip-like rich HTML popup content.

Possibly related posts (automatically generated)

CSS3 Flexible Box Model

admin — Fri, 08 Jul 2011 12:53:36 +0000

Peter Gasston erklärt das Flexible Box Model.

I should reiterate that much of what is possible with Flex Box can already be achieved with existing CSS properties such as float, margin and position. The difference is that Flex Box has been created with the express intent of laying out web pages so it makes that task much, much easier.

Here’s a quick summary of what it does: equally distributes space between elements without the need for you to make complex calculations; enables you to make equal-height columns and to vertically align elements within their parent; enables you to change the order in which elements are displayed, regardless of their order in the DOM tree; removes the need to use the float property for layouts. In short, it enables you to do all of the stuff that you’ve had to hack around in the past. Sounds perfect!

Leider mangels Support im IE zur Zeit nur eingeschränkt nutzbar.

Possibly related posts (automatically generated)

Liquid CSS Vorlagen

admin — Mon, 27 Jun 2011 09:58:35 +0000

Wer zu faul ist sich seine Liquid CSS Layouts selbst zu bauen, oder einfach schnell ein CSS Grundgerüst braucht wird bei Devlounge fündig.

Not everyone is busy daily with CSS, which makes it understandable you don’t know CSS layout structure and code by memory. It’s good to have some good sources providing ready basic code to get started on a new website. The pro of using these layout is that they are already tested and bug free.

If you like fluid layouts and have difficulty with or no time for the math, ‘The Perfect 3 Column Liquid Layout (Percentage widths)’ is the right solution for you. Ethan Marcotte has a chapter in Handcrafted CSS dedicated to fluid layouts, if you have the book it is a good source to learn the math behind fluid layouts.

Possibly related posts (automatically generated)

Elastic Grid Layouts

admin — Mon, 20 Jun 2011 08:50:10 +0000

Steven Bradley erklärt Elastic CSS Layouts und die Unterschiede zu Fluid Layouts.

Developing flexible layouts with relative measurements should be a goal for web design as the format in which our designs live (the browser) will always be flexible.

Those measurements can be relative to the browser, which I’ve defined as fluid layouts or relative to something internal to the design, which I’ve defined as elastic layouts.

It’s quite simple to move from a fluid layout to an elastic one. All it takes is changing the measurement of the outermost container from % to ‘em.’ Everything inside that container will then be relative to the design instead of the browser window. Inner containers can continue to be measured in %..

Possibly related posts (automatically generated)

Fluid Images

admin — Wed, 08 Jun 2011 21:00:13 +0000

Auf A List Apart gibt es einen Auszug aus dem Buch Responsive Web Design der sich mit Fluid Images bechäftigt.

First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container.

Ich denke das Buch werde ich mir anschaffen, klingt spannend.

Possibly related posts (automatically generated)

CSS Layout Patterns

admin — Mon, 02 May 2011 07:54:11 +0000

Steven Bradley bespricht die Vor- und Nachteile unterschiedlicher CSS Layout Ansätze:

The next website you develop will likely be one of the 6 types we’ve been discussing these last couple of posts. Each layout has its strengths and weaknesses and it makes sense to learn how to code for each type.

Fixed Width — least expensive, simplest to develop, most control over visual design

Fluid/Liquid — Most flexible, everything relative to browser window (external to design)

Elastic — Flexible, everything relative to part of the design, usually font size (internal to design)

Hybrid — Can be both flexible and static. Different hybrid layouts can lean toward either.

Responsive — Best when site needs to work well across a range of known devices, browsers, etc.

Fliud/Elastic Grids — Offers a way to maintain order inside a flexible container.

Possibly related posts (automatically generated)

daily links

admin — Thu, 24 Mar 2011 17:11:33 +0000

Panels 3: Creating a custom layout in your theme | drupal.org
A panel layout is a layout that can be used by the Panels module. You can add content to defined content areas within a panel. The Panels module comes with several layouts, but you can also create your own for your own module or theme. Here we will create a layout for a theme.
TYPO3 - the Enterprise Open Source CMS: Repository
Provides a shared version of the jQuery Javascript framework for use in other extensions. See class.tx_t3jquery.php for API and usage. Includes BE module for configuring which parts of jQuery UI you want included.
Extension TypoScript Templates – Video Tutorial | TYPO3 Blogger
Organisation ist das halbe Leben – dies gilt auch für TYPO3-Homepages. Für mich als Anfänger war es schwer zu verstehen, meine TypoScript-Datensätze (TypoScript Extensions Templates) zu organisieren. In diesem Video zeige ich Anfängern kurz (ca. 12 Minuten^^) wie es im TYPO3 Introduction Package gelöst wurde
jPlayer : HTML5 Audio & Video for jQuery
jPlayer is a jQuery plugin that allows you to:

_play and control media files in your webpage

_create and style a media player using just HTML and CSS

_add audio and video to your jQuery projects

_support more devices using HTML5

_support older browsers using a Flash Fallback

_control media on your website using a JavaScript API
heyday/Geared-Scrolling - GitHub
Basically, we wanted a way to prolong the visibility of certain columns in a 3-column layout.

We thought - how about we do some funky proportional scrolling that slows the scrolling of shorter columns so that, as a user scrolls down the page, the columns will line up along the baseline of the tallest column… if this makes no sense it’s probably better you check it out in action: http://downtothewire.co.nz/ - sorry, our implmentation is for Webkit browsers only

Possibly related posts (automatically generated)

Google Maps Background

admin — Thu, 17 Mar 2011 08:25:51 +0000

Eine Google Map als Hintergrund, nette Idee.

Hier gibt es das Blogposting dazu.

I gave the id “map_canvas” the inline style of absolute positioning with its top/right/left/bottom parameters all set to 0 and then also the z-index to 0. It IS necessary to position it in the BODY element as the VERY LAST element before the close body tag.

Possibly related posts (automatically generated)

jQUery: Contextual Slideout

admin — Thu, 10 Mar 2011 08:56:56 +0000

Martin Angelov erklärt wie die CS5 Produkt Seiten von Adobe, sehr schick by the way, realisiert werden können.

The slideouts are ideal for presenting only the highlights of a product, with the details neatly hidden away. You can easily incorporate images, videos, or any other rich multimedia content, to create a unique experience for your visitors.