Speckyboy Design Magazine http://speckyboy.com Web Design News, Resources & Inspiration Wed, 16 Apr 2014 09:08:43 +0000 en-US hourly 1 Stop Worrying About People Stealing Your Ideashttp://speckyboy.com/2014/04/16/stealing-your-ideas/ http://speckyboy.com/2014/04/16/stealing-your-ideas/#comments Wed, 16 Apr 2014 09:08:43 +0000 http://speckyboy.com/?p=47964

Ideas: the germs that grow into those great, award-winning designs we all want to have our names attached to. We all get dozens of ideas constantly, which typically range from fairly good to amazingly good....


The post Stop Worrying About People Stealing Your Ideas appeared first on Speckyboy Design Magazine.

]]>


Ideas: the germs that grow into those great, award-winning designs we all want to have our names attached to. We all get dozens of ideas constantly, which typically range from fairly good to amazingly good. Ideas are an abundant commodity that we all have, as creative people.

In fact, most designers have more ideas than they know what to do with. Yet, most jealously hide their ideas, paranoid that someone will “steal” them and do something that will undermine their own fame as a designer. We’re going to explore some important reasons why it’s stupid to worry about or people potentially stealing your ideas.

Ideas Mean Nothing

First of all, success is 99% execution. The sweat and hard work that go into making a design a reality is really what matters – that’s the important part. Only 1% of success is the idea. Ideas are useless on their own. We all get them – they only mean something if you make them happen. You can have ideas that are sort of ‘blah’, and yet still dominate your field through hard work.

designers gets an idea

The good news is, people who steal others’ ideas don’t realize this. They think it’s the idea itself that is valuable. But the truth is, a mediocre idea executed well is worth a lot more than a great idea executed poorly. So, if you have good ideas, and you work hard to turn them into something, you can always generate more ideas and have success as a designer.

Telling People Gives You More Ideas

Sharing your ideas will usually foster the development of new ideas. If you’re creative, that is (which you are; why else would you be reading this?). The person you share your ideas with can give you an outside perspective and some much-needed feedback about whether your idea is actually as good as you think it is. You can also brainstorm together with others to come up with a myriad of different ideas, each one stronger than the last.

designer confused sharing ideas new and stealing your ideas

If you only have one idea, though, that’s a bad sign. It’s important to avoid ‘one-itis’, or fixating on a single idea to the exclusion of all others. You might be completely convinced that that one, single idea is the end all, be all thing that’s going to make your career, but it probably isn’t. Success is a culmination of the little things, the daily triumphs we make each time we complete a new project that we’re proud of. So go out there and make as much work as you can.

Provide Value To Others

When you share ideas, you help the entire design community. It’s important to give back to your fellow designers who might be struggling with the same issues you did once upon a time. I’m not saying you have to give away all of your “trade secrets” (although even that’s not as taboo as it used to be). But talking out an idea and letting others transform it in their own unique ways can inspire you as well. You might see a completely different approach to an idea that you hadn’t considered before.

Someone Else Probably Thought Of It Anyway

Exactly what it says on the tin. Ideas occur simultaneously to different people all the time, often without them even knowing it. This is why some work can look strikingly similar without the designers even having heard of each other. Great minds think alike. That’s the reason you can’t legally copyright an idea. We humans are just too similar in our thought patterns.

designers shaking hands great minds think alike

The key is taking an idea that other people might have already explored and doing it in your own unique way, using your experiences and skills as a designer to put an unconventional spin on it. As the saying goes, everything has been done before, but not by you.

In Conclusion

Finally, keep in mind that ideas are rarely stolen wholesale anyway. Usually, someone takes bits and pieces of ideas from various sources (or they should, anyway). As we saw earlier, everything is a remix – not a direct copy. Very few designers who have any pride in their abilities at all will actually want to steal your idea entirely. Those are called hacks – they’re very easy to spot, and the design community doesn’t normally tolerate them for long.

Image Source: Ratch’s Portfolio via Shutterstock.

The post Stop Worrying About People Stealing Your Ideas appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/16/stealing-your-ideas/feed/ 0
How to Create Stylish CSS Buttonshttp://speckyboy.com/2014/04/15/create-stylish-css-buttons/ http://speckyboy.com/2014/04/15/create-stylish-css-buttons/#comments Tue, 15 Apr 2014 14:58:11 +0000 http://speckyboy.com/?p=48046

In this tutorial, I’m going to run through the basics of 4 different style buttons – flat, border, gradient & shadow (skeuomorphic), and press style buttons. I’ll reset all the CSS so that buttons display...


The post How to Create Stylish CSS Buttons appeared first on Speckyboy Design Magazine.

]]>


In this tutorial, I’m going to run through the basics of 4 different style buttons – flat, border, gradient & shadow (skeuomorphic), and press style buttons. I’ll reset all the CSS so that buttons display consistently across devices, and I’ll style each set of buttons with a :hover and :active state. Without further ado, let’s dig into the HTML.

Getting Started with the HTML

The HTML I’m using is straightforward. I have four sections, each with their own class, that will allow me to target the buttons inside that section. Of course, if you want to target all or specific buttons on your site, then adjust accordingly by adding classes to specific buttons, or not adding classes at all. I also added .hover and .active classes to some of the buttons, so that you can see what they look like in all three states in the demo without actually hovering and pressing. Here’s my HTML set up:

<section class="flat">
    <button>Button</button>
    <button class="hover">:hover</button>
    <button class="active">:active</button>
</section>
<section class="border">
    <button>Button</button>
    <button class="hover">:hover</button>
    <button class="active">:active</button>
</section>
<section class="gradient">
    <button>Button</button>
    <button class="hover">:hover</button>
    <button class="active">:active</button>
</section>
<section class="press">
    <button>Button</button>
    <button class="hover">:hover</button>
    <button class="active">:active</button>
</section>

The CSS For All Buttons

Different browsers handle default styling of buttons differently. The following CSS resets all the styles, and adds some defaults (that you can adjust). We’re going to get rid of any default shadows, border-radiuses, appearances, and outlines. Here’s what the CSS looks like:

button {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 15px 45px;
  font-size: 48px;
  font-family: "Bitter",serif;
  line-height: 1.8;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
}
button:focus {
  outline: none
}

Easy enough. Now let’s dig into each of our button styles. Note: I didn’t prefix any of my CSS properties for the sake of simplicity. To ensure as much cross browser uniformness as possible, prefix your necessary styles accordingly.

1) Flat Style CSS Buttons

Flat style buttons are very popular these days, and directly in line with the flat-design trends that are everywhere. Buttons in the past tended to stand out a bit more, but people are accustomed to flat buttons these days, and these style buttons work just fine. Just make sure you line them up in areas where users would expect to find a button. Here’s an image of this CSS button in its normal, hover, and active states.

flat

The CSS for this is fairly straightforward. We get rid of the border, add a background colour and a text shadow. The hover and active states are indicated by a slightly darker background colour and text shadow. Here’s the CSS:

section.flat button {
  color: #fff;
  background-color: #6496c8;
  text-shadow: -1px 1px #417cb8;
  border: none;
}
section.flat button:hover,
section.flat button.hover {
  background-color: #346392;
  text-shadow: -1px 1px #27496d;
}
section.flat button:active,
section.flat button.active {
  background-color: #27496d;
  text-shadow: -1px 1px #193047;
}

2) Border Style CSS Buttons

Border style buttons are in the same class as flat buttons. The only difference is that instead of using a background colour, we’ll use a border instead. Here’s an image of this CSS button in its normal, hover, and active states.

border

Once again, the CSS is fairly straightforward, and we’ll just be targeting the border colour and text colour. Each of these two properties gets a bit darker on hover and active. Here’s the CSS:

section.border button {
  color: #6496c8;
  background: rgba(0,0,0,0);
  border: solid 5px #6496c8;
}
section.border button:hover,
section.border button.hover {
  border-color: #346392;
  color: #346392;
}
section.border button:active,
section.border button.active {
  border-color: #27496d;
  color: #27496d;
}

3) Gradient & Shadow Style CSS Buttons (Skeumorphic)

These buttons are more in line with what we’re accustomed to seeing in the days gone by. If those multicoloured gradient/shadow style buttons are suited to your project’s style, then these are for you. The best thing is that it’s all done with CSS, so can easily be scaled up or down without resolution loss, or having to create new images. Here’s an image of this CSS button in its normal, hover, and active states.

Gradient Shadow Style CSS Buttons tutorial

The CSS for this style makes use of gradients and shadows. On hover, a shadow will appear around the button, and on active, the shadow will be inset to give it a “pressed” look. Flat background colours will serve as the fallback for browsers that lack gradient support, and the shadow of course is just embellishment. Here’s the CSS:

section.gradient button {
  color: #fff;
  text-shadow: -2px 2px #346392;
  background-color: #ff9664;
  background-image: linear-gradient(top, #6496c8, #346392);
  box-shadow: inset 0 0 0 1px #27496d;
  border: none;
  border-radius: 15px;
}
section.gradient button:hover,
section.gradient button.hover {
  box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047;
}
section.gradient button:active,
section.gradient button.active {
  box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047;
}

4) Press Style CSS Buttons

These “press” style buttons combine a bit of flat design and skeuomorphism, giving the user the feeling that they actually pressed the button. It seemingly sinks into the page when the user pressed it. Here’s an image of this CSS button in its normal, hover, and active states.

Press transparent ghost Style CSS Buttons

The CSS here is slightly more complicated than the previous demos, and requires a little bit of math. But it’s still very easy to grasp. We style our button initially with an un-blurred box shadow to give it a 3D pop out look. On hover, the background colour gets a bit darker. When the button is pressed, the shadow gets smaller, and we will apply a CSS3 transform (translateY) downward equal to the difference in the box shadow normal and active values. Sounds a lot more complicated than it is, but take a look at the CSS and you’ll have a clearer understanding. Here it is:

section.press button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}
section.press button:hover,
section.press button.hover {
  background-color: #417cb8
}
section.press button:active,
section.press button.active {
  background-color: #417cb8;
  box-shadow: 0 5px #27496d;
  transform: translateY(5px);
}

Wrapping Up

And there you go! Stylish, elegant, and funky CSS buttons for all your needs. They are highly customisable, scalable, and easy to use. There are some basic CSS media queries in the source folder, but you might want to use your own sizing/media queries in your project. Don’t forget, you can download the source or view the demo by clicking the links below. Thanks for reading, and feel free to leave any comments, suggestions, or opinions below!


The post How to Create Stylish CSS Buttons appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/15/create-stylish-css-buttons/feed/ 0
Weekly News for Designers (N.230)http://speckyboy.com/2014/04/15/weekly-news-designers-n-230/ http://speckyboy.com/2014/04/15/weekly-news-designers-n-230/#comments Tue, 15 Apr 2014 07:08:13 +0000 http://speckyboy.com/?p=48021

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week. You can sign-up to our awesome weekly newsletter for some more amazing...


The post Weekly News for Designers (N.230) appeared first on Speckyboy Design Magazine.

]]>


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

Reading & Learning

7 things I wish every search box did by Nicolas Dessaigne.
7 things I wish every search box did by Nicolas Dessaigne weekly news designers

How I joined Google, the personal story and experience of Sebastien Gabriel.
How I joined Google, the personal story and experience of Sebastien Gabriel weekly news designers

Writing code every day by John Resig.
Writing code every day by John Resig weekly news designers

Post flat design by Wells Riley.
Post flat design by Wells Riley weekly news designers

All the passwords you should change because of Heartbleed, in one handy graphic.
All the passwords you should change because of Heartbleed, in one handy graphic weekly news designers

Alternatives to Prefixr by Rey Bango.
Alternatives to Prefixr by Rey Bango weekly news designers

15 Responsive and Lightweight Front-End Frameworks Worth Considering
15 Responsive and Lightweight Front-End Frameworks Worth Considering weekly news designers

New Resources & Freebies

BASSCSS, a simple and responsive CSS/SASS toolkit based on OOCSS principles.
BASSCSS a simple and responsive CSS/SASS toolkit based on OOCSS principles weekly news designers

scrollToBySpeed.js, a jQuery plugin that let's you scroll the window by speed rather than by duration.
scrollToBySpeed.js a jQuery plugin that let's you scroll the window by speed rather than by duration weekly news designers

HideSeek, a simple yet customizable live search jQuery plugin.
HideSeek a simple yet customizable live search jQuery plugin weekly news designers

bLazy.js, a lightweight pure JavaScript script for lazy loading and multi-serving images.
bLazy.js, a lightweight pure JavaScript script for lazy loading and multi-serving images weekly news designers

MotionDetector.js, a motion detection JS library.
MotionDetector.js, a motion detection JS library weekly news designers

Magic Animations, a useful collection of CSS3 Animations with special effects.
Magic Animations, a useful collection of CSS3 Animations with special effects weekly news designers

Iconica, a free icon font that comes in three styles: Regular, Circle and Cut.
Iconica, a free icon font that comes in three styles: Regular, Circle and Cut weekly news designers

