RealcomBiz

Image-Free Custom Checkboxes and Radio Buttons with CSS3

by Durodola Ridwan | Tuesday, April 22, 2014 |
With CSS3 we can customize web presentations or form elements to be almost anything we want. Some of the form elements that are a bit tricky to style are checkboxes and radio buttons. If you have been battling with the styling, then this post is for you.


  View Demo  

The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with CSS3 styling. Then use the :checked and :disabled selector to alternate the styling between their checked, unchecked and disabled versions.

Read more→

10 CSS3 Effects Libraries to Spice Up Your Designs

by Durodola Ridwan | Friday, April 18, 2014 |
The latest CSS3 properties have opened a multitude of new doors to web designers and developers. It's now possible to create animations and interactivity entirely in CSS markup, without going near Flash, Silverlight or After Effects.
Also, having a bunch of JavaScript execute complex code in order to animate an on screen element is less than ideal. Plus animations through JavaScript occasionally need non semantic HTML to be inserted in order to make everything happen. This is exactly why CSS3 effects are awesome.

If you want to take advantage of these modern CSS capabilities, one best solution is to use CSS effects libraries. Luckily this post features 10 best CSS effects libraries you can use to spruce up your design. Enjoy!


Magic CSS3 Animations

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the minified version: magic.min.css. There are special effects like bling, perspective, rotate, static, slide, tin, math, bomb etc.
Also they have mentioned about new version release in future with more effects. Each of these effects has their own classes. In order to apply the effect to your html element, you just have to add the respective classes to the targeted elements via JavaScript. Magic is simple to use and most of the animations are cross-browser compatible.



Read more→

Keeping it Simple with Responsive Web Design - Infographic (Sponsored)

by Durodola Ridwan | Thursday, April 17, 2014 | |
Responsive Web Design is being hailed as an excellent solution to the problem of keeping all visitors to your website happy, regardless of whether they are browsing via a smartphone, tablet or PC.

The fundamental concept that is the driving force behind responsive web design is referred to as progressive enhancement or PE for short. It is based on the premise that designs need to be built from the ground up, so that a website design is capable of being seen in its best light and is still user-friendly regardless of whether the platform being used by the surfer is the most suitable or not.

PE is driven by the belief that the primary goal is to optimize a website for mobile users, with any added enhancements to keep PC users happy, added at a later stage. When you consider that an estimated 60% of all daily internet surfers use a mobile device in order to access content online, you can soon appreciate why it is so important to use Responsive Web Design, and why you risk alienating potential customers or visitors to your site, who may quickly navigate away again if the site is not as responsive as they would like or the pages do not offer optimized viewing.

Making Responsive Web Design an integral part of your site is not as challenging as you might believe, even some relatively small but subtle adjustments to your existing site can offer you the chance to provide content and images that are scaled based on proportions, which means than your website will look great to both a mobile web user and a PC user.

This infographic helps to explain what is behind Responsive Web Design and helps to illustrate why a user-friendly website that accommodates a growing number of mobile web users, is going to have a competitive advantage over sites that do not make allowances for the different types of surfers who are accessing their website.


Source

Download larger version of this infographic.
Read more→

10 Best Node.js Books for Beginners

by Durodola Ridwan | Tuesday, April 15, 2014 | |
I don't need to bore you with all the story of node.js or what it does. I will just give you a brief note about it. Node.js is a software platform for scalable server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on Windows, Mac OS X and Linux with no changes.

For performance and scalability. Node is fast. That’s a pretty important requirement when you’re a start-up trying to make the next big thing and want to make sure you can scale quickly, coping with an influx of users as your site grows.

As someone who’s looking to learn more about this software platform, you will need some great resources to help ease your woes, and that's what this post encompass. We have compiled 10 best books that if you are just starting out to learn node.js. I guarantee you that you'll find it useful.


Learning Node: By Shelley Powers

This is a 16 chapters and 282 pages information loaded node.js book. With is guide, you will learn how to write fast, highly scalable network applications on this JavaScript-based platform. You will also learn how to create a server with Node.js, Connecting with MySQL database, handling Form data, Using Mongodb as alternative to MySQL database, Working with Express framework, Graphics and Media access, Sending email, Node.js API, ETC.



Read more→

Textillate.js - Animate Text With CSS3

by Durodola Ridwan | Saturday, April 12, 2014 | |
Textillate.js is an amazing jQuery plugin that creates stunning CSS3 text animation. Although, there are some other jQuery plugins linke Animate.css that lets you animate text, but it only animated wholly, not letter by letter. With Testillate.js, you can easily animate your text the way you want. It provides animation effects such as flash, bounce, shake, swing, flip and more.

