CSS

feb 24 2012

Invaluable online CSS generators

CSS3 lets us build really nice look­ing things, but let’s face it, the code does tend to get at bit bloated, when we have to repeat every­thing for each ven­dor pre­fix. Appar­ently, ven­dor pre­fixes are also hard to remem­ber, given the cur­rent debate on cer­tain browser ven­dors’ plans of imple­ment­ing the –webkit pre­fix. Or maybe some devel­op­ers are just too lazy writ­ing all that code? Nonethe­less, some parts of the CSS3 syn­tax is also really hard to remem­ber. At least I have a hard time remem­ber­ing the syn­tax for CSS3 gradients.

How­ever, I am get­ting really good help from a hand­ful of online tools. They do a great job of remem­ber­ing the syn­tax for me and mak­ing other tasks a bit eas­ier as well. Here is a list of the online CSS gen­er­a­tors, I use the most.

Pre­fixr and –pre­fix– my css

Repeat­ing every prop­erty for every browser ven­dor can be a pain in the neck. Just write the stan­dard CSS3 prop­er­ties and then paste them into either Pre­fixr or –pre­fix– my css. They both take care of the nec­es­sary pre­fixes, out­putting the code for you to copy and paste.

CSS3Generator

Don’t remem­ber which pre­fixes are nec­es­sary for box-shadow or border-radius? Try cre­at­ing your CSS3 effects with this handy tool.

ColorZilla’s Ulti­mate CSS Gra­di­ent Generator

This gra­di­ent gen­er­a­tor makes it really easy to cre­ate gra­di­ent back­grounds, min­i­miz­ing your need of Pho­to­shop for the same pur­pose. It includes all the nec­es­sary pre­fixes. Copy and paste, and you’re good to go.

0 to 255

This color gen­er­a­tor actu­ally does noth­ing in terms of CSS3. It just makes life a lot eas­ier, when it comes to find­ing lighter and darker hues of a cer­tain color.

Animate.css

If you are not yet ready to write your own or just want to make it easy, Dan Eden’s Animate.css is a col­lec­tion of CSS3 ani­ma­tions for you to pick and choose from. If there are none you like, he has even made it easy to cre­ate a cus­tom build, so you don’t even have to write a sin­gle char­ac­ter by hand.

Grid­pak

Grid­pak is a repon­sive grid gen­er­a­tor for mak­ing fluid lay­outs, com­plete with media queries and ready for mobile. Math­e­mat­i­cal skills are not needed here, because it cal­cu­lates the gut­ter– and col­umn widths on the fly.

Do you use any great online CSS tools or gen­er­a­tors, you would like to share? I’d like to hear about it.

By Morten Brunbjerg Bech • CSS, Web Design • 0 • Tags: , , , ,

feb 7 2012

Icon Fonts

Webfont specimenRespon­sive Design is the new black for web design­ers. But with respon­sive design comes a lot of chal­lenges. One of them is to make ui icons scale with the rest of your lay­out. How­ever, icon fonts is a promis­ing solu­tion in its infancy.

Icon fonts are vec­tor based graph­ics and are able to scale indef­i­nitely with­out los­ing qual­ity, as opposed to the more well known and com­mon pixel based icons. But icon fonts are also tied to char­ac­ters and this is where the chal­lenges come in, when we want them dis­played cor­rectly with­out mak­ing too much trou­ble in screen read­ers or screen scrapers.

I have been col­lect­ing a few resources on the topic.

Using Icon Fonts
Besides being a ser­vice, that offers a nice col­lec­tion of scal­able icons, Pic­tos also has a great arti­cle on the pros and cons of icon fonts and how to use them.

Icon Fonts are Awe­some
Chris Coyier of CSS-tricks.com has put together a nifty exam­ple, where he demon­strates how easy it is to scale, col­orize and shape the shadow of icon fonts with plain and sim­ple CSS.

How to make your own icon web­font
Over at Web­de­signer Depot, Hey­don Pick­er­ing has writ­ten a tuto­r­ial on what makes a good icon and how to turn it into a webfont.