Ficons, a free colorful icon-set (42 icons in PSD format).
Ficons, a free colorful icon-set 42 icons in PSD format weekly news designers

Free minimal UI kit (PSD).
Free minimal UI kit PSD weekly news designers

Awesome Kit, a free set of 26 iOS7 wireframe templates and brushes (AI).
Awesome Kit, a free set of 26 iOS7 wireframe templates and brushes weekly news designers

A free vintage infographic design kit (AI).
A free vintage infographic design kit weekly news designers

Intro Condensed, a free font from FontFabric.
Intro Condensed, a free font from FontFabric weekly news designers

…and finally…

IE6 is finally dead!!!
IE6 is finally dead!!! weekly news designers


The post Weekly News for Designers (N.230) appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/15/weekly-news-designers-n-230/feed/ 0
25 New Frontend jQuery Pluginshttp://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/ http://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/#comments Mon, 14 Apr 2014 09:31:11 +0000 http://speckyboy.com/?p=48006

In this post, we have put together some of the most popular frontend jQuery plugins that have been released recently. And, are also very easy to implement and configured within minutes. The jQuery plugins on...


The post 25 New Frontend jQuery Plugins appeared first on Speckyboy Design Magazine.

]]>


In this post, we have put together some of the most popular frontend jQuery plugins that have been released recently. And, are also very easy to implement and configured within minutes.

The jQuery plugins on this page are diverse: there are plugins that let you work with menus and scroll effects, and even some that will help you lazy load images and videos. While we have tried to compile most of the best jQuery plugins here, just in case you need more, be sure to check out our jQuery archives.

Frontend jQuery Plugins

Slidebars

Slidebars frontend app-style push-menu jquery plugins

Slidebars is a lightweight (2kb) plugin for creating an app-style push-menu. It uses hardware accelerated transitions where possible for quick and smooth animation, falling back to jQuery .animate() on non-supported browsers.

Slidebars →

Fluidbox

Fluidbox frontend Medium lightbox module jquery plugins

The Fluidbox plugin is a replication of the Medium.com lightbox module, with some added improvements. It handles higher resolution, linked images elegantly, such that it only preloads them when users click on the thumbnails.

Fluidbox →

SVGMagic

SVGMagic simple SVG fallback jquery plugin

SVGMagic is a simple SVG fallback plugin that finds SVG images on your site and creates PNG versions if the browser doesn't support them.

SVGMagic →

jQuery.keyframes

 front-end jquery plugins support multiple keyframes animation jQuery.keyframes

jQuery's animate() does not support multiple keyframes, this plugin helps you accomplish that. jQuery.keyframes generates and runs CSS3 keyframes with callback events.

jQuery.keyframes →

jquery.matchHeight.js

jquery.matchHeight.js is a more robust equal heights plugin for jQuery front-end

jquery.matchHeight.js is a more robust equal heights plugin for jQuery, by adding features and handling the edge cases where the others plugins and solutions tend to fail.

jquery.matchHeight.js →

nanoGALLERY

nanoGALLERY responsive touch-enabled easy to use image gallery plugin jquery

nanoGALLERY is a responsive, touch-enabled and easy to use image gallery plugin. It features multi-level navigation in albums, lightbox, many hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, pulling in Flickr/Picasa/Google+ photo albums, and much more.

nanoGALLERY →

jInvertScroll

jInvertScroll lightweight plugin horizontal parallax effect

jInvertScroll is a lightweight and extremely easy to setup plugin that allows you to move in horizontal with a parallax effect while scrolling down.

jInvertScroll →

jQuery fontIconPicker

fontIconPicker lightweight plugin simple icon picker

fontIconPicker is a lightweight plugin that allows you to include a simple icon picker (with search and pagination) within any form.

jQuery fontIconPicker →

HideSeek

HideSeek customizable jQuery plugin for live search

HideSeek is a simple, yet customizable jQuery plugin for live search.

HideSeek →

fullPage.js

fullPage.js fullscreen scrolling websites jQuery plugin

fullPage.js is a simple plugin to create fullscreen scrolling websites.

fullPage.js →

Responsive Tabs

Responsive Tabs A jQuery plugin that offers responsive tab functionality

Responsive Tabs is a jQuery plugin that offers super-easy to implement responsive tab functionality.

Responsive Tabs →

anoFlow

anoFlow feature-rich responsive lightbox gallery plugin