Read more→

10 Essential Books for Learning Responsive Web Design

by Durodola Ridwan | Wednesday, April 09, 2014 | |
With the ever-increasing need to view websites on mobile devices, websites have to be adaptable to different screen resolutions. Responsive web design seems like a tough egg to crack. You want to make sure your web work is fluid enough to keep up in the ever-changing digital age. You need a little help with the overall process from start to design to development. Today post features 10 Best Books for Learning Responsive Web Design. Enjoy!



Responsive Web Design

This is a must-read responsive web design book. It’s written by Ethan Marcotte, a popular designer who conceptualized the idea of responsive web design. With this book, you will learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users' needs. Ethan Marcotte explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) is their display.



Read more→

Designers: 15 Places To Build and Showcase Your Portfolio

by Durodola Ridwan | Tuesday, April 01, 2014 |
Working in a creative industry often means that you need to present your work on a global stage, using an attractive and professional platform. As a designer, you need to have a solid web page where you can display your work as a reference for your skills and expertise. Of course, you can have printed versions of your work. Nevertheless, online pages are still the most accessible place where a large number of people can see your portfolio.

There are many websites that you can choose to showcase your portfolio, but with the many choices present, it might be difficult to choose which one that best suit your needs. So, we have surf through the whole web to bring you the 15 best sites to build and showcase your portfolio. Enjoy!



Carbonmade

Carbonmade is one of the best portfolio sites available online. It allows you to show off the masterpiece of your work in a user-friendly and flexible interface. This portfolio design website has close to 800,000 portfolios at the time of writing. And also, it allows you to put together "a hassle-free online portfolio" without HTML knowledge.



Read more→

The Best Freebies for Designers (March 2014)

by Durodola Ridwan | Sunday, March 30, 2014 |
Anyone working in web design and development space knows that having a regular supply of fresh resources makes it easier to get done with a project faster. As we have promised to be bringing you the best freebies for designers every month.
This month we have got 60 fresh new sets of freebies for designers, featuring Brushes & Textures, Icons, Fonts, Branding/Identity Mockup, and some other cool freebies you will be eager to have. Enjoy!



Brushes and Textures


Doodle Brushes



Read more→

20 Tutorials for Learning New CSS3 Properties

by Durodola Ridwan | Wednesday, March 26, 2014 |
There are a lot of articles that have appeared over the last few years, showing us all sorts of cool things that can be done with CSS3. With CSS3, we have a range of new properties and values to give us more control over how our webpages looks and how it renders in browsers and devices.

Though, most of us might have missed some of this new prominent tutorials touting the new CSS3 properties. But here in today post, you will find tutorials that will polish your CSS3 experience and also get you familiar with the latest inventions. It is perfect for both newbies and professionals.


CSS3 Multiple Background Images



Read more→

Iconion: Converts Icon Fonts To Icon Files

by Durodola Ridwan | Monday, March 24, 2014 | |
Icon fonts are quickly becoming a web design trend and there is a good reason for that. Instead of working with a load of files in different resolutions or large sprites to be controlled by CSS, we simply embed a special font. Creating icons with icon fonts gives designers the ability to manipulate the icons with CSS, and it can improve load times by up to 15%, and because they're vector in nature, they're infinitely scalable, while still being smaller in size than an image sprite.

Read more→

10 Custom Icon Font Generators for Designers

by Durodola Ridwan | Thursday, March 20, 2014 | |
Icon fonts are the easiest way to embed vector graphics and definitely the fastest way too. Using an icon font can improve load times by up to 15%, and because they're vector in nature, they're infinitely scalable, while still being smaller in size than an image sprite. You can style icon fonts dynamically using CSS, rather than requiring a new graphic, with the added bonus of using CSS3 properties such as "text-shadow." And also leaving no room for additional HTTP request.

The downside of using an icon font is that, icons are typically grouped in discrete sets if you select icons that are not part of one specific set, you could be loading additional sets which may contain lots of unnecessary icons, resulting in extra loading time.

That's where custom icon font generators comes in. With these generators, you can create scalable and easy-to-style icons for your web projects. While there are tons of icon font generators online, here are 10 useful custom icon font generators you should consider using, starting from now!


Pictonic

Pictonic offers both free and premium versions when you sign up for an account. The first thing you should do is create an account and sign up to their website. After that, you can use their free icons, buy one icon for $0.59, or have a lifetime unlimited use of all their icons for only $199.



Read more→

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger