WebDev3000 » CSS

Css-sprit.es

Codrut Nistor — Thu, 02 Jun 2011 10:45:23 +0000

While an experienced developer can get started with CSS and go above average level in less than an hour, I think that code generators should be used as often as possible, I decided to take a closer look at another Web-based CSS tool. After a few minutes spent searching for something interesting enough, I ended up facing today’s subject – ladies and gentlemen, here’s Css-sprit.es!

Before anything else, Css-sprit.es is a great domain name, if you ask me. Other than that, I think I should add that this is a Web-based CSS sprites generator that can be freely used by anyone and packs a bunch of interesting features, including CSS-based rollover effects with a few different presets available. The sprite image to upload can be in the JPG, GIF or PNG format, while output is CSS or SASS.

“Carefully handcrafted by Nicolas Crovatti” and powered by jQuery and Pixastic, Css-sprit.es is still in Beta status, but seems like a pretty useful, good looking and reliable Web-based tool, so why not take it for a spin? Since “Beta” also means “possibly buggy” and I must confess I didn’t manage to spot any bugs, could you drop a comment below with any compatibility/functional bugs that you encountered, if any? Thank you in advance!

Incoming search terms:

Get Shareaholic

OpenJS Grid

Codrut Nistor — Thu, 26 May 2011 21:18:29 +0000

I hate statistics. I think I said that before, but I must say it again. It’s my hate for the math behind it, not anything else, since I must also admit that a lot of useful information is contained in various databases and tables. When it comes to displaying them, things can get rather ugly… but you can also step into a beautiful world and show records nicely shaped into a user-friendly datagrid, all thanks to OpenJS Grid, today’s topic.

To make a longer story as short as possible, I will say that OpenJS Grid is – at least according to its official page – “the easiest jQuery Grid ever,” its current version being labeled “1.7″ and offering a bunch of interesting features, including inline editing, the ability to show or hide row numbers, various data filtering methods, even CSS3-powered theming support!

Unfortunately, it seems that the theming part only works in Firefox and Chrome as it should, since I noticed some strange display issues in Opera and IE 8. Other than that, it is supposed that OpenJS Grid requires jQuery and it’s compatible with all major browsers but, as I just said, it seems to be “more compatible” with some than others… so please feel free to drop a comment and enlighten me: what seems to be wrong with this piece of code in Opera or IE? Maybe it’s just something wrong on this side, after all…

Incoming search terms:

Get Shareaholic

G5

Codrut Nistor — Tue, 10 May 2011 08:37:44 +0000

I don’t know about you, but “G5″ sounds like an assault rifle to me – in fact, I am almost sure you have to find some military-related meaning for it, but since we’re supposed to be talking about webdev stuff here… let’s move to the G5 framework, shall we?

Today’s main keywords should be HTML5, CSS3, PHP, jQuery front end, framework and, best part of it all, free. G5 is free for personal and even commercial use as long as humans.txt remains unchanged and placed right inside the index head. If all these are not enough to make things clear, let me add that G5 is a framework that can help you to easily build PHP-powered HTML5 websites making use of resources like Modernizr, CSS3 Pie, jQuery and others, providing excellent compatibility even with older browsers, as well as a bunch of useful features, including GZip support, robots.txt / robots meta, shorthand CSS with some basic reusable classes, sticky footer and more.

G5‘s default design provides a 940 pixels total content width in a “F” shape, coming with a bunch of popular items like Orbit, Reveal or Tipsy. This freely available framework requires only PHP and, obviously, one of those major browsers – seems we’re getting more and more of them with each day, don’t you think? Anyway, if you encounter any problems with G5, don’t be shy and get back here to drop a comment – as long as it’s not spam or nonsense, it will be our pleasure to publish your thoughts. Thank you in advance!

Incoming search terms:

g5 assault rifle

Get Shareaholic

Sencha Touch

Codrut Nistor — Thu, 05 May 2011 08:50:00 +0000

Not too long ago, we talked about mobl, “a new free and open source language designed specially to speed up building mobile applications.” Well, today we’ll move to another similar piece of code, namely Sencha Touch – after all, it’s incredible how popular became smartphones and mobile Internet in the last few years, so talking about such things isn’t just a good choice – it’s a must!

The official mumbo-jumbo goes like this – “Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.” This product’s official home looks great and, according to it, Sencha Touch is “the first HTML5 mobile Web app framework,” offering PhoneGap compatibility and allowing you to distribute your apps via Apple’s App Store or the Android Marketplace.

While Sencha Touch is freely available, support comes with a price – details on the available plans can be found here. If you ask me, I think support is pretty expensive, but since popular mobile apps sell 100,000 licenses really easy, I don’t think that’s a problem – only that some kind of free support for beginners on a budget would also be great…

As I was just saying, Sencha Touch 1.1.0 is freely available for open source projects, begin released to the public under the terms of the GPLv3 license. To check the demos currently available, just click here – TouchSolitaire is my favorite, by the way. Well… I guess that’s all, folks!

Incoming search terms:

Get Shareaholic

Laker

Codrut Nistor — Thu, 28 Apr 2011 15:00:19 +0000

Some time ago, I started to write a book for someone. Unfortunately, I didn’t have enough time to finish it, that someone got out of the tutorials/books business, so I ended up with a nice table of contents and a few chapters that I turned into individual articles. On the other hand, the thought of writing a book keeps haunting me, so I’ll probably write at least one or two small guides before I die (maybe more than just that, I’m don’t have any plans of dying anytime soon), but once the writing’s done… preparing the content for delivery may be a bit tricky with all these devices around, so this is where Laker steps into the spotlight.

Don’t look at its name, because Laker is not mistyped and has nothing to do with sports – the official mumbo-jumbo claims we’re facing “a compendium of files, frameworks, styles and tips for designing digital publications in HTML5″ and I have nothing against it. After all, the thing that really matters is to distribute your work properly – in this case, you can use Laker to turn your book into an app for iPhone and iPad, featuring swipe for changing pages, double tap for showing the table of contents, the ability to include multimedia content like sounds, images, YouTube videos, as well as a bunch of other goodies.

Laker is open source and uses the Less Framework, its capabilities allowing you to easily build digital magazines, slideshows, catalogs, surveys and a bunch of other reading material. At last, you should keep in mind that you need a Mac and xCode for exporting the iPhone/iPad apps created using it, but Laker also allows you to create content for all modern browsers, as long as you don’t need to deliver iOS apps. Well… I guess that’s all and, if you ask me, I must say that Laker is one hell of a diploma thesis!

Incoming search terms:

Laker ipad

Get Shareaholic

mobl

Codrut Nistor — Thu, 24 Mar 2011 09:32:59 +0000

This entire mobile Internet revolution we’re going through seems to be moving faster than the programming/software worlds, but I am sure they’re already catching up. After all, there has been enough patching up of old stuff so far, the time has come for new languages and technologies to jump forward into the spotlight and mobl, today’s subject, is one of them.

While most of the widely used programming languages and the dev tools needed to turn them into usable code don’t come for free, it’s great to know that mobl is more than just free – this one’s an open source language and, in case the name doesn’t say it all already, you should know that its purpose is to speed up the creation of mobile Web apps.

As you can see here, mobl has a JavaScript-like syntax that’s pretty easy to learn and turns instant debugging of entire apps from dream to reality. In case you’re wondering about the IDE coming with it, you should know that mobl doesn’t come with such a thing, running as a plugin under the freely available Eclipse IDE. Excellent!

The idea behind mobl is pretty simple – its compiler converts the code into HTML5, CSS + JavaScript, delivering output that’s compatible with Webkit-based browsers like the ones available on iOS and Android, WebOS, not to mention Safari or Chrome. Unfortunately, there’s no support for Opera or Firefox for now… but everything seems great if we forget about that part, so why not take a closer look at the demos now?

Get Shareaholic

CSSWARP

Codrut Nistor — Tue, 15 Mar 2011 08:53:34 +0000

To be honest, I think the time for warped text has passed, but if you’re into some retro-style Web design, then I am sure you’ll find CSSWARP to be pretty useful – after all, we’re talking about a Web-based application that can generate HTML5 code, so it’s not retro to the bone, actually…

According to its official page, CSSWARP is a CSS3 text to path generator that’s more than just another tool – this one “is a proof of concept” that allows you to “create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.” Using CSSWARP is really straightforward, but some things need to be said – for example, this Web-based tool can also use local fonts, next to any font you may want to pick from the Google Font Directory.

The features of this tool are not hidden, so everything’s revealed at first sight – customizable text, curve style and font type, instant warped HTML generation, browser-specific CSS rules (IE9, Opera, Firefox and WebKit available), while compatibility of this tool shouldn’t raise any concerns – CSSWARP works with all modern browsers… as long as we’re not talking about some modern text mode browser, of course!

Ouch, forgot about this – in case you didn’t manage to take a look at CSSWARP yet and you’re wondering about its price, I have some good news for you – this tool is free to use for everyone, at least at this time!

Get Shareaholic

Not Just A Grid

Codrut Nistor — Tue, 01 Mar 2011 11:32:24 +0000

From time to time, I discover sites with pretty good/useful content, but with layouts that make me wonder if my computer’s calendar isn’t showing a date that’s two decades ahead… Fortunately, there are plenty of tools for webmasters who want to use layouts to match the century we’re living in and enhance their user’s experience while visiting their site(s). Today, we’ll take a quick look at such a tool, namely Not Just A Grid.

Freely available under the terms of the MIT License, Not Just A Grid “is a flexible and modular css framework that is designed to assist in the rapid prototyping and development of websites.” While others still look back and wish for older technologies to hang on for a few years more, Not Just A Grid comes with support for the future, offering accommodation for larger screen sizes and use of CSS3 to progressively enhance the user experience on any device. Excellent!

Not Just A Grid offers multi-column layouts, forms, tables, typography and pagination/alert boxes, every part of the framework coming in a separate stylesheet and the resulting layout having only 1 KB in size. Even more, we’re not talking about a fluid layout here – sure, some may say this is bad, but I know quite a few people who would rather have 4 hard-coded widths at their disposal, each with support for 1 to 6 layouts. These widths are 100, 960, 1380 and 1500 pixels, but a demo is always better than a thousand words, so… click here and enjoy Not Just A Grid!

Incoming search terms:

Get Shareaholic

Online CSS Code Generators

Adrian — Tue, 15 Feb 2011 21:21:53 +0000

CSS is the most used style sheet languages. But if you are new in web programming, CSS is not that user friendly as you might expect. But there are a few solotuins for this. The online CSS code generators are perfect tools for beginners and they will really help to design your website as you wanted.

In my opinion, the best online CSS code generator is CSS3.0 Maker. Using CSS3.0 Maker you can create Border Radius, Gradient, CSS Transform, CSS Animation, CSS Transition, RGBA, Text Shadow, Box Shadow, Text Rotation and @Font Face. Another great thing about CSS3.0 Maker is the browser compatibility and mobile compatibility options. This way you can see with what browsers/mobile devices is your CSS code compatible.

If you want to create only menus using CSS code, you should try Only CSS Menu. The name says all about this online tool. Using Only CSS Menu you can create great horizontal menus, vertical menus, horizontal dropdown menu, step by step navigation, and vista style CSS menu.

Online CSS Editor is not really a code generator. Is more like a CSS dynamic previewer. You can write the code and you can preview the results. Or you can use it to modify a CSS file. From here you can also use CSS Validator. With CSS Validator you can validate your code and you can see the errors in your CSS that can make your page to be displayed incorrectly.

Incoming search terms:

Get Shareaholic

Streamie

Codrut Nistor — Wed, 02 Feb 2011 17:57:32 +0000

I hate Twitter. I also hate Facebook a little, although I use them both from time to time. It’s simply the fact that everyone started using them and both are now full of spammers and background noise. Maybe the time has come for some well done niche sites that put relevant content on first place and go as far as setting a user quota. How does that sound? I know it’s nothing but a dream, so let’s get back to Twitter and take a look at Streamie, shall we?

Why Streamie and not Twitter itself? For me, this one is better – it’s realtime, looks and feels lighter, yet keeps all the Twitter features people usually use. Sounds like a pretty good deal, right? You can also add the fact that this Twitter client is open source and things start looking not just good, but simply great!

This Web-based Twitter client known as Streamie is still in Beta stage, yet it already allows you to customize it by messing with message filtering and display settings or enable/disable geolocation (to login using your Twitter credentials and see what’s what, just go here). You can even use your background image from Twitter, although I must admit mine looked much better on Twitter.com…

… so feel free to take this piece of code for a spin – you can even put it on your own server and see how it behaves – you only need nodeJS and a few minutes of your time, nothing more!

Get Shareaholic