anoFlow is a feature-rich and responsive lightbox/gallery plugin.

anoFlow →

RowGrid.js

rowGrid.js images grid infinte scrolling frontend jquery plugins

rowGrid.js is a plugin for placing images on a grid (with support for infinte scrolling) similar to grids found on Google image search, flickr, Shutterstock and Google+ images.

RowGrid.js →

GifPlayer

GifPlayer plugin control play and stop animated gifs jquery

GifPlayer is a small plugin that allows you to control when to play and stop animated gifs.

GifPlayer →

jQuery Tilted Page Scroll

 frontend jQuery Tilted Page Scroll plugins

The jQuery Tilted Page Scroll allows you to create a beautilful and unique 3D tilted scrolling effect on your website. You should check out the demo!

jQuery Tilted Page Scroll →

Data-Img

Data-Img responsive image delivery jquery plugins

Data-Img is a simple plugin for dealing with responsive image delivery. It will replace the images from 'image src' or 'background-image url' depending on screen width.

Data-Img →

Flickerplate

Flickerplate responsive touch-enabled lightweight flick content

Flickerplate is a responsive, touch-enabled and lightweight (only 12kb) plugin that allows you to 'flick' through content. It does also need. Modernizr for touch detection and the jQuery.Finger library for touch events (both bundled).

Flickerplate →

Image Lightbox, Responsive and Touch-friendly

Image Lightbox Responsive Touch-friendly frontend jquery plugins

Image Lightbox, Responsive and Touch-friendly →

jquery.adaptive-backgrounds.js

extracts the dominant color from the images on your web page and magically applies the color to their parent jquery plugins

jquery.adaptive-backgrounds.js is a really cool plugin that extracts the dominant color from the images on your web page and magically applies the color to their parent.

jquery.adaptive-backgrounds.js →

BttrLazyLoading

BttrLazyLoading load images viewport scrolls plugin

BttrLazyLoading is a plugin that allows your web app to only load images within the viewport as the user scrolls. It also allows you to have different version of an image for four differents screen sizes: phones (<768px), tablets (=768px), desktops (=992px) and large Desktops (=1200px).

BttrLazyLoading →

CurvedText

 frontend jquery CurvedText align text curve

CurvedText is a simple jQuery plugin that allows you to align text on any curve.

CurvedText →

jQuery-Cropbox

jQuery-Cropbox image cropping frontend jquery plugins

jQuery-Cropbox is really useful plugin for in-place image cropping (zoom & pan, as opposed to select and drag).

jQuery-Cropbox →

Flip-Quote

jQuery Flip-Quote frontend jquery plugins

jQuery Flip-Quote creates a pull-quote from a text quote found in the document that flips once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

Flip-Quote →

Lazy Load XT

Lazy Load XT is a mobile-first, fast and extensible plugin for lazy loading of images and videos. It comes with build-in support for the jQueryMobile framework.

Lazy Load XT →

jquery.wanker.js

jquery.wanker.js frontend jquery plugins

jquery.wanker.js is a humourous jQuery plugin that reveals a public service announcement when people start excessively resizing their desktop browser as they try to see your responsive breakpoints. As they say 'The web is meant to be read, not squished!'

jquery.wanker.js →


The post 25 New Frontend jQuery Plugins appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/feed/ 0
Weekly Web & Mobile Creativity n.60http://speckyboy.com/2014/04/13/weekly-web-mobile-creativity-n-60/ http://speckyboy.com/2014/04/13/weekly-web-mobile-creativity-n-60/#comments Sun, 13 Apr 2014 09:44:33 +0000 http://speckyboy.com/?p=47856

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week. You may also like to browse...


The post Weekly Web & Mobile Creativity n.60 appeared first on Speckyboy Design Magazine.

]]>


It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

Space Needle

Space Needle web inspiration

MY/STATIC/SELF

MY/STATIC/SELF web inspiration

World of SWISS

World of SWISS web inspiration

Mixpanel Black Car

Mixpanel Black Car web inspiration

Vtcreative

Vtcreative web inspiration

Next Fontshop

Next Fontshop web inspiration

Kickdrop

Kickdrop web inspiration

The Obakki Foundation

The Obakki Foundation web inspiration

150 Pixels

150 Pixels web inspiration

You may also like to browse the Web & Mobile Creativity Archives.

The post Weekly Web & Mobile Creativity n.60 appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/13/weekly-web-mobile-creativity-n-60/feed/ 0