Day: November 19, 2021

8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects

Jennifer Wilson Webdesign Services

When it comes to creating a great piece of web-based art, the details are what stand out. Lighting and shading effects are prime examples. They can turn a flat, 2D work into an immersive 3D experience.

For quite a while, the ability to add realistic light and shade to an illustration or animation seemed like the holy grail. The technology wasn’t always there. Thus, developers had to find workarounds to approximate the effect.

Thankfully, the power of CSS and various JavaScript libraries have ushered in a new age. It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.

Today, we’ll share some CSS and JavaScript code snippets that bring these effects to life. Enjoy!

Creativity Now✨(click anywhere) by Anna the Scavenger

Text seems like a natural place to add lighting and shading. But this example takes it to a whole other level. The creative makeup of each letter and cursor-following animation makes this a true work of art. It’s akin to a 3D mobile hanging from your ceiling. Even better: click on the presentation to create an entirely new look.

See the Pen Creativity Now✨(click anywhere) by Anna the Scavenger

Photo Tear by Steve Gardner

Place your cursor on one of the upper corners of a photo, then click-and-drag downwards. You’ll notice the image ripping apart. By itself, that’s a pretty cool effect. But what really sells it is the shading as the perspective shifts. The entire process feels very much authentic.

See the Pen Photo Tear by Steve Gardner

Platonics by Liam Egan

This 3D animation has a stunning liquid effect. A piece of metal twists and morphs its way into various objects. Realistic reflections make it all the more compelling to watch, thanks to WebGL.

See the Pen Platonics by Liam Egan

Beat Burger by Steve Gardner

Nothing like performing a huge drum solo in the spotlight. What? You’ve never been in a famous band? Maybe the next best thing is to play this virtual drumkit, made from a hamburger. You get the sounds, the spotlight and even the shadows. Just don’t get any grease on your new clothes.

See the Pen Beat Burger by Steve Gardner

Monochromatic Yoyo – Pure CSS by Josetxu

Here we have a slinky-like array of pure CSS squares. Their chain-reaction animation is further enhanced by the use of, you guessed it, lighting and shading. Gradients add the illusion of depth, while drop shadow moves along with each layer of the animation.

See the Pen Monochromatic Yoyo – Pure CSS by Josetxu

Art Gallery by isladjan

This virtual art installation is certainly abstract. It features a colorful blob that morphs as your cursor moves across the screen. Rays of light add a touch of realism. However, click on the “Light OFF” button and the entire presentation transforms into a particle explosion.

See the Pen Art Gallery by isladjan

SVG lighting shader by Artem Lvov

With clever implementation, the flashlight effect can be simply amazing. Here it’s used to illuminate a rocky surface. Thanks to SVG, the image looks ultra-realistic. Both the light and perspective shift along with your cursor. It also has the benefit of being safer than walking around in the woods after dark.

See the Pen SVG lighting shader by Artem Lvov

Pacman Concept by Ivan Juarez N.

This PAC-MAN inspired snippet brings the beloved video game into the 3D age. Ghosts travel through an illuminated cube, with sharp rays of light bursting through the maze. Once again, the cursor plays a role, as you can change the scene’s perspective by moving around.

See the Pen Pacman Concept by Ivan Juarez N.

Finishing Touches That Stand Out

It used to be that you needed high-end software to create convincing lighting and shading effects. But, thanks to the advancements in web technologies, similar enhancements can be achieved through code.

The ability to leverage hardware acceleration also plays a key role. Without the power of the graphics processing unit (GPU), these advanced scenes couldn’t run with such fluid motion.

Put together, the results can be stunning. And the examples above might only be scratching the surface of this potential.

Want to check out even more amazing 3D scenes? Visit our CodePen collection to get your fill!

The post 8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=903

Getting out of the Freelance Pricing Trap

Jennifer Wilson Webdesign Tips

Freelancing is riddled with challenges. You end up being part designer, developer, copywriter, marketer, social media guru, customer service representative, and tax expert all at the same time.

If anyone thinks that doing freelance work is easy, they need to think again!

And that’s why it’s so important to make sure you don’t stumble into the freelance pricing trap many freelancers fall into. As there are already so many things you already have to deal with, you really want to avoid this one from the beginning.

