Category Archives: Front-End Design

Front-end design and development techniques from ‘corePHP’

Fresh and Useful Freebies for Designers & Developers – Part I

intro-image

A developer or a designer always looks forward to having a good set of resources up and ready in his/her arsenal to make work much easier and faster. And the fun gets doubled when you do not need to pay a single penny for availing these resources.

So we at ‘corePHP’ took it a bit seriously and did a broad and in-depth research to present to you some of the best, most useful and fresh resources for developers and designers which are absolutely free of charge. Continue reading

Creatively Designed HTML5/CSS3 Websites For Your Inspiration (Part – I)

intro

The web is constantly evolving. Every day, web developers and designers are creating new and extremely creative websites that are pushing HTML to its limits. HTML5 armed with its advanced animation and video rendering capabilities have snatched the crown from HTML4, which ruled the World Wide Web for more than a decade.

Most importantly it works on almost every browser. It is compatible with the old browsers and also with the mobile browsers like Blackberry, iPhone and Android based phones and tablets. It allows websites to load much faster and allows better and smoother connections with third party applications too.

In this series, we have put forward some of the best, most innovative, creative and beautifully designed websites with HTML5 and CSS3 that came out after our exhaustive research on this topic. The main purpose of this series is to stimulate the creative side inside you and inspire you to become a better designer.

Creative HTML5/CSS3 Websites

The Moustache Game

(View Website)

An innovative and funny website which allows visitors to add moustache to people via video sharing platforms like YouTube.

the-moustache-game

Tissot T-Touch Tactile Watch

(View Website)

A beautifully designed website which lets you try out the various features of the Tissot T-Touch watch, in a virtual immersive environment.

tissot-t-touch-watch

HTML5 & CSS3 Readiness

(View Website)

A simple and interactive website, visually depicting the various features of HTML5 and CSS3 available in various popular browsers with time.

html5-css-readiness

Inzeit

(View Website)

A beautifully designed single page website which vertically scrolls down to reveal its amazingness.

inzeit

Angry Birds Space

(View Website)

Love playing Angry Birds? Then this is something you should not miss.

angry-birds-space

Vlog

(View Website)

One of the most innovative and creatively designed HTML5 website, I have ever seen. It gives you an amazing rotating wheel where you can discover various videos with just a click of a button.

vlog

Dangers of Fracking

(View Website)

This webpage explains the process of Hydraulic Fracturing, with simple graphics and illustrations and making great use of the parallax scrolling effect.

hydraulic-fracturing

Art Ingenious

(View Website)

It is a simple HTML5 website making great use of an elegant hover effect inside it.

art-ingenious

Awesome CSS/HTML Tutorials: Part One

This new year, you are in for a treat at ‘corePHP’. We are introducing a new series called “Awesome CSS/HTML Tutorials” series. In this series each week we will be posting an article featuring 10 hand-picked and awesome tutorials to create wonderful effects and elements using CSS and HTML.

So, let’s kick start this new year with some amazing tutorials that will help you create wonderful websites this new year.

Continue reading

20 Useful jQuery Plugins for your Projects

jQuery has been easing our job of applying complex and beautiful effects and features to our websites for years. However, before you dive into a sea of coding, let me introduce you to some awesome jQuery plugins that will add some cool effects to your websites without having to code thousands of lines of codes.

However, if you are a newbie and want to apply these effects on your WordPress or Joomla powered websites, then I would recommend that you get it done by ‘corePHP‘s spectacular WordPress Development and Joomla Development team.

Adaptive Backgrounds

Adaptive Backgrounds

This plugin colours the background of a section of your website automatically with the dominant colour in a picture that you choose.

Download Adaptive Backgrounds

Continue reading

5 Handy CSS Tricks to Save your Time

Tricks are often useful when handling complex or time consuming works by speeding up your work process with some shortcuts. And so are some CSS tricks, which can dramatically improve your work process and help you code and design better in no time.

In this article, I will be discussing 5 very handy CSS tricks which can really save time and ensure that you complete your project before your deadline. Note: – Some of these CSS tricks are still in the experimental stage, and haven’t been widely implemented in all the browsers. They are yet to be implemented in all the major browser, though you can still see these effects in some specific browsers like Opera.

1) Using CSS Variables

CSS Variables

You can use CSS variables to ease your job when setting a preferred colour palette or defining some pre-decided sizes. Continue reading

40+ Awesome Menu and Button Making CSS3 Tutorials to Boost Your Skills

CSS3 is completely changing the web design world and the way we design webpages. Now-a-days, we need not to rely much on JavaScript and images to design awesome design elements for our websites. CSS3 does the magic for us easily and efficiently. Though there are many designers who are still reluctant to use CSS3 due to lack of support in some browsers, but there are many who are moving forward and designing some awesome stuff in CSS3. So, if you want to boost your skills in designing some awesome menus and buttons using CSS3 too, then this article is something you were looking for. We have worked very hard in compiling only the best and the most well-written tutorials available in the Web. We have decided to include both Button and Menu making tutorials so as to make this list an epic collection. Continue reading

jQuery click event fires twice

Today I had an issue with jQuery where a listener for a ‘click’ event was being triggered twice.
With the following code, I would get two logs in the console:

jQuery(document).ready(function(){
	jQuery('#button').click(function(){
		console.log(1);
		return false;
	});
});

I was even trying the jQuery(function() { }); method, but I would still get the same results.

After some debugging, I figured out that if I moved that javascript to be inside the <head></head> tag instead of the <body></body> tag which is where I originally had it, that would fix the problem.

Hope it helps,
Rafael Corral
Lead developer

CMS Expo Presentations

The beginning of May ‘corePHP’ attended the CMS Expo for the 4th time. This year was a complete blast and the best yet. Over the 4 days of attending the Expo we learned a lot of useful new material and met a great deal of new faces. We thank everyone who came out to make the Expo a complete success and we look forward to attending next year.

Continue reading

Our new plugin makes CSS3 in IE (and any other browser) easy!

What is this?

Anyone who has tried to add CSS3 to their site knows how difficult and time consuming it is to figure out the correct code for the correct browsers. Also, how do I make it work with IE? Wonder no more! With the Automated CSS3 Generator Plugin all you need to do is enter the values for the CSS3 you need and it does the rest. It also only outputs the CSS for the browser you are using so you won’t need 4 lines of CSS to do a simple rounded corner anymore. Continue reading