blogfreakz.com » Web Design

A Quaintly Designed CSS Typographic Grid

Keith@Blogfreakz — Thu, 02 Feb 2012 13:17:02 +0000

Here’s a very fascinating take on creating a CSS grid by Chris Coyier. If you’re site is text-heavy then this kind of layout might suit it perfectly. Check out the demo to see how it works.

Horizontal Grid

Vertical Grid

The concept is inspired by one Richard Rutter with his article Compose to a Vertical Rhythm. If you’re having trouble trying to align your site’s font with the grid because of the size variation, you can use a few tools like Baseline Rhythm Calculator, Grid bookmarklet, and Adobe Air EM calculator to help you out with the math. Or better yet, try getting some EM-based CSS.

Incoming search terms for the article:

Create A Grayscale Image Hover In HTML5

Keith@Blogfreakz — Wed, 25 Jan 2012 10:08:26 +0000

It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color. But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and faster because the grayscale image is generated from the original source.

Click on the above image for the demo.

Steps:

Get a copy of jquery.js
Paste the code below onto your web page. What the code will do is look for the target images (.item img) and then generate a grayscale version.

Be sure to set your target image (eg: .post-img, img, .gallery img, etc.)

TIP: You may change the transition speed by adjusting the highlighted number in the code (ie. 1000 = 1 second)

Provided that JavaScript is enabled, this will work on any browser that supports HTML5 such as Safari, Chrome, and Firefox. Otherwise, the image will revert to its original colored state.

Developer’s Note: if it doesn’t work with Firefox and Chrome locally, you need to put the HTML file on a web server.

Incoming search terms for the article:

6 Useful CSS Color Tools

Marvin@Blogfreakz — Tue, 24 Jan 2012 02:57:11 +0000

If you wish to design your WordPress blog’s appearance by yourself, you can rely on CSS. Here are 6 useful CSS color tools that could help get you started.

Color Scheme Designer

Color Scheme Designer provides colors in color wheel form. It has different color variations in percentage ratio like mono, tetrad, triad, analogic, accented analogic and complementary. This is especially useful in creating color combinations that work.

Ultimate CSS Gradient Generator

This gradient editor and generator tool allows you to make CSS gradients with cross-browser support. It has a Photoshop-like interface, opacity support with opacity stops, import from image and existing CSS, flexible preview panel, over 135 gradient presets and more!

CSS ColorCodes

With this tool, you can select any color from the color picker then copy its hexadecimal value from the bottom field. It also has 2 options which you can provide the RGB and hexadecimal color codes.

Colors Palette Generator

Colors Palette Generator allows you to upload any image you want for generating and using a color palette based on the image’s primary colors.

CSS Colors

This tool offers over 16 million colors with both RGB and hexadecimal color modes.

Gradient Image Maker

Gradient Image Maker creates gradient images that you can use in your website’s template design. It lets you generate 3 types of gradient images with instant previewing.

Incoming search terms for the article:

Zoom In On Your Website with ImageLens

Marvin@Blogfreakz — Wed, 18 Jan 2012 13:12:56 +0000

Here’s a terrific jQuery plugin that can make viewing your website extra-fun for visitors! Created by a web developer at Dailycoding.com , ImageLens is one cool plugin that zooms in on images when you hover over them.

Here’s what you will need: jQuery, image and the ImageLens plugin – jquery.imagelens.js.

Check out the demo and the download.

Include jQuery and jQuery.imagelens.js in your page:

Use ImageLens for default image lens. This will calculate the image and the zoom function.

$("#img_01").imageLens();

You can specify the image source if you have a different thumbnail image from the zoomed image.

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

Customizing the lens size:

$("#img_02").imageLens({ lensSize: 200 });

You can also adjust the attributes in the lens like border size and border color.

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

Incoming search terms for the article:

How to Create CSS3 Speech Bubbles

Marvin@Blogfreakz — Thu, 12 Jan 2012 01:39:59 +0000

The use of speech bubbles in web design has become so popular that it has become an integral feature in commenting. This tutorial by Nicolas Gallagher teaches us how to create our own.

Many tutorials out there rely on HTML and JavaScript which, aside from being tedious to work on, don’t work well on IE5. Gallagher’s Speech Bubbles contains different forms made with CSS2.1 and enhanced with CSS3 which can be applied to your existing HTML.

This is supported by Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Click on the above image to view the demo, or click here for a more detailed explanation of its CSS.

Incoming search terms for the article:

How to Render Filter Effects With This CSS Webkit

Marvin@Blogfreakz — Mon, 09 Jan 2012 09:55:40 +0000

Go crazy with the cool CSS Filter Effects 1.0 tutorials from WebKit Nightly ! Here you’ll learn how to customize basic image or video rendering with Photoshop-like effects. Let’s check it out.

Note: To test and view the effects, use Webkit Nightly and Chrome Canary.

Here are some CSS snippets that will change the element:

Blur

img {

-webkit-filter: blur(2px);

}

Hue-rotate

img {

-webkitfilter: hue-rotate(90deg);

}

Grayscale

img {

-webkit-filter: grayscale (100%);

}

Sepia

img {

-webkit-filter: sepia (100%);

}

Opacity

Default is 100%, no transparency.

img {

-webkit-filter: opacity (30%);

}

For more of these awesome tutorials click here.

Incoming search terms for the article:

2012 Web Development and Tech Forecasts

Carmela@Blogfreakz — Sat, 31 Dec 2011 12:00:24 +0000

AS we usher in 2012, the web development community has been coming up with several forecasts for the industry. Although most of this surrounds an influx of greater improvements in the technological frontier, it may also spell doom for some brands. The question is, how will these changes affect the entire tech landscape for users, developers, designers, and marketers?

Let’s check out some of the latest online buzz:

IT enterprise vendors seek to reduce failures from the past year and use them as leverage for future improvements.

Mobile competition becomes steeper with rapid developments in functionality, though this may result in some popular mobile brands falling behind the race.

Dominant frameworks such as jQuery, Node.js, Socket.io, Fitvids, JavascriptMVC and SproutCore, as well as HTML5 will take the lead in the web development industry. Same goes for software as independent support for hardware.

Some tech editors predict exciting, if sometimes drastic changes in the industry, from the rise of OpenFlow to patent wars, to the resurrection of the music distribution business, all founded on a common theme: consumerization.

Awesome, isn’t it? And if you’re still hankering for more juicy info on what’s in store for us this year, check out this list of web design trends and 15 hot technologies, which are probably more than enough to last us the next 6 months.

And with that, we at Blogfreakz.Com wish you all a wonderful 2012!

Incoming search terms for the article:

How To Display Random Ads Using jQuery

Keith@Blogfreakz — Wed, 21 Dec 2011 06:28:51 +0000

Let’s say that you have a bunch of ads on your web site and you want to make sure that some ads don’t show up more often than the others. Well, here’s a nice jQuery code that will let you display them in random order.

shuffleAds: function(arr)

{

for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);

return arr;

}

Although I haven’t tried it yet myself, this code might also be used to show random articles to instead of the usual related posts to your blog readers.Why would you want to randomly show posts? For one thing, it is to let your readers know that your site isn’t limited to just one theme or particular niche.

Or perhaps you’d rather use this jQuery Shuffle plugin instead (from jsfromhell.com):

$.fn.shuffle = function() {

return this.each(function(){

var items = $(this).children().clone(true);

return (items.length) ? $(this).html($.shuffle(items)) : this;

});

}

$.shuffle = function(arr) {

for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);

return arr;

}

})(jQuery);

Now here’s a great example of applying the code for randomizing ads:

//Function to display ads on the jQuery Blog and shuffle

(function($)

{

var displayAds = {

ads: {

1: {

title: “jQuery UI Widgets for PC, Mobile and Touch devices”,

href: “http://www.jqwidgets.com”,

img: “jqwidgets.png”

2: {

title: “jQuery Chop Slider 2.0 – The most eye catching image slider on the internet!”,

href: “http://www.idangero.us/cs/”,

img: “idangerous.jpg”

3: {

title: “Sauce Labs – Online Cross Browser Testing”,

href: “http://www.saucelabs.com/scouthome?utm_source=banner&utm_medium=flat&utm_campaign=all+all+banner+jquery4u”,

img: “sauce-labs.jpg”

4: {

title: “Diamond Slider – Ken Burns Effect & Unlimited Transitions”,

href: “http://www.diamond.billykids-lab.net/”,

img: “diamond-slider.jpg”

5: {

title: “AJAX Zoom – jQuery Dynamic 2d/360 Degrees Zoom with ipad support.”,

href: “http://www.ajax-zoom.com”,

img: “ajax-zoom.jpg”

}

signupAd: {

title: “Advertise here”,

href: “http://www.jquery4u.com/advertise/”

shuffleAds: function(arr)

{

for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);

return arr;

load: function()

{

$(‘#shuffle-ads’).hide();

var adContainer = $(‘#jq4u-sidebar-ads’).empty(), adsArray = Array();

/* construct ads */

$.each(this.ads, function(i,v)

{

adsArray.push(‘

‘);

});

/* shuffle ads in random order */

adsArray = this.shuffleAds(adsArray);

/* output ads */

$.each(adsArray, function(i,v)

{

adContainer.append(v);

});

/* add the signup ad */

adContainer.append(‘

‘ + this.signupAd.title + ‘

‘);

/* show shuffle button */

adContainer.append(‘Shuffle‘);

$(‘#shuffle-ads’).live(‘click’, function(e)

{

e.preventDefault();

displayAds.load();

});

$(‘#shuffle-ads’).show();

}

$(document).ready(function() {

displayAds.load();

});

})(jQuery);

Hope a lot of you will benefit from this tutorial. Let me know how this code works for you, alright?

Incoming search terms for the article:

Top Ten Web Designing Software

Nancy — Fri, 18 Nov 2011 23:48:10 +0000

So piggying back after the awesome new Photoshop tutorials from our Blogfreakz readers, I have highlighted some more fantastic web designing programs worth investigating too!

Web design is the first and foremost element that captures the attention of a visitor. Of course the other contents that retain visitors and make them perform an action in the website are important too, however, it is imperative that no stone should be left unturned to get all the attention of visitors. Today creating websites have become as easy as pie, thanks to the website builders and web design software. With so many web design software available in the market, it makes it difficult to choose and this list of top ten web designing software can guide you to choose the one best suitable for your needs. Enjoy!

Photoshop is undoubtedly must be the 1st in the list of web design software. When it comes to manipulating images or creating graphics for websites, Photoshop is the go to software. This has been the number once choice of web designers and web design companies to create that picture perfect web design. The innumerable tools available in the software make it very easy, even for the novice designer, to create amazingly attractive web designs. Apart from its several benevolent features that help in creating web pages, the software comes with excellent support in the form of help files, tutorials, and online support.

Dreamweaver, one of the most preferred software in the web design industry. Several features of the software such as syntax highlighting, code hinting project and workflow management ensures easy way of creating flawless web templates. One other feature is its in built FTP client which allows the users to have a glance at end product as well as the source code.

If you are on the lookout for a convenient tool for slicing and dicing a design mockup into HTML/CSS, Fireworks is the perfect software.

Kuler can help you create, alter, blend, and match colors as you wish. When it comes to creating color swatches or using RGB and HEX codes, this could be the best one in the market.

Pixlr is one other image editor that is note worthy. In fact you can perform most of the tasks you would do with your Photoshop editor. Although not up to the caliber of Photoshop, it is surprising that you can download this software free of cost.

Photoscape is yet another free software where you can create and manipulate images and designs similar to that of Photoshop.

Pingdom is a favorite tool of web developers when it comes to testing the performance of the designed pages. It points out any flaws in web page and thus helps designers to create perfect design.

Panic Coda which is similar to Pingdom is for Mac OS X operating system. It enables the designer to identify flaws and allows a design team to work in unison to eliminate flaws.

Yuuguu is a multi-platform screen sharing tool, which again comes handy when several techies are involved in the design project.

BEEdit is an HTML and text editor for Mac, which includes features for editing, searching, and manipulation of text. It comprises required HTML tools for creating a perfect coding.

This list is by no means exhaustive, and if you guys want me to expand on any of those not yet listed, please do let me know in the comments!

Incoming search terms for the article:

Photo Manipulation Tutorials: 50 Wickedly Creative Tips

Ahmad Hania — Wed, 16 Nov 2011 19:31:57 +0000

Wicked Tips and Tricks – lets see what some of you Blogfreakz out there can do!

Since our last Photoshop tutorial titled: Adobe Photoshop Tutorials: Collection of Amazing Tips And Tricks , we got so much positive feedback that we decided to put together another collection of tutorials concentrating on photo manipulation. In this post, you’ll find everything from How to Create Cityscape Concept Art to Making a Devastating Tidal Wave in Photoshop. Now the hard part will be deciding which of these amazing tutorials you will use in your next creations. Hope you enjoy!