Icon Fonts
Finally, if you are not yet ready to make your own icon font, Font Squir­rel has a small col­lec­tion of free icon fonts, also avail­able as @font-face kits. Go grab ‘em and try them out.

By Morten Brunbjerg Bech • CSS, Icons, Web Design • 0 • Tags: , , , , ,

jan 31 2012

The 1000px grid

Elliot Jay Stocks, Bris­tol based web designer and illus­tra­tor, recently pro­posed on his blog a 1000 pixel grid as the base for lay­out pro­to­typ­ing in Pho­to­shop, instead of the more com­mon and defacto 960 pixel grid, we have all become so used to.

The rea­son? The math is so much eas­ier to do, when trans­form­ing the grid from pix­els to per­cent in respon­sive web design.

It is such a sim­ple and obvi­ous approach, I’m almost embar­rased, I haven’t thought of it before.

Elliot Jay Stocks: A bet­ter Pho­to­shop grid for respon­sive web design

By Morten Brunbjerg Bech • CSS, Photoshop, Quick tips, Web Design • 0 • Tags: , , , ,

jan 31 2012

Krimimessen 2012

Screen dump of Krimimessen 2012

I have just launched a re-design of Krimimessen.dk. Krim­imessen is the biggest fes­ti­val about crime lit­er­a­ture and crim­i­nal fic­tion in Den­mark. A fes­ti­val which is arranged by Hors­ens Pub­lic Library, where I work. The site is designed so it resizes to fit the screen it is being viewed on, also known as respon­sive web design.

This is the first respon­sive site, I have cre­ated. It is built in Word­Press on a base of the awe­some HTML5 Boil­er­plate frame­work, which makes it eas­ier to build a mod­ern web site from scratch.

I learned a lot from read­ing Ethan Marcotte’s “Respon­sive Web Design” prior to this project. Marcotte’s “tar­get ÷ con­text = result” tech­nique, a way to cal­cu­late dimen­sions from pix­els into per­cent, was an invalu­able tool in the process. In fact, and very unusual indeed, it wasn’t even nec­es­sary to test a lot in Inter­net Explorer.

By Morten Brunbjerg Bech • CSS, Portfolio, Web Design, Web Development, Wordpress • 0 • Tags: , , , , , ,

aug 26 2009

Dagens linkhøst, 26. august

Bog­mærker ind­sam­let den 26. august fra 11:29 til 11:58

Web fonts and stan­dards – Jef­frey Zeld­man Presents The Daily Report
26. august
As far back as 1998, CSS2 pro­vided a way to link to real fonts from your style sheet. Nice round up on how to imple­ment fonts with @font-face.
Fonts avail­able for @font-face embed­ding — Webfonts.info
26. august
Nice col­lec­tion of fonts for the web.
PDF doc search II — Meta
26. august
I edited includes/SpecialSearch.php to make the saved PDFs search­able. This con­tri­bu­tion is lim­ited to a small amount of PDFs. When cre­at­ing the PDFs don´t use com­press text and images in e.g. acro­bat distiller.

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , ,

jul 10 2009

Dagens linkhøst, 10. juli

Bog­mærker ind­sam­let den 10. juli fra 08:04 til 09:03

Design­ers Tool­box: Design Resources
10. juli
Col­lec­tion of tools and graphic ele­ments for designers.
Four Meth­ods to Cre­ate Equal Height Columns | Build Internet!
10. juli
This arti­cle dis­cusses some meth­ods to cre­ate equal height columns that work on all major web browsers (includ­ing the infa­mous IE6). All of these meth­ods show how to cre­ate a three col­umn layout.
Color Scheme Designer 3
10. juli
Another appli­ca­tion for mak­ing color schemes.

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , , , , , , , , , , ,

jun 19 2009

Linkhøst fra 18. juni til 19. juni

Bog­mærker ind­sam­let fra 18. juni til 19. juni