So, What’s the Freelance Pricing Trap?

The freelance pricing trap is not charging enough for the work that you do. And it happens much more often than you would think.

Many freelancers feel like they don’t have enough experience or expertise to charge a certain rate, so they simply don’t. They price below the market rate because they feel they aren’t qualified to charge for more.

Some freelancers may actually feel bad for charging more. They feel like it’s too expensive and that they can’t justify charging so much.

However, if you want to make it as a freelancer, this needs to change.

Why it Needs to Change

Not charging enough for your services is a huge issue because it sets up the wrong expectations for your clients from the outset. It makes them devalue your work and expertise. They may also presume that you’re not as talented as others in your niche because you don’t charge as much they do.

This is a real problem. I know of an online learning school that couldn’t get work in a wealthy city because they didn’t charge as much as the competition. Since they didn’t charge as much, the perception was that they weren’t as good as other similar schools. This happens to many businesses, and it happens to freelancers as well.

It also makes the work you do less rewarding. And since the work is less rewarding, you’re much more likely to get disheartened and potentially burn out. Consider this common scenario for a moment:

A client calls asking how much a particular web project would cost to design and build. You ask for the brief, take the time to work out the number of hours it would take, and then respond with an estimate. But this is where it gets interesting.

The client tells you they can’t afford that much and counters by asking if you can do it for less, much less. Not wanting to lose out on the business, you agree since you don’t feel confident enough in your ability to negotiate a higher rate.

You also really need the work and don’t want to miss out on the revenue. Or so you think…

You begin working only to realize that you’re getting paid for half of what the project’s worth. If you’re just starting out in the freelance world, that may not necessarily be a huge issue because you’re trying to build up your portfolio and get your name out there, but if you’ve been freelancing for a while, that is a huge problem.

You’ve got bills to pay and mouths to feed. You’ll end up working more hours on extra projects just to make up for the drop in pay you’ve received from this project.

You may become resentful of the client and more than likely disappointed in yourself. Instead of putting in your best work, you give less than your best effort. And why shouldn’t you? You’re getting paid less than what you’re worth.

Then it comes time to get the project approved. Surprise, surprise: the client has a list of changes they would like. But you’re already over on hours! And you’re already getting underpaid!

More resentful than ever, you dig back into the project half-heartedly. When will this project finally be finished?

Have you ever experienced a project like this? If you have, you understand the primary reasons it’s detrimental to charge less than you’re worth:

  • You won’t put your full heart and soul into the project.
  • You won’t produce your best work which ultimately is what would allow you to raise your rates in the future.
  • You won’t attract clients that value your work and understand the costs.
  • You won’t make enough money to cover your bills and will mean an increase in the number of hours you work.

What Should You do Instead?

In order to not fall into the trap of lower-paid work, here are three tips to consider:

1. Find out what the market pays for your type of service and get to that rate as quickly as possible.

Whether it’s photography, web design, or copywriting, there’s a freelance market rate that professionals realize they need to earn to make a living.

Instead of thinking you can win more work or clients by undercutting this price, do whatever it takes to get to the market price as quickly as you can.

Yes, you’ll need to spend some time building up your portfolio and personal brand, but once you have reached that point where you’re happy, stop offering discounted rates.

2. Don’t be afraid to charge what you’re worth.

Many freelancers don’t like asking for more money or even asking for the going freelance rate. They feel like they’re not qualified or experienced enough.

If that’s the case, continue building your portfolio, but if it’s not, don’t be afraid to ask what you’re worth.

3. Incrementally raise your rates.

The number one thing that shoots negotiators in the foot is being desperate to close a sale. If you’re desperate for the business, you won’t be able to negotiate as well.

This means you’ll have the most trouble at the beginning of your freelance career. But once you start picking up clients and have a decent amount of work, start raising your rates.

If you aren’t as desperate to pick up your next client, you can afford to ask for more money now. If they take it, you can drop lower-paying clients at the right time and raise your rates again with subsequent clients.

Just remember to continue raising your rates once you have a healthy amount of work. It only makes sense that you charge more as you get better at what you do.

Falling Out of the Trap

If you feel like you’ve fallen into the trap of not charging enough for what you’re worth, make the decision to start charging more today.

By incrementally increasing your rates, you can quickly get to the market rate for your type of freelance work, and if you’re really good at what you do, you can even start charging more than the market rate.

That’s the kind of “trap” you want to fall into.

The post Getting out of the Freelance Pricing Trap appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=902

10 Free WordPress Plugins for Extending BuddyPress and bbPress

Jennifer Wilson Webdesign Services

BuddyPress is a powerful, free plugin that adds community features to your WordPress website. Install it on your site, and you’ll have access to handy features like activity streams, user profiles, notifications, groups, and private messaging. But that’s just the base layer of what BuddyPress can do.

bbPress is a forums plugin that is often used in conjunction with BuddyPress. The forums are easy on the eyes, simple to use, and fit nicely with BuddyPress groups.

Extending BuddyPress and bbPress with plugins can bring even more functionality to make your site into a real online community hub. You might be surprised at some of the cool features you can easily add-in.

Here are 10 free plugins you can use to make BuddyPress and bbPress even better:

Free BuddyPress Plugins

BP Profile Search

Not only will BP Profile Search allow users to search member profiles, but it’s also a quick way to create a member directory. When it comes to search, you can build a custom form to meet your community’s needs. Directories are also easy to customize, with the ability to apply filters and create multiple member listings.

BuddyPress Docs

Add the power of collaborative documents to your community with BuddyPress Docs. Documents can be uploaded, assigned to specific users or groups, and edited on the front end of your site. There’s also a revision history and the ability to categorize/tag uploads.

BuddyPress Docs

BP Better Messages

BuddyPress has a default messaging system. But if you want to take things up a notch, BP Better Messages offers an improved user experience. It uses AJAX to power live chat, allows for file uploads and multimedia embeds. Messages can range from a private chat between two users or site-wide notifications.

BP Better Messages

BuddyPress Group Email Subscription

BuddyPress Group Email Subscription helps keep group members informed of activity. There are five different notification levels members can choose from: No Email, Weekly Summary Email, Daily Digest Email, New Topics Email and All Email. If desired, admins can set a default notification level for users.

BuddyPress Group Email Subscription

BuddyPress Registration Options

Spam bots can hit BuddyPress just like everything else on the internet. BuddyPress Registration Options helps squash spam registrations by allowing for moderation on new user accounts. Email notifications are sent when an administrator either approves or denies a new registrant. This plugin also works with bbPress.

BuddyPress Registration Options

Free bbPress Plugins

GD bbPress Attachments

GD bbPress Attachments enables users to upload files to forum topics and replies. Administrators can control file size limits, the number of files that can be uploaded at once, and can change things up on a forum-by-forum basis.

GD bbPress Attachments

bbp Style Pack

Want to change up the look of your bbPress install? bbp Style Pack lets you change fonts, colors, and forum layouts. In addition, you can tweak emails, and add handy features such as an unread topics page. And that’s just the beginning. This plugin gives admins plenty of ways to make bbPress their own.

bbp Style Pack

bbPress Notify (No Spam)

Take control of bbPress email notifications with bbPress Notify. Easily customize messages sent to users and choose who receives them. The plugin is developer-friendly, with lots of hooks and filters at your disposal.

bbPress Notify (No Spam)

GD bbPress Tools

GD bbPress Tools offers a suite of tweaks for your WordPress forums. Visual changes include the ability to disable breadcrumbs and advanced topic filtering. There’s also a collection of 30 shortcodes that make adding custom functionality a breeze. Unlock even more features with the pro version.

GD bbPress Tools

Private Groups

If you’re looking to limit your forums to a specific group of users, give Private Groups a try. The plugin allows administrators to restrict specific forums and topics. There’s a lot of flexibility here when it comes to user permissions – perfect for bbPress installs that need both public and private access. This is a great option for membership websites.

Private Groups

Build Your Community

The combination of BuddyPress and bbPress can help you build a bustling and productive online community. And, because they both take advantage of WordPress, they’re also very easy to use and customize to fit your needs. Experiment with them and see how they can benefit your WordPress website.

The post 10 Free WordPress Plugins for Extending BuddyPress and bbPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=892