Ubelly » css3 http://www.ubelly.com Wed, 08 Feb 2012 11:50:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 dConstruct and Responsive Design http://www.ubelly.com/2011/09/dconstruct-and-responsive-design/ http://www.ubelly.com/2011/09/dconstruct-and-responsive-design/#comments Thu, 01 Sep 2011 08:22:44 +0000 Luke http://www.ubelly.com/?p=10687 dconstructWe’re heading down to Brighton for dConstruct this Friday and we’re rather excited (more details on what we’re doing down Continue Reading]]> dconstruct

We’re heading down to Brighton for dConstruct this Friday and we’re rather excited (more details on what we’re doing down there are over here). We’ve got a stall, a sketch artist and two bloggers heading along to cover the event. However, we’ve been spending a fair amount of time on the dConstruct 2011 site over the last couple of days and absolutely love their implementation of responsive design for this year’s event, which was designed by Paul Lloyd from Clearleft and Fontdeck.

We’ve had a dive into the code and the techniques they use are rather simple, yet brilliantly effective. Basically, they all hinge on three basic principles:

Images as percentages

On a very basic level, each of the images contained within the speaker-lineup section (the area on the left) are scalable thanks to percentage widths. That is, the overall area is tagged as a section, with <a> tags, and <img> tags within like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<article class="speaker-lineup">
    <a href="#link">
        <img src="#image" alt=" " />
    </a>
    <a href="#link">
        <img src="#image" alt=" " />
    </a>
    <a href="#link">
        <img src="#image" alt=" " />
    </a>
    <a href="#link">
        <img src="#image" alt=" " />
    </a>
    <a href="#link">
        <img src="#image" alt=" " />
    </a>
</section>

What this does is makes it easy for the images to scale within their section. As the screen reduces in size, the images resize in proportion. This is fairly basic in terms of responsive design, and is one of the first steps with working with images. However, once the screen gets down to a certain size, you’re going to want to reposition your elements, as opposed to just resizing them. That’s where @media queries step in…

@media queries

The next step to making the design responsive is to reposition elements based on how big the screen is. This is done easily through the @media queries in CSS. The interesting thing that the dConstruct guys have done is to not target different devices, but just different screen sizes, which works well for the site and doesn’t result in a ridiculous amount of code depending on whether the user is using a screen, a mobile device, a tablet or futuristic projector glasses.

Basically, the relevant css, with regards to the different sections, are placed within @media queries like such:

1
2
3
4
5
6
7
8
@media all and (max-width: 60em) {
    .speaker-lineup {
            width: 50%;
    }
    .other-section {
        width: 50%;
    }
}

which takes the width of the page, and resizes the relevant sections to accommodate. Simple yet effective. However, the thing that got my heart racing (maybe I’m a little over-excited) was the way that the images stack when you resize in a stacked, pyramid fashion…

nth-child selector

I haven’t been playing with responsive design for long, so I haven’t come across nth-child selectors all that often. In a nutshell, the nth-child selector within css is a tool that uses a simple formula to target particular instances within your html (if you want to read more about it then look at Chris Coyier’s brilliant article here). Within this you can target certain instances of an <a> element, for example, to resize them all appropriately. In the case of the dConstruct site, the markup looks like this:

1
2
3
4
5
6
7
8
9
10
11
@media all and (max-width: 30em) {
   
    .speaker-lineup a:nth-child(1n+0) {
        width: 50%;
    }
    .speaker-lineup a:nth-child(1n+3) {
        width: 33.3333%;
    }
    .speaker-lineup a:nth-child(1n+6) {
        width: 25%;
}

What’s happening here is that it’s selecting the first two (1n+0) and sizing them at 50% so they sit alongside nicely. It then takes the next three (1n+3) and sizes them at 33.3333% to sit three alongside, and finally the next 4 (1n+6) and sizes them at 25%.

This is all rather easy, but when put in to practice you can create some really nice fluid designs. That, coupled with the lovely mobile-like icons for navigation once you go below a certain display size. Anything else we’ve missed? Let us know in the comments and see you at dConstruct!

If you want to find out more about Responsive design then check out Responsive Web Design on A List Apart and Hardboiled CSS3 media queries by Andy Clarke

]]> http://www.ubelly.com/2011/09/dconstruct-and-responsive-design/feed/ 0 CSS3 Media Queries Explained http://www.ubelly.com/2011/04/css3-media-queries-explained/ http://www.ubelly.com/2011/04/css3-media-queries-explained/#comments Wed, 27 Apr 2011 13:52:39 +0000 Spooner http://www.ubelly.com/?p=7658 Colly.comCSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the Continue Reading]]> Colly.com

CSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the device that is viewing your site. In this 25 minute talk about ‘responsive design’, Thomas Lewis (@tommylee on Twitter) explains why CSS3 Media Queries are important, how they work and how you can implement them today to create better websites.

Nice to see Mr.Simon Collison (@colly) get a name check for excellent responsive design on colly.com:Colly.com

So if you want to know how to make your website respond to the size of the screen that is viewing it, you’ll learn how in this talk. You can make your websites automatically scale and re-display depending on the size of the screen on the viewing device and even using clever CSS tricks to change the content that is being presented to the viewer.

You can download this video on the session page: http://channel9.msdn.com/Events/MIX/MIX11/HTM09

]]> http://www.ubelly.com/2011/04/css3-media-queries-explained/feed/ 2 PHPUK 2011 Resources http://www.ubelly.com/2011/02/phpuk-2011-resources/ http://www.ubelly.com/2011/02/phpuk-2011-resources/#comments Fri, 25 Feb 2011 08:51:47 +0000 Luke http://www.ubelly.com/?p=6493 phpukAs we’re down at PHPUK 2011, we thought we’d save you the trouble of gathering resources! From slide decks, to Continue Reading]]> phpuk

As we’re down at PHPUK 2011, we thought we’d save you the trouble of gathering resources! From slide decks, to links and books mentioned in the talks, we’ll gather it all and place it in one handy location. If you don’t want to remember the link to get here, just drop by the Microsoft/UBelly.com stall and pick up a card, which not only has the resources link, but also the link for you to get 2 months free hosting. While you’re there why not pick up a badge, sticker or something else rather cool (psst, it’s a secret)…

For live tweeting and photos, make sure you follow @Ubelly on Twitter

Opening keynote by Marco Tabini

Marco Tabini on Twitter: http://twitter.com/mtabini

(talked about) The Experience Economy by B. Joseph Pine

Auditorium

PHP in a Mobile Ecosystem by Ivo Jansch

Ivo on Twitter: http://twitter.com/ijansch

Ivo’s slidedeck: http://www.slideshare.net/ijansch/php-in-a-mobile-ecosystem

Some links that Ivo talked about:

Agility and Quality by Sebastian Bergmann

Sebastian on Twitter: http://twitter.com/s_bergmann

Sebastian’s slidedeck: http://www.slideshare.net/sebastian_bergmann/agility-and-quality-php-uk-2011

Some links that Sebastian talked about:

Continuous Improvement in PHP Projects by Thorsten Rinne

Thorsten on Twitter: http://twitter.com/thorstenrinne

Thorsten’s slidedeck: http://www.slideshare.net/mayflowergmbh/continuous-improvement-in-php-projects-php-uk-conference-2011

Some things that Thorsten talked about:

NoSQL Databases: What, When and Why by Lorenzo Alberton

Lorenzo on Twitter: http://twitter.com/lorenzoalberton

Lorenzo’s slidedeck (and a writeup): http://www.alberton.info/nosql_databases_what_when_why_phpuk2011.html

Some things that Lorenzo talked about:

Advanced OO Patterns by Tobias Schlitt

Tobias on Twitter: http://twitter.com/tobysen

Tobais’ slidedeck: http://qafoo.com/talks/11_02_phpuk_advanced_oo_patterns.pdf

Some things that Tobias talked about:

Sidetrack 1

HTML5 and CSS3 Today by Martin Beeby

Martin on Twitter: http://twitter.com/thebeebs

Martin’s slidedeck: http://www.slideshare.net/thebeebs/using-html5-and-css3-today