jQuery UI — Home
19. juni
jQuery UI pro­vides abstrac­tions for low-level inter­ac­tion and ani­ma­tion, advanced effects and high-level, the­me­able wid­gets, built on top of the jQuery JavaScript Library, that you can use to build highly inter­ac­tive web applications.
FRI Betal­ing — Dan­marks bil­lig­ste betalingsløsning
18. juni
Mod­tag betalinger direkte på dit web­site – sikkert, nemt og bil­ligt. FRI­betal­ing er et sikkert valg hvis du vil kunne mod­tage betalinger online. Du får et let over­skueligt admin­is­tra­tions­modul, højeste sikker­hed med SSL krypteret forbindelse og det hele til lan­dets laveste pris.
Magentohotel.dk –Dansk per­for­mance magen­to­com­merce hosting
18. juni
Magentohotel.dk er Pow­er­host­ings bud på dedik­eret per­for­mance Magen­to­host­ing
Vi er stolte af at være Dan­marks største Magen­to­host og samar­be­jder med bla. jay.net, ePay og e-conomic.
Med mere end 10 års efar­ing med pro­fes­sionel server­drift og over 300 kørende Magento-shops, er vi godt klædt på til at hjælpe din net­bu­tik ind i web2.0 alderen.

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , , , , , , , , , , , ,

maj 25 2009

Linkhøst fra 9. maj til 25. maj

Bog­mærker ind­sam­let fra 9. maj til 25. maj

Uni­ver­sal Inter­net Explorer 6 CSS | For A Beau­ti­ful Web
25. maj
How do you answer the Inter­net Explorer 6 ques­tion?
1. Design for bet­ter browsers, then design alter­na­tive solu­tions to han­dle IE6 bugs?
2. Write a reme­dial IE6 stylesheet to address lay­out issues?
3. Use JavaScript to boot­strap CSS sup­port in IE6?
4. Make your site look exactly the same in IE6 as in any other browser?
5. Develop to bet­ter browsers and spend no devel­op­ment time or test­ing for IE6?
6. Block IE6 users from see­ing your site’s styles?
Wolfram|Alpha
24. maj
Today’s Wolfram|Alpha is the first step in an ambi­tious, long-term project to make all sys­tem­atic knowl­edge imme­di­ately com­putable by any­one. You enter your ques­tion or cal­cu­la­tion, and Wolfram|Alpha uses its built-in algo­rithms and grow­ing col­lec­tion of data to com­pute the answer.
Vir­tu­al­Box
9. maj
Vir­tu­al­Box is a fam­ily of pow­er­ful x86 vir­tu­al­iza­tion prod­ucts for enter­prise as well as home use. Not only is Vir­tu­al­Box an extremely fea­ture rich, high per­for­mance prod­uct for enter­prise cus­tomers, it is also the only pro­fes­sional solu­tion that is freely avail­able as Open Source Soft­ware under the terms of the GNU Gen­eral Pub­lic License (GPL).

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , , , , , , , , , ,

maj 4 2009

Linkhøst fra 22. april til 4. maj

Bog­mærker ind­sam­let fra 22. april til 4. maj

