Agustus 2014 ~ Indonesia Web Developer

Make some cool looking perspective mockups for your
designs using CSS3 3D transforms. Very basic usage of 3D transforms but
impressive visuals achieved. Great for starting 3d stuff if you haven't
yet.

Inspired by a Photoshop plugin. App designs by Kushagra Agarwal

Perspective Mockups using CSS3 3D Transforms

How much are you worth? What we learnt from the 2014 design salary survey

By: Unknown On: 15.03

Share The Gag

How much are you worth? What we learnt from the 2014 design salary survey

Animated X-rays reveal how your bones move

By: Unknown On: 14.38

Share The Gag

Animated X-rays reveal how your bones move

CSS 3D Solar System by Julian Garnier

By: Unknown On: 13.59

Share The Gag

CSS 3D Solar System by Julian Garnier

10 Smart Tips to Leverage Google+ for Increased Web Traffic

By: Unknown On: 01.00

Share The Gag

10 Smart Tips to Leverage Google+ for Increased Web Traffic

Kamis, 14 Agustus 2014

LoremFlickr – A free placeholder image service

By: Unknown On: 20.52

Share The Gag

LoremFlickr – A free placeholder image service

Website Security Basics – Everything You Need to Know

By: Unknown On: 20.00

Share The Gag

As a web developer, you and your clients’ websites all fall under your management when developing and maintaining all aspects of the website. In other words, it’s your responsibility to design an attractive, user-friendly, and secure website. Between trends, advice, and shortcuts, the aesthetics and UX of a website has been covered extensively. The security, however, should be so crucial to you and your clients because without security, all that you’ve worked for and built can be destroyed, stolen, or (worst yet) changed.
After the popular Target hack incident, many webmasters have opened their eyes and began looking at the security of their own websites. Here’s a surprising statistic: In 2012, about 86% of all websites had at least one vulnerability. Only 61% of those were patched, and the average time until the issue was resolved was over 6 months.
How secure is your website? What can you do to prevent hackers from waltzing in?

Website Changes

We’ve all been stuck at the debugging process before searching for hours on end to find that one mistake in the code. It’s annoying and takes up way too much time, but it has to be done. When a hacker breaks into a website, they are generally after something, with money and identities topping the target list. On the way out, they don’t leave everything the way it was. No, they will make your life as difficult as possible to get the website back in good condition. So they change stuff, starting with the login. Once you realize all of the changes throughout the website, it may even be worth starting over from a backup and working from there because finding a change as opposed to something missing is like finding a needle in a haystack.

Avoiding All of this Altogether

It’s safe to say you’d rather not deal with any of what’s associated with a website break-in. So, here come the website security basics that every web developer must implement to have a secure website. Some of the topics we’ll discuss include:

Securing Logins
SQL Injections
Open-source Vulnerabilities
Cross-site Scripting (XSS)
Spam Filters
SSL/Credit Card Security

Securing Logins (Don’t skip this one!)

You’ve heard this before: “you need a secure password.” Well, let’s jump slightly further into that. Your administrative logins are the keys to your website. Protecting them should be your priority as a web developer, designer, webmaster, or owner. So the first thing is to not give out administrative logins like candy. Lock down the heart of your website and only give the access to those that need it.
As we all already know, there are two fields to a login: the username and the password. Many web developers assume if the password is secure, they’re fine. When someone recommends you change the default login, they don’t mean change the default password. They said the “login”, meaning both the username and password. I highly recommend changing the username and password to something you can remember but is secure, meaning upper-case, lower-case, numbers, and symbols. Both fields are just as important because if a hacker has just one and not the other, they can’t get in. Don’t ignore your username, and please don’t use the username “admin.” It’s the first username any novice hacker would try.

SQL Injections

If your website uses an SQL (Server Query Language) database (pretty likely), you are vulnerable to SQL injections. Before diving any further, do not think SQL databases are unsecure because, in most cases, they are very secure. The process when using an SQL database for logins consists of:

User input (username, password)
Sending of information to the SQL database
The SQL database checks the data with current information
Data is found to be true or false
Results are returned to the user. If one of the fields comes out false, the login fails. If both are true the login succeeds.

Seems simple enough and it usually is, but an SQL injection manipulates the values of true and false. If the SQL database is set to read simple code like “OR” and “AND”, the hacker can input a simple code into the fields such as test’ OR ‘1=1. There are quite a few variations that can be used to break through this simple login barrier, but this is a simple example. The SQL database will receive the data and read test and determine that it is a false statement…but it doesn’t stop there because it sees the apostrophe (’), which in SQL language means the statement is over. Following this “ending” is another statement, though: OR. Then the start of another, indicated by the apostrophe (‘). It sees the 1=1 as a true statement, and closes the statement on its own. This simple “OR” statement can mean life or death for your website and you should make sure your database does not read them as code or (even better) not at all.
Here’s an example in English: “Yes or no: Are you a human OR dead?” Technically, yes, because you’re a human. The “OR” signifies you only need to meet one requirement, similar to the “If…Else” statements in web coding and scripting.
Extremely poor-coded SQL databases (very rare today) can even be told to dump the table in their response using complicated SQL coding. Oftentimes in multiple “login attempts.”
To prevent SQL injections, the best thing you can do is to use a set of rules where the user’s input is checked for syntax, length, and type. For more information on SQL injections (and a more in-depth look), take a look at Veracode’s article on SQL injections.

Open-Source Vulnerabilities

Open-source tools, such as the ever-popular WordPress, are very useful and easy to use. In fact, you can design an entire website using pre-coded themes and plugins. Unfortunately, we commonly find that security is sacrificed for convenience. All WordPress sites are not unsecure, but some hackers target WordPress websites specifically because of the vulnerabilities.

Top 15 Most Popular News Websites August 2014

By: Unknown On: 19.48

Share The Gag

Here are the top 15 Most Popular News Sites as derived from our eBizMBA Rank which is a continually updated average of each website's Alexa Global Traffic Rank, and U.S. Traffic Rank from both Compete and Quantcast."*#*" Denotes an estimate for sites with limited data.
1 | Yahoo! News

Top 15 Most Popular News Websites | August 2014

Sabtu, 09 Agustus 2014

Elements of Visual Storytelling: What Does Your Site Say?

By: Unknown On: 19.28

Share The Gag

It is commonly said that 'Content is King'. To many people, that simply
means written content. However if you consider the fact that the human
brain processes visual elements 60,000 times faster than text and 90
percent of the information transmitted to the human brain is visual it
makes you wonder if a text heavy website might be causing your visitors
to miss your message.Enter the concept of visual storytelling

Elements of Visual Storytelling: What Does Your Site Say?

Scroll Effects - Simple Inspiration for Creating in Adobe Muse CC

By: Unknown On: 10.14

Share The Gag

Scroll Effects - Simple Inspiration for Creating in Adobe Muse CC

the Galleria Luxury Hall designed by DOES Interactive

By: Unknown On: 08.19

Share The Gag

the Galleria Luxury Hall designed by DOES Interactive

Jumat, 08 Agustus 2014

Create A Simple HTML5 Video Playlist

By: Unknown On: 09.04

Share The Gag

See the Pen Create A Simple HTML5 Video Playlist by demosthenes.info by renata (@JakartaWebDeveloper) on CodePen.

The easiest way to start development on the video playlist is to work from the base HTML upwards. For this example I’ll reference outtakes from Marsel Van Oosten’s and Daniella Sibbing’s spectacular astrophotography timelapse Nambian Nights, licensed under Creative Commons.

Create A Simple HTML5 Video Playlist

Rabu, 06 Agustus 2014

How to Create Windows-8-like animations with CSS3 and jQuery by Sara Soueidan

By: Unknown On: 11.05

Share The Gag

See the Pen Windows-8-like Animations with CSS3 and jQuery by Sara Soueidan (@SaraSoueidan) on CodePen.

How to Create Windows-8-like animations with CSS3 and jQuery

SoundCloud Mini Player with CSS Record Animation by Sébastien Lombard

By: Unknown On: 09.28

Share The Gag

See the Pen SoundCloud Mini player with css record animation by Sébastien Lombard (@SebL) on CodePen.

SoundCloud Mini player with css record animation - CodePen

Google App launcher by Manar

By: Unknown On: 08.59

Share The Gag

See the Pen Google App launcher by Manar (@izerox) on CodePen.

Google App launcher - CodePen

SideNav.css by Mohamed Abo ElGhranek

By: Unknown On: 08.05

Share The Gag

See the Pen SideNav.css by Mohamed Abo ElGhranek (@midoghranek) on CodePen.

SideNav.css - CodePen

Cool List Scroll by Victor T

By: Unknown On: 07.43

Share The Gag

See the Pen Cool List Scroll by Victor T (@victort) on CodePen.

Cool List Scroll - CodePen

Menu toggle svg animation by Tamino Martinius

By: Unknown On: 07.25

Share The Gag

See the Pen Menu toggle svg animation by Tamino Martinius (@Zaku) on CodePen.

Menu toggle svg animation - CodePen

Senin, 04 Agustus 2014

Single Element CSS Spinners

By: Unknown On: 11.57

Share The Gag

Single Element CSS Spinners

Tutorial: How to Write a Project Proposal with Free Template

By: Unknown On: 10.04

Share The Gag

Tutorial: How to Write a Project Proposal with Free Template

Free Coming Soon / Under Construction Responsive Template

By: Unknown On: 09.42

Share The Gag

Free Coming Soon / Under Construction Responsive Template

Jquery Fullscreen Responsive Lightbox Gallery

By: Unknown On: 09.14

Share The Gag

Jquery Fullscreen Responsive Lightbox Gallery

Full-screen responsive gallery using CSS and Masonry

By: Unknown On: 09.01

Share The Gag

Full-screen responsive gallery using CSS and Masonry

Omnisense by Louis Ansa

By: Unknown On: 08.50

Share The Gag

Omnisense by Louis Ansa

30 Web Designs Featuring Pop Out Navigation Menus

By: Unknown On: 08.33

Share The Gag

30 Web Designs Featuring Pop Out Navigation Menus

Facilitating PSD to HTML Conversion using Bootstrap

By: Unknown On: 08.25

Share The Gag

A short article on how to facilitate PSD to HTML conversion using
bootstrap and why bootstrap is a coveted framework for facilitating PSD
to HTML conversion

Facilitating PSD to HTML Conversion using Bootstrap

Minggu, 03 Agustus 2014

Ripple Click Effect From Google Material Design Using jQuery & CSS3

By: Unknown On: 14.48

Share The Gag

Recently Google released its material design spec
which showcases some very cool user interactions. One of them is the
ripple click effect where an ink-drop like element moves out radially
from the position where the user taps/clicks. This effect has also been
integrated in the paper elements collection in the Polymer Project by Google. This walkthrough creates the same effect using jQuery, CSS3 and simple HTML elements instead of web components.

Read more:

Ripple Click Effect From Google Material Design Using jQuery & CSS3

Pure CSS Business Card Concept By Eduard Kosicky

By: Unknown On: 14.00

Share The Gag

See the Pen Business Card /r/web_design -- Ciclop by Eduard Kosicky (@heyitsedward) on CodePen.

Pure CSS Business Card Concept By Eduard Kosicky

Pure CSS Elegant Share buttons for Blogger - All Blogger Tricks

By: Unknown On: 13.38

Share The Gag

Adding the CSS

First of all we would have to add the CSS and for that so go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> Add the below given code just above ]]></b:skin>

Adding the HTML

Now we have to add the HTML.
First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

Pure CSS Elegant Share buttons for Blogger - All Blogger Tricks

Free Tumblr Theme Revolve by Jen Yuan

By: Unknown On: 10.52

Share The Gag

Free Tumblr Theme Revolve by Jen Yuan

The Unlimited Sitemap Generator: Inspyder Sitemap Creator

By: Unknown On: 10.16

Share The Gag

The Unlimited Sitemap Generator: Inspyder Sitemap Creator

Picku - Free HTML Template by Leo Ari Wibowo

By: Unknown On: 09.36

Share The Gag

Picku - Free HTML Template by Leo Ari Wibowo

Twitter Redesign Concept by Fred Nerby

By: Unknown On: 08.49

Share The Gag

Twitter Redesign by Fred Nerby

Youtube Redesign by Aurélien Salomon

By: Unknown On: 08.15

Share The Gag