Some things Martin talked about:

Xdebug by Derick Rethans

Derick on Twitter: http://twitter.com/derickr

Derick’s slidedeck: http://derickrethans.nl/talks/xdebug-london2011.pdf

Some things that Derick talked about:

Large-scale Data Processing with MapReduce and PHP by David Zülke

David on Twitter: http://twitter.com/dzuelke

David’s slidedeck: http://www.slideshare.net/Wombert/largescale-data-processing-with-hadoop-and-php-phpuk11-20110225

Hadoo on PHP: https://github.com/dzuelke/hadoophp

Some things that David talked about:

Beyond Frameworks by Stuart Herbert

Stuart on Twitter: http://twitter.com/stuherbert

Staurt’s slidedeck: http://blog.stuartherbert.com/php/2011/02/25/phpuk-2011-talk-beyond-frameworks/

Some things that Stuart talked about:

Varnish in Action by Thijs Feryn

Thijs on Twitter: http://twitter.com/thijsferyn

Thijs’ slidedeck: http://www.slideshare.net/combell/varnish-in-action-phpuk11

Some things that Thijs talked about:

Sidetrack 2

ZeroMQ Is The Answer by Ian Barber

Ian on Twitter: http://twitter.com/ianbarber

Ian’s slidedeck: http://www.slideshare.net/IanBarber/zeromq-is-the-answer

Code from ‘ZeroMQ Is The Answer’ – https://github.com/ianbarber/ZeroMQ-Talk

Some things that Ian talked about:

Running on Amazon EC2 by Jonathan Weiss

Jonathan on Twitter: http://twitter.com/jweiss

Jonathan’s slidedeck: http://www.slideshare.net/jweiss/running-on-amazon-ec2

Some things that Jonathan talked about:

The InnoDB Storage Engine for MySQL by Morgan Tocker

Morgan on Twitter: http://twitter.com/morgo

Morgan’s slidedeck: http://tocker.id.au/files/percona/innodb-talk-php-uk.pdf

Some things that Morgan talked about:

Optimising a Zend Framework Application by Rob Allen

Rob Allen on Twitter: http://twitter.com/akrabat

Rob’s slidedeck: http://akrabat.com/wp-content/uploads/PHPUK11-Optimising_ZF1.pdf

Some things Rob talked about:

99 Problems, But The Search Ain’t One by Andrei Zmeivski

Andrei on Twitter: http://twitter.com/A

Andrei’s slidedeck: http://www.slideshare.net/andreizm/99-problems-but-the-search-aint-one-7069783

Some things Andrei talked about:

]]> http://www.ubelly.com/2011/02/phpuk-2011-resources/feed/ 0 Make Web Not War at PHPUK 2011 http://www.ubelly.com/2011/02/ubelly-at-phpuk-2011/ http://www.ubelly.com/2011/02/ubelly-at-phpuk-2011/#comments Tue, 22 Feb 2011 12:54:18 +0000 Luke http://www.ubelly.com/?p=6400 Make Web Not WarIt’s only three days from PHPUK conference 2011 in London and we are getting rather excited. The Ubelly crew will Continue Reading]]> Make Web Not War

It’s only three days from PHPUK conference 2011 in London and we are getting rather excited. The Ubelly crew will be heading down to the Business Design Centre in London on Friday to immerse ourselves into the world of PHP. We’ll be talking about PHP on Windows, as well as a bunch of other topics including HTML5, CSS3, Mobile and Web Standards, and will be flying the ‘Make Web Not War’ banner for PHP UK 2011.Make Web Not War
For those who don’t know the background of Make Web Not War, it was started by our Canadian brethren at Microsoft three years ago as a cross-platform conference, showcasing the latest techniques and technologies available to the web community. It’s been going strong ever since, with the next event taking place in May. We love the ethos, and decided to fly the flag across the ocean, and will have a load of goodies (and even placards) to help shout the Make Web Not War message.

To kick things off, we wanted to let you know about two great chances that are open to the PHP crowd! First off, if you want to win a trip to MIX2012 in Vegas, a Windows Phone 7 or a bunch of other prizes, then check out the PHP Benelux User Group competition. All you need to do is build or migrate a PHP application, using PHP on Windows Azure. Simple! Secondly, in conjunction with Fasthosts Virtual Servers, we’re offering anyone 2 months free hosting so you can give PHP on Windows a go! Click here to find out more. Plus, you’ll get a chance to win a full 6 months free hosting if you come and have a chat to us at our stall.

Excitingly, our very own Martin Beeby is also speaking at PHPUK 2011 on HTML5 and CSS3. Make sure you don’t miss it!

Finally, to add to the whole thing, Ubelly is an official media partner for PHPUK 2011, so make sure you keep an eye on both Ubelly.com and our Twitter channel for a full rundown of the day, including a complete list of resources from the talks on the day.

See you all there!

]]> http://www.ubelly.com/2011/02/ubelly-at-phpuk-2011/feed/ 0 HTML5 and CSS3 demos http://www.ubelly.com/2011/02/html5-and-css3-demos/ http://www.ubelly.com/2011/02/html5-and-css3-demos/#comments Tue, 15 Feb 2011 16:19:27 +0000 thebeebs http://www.ubelly.com/2011/02/html5-and-css3-demos/ image.pngOver the past month I’ve been working on a number of HTML5 and CSS3 demos, Last week I put 2 Continue Reading]]> image.png

HTML CanvasOver the past month I’ve been working on a number of HTML5 and CSS3 demos, Last week I put 2 live.

Creating a picture gallery with HTML5 canvas

Border Radius and Capital FM

The videos focus on some of the sites on www.beautyoftheweb.co.uk and attempt to show you how you can build similar things yourself.

The videos are all less than 5 minutes long and I’ve written a blog post about each video where I share the code that I have used.

I’ll be adding more every week and they will all be listed at http://www.ubelly.com/html5

If you have any thoughts on how I could Improve the demos please send a mail to martin.beeby@microsoft.com or tell me in the comments.

]]> http://www.ubelly.com/2011/02/html5-and-css3-demos/feed/ 1 CSS3 border-radius in the real world http://www.ubelly.com/2011/01/css3-border-radius-in-the-real-world/ http://www.ubelly.com/2011/01/css3-border-radius-in-the-real-world/#comments Mon, 17 Jan 2011 16:10:00 +0000 thebeebs http://www.ubelly.com/2011/01/css3-border-radius-in-the-real-world/ WP_000138.jpgI was walking through the high street yesterday and noticed a poster outside of M&S that was advertising a dine Continue Reading]]> WP_000138.jpg

I was walking through the high street yesterday and noticed a poster outside of M&S that was advertising a dine in for two, £10 promotion. The way that they had used a picture as the infill for the 0 in £10 made me think about how you could achieve that effect using CSS3.

M&S AdvertM&S Advert 2

So when I got home I booted up my editor and had a fiddle with the border-radius property that’s supported in IE9, Chrome, Safari, FireFox and Opera.

From the picture I’d say they were using Helvetica as the font, but to keep things simple I’ve just used Arial.

Firstly I added the HTML I’ll need which consists of some text wrapped in a span and on the right a 200px by 200px image of some food:

<span>£1</span><img src="food.png" style="width:200px; height:200px" />

Then I added the CSS for the page:

<style>
    body{
        background-color:#000;
         font-family:arial;
    }
    span
    {
        color:#fff;
        vertical-align:middle;
        font-size: 280px;
    }

    img {
        border-radius:105px;
        border: 10px solid #fff;
        vertical-align:middle;
    }
</style>

To create the round image shape I added the CSS3 attribute border-radius and set it’s value to 105 which is half the size of the width + border.

I also added a 10px white border so that it looks more like the original image.

I started up the browser and IE9 displayed roughly what I was expecting. However a number of the other browser failed to correctly apply the border.

Internet Explorer 9

 

Google Chrome

rounded the corners but did not display the white border that I specified.

Chrome Failed to render the border

Safari

pulled the same trick.

Safari failed to render the border

Firefox

Did not apply the rounded corners at all. This is because Firefox currently applies border radius with a vendor prefix.

 FireFox

To fix this you simply have to add the vendor specific code to the image in CSS:

-moz-border-radius : 105px;

However, Firefox still didn’t apply the border as I was expecting.

Firefox

Opera

The rendering in opera was similar:

Opera

 

It seemed that only IE9 Beta was rendering border-radius correctly, so I thought I’d change approach. This time I created a DIV and set it’s background-image property to the food image and rounded the corners of the DIV.

 

This time all the browsers displayed the border-radius correctly, however I had now broken the vertical-alignment by using  a left floated div  rather than an image.

<style>
    body{
    background-color:#000;
         font-family:arial;
    }
    span
    {
        color:#fff;
        vertical-align:middle;
        font-size: 280px;
        float:left;
    }

    div {
        background-image:url("food.png");
        border-radius:105px;
        border: 10px solid #fff;
        -moz-border-radius : 105px;
        vertical-align:middle;
        float:left;
    }

</style>



<span>£1</span><div style="width:200px; height:200px" />

IE9

Internet Explorer 9

Opera

opera

 

Safari

Safari

Chrome

Chrome

FireFox

FireFox

 

I guess the lesson here is: Don’t use CSS3 border-radius on elements other than DIV’s if you want consistent rendering across all browsers.

]]> http://www.ubelly.com/2011/01/css3-border-radius-in-the-real-world/feed/ 3 What are you waiting for? Use HTML5 and CSS3 today http://www.ubelly.com/2010/12/what-are-you-waiting-for-use-html5-and-css3-today/ http://www.ubelly.com/2010/12/what-are-you-waiting-for-use-html5-and-css3-today/#comments Wed, 08 Dec 2010 14:26:04 +0000 thebeebs http://www.ubelly.com/?p=4741 ModernizrOver the past year I’ve talked to many people about HTML5 and one of the most common objections for not Continue Reading]]> Modernizr

Over the past year I’ve talked to many people about HTML5 and one of the most common objections for not using it is… well HTML5 isn’t really ready yet.

This is categorically not true.

Numerous browsers including IE9 Beta support many HTML5 and CSS3 features today and there is no reason why you can’t start using them in your web projects today.

Of course just throwing HTML5 elements all over your site isn’t wise, if you are going to use HTML5 or CSS3 then you need to be smart about the way you engineer your pages so that you don’t mess up the experience for people using older browsers.

Luckily there is a tool that can help with this and it’s called Modernizr.

Modernizr is a JavaScript Library that allows you to test browser capabilities, allowing you to write code to cater for those capabilities.

For example, if you wanted to replace a flash video on your site with a HTML5 video tag then you could:

  • add the flash video to your site,
  • use Modernizr to test if the browser supports the HTML5 video tag,
  • if it does, replace the flash element with a video element using JavaScript.

Modernizr is easy to set up

Step 1 – Add the script element to the head of your document

Download Modernizr then link to the file in the head portion of your website.

<script src="Scripts/modernizr-1.6.min.js" type="text/javascript"></script>

Step 2 – Add the class “no-js” to the HTML element

<html class="no-js">

Step 3 – You can then use the JavaScript object to test for features

In the example below, we not only test to see if the browser supports HTML5 video, we also test to see which codec it supports.

if (Modernizr.video && Modernizr.video.ogg){
// load ogg video assets
}
else if (Modernizr.video && Modernizr.video.h264){
// load h264 assets
}
else{
// do something to handle fallback for older broswers
}

Modernizr allows you to do a lot of cool things directly in your CSS too without writing one line of JavaScript. To find out more, take a look at the documentation here.

If your looking of a way to support HTML5 video but you are not comfortable with JavaScript, you might want to take a look at the video for everybody project which uses Modernizr but doesn’t require you to write JavaScript.

]]> http://www.ubelly.com/2010/12/what-are-you-waiting-for-use-html5-and-css3-today/feed/ 2 IE9 – Your Questions and Comments Answered http://www.ubelly.com/2010/06/ie9-your-questions-and-comments-answered/ http://www.ubelly.com/2010/06/ie9-your-questions-and-comments-answered/#comments Mon, 28 Jun 2010 10:00:12 +0000 Sara Allison http://www.ubelly.com/?p=1827 webdirections_comments_thumb.jpgAt the recent Web Directions conference we had a stand made of White Boards and invited attendees to share their Continue Reading]]> webdirections_comments_thumb.jpg