Cre­at­ing Posts That Appear Only In RSS | Court’s Inter­net Mar­ket­ing School — How To Make Money Online
4. maj
To cre­ate a post that appears in your RSS feed, but doesn’t appear on the home­page or cat­e­gory pages of your site, you can use the Advanced Cat­e­gory Plu­gin for Word­Press. This plu­gin gives you an inter­face where you can hide a post from cer­tain areas of your site.
Word­Press SEO — Yoast — Tweak­ing Websites
4. maj
The Defin­i­tive Guide To Higher Rank­ings For Your Blog
Embed­ding Word­Press into OS Com­merce Part II » Go Web Young Man
4. maj
A default install of OSC MS2.2 with an inte­grated Word­Press blog. What fol­lows is a step-by-step tuto­r­ial (with the novice in mind) show­ing you how to do this.
Alter­na­tives to Win­dows, Mac, Linux and online appli­ca­tions | AlternativeTo.net
23. april
Find bet­ter Win­dows, Mac, Linux and online appli­ca­tions. Alter­na­tiveTo is a new approach to find­ing good soft­ware. Tell us what appli­ca­tion you want to replace and we give you sug­ges­tions on great alter­na­tives! Instead of list­ing thou­sands of more or less crappy appli­ca­tions in a cat­e­gory, we make each appli­ca­tion into a cat­e­gory. Think of it like for­ever evolv­ing blog posts about good alter­na­tives to the soft­ware that you’re not sat­is­fied with. And the “blog posts” are gen­er­ated by you through sug­ges­tions, com­ments and votes.
STUDIO7DESIGNS Green web­site and logo brand design com­pany | Web designs Vic­to­ria Van­cou­ver BC Canada
22. april
We have been design­ing award win­ning web­sites for the last 5 years. We will work closely with you to cre­ate a web­site that is pro­fes­sional, easy to use, and inte­grated with your logo iden­tity and cor­po­rate color pro­file. All our web­sites are coded with valid CSS and XHTML for fast load­ing, ease of use, and are sim­ple to upscale in the future.

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , , , , , , , , , , , , , , , , , ,

feb 21 2009

Bogmærker indsamlet fra 21. februar til 4. marts

Links ind­sam­let fra 21. feb­ruar til 4. marts

[en] .htac­cess Editor
4. marts
Online tool for cre­at­ing .htac­cess files.
WPIn­spi­ra­tion | Show­cas­ing the Best Word­Press Sites on the Internet
4. marts
WPIn­spi­ra­tion is a col­lec­tion of the best-looking Word­Press sites on the inter­net. Derived from the old “Sites” sec­tion of WPCandy, WPI con­tains hun­dreds of the pret­ti­est, sex­i­est, and just plain awe­some WordPress-powered sites.
15 Tuto­ri­als for Recre­at­ing Authen­tic Photo Effects | Blog.SpoonGraphics
4. marts
Here are 15 tuto­ri­als for recre­at­ing authen­tic photo effects such as Lomo pho­tog­ra­phy, HDR and Cross Pro­cess­ing dig­i­tally in Adobe Photoshop.
CTRL+ALT+DEL: Opryd­ning i registreringsdatabasen
3. marts
Herun­der har jeg lis­tet et antal glim­rende gratis pro­gram­mer, der er prøvet og fun­det i orden — dvs. de ødelæg­ger ikke noget og de ryd­der godt op i registreringsdatabasen.
50 Min­i­mal Sites
Now it is time to fea­ture the min­i­mal­ist design. Here is a mas­sive list of 50 min­i­mal sites. See how design­ers use min­i­mal ele­ments to cre­ate high visual impact — less is more.
Think Design Blog — Word­Press — Lorem Ipsum Test Post Pack | Think Design
Test post pack for Word­Press. The next time you’re design­ing, cre­at­ing, or cus­tomiz­ing a theme, you can upload this dummy post pack and save your­self a bunch of time!
SendCSS.com
Send­CSS shows some of the world’s great­est web­sites (CSS & Word­Press) from all over the globe.
100+ Free Seam­less Vec­tor Pat­terns Ideal for Web Design and Print Work | Patternhead
Seam­less pat­terns are great for adding depth and tex­ture to your design work. Use big bold pat­terns to cap­ture atten­tion or sub­tle calm­ing pat­terns as back­drops. Here are 106 high-quality free seam­less vec­tor patterns.
30 Beau­ti­fully Tex­tured Web Designs
Tex­tures in a web design have become a pop­u­lar trend, replac­ing the sleek, glossy, and shiny effects that we com­monly refer to as the “Web 2.0″ design trend. Work­ing with tex­tures is dif­fi­cult, but tal­ented design­ers world­wide choose this route to add a depth in their designs and to exem­plify their cre­ative skills.

In this col­lec­tion, you’ll find 30 gor­geous web designs that employ tex­tures as a design component.

Icon­Dock — The Art of Stock Icons
Icon­Dock is a newly launched icon shop by N.Design Studio.

By Morten Brunbjerg Bech • Links • 0 • Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

1 2