Youtube Redesign by Aurélien Salomon

THE REVEAL by SHIFTBRAIN Inc

By: Unknown On: 06.09

Share The Gag

THE REVEAL by SHIFTBRAIN Inc

Maximum Search: How To Use Google To Deliver Fast, Accurate Results

By: Unknown On: 00.02

Share The Gag

On
any day, Google Search brings in approximately 30% of the visits to
this blog. The most significant portion of that group arrive at this
site by literally typing demosthenes.info
into the Google search bar, which indicates that many people don’t know
how to use Google or their browser efficiently. A future article will
cover how to use a modern browser: for now, let's cover some basic
points on how to use Google.

Don’t go to google.com

There
is rarely any need to go directly to google.com in order to initiate
search. All modern browsers allow search directly from the URL bar or a
specialized search bar to the side. All of the techniques I’m about to
discuss can be typed directly into the URL bar or the sidebar, shaving
several seconds from every search.
Use Boolean search

Google will often deliver millions of results in response to search terms. To narrow the field, indicate words that you do not want with a minus sign:

penguin -book -clothes -game -computing

…will deliver web pages with “penguin” in the content but without the words “book”, “clothes”, “game”, or “computing”.
Use phrases, rather than terms

To further narrow search results, group words together inside of quotes: this means that the words must appear together. For example:

"blue footed booby"
Receive files, not web pages, as search results

For
specialized topics, documents can often deliver more information than
standard HTML pages. Google indexes everything that can be searched on
the web: to deliver only results from documents, use the filetype command with an appropriate extension. For example:

"yellow eyed penguin" filetype:ppt

This will deliver only Powerpoint files in which the phrase “yellow eyed penguin” is used. Some other extensions:

filetype:doc Word documents

filetype:xls Excel Spreadsheets

filetype:ppt Powerpoint presentations

filetype:pdf PDF documents

filetype:torrent Torrent files
Use your postal code, not an address

Google
Maps suggests that you use your street address to find locations near
you. It’s not necessary: simply use your postal code. There’s no need to
go to local.google.com either. For example, type the following into the URL bar:

pizza T2M 0L4
Restrict search within a particular site

Finding
what you want inside a large site can be difficult; often, site's
built-in search can provide sparse results. In those cases, restrict
Google to search inside a particular URL with site: For example:

CSS site:demosthenes.info

demosthenes.info – Maximum Search: How To Use Google To Deliver Fast, Accurate Results

Sabtu, 02 Agustus 2014

CSS Slidy 2.0: Captions & more

By: Unknown On: 23.03

Share The Gag

See the Pen CSS Slidy 2 by Dudley Storey (@dudleystorey) on CodePen.

The framework-free, super-simple responsive image slider. I’ve also uploaded a working example on CodePen. The new version offers almost a dozen new options.
Markup for the slider remains very straightforward...

Read more:
CSS Slidy 2.0: Captions & more

Making An Audio Player With HTML5

By: Unknown On: 22.41

Share The Gag

There are two approaches to making almost
anything. The first is to dive in head-first, building from the top
down, squirrelling into problems as they are found and hoping you’ll get
everything right. The second is to create a series of simple test
cases: building upwards, proving each step before using the work to generate a final, complete piece.

Making An Audio Player With HTML5

Bariol Free Typefaces by Atipo

By: Unknown On: 22.19

Share The Gag

Bariol Designed by Spanish studio Atipo, Bariol has already proved a massive hit with designers across the board. Crafted with versatily and readability in mind, the brand new, slightly rounded typeface is available in four weights.

The font is readable even at small scales and can be used as corporate typography, packaging design, infographics and even editorial design. You can download Bariol regular and italic for free by just 'paying' with a tweet or you can get the complete font family from as little as €3.

Bariol FreeTypefaces by Atipo

6 ways to turn free work into paid work

By: Unknown On: 22.08

Share The Gag

There's an old Yorkshire saying: "If tha ever does owt for
nowt, do it for thi sen". For those who don't speak fluent Tyke, it
translates like this: "If you ever do something for nothing, do it for
yourself". These are words that all creatives should have tattooed on
their drawing arm.

Nothing you do as a designer is free. When you do free work
the person who pays for the work is you. You pay with your time, your
experience, the money you spent on training, the bills you pay to keep
your office running, your software subscriptions, your hardware... It
goes on and on. But, still, there are clients out there who will try to
get you to work for free.

What they don't know is how easy they are to predict. They
follow patterns, these cheapskate clients. Because of that, you can find
ways to make any offer pay, whatever's on the table. Here, we outline 6
strategies for turning free work into paid work, because that's the
only work worth having...

6 ways to turn free work into paid work | Career | Creative Bloq

Social Media Strategy: How Much Time Should Planning Take?

By: Unknown On: 16.06

Share The Gag

Social Media Strategy: How Much Time Should Planning Take?

I have a blog post to write. This blog post, to be exact.

And in the course of researching, outlining, writing, editing, and writing some more, I also have other hats to wear. Email marketing. Social media strategy. Blog promotion, blog design, and anything else that should happen across my plate.

I’m sure you wear a lot of hats, too.

How do you find time to put them all on?

One of my tasks that I’m currently optimizing is implementing a social media strategy at Buffer. In the midst of writing posts like these, I’m also curious to see how much time it takes to put a social media strategy in place.

Social Media Strategy: How Much Time Should Planning Take?

Every move you make, Facebook is watching you

By: Unknown On: 15.49

Share The Gag

Every move you make, Facebook is watching you

Facebook is expanding the internal user profiles that underpin its
targeted advertising system, for the first time including personal
information based on activities that did not occur within the boundaries
of its social network.

While Facebook has long maintained
internal profiles of users based on the comments they make and the posts
that they "like" within its social network, the company will now flesh
out those profiles with information based on some of the external
websites and mobile apps its members use, a move that could further
inflame concerns about how it treats personal privacy.

The
enhanced profiles will allow marketers to deliver more relevant ads,
Facebook said in a blog post announcing the change on Thursday. If a
Facebook user researches a new television on an external website or
inside of a mobile app, their profile might now indicate an interest in
televisions and in electronics, making it easier for advertisers
pitching electronic devices to reach that user on Facebook.

Facebook already has access to much of this information through tools
that it uses to measure the performance of its ads as well as through
"plug-ins" that integrate Facebook features on third-party websites, but
the company has not until now incorporated the data into its users' ad
targeting profiles.

To quell potential privacy concerns, Facebook
will for the first time give users the ability to review and edit their
internal advertising profiles. By clicking on a button alongside
Facebook ads, a user can see all the "interests" on their record, remove
unwanted categories and add any desired categories.

Facebook said it will also provide a link to an industry website that
will allow users to not have their activities on websites tracked, as
well as a link to the appropriate controls within their smartphones to
eliminate mobile app tracking.

The new ad capabilities come as
Facebook strives to ramp up its advertising revenue amid competition
from Google while addressing persistent concerns about personal privacy
on the world's No.1 social network.

In April, chief executive
officer Mark Zuckerberg announced new features that lets users limit how
much personal information they share with third-party mobile apps.

Facebook,
Google and other online companies have faced increasing scrutiny and
enforcement from privacy regulators as consumers entrust ever-increasing
amounts of information about their personal lives to web services.

In
2012, Facebook settled privacy charges with the US Federal Trade
Commission that it had deceived consumers and forced them to share more
personal information than they intended. Under the settlement, Facebook
is required to get user consent for certain changes to its privacy
settings and is subject to 20 years of independent audits

Every move you make, Facebook is watching you

10 Web Hosting Services Reviewed! • 1stwebdesigner

By: Unknown On: 15.34

Share The Gag

Every website requires hosting in order to be live on the Internet.
Designers and bloggers are well aware of its importance; they use it to
establish their brand and business. It is also helpful to stay connected
with existing and potential audience.

Read more:

10 Web Hosting Services Reviewed! • 1stwebdesigner

A Web Developer's Guide to Building Multilingual Websites

By: Unknown On: 15.26

Share The Gag

Building a multilingual site
presents many challenges. Perhaps the most difficult among them,
however, is how to build the client-facing CMS to easily and intuitively
allow for the management of this multilingual content.

At Newfangled, one of our overarching goals is to build
sites that are customized to support the client’s content strategy as
closely as possible.

In fact, this is why we spend so much time in the
consulting and prototyping phases of our process. It’s also why we’ve
perfected a development framework that emphasis this type of very
granular and customized content entry, to make the process as easy and
intuitive as possible for our clients.

It’s no surprise, then, that adding a multilingual site
build to our process represents some very serious challenges. The way
the language-specific content variations tie together is critical, both
architecturally and from a content-entry standpoint. Every time we build
such a site, we’ve improved this balance a little bit more (in my
humble opinion). In this post, I’ll address some of the questions that
might arise for anyone considering a multilingual website.

A Web Developer's Guide to Building Multilingual Websites

WordPress for Web Developers, 2nd Edition - PDF Free Download - Fox eBook

By: Unknown On: 15.22

Share The Gag

WordPress for Web Developers: An Introduction for Web Professionals is a complete guide for web designers and developers who want to begin building and administering sites with WordPress. This book is an update of Beginning WordPress 3, freshened and clarified for web developers who want to make
the most of WordPress. You’ll start by learning WordPress basics,
including how to publish content, add media, and manage users.

Then you’ll dig deeper into your WordPress server administration, including domain mapping, security,
and importing and migrating. The book then steps up a gear with an
introduction to developing for WordPress, perfect for developers and
designers with some PHP experience, who want to learn to create custom themes and plugins.

WordPress is the most popular open source blogging and content management
system in the world. Its flexible, user-friendly system can be extended
with thousands of freely available themes and plugins. This book will
teach you how to make the most of WordPress’s built-in features, how to
find the right themes and plugins for your projects, and how to build
your own custom features. You’ll learn to:

What you’ll learn

How to install WordPress and configure its settings
How to create, organize, and display content and multimedia files
How to find themes and plugins – or create your own with PHP
How to maintain and secure your WordPress sites
How to set up a network of sites and manage them in a single interface

Who this book is for

This book is for professional web designers and developers, with some working knowledge of PHP, who want to learn to administer and build sites with WordPress using advanced topics such as themes and plugins.

Chapter 1. Getting Started

Chapter 2. Installing and Upgrading WordPress

Chapter 3. Dashboard and Settings

Chapter 4. Working with Content

Chapter 5. Working with Themes

Chapter 6. Working with Plugins

Chapter 7. Working with Users

Chapter 8. Setting Up Multisite Networks

Chapter 9. Performance and Security

Chapter 10. Importing Content and Migrating Sites

Chapter 11. Beginning Theme and Plugin Development

Chapter 12. Creating a Theme

Chapter 13. Creating Plugins

Chapter 14. Custom Post Types, Taxonomies, and Fields

Appendix A. Recommended Plugins

Appendix B. Community Resources

WordPress for Web Developers, 2nd Edition - PDF Free Download - Fox eBook

Facebook Unofficial Redesigns by Fred Nerby

By: Unknown On: 13.38

Share The Gag

Facebook Unofficial Redesigns Fred Nerby

30 Unofficial Redesigns of Popular Social Media Sites

By: Unknown On: 13.07

Share The Gag

30 Unofficial Redesigns of Popular Social Media Sites

Landy Free HTML Template by Paolo Tripodi, A flexible one-page fully responsive HTML template for your app

By: Unknown On: 12.23

Share The Gag

Landy Free HTML Template by Paolo Tripodi

Jelly Scroll effect by LegoMushroom

By: Unknown On: 11.43

Share The Gag

Jelly Scroll effect by LegoMushroom

PROFILE Free HTML template by Mario Maruffi

By: Unknown On: 11.18

Share The Gag

PROFILE Free HTML template by Mario Maruffi

Freebie: Vintage Infographic Design Kit

By: Unknown On: 10.17

Share The Gag

Freebie: Vintage Infographic Design Kit

12 powerful websites that can replace your desktop software #PCWorld

By: Unknown On: 09.43

Share The Gag

12 powerful websites that can replace your desktop software #PCWorld

The World Wide Web sure ain't what it used to be, and when it comes to getting things done anywhere and everywhere, that's a good thing. Once, the idea of working in your browser was nothing more than a pipe dream. And the idea of replacing desktop software with online alternatives completely? Pfah! Ridiculous.
12 powerful websites that can replace your desktop software

5 Strategies Behind Awesome Social Media Customer Service

By: Unknown On: 09.19

Share The Gag

5 Strategies Behind Awesome Social Media Customer Service

The Best Free Stock Image Resources on the Web

By: Unknown On: 09.06

Share The Gag

The Best Free Stock Image Resources, Free Stock Image Resources

The Best Free Stock Image Resources on the Web

Pure CSS Off-screen Navigation Menu

By: Unknown On: 08.45

Share The Gag

Hamburger menu, drawer menu, off-canvas menu: Whatever you call it,

hiding a website’s primary navigation just off screen is becoming a

ubiquitous pattern in responsive web design. More and more sites feature

a fixed-position icon that, when tapped, pushes the entire site to the

side to reveal a hidden navigation menu.

While there are plenty of jQuery plugins that will create this effect

for you, it’s actually pretty easy to achieve without using any

JavaScript at all.

This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS.

Before we get started, I’d like to make a note that using this method

for creating the drawer menu means your site’s navigation will always

be in a drawer, regardless of viewport size. If you only want the drawer

menu on smaller screens, you’ll have to use some JavaScript to

manipulate the DOM order or use some funky CSS to make the menu look

right on larger screens. In other words: It’s pretty and simple, but

it’s not always the right solution for every situation.

Pure CSS Off-screen Navigation Menu

The 10 Best Social Networks for CG Artists

By: Unknown On: 08.40

Share The Gag

The 10 best social networks for CG artists

11 Types of Programmers

By: Unknown On: 08.26

Share The Gag

11 Types of Programmers

Make A Digital Business Card For All Devices - Demosthenes

By: Unknown On: 07.34

Share The Gag

As a vcard file – the digital equivalent of a business card – the hcard format is supported in most devices and contact managers, such as Blackberry and eMail software. It makes sense to allow a site visitor to download the address information for a company into their contact manager software.

Make A Digital Business Card For All Devices

CSS Fluid Image Techniques for Responsive Site Design

By: Unknown On: 07.15

Share The Gag

CSS Fluid Image Techniques,Responsive Site Design

“Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users. The core components are:

    CSS @media queries
    Fluid images and video
    JavaScript, often triggered by window.matchMedia
    Server-side solutions
    SVG to create resolution-free images

CSS Fluid Image Techniques for Responsive Site Design

Best Web Design and Web Development Articles Roundup #7

By: Unknown On: 07.04

Share The Gag

Are you a web designer or developer? Are you eager to learn and adapt the new trends and technologies in website designing and development? Then, this post is absolutely for you. In this industry new technologies or methods are introducing all day which means you have to brush up your skills all day. There are thousands of blog articles are publishing every day about new web designing technologies and trends. In this post we are listing 10 excellent articles roundup every week.

Best Web Design and Web Development Articles Roundup #7

Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery

By: Unknown On: 04.30

Share The Gag

Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery

`filetype:doc`	Word documents
`filetype:xls`	Excel Spreadsheets
`filetype:ppt`	Powerpoint presentations
`filetype:pdf`	PDF documents
`filetype:torrent`	Torrent files

Popular Posts

About Me

Follow on G+

Recent Posts

Bird's eye view

Indonesia Web Developer

Rabu, 20 Agustus 2014

Selasa, 19 Agustus 2014

Senin, 18 Agustus 2014

Minggu, 17 Agustus 2014

Sabtu, 16 Agustus 2014

Jumat, 15 Agustus 2014

Kamis, 14 Agustus 2014

Website Changes

Avoiding All of this Altogether

Securing Logins (Don’t skip this one!)

SQL Injections

Open-Source Vulnerabilities

Sabtu, 09 Agustus 2014

Jumat, 08 Agustus 2014

Rabu, 06 Agustus 2014

Senin, 04 Agustus 2014

Minggu, 03 Agustus 2014

Adding the CSS

First of all we would have to add the CSS and for that so go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> Add the below given code just above ]]></b:skin>

Adding the HTML

Sabtu, 02 Agustus 2014

What you’ll learn

Who this book is for

Table of Contents

Amazing Gags

Follow us on FB

Blog Archive

Blogger news

Labels

Labels

Photo Gallery