At the recent Web Directions conference we had a stand made of White Boards and invited attendees to share their comments, feedback and questions. Of course we wanted to respond to those questions – so here’s our feedback!

Q. Give us XP support please! (Many people asked this, including whether we can upgrade XP to support IE9 features)

A. Sorry, we had lots of people asking for IE9 compatibility with XP as lots of people are still stuck with it, but it’s still a ‘no’. One of the reasons is a pretty straight forward technical challenge – which is that IE9 uses DirectWrite & Direct2D in DirectX 11, which is available in Windows 7 & Windows Vista.

Q. Give us  <canvas> support please!

A. As if by magic, this is done! Yes, it’s in the IE9 Platform Preview 3

Q. ES5 in IE9 please!

A. Done, it’s in the IE9 Platform Preview 3

Q. Will Silverlight tools be able to export SVG and HTML, as they’re actually very compatible?

A. On 7th June we released Expression Studio 4 and the Silverlight tools work with XAML… so no SVG in there yet.

Q. Does IE9 support all the modules related to CSS3?

A. The CSS working group has categorized areas from low to high priority & the specifications are at different stages from working draft through to recommendation, so ‘all’ is very difficult to say – at some point we need to ship :) .  Here are the modules that are supported in IE9 right now (see them in the release notes)…

  • Media Queries
  • Borders and Backgrounds
  • Selectors
  • Fonts
  • Namespaces
  • Color (rgba, opacity)
  • Values and Units
  • Opacity

Q. Can we do what the Mac does and take a website and make it an application? Then we could do that with IE6…

A. This is something we’re looking at – will keep you updated!

Q. Can we have more improvements in the developer tools in IE – there are still some things I prefer in firebug?

A. The ‘F12’ developer tools have improved further from IE8 to IE9 and include the following features:

  • Network inspection
  • JavaScript profiling
  • UA String Picker
  • Console Tab
  • SVG Support

Please try it out and give us your feedback!

Q. Let <video> play anything WMP can – and WEBM!

A. <video> (and <audio>) are supported in IE9 Platform Preview 3 and we’ll play H.264 – and if it’s installed we’ll use WebM VP8 too.  Here’s our public statement.

Thanks to everyone for raising these questions – please keep them coming! :)

]]> http://www.ubelly.com/2010/06/ie9-your-questions-and-comments-answered/feed/ 0 @Media 2010 Sets the Standard http://www.ubelly.com/2010/06/media-2010-sets-the-standard/ http://www.ubelly.com/2010/06/media-2010-sets-the-standard/#comments Wed, 16 Jun 2010 09:28:28 +0000 Sara Allison http://www.ubelly.com/?p=1715 Continue Reading]]> Web Directions founders John Allsopp and Maxine Sherrin hosted @Media last week at the Southbank Centre, with a design and developer track covering everything from SVG, Core CSS3 and HTML 5 to building crowdsourcing applications and telling stories through design. The conference was fun, friendly and informative, with speakers including Doug Schepers from W3C, Jeremy Keith from Clearleft and Paul Boag from Headscape.

We had a stand at the conference to demonstrate IE9 and as the whole stand was made of whiteboards we asked for comments and feedback . We’ll be replying to questions and comments that came out of @Media on Underbelly, so watch this space (apologies for the cheesy expression!).

While you’re here, just to let you know the SVG No Bit, Sherlock contest closes this Friday 18th June – you can win a Sony Vaio Notebook or and Xbox 360 – plus the kudos of winning of course! – so it’s worth entering. All you need to do is create a progress bar or a button and the most creative wins the top prize (don’t worry there are runners up!)

]]> http://www.ubelly.com/2010/06/media-2010-sets-the-standard/feed/ 0