Resize Elements with CSS3

by

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.

One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.

There are four values for resize that are kinda logical:

Robert Nyman created this demo using the resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about resize. You can also read more about this topic at Stackoverflow.


Wo sind meine abgerundeten Ecken?

by

Sorry for this german post. For more information on this topic please check out the post “Where Are My Rounded Corners?”. Thanks to Daniel and Steffen at /gebrüderheitz. Manchmal sind unsere Kunden verwirrt, wenn sie sich ihre neue Website im Browser anschauen und sie anders aussieht, als das Design, dass sie freigegeben hatten. In diesem Merkblatt erklären wir, warum es viele Vorteile gibt, diese Unterschiede zu akzeptieren und dass diese Vorteile die Nachteile überwiegen. Lange Zeit haben wir die Gestaltung von Websites so gehandhabt, als ob es Printmedien seien. Hier findet nun ein Umdenken statt, denn das Internet unterscheidet sich

Read more


“Where Are My Rounded Corners?” – German Translation

by

Some weeks ago Paul Irish published his article about TAFEE (Tiered, Adaptive Front-end Experiences) and shares Paul Boag’s booklet called “Where are my rounded corners?” which tries to describe why it is better to design for the future and modern browsers and not spending too much time trying to get the website’s design working in older browsers (namely Internet Explorer 7 and 8). The booklet was originally published in Paul Boag’s blog. Paul describes why he did this this: One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off

Read more


CSS3: Rotate Images on Click

by

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago. In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating. I’m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the

Read more


Touch-Icons for Android-Devices: Y U No Working?

by

Sven asked me some stuff about the HTML5 Boilerplate Favicon PSD-Template while he was using it for a project. He discovered one problem I was not aware of and I don’t know how to work around: Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3. I do not know of any other usage of the icons in prior versions of Android. But this article by Rob Flaherty stats that it is working for Android 2.1 and 2.2 with some minor changes. He also set up this demo-page. Feel free

Read more


Text-Shadow in Internet Explorer

by

This mothereffin shit is worth a blog-post. Even if it’s just a short one. At this very moment I’m celebrating the fact that Internet Explorer 10 now supports text-shadows kinda excessively! Finally! Even Internet Explorer made it! Yayyyy! For more details on this, please go and check out the Internet Explorer 10 Guide for Developers. Microsoft developers explain the usage of text-shadow here. But I guess it should be pretty clear how to use them as other browsers support them like forever. Thanks goes out to Louis Lazaris for his tweet about it. Also @IE tweeted about this. There are also

Read more


HTML5 Boilerplate Favicon PSD-Template

by

No longer maintained Version 3.1 – Update 25.11.2012 Add current 16x16px favicon. Version 3.0 – Update 25.05.2012 And again Daniel updated the template with some great things. It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is. Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default. Version 2.0 – Update 21.03.2012 Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built

Read more


Pseudo-Elements in Print-Styles for References in Links

by

This morning @t3node asked me about something CSS-related. This was kinda new for me because he never did this before I guess… He showed me a website he had printed and asked me to explain him, how it is possible to show links in printed websites with their reference printed next to it. He was kinda upset why not every frontend-developer includes this in his/her stylesheet when it comes to designing a new website. I wanted to explain everything that’s related to this topic that I’ve ever heard of but he asked me to write this blogpost as he is not pretty used to CSS

Read more


Add Style-Syntax in Comments with `, _ and *

by

You may be familiar with the syntax of writing code-Tags like `some code here`. This is what is used by Github for example. At Daring Fireball they wrote up the syntax. Not only for code-Tags but for various features that are connected to style and semantics. In the comments of this blog it is possible to use some of the rules to add some markup to them. For instance when you write: Some fancy text with **styled _markup_** and `code`. It will be transfered to Some fancy text with <strong>styled <em>markup</em></strong> and <code>code</code>. I really like to use these tags

Read more


Offer Files as Download with a@download

by

So the spec introduces a new attribute on a-tags (so called “links” – this may be new to you ;-)) called download (short: a@download – this technique of connecting attributes with tags is written up and documented by Mathias Bynens). When you link to a file like an image or a PDF-document it will be displayed within the browser normally. The download-attribute in links prevents this behavior and offers the file as a download in your browser. Definition The spec allows the attribute for having a value. This value can be a string which defines the name of the downloaded file. As a default

Read more