3D on Speckyboy Design Magazine https://speckyboy.com/topic/3d/ Design News, Resources & Inspiration Wed, 27 Dec 2023 15:15:27 +0000 en-US hourly 1 25+ Free Chunky & 3D Fonts in 2024 https://speckyboy.com/chunky-3d-fonts/ https://speckyboy.com/chunky-3d-fonts/#comments Wed, 18 Oct 2023 16:19:34 +0000 http://speckyboy.com/?p=31141 A collection of the best chunky and 3D fonts for you to freely download and use in your projects. Perfect for creative headings, titles, and posters.

The post 25+ Free Chunky & 3D Fonts in 2024 appeared first on Speckyboy Design Magazine.

]]>
No matter what your personal style is, it’s imperative to have a wide selection of fonts in your design toolbox. This will help ensure you always have the right font handy, regardless of the type of project you’re working on.

In most cases, traditional choices will be your best bet. Serif, sans-serif, script, or decorative fonts will round out your design nicely and help you convey the right tone and message. But sometimes, you will need to step out of your comfort zone and use something a little more unusual.

In such cases, chunky and 3D fonts could be just what you need. These fonts are perfect for branding projects for brands that want to stand out and be perceived as original and bold. Chunky and 3D fonts are also an excellent choice for t-shirt designs, posters, billboards, promo materials, and any other type of design project where you need to make an impact.

Keep in mind that these types of fonts can dominate the design, so it’s best to use them alongside a simpler font and, of course, avoid using them in long sentences or paragraphs.

Given the number of fonts available online, finding the best chunky or 3D font for your project can take up a lot of your time that could be better spent working on the project instead. That’s why we’ve rounded up the best chunky and 3D fonts from around the web. Feel free to download them and use them in your projects.



Green Piloww (Free)

Green Piloww Chunky 3d Free Font

Glubby Fun Display Font

Glubby - Fun Display Font

Pointy Solid (Free)

Pointy Solid Chunky 3d Free Font

Beach Ball CPC

Beach Ball CPC

Alpha Wood (Free)

Alpha Wood Chunky 3d Free Font

Blocklyn Font Family

Blocklyn Font Family

Chunky (Free)

Chunky Chunky 3d Free Font

Walk Around the Block (Free)

Walk Around the Block Chunky 3d Free Font

Bob Font

Bob Font

Chocolate Drops Font (Free)

Chocolate Drops Font Chunky 3d Free Font

Big Fellas Cute Font

Big Fellas Cute Font

Block Tilt Font (Free)

Block Tilt Font Chunky 3d Free Font

Corn Fed Font (Free)

Corn Fed Font Chunky 3d Free Font

Cubicle (Free)

Cubicle Chunky 3d Free Font

Coming Soon (Free)

Coming Soon Chunky 3d Free Font

Block Buster (Free)

Block Buster Chunky 3d Free Font

Heavy Rotation (Free)

Heavy Rotation Chunky 3d Free Font

Action Jackson (Free)

Action Jackson Chunky 3d Free Font

Sans Poster Bold 3D (Free)

Sans Poster Bold 3D Chunky 3d Free Font

C Rial (Free)

C Rial Chunky 3d Free Font

Hot Dog (Free)

Hot Dog Chunky 3d Free Font

Caveman (Free)

Caveman Chunky 3d Free Font

Ricks American Cafe Font (Free)

Ricks American Cafe Font Chunky 3d Free Font

Blog the Impaler (Free)

Blog the Impaler Chunky 3d Free Font

Pijamas (Free)

Pijamas Chunky 3d Free Font

Augustus Beveled (Free)

Augustus Beveled Chunky 3d Free Font

Decade 3D Font (Free)

Decade 3D Font Chunky 3d Free Font

Blox (Free)

Blox Chunky 3d Free Font

Pin Down X-BRK (Free)

Pin Down X-BRK Chunky 3d Free Font

Retro Sign (Free)

Retro Sign Chunky 3d Free Font

The post 25+ Free Chunky & 3D Fonts in 2024 appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/chunky-3d-fonts/feed/ 1
12 Best Photoshop Actions for Creating 3D Effects https://speckyboy.com/3d-photoshop-actions/ https://speckyboy.com/3d-photoshop-actions/#respond Sat, 05 Aug 2023 09:16:00 +0000 https://speckyboy.com/?p=117553 Add depth, create shadows, and achieve isometric effects in your digital art with our high-quality collection of 3D effect Photoshop actions.

The post 12 Best Photoshop Actions for Creating 3D Effects appeared first on Speckyboy Design Magazine.

]]>
When it comes to adding 3D effects to your artwork, Photoshop actions can be a game-changer. These powerful resources simplify the process and help you achieve stunning and impactful results quickly and easily.

Our collection of high-quality Photoshop actions offers a concise set of options that can add depth to text, create shadows and depth of field, and even achieve isometric effects. Whether you’re a graphic designer, professional artist, or hobbyist, our actions have been designed to streamline your creative process and free up your time for other important tasks.

By using these actions to simplify the process of adding 3D effects to your artwork, you can unleash your creativity and bring your digital art to new heights. Whether creating art for personal or commercial use, our collection of actions is sure to help you achieve stunning and captivating results.

So why wait? Explore our collection today and discover the endless possibilities of 3D effects in your digital art.


What are 3D Effects

The 3D effect is a captivating technique that adds depth and dimension to your photos, making them appear as if they leap off the page. It creates a sense of realism that can truly engage the viewer.

To achieve the 3D effect, photographers often use specialized equipment and techniques. However, for those who want to enhance this effect or experiment with it, Photoshop actions can be a valuable tool. They act as pre-made adjustments that can be applied to your photos easily. They work by manipulating the perception of depth and enhancing the visual cues that create the illusion of three-dimensionality.

Whether you’re capturing a portrait, a product, or a scenic view, these 3D actions can help you add depth and realism to your images. By using them thoughtfully, you can create photos that stand out and engage viewers, inviting them to explore the depth and details of your photographic creations.

3D Effect Actions for Creatives

3D Isometric Photoshop Action

This 3D Isometric Photoshop action makes it easy to transform text, vector-based shapes, smart objects, layer groups, and pixel layers into images that appear as though they are real 3D objects. This action works in two different directions and includes 12 shadow sizes, ten extrusion sizes, a choice of light and shadow directions, and more.

3D Isometric Photoshop Action

Conceptum 3D Sketch Photoshop Action

Here’s another fantastic option. The Concept 3D Sketch Photoshop Action turns any photograph you want into a technical sketch that preserves 3D elements. It can work on any image of an object and creates a highly-detailed graphic that you can use in any number of situations. It comes with a full tutorial as well.

Conceptum 3D Sketch Photoshop Action

3D Text Effect Photoshop Action

The 3D Text Effect Photoshop Action is another text effect that works to transform your graphics into realistic-looking 3D objects. The results preserve full detail and color and can be tweaked based on extrusion direction and size, shadow and light direction and size, custom colors and fonts, and more.

3D Text Effect Photoshop Action

Anaglyph 3D Photoshop Action

Give your artwork an old-style stereoscopic 3D look with this Anaglyph 3D Photoshop Action. It adds this effect to your photos with a single click, and the result actually works with real 3D glasses. It comes with eight different actions, and it doesn’t destroy your original image.

Anaglyph 3D Photoshop Action

3D Effect Photoshop Actions

Here’s another great option for adding a 3D effect to your images. This one gives your image the appearance of stereoscopic 3D with just a few clicks. It automatically creates layer groups and is non-destructive, so your original image remains intact. It also comes with a text file that guides you through the whole process.

3D Effect Photoshop Actions

3D Text Creator Actions

The 3D Text Creator Actions consists of a whopping 65 separate actions you can use to turn text layers into 3D text graphics. They work in four directions, can be used to create solid, flat, or translucent 3D text, and include five outline styles. All layers are fully editable, and these actions are non-destructive.

3D Text Creator Actions

3D Dispersion Photoshop Action

What an interesting effect this is! The 3D Dispersion Photoshop Action works by taking your images and making them appear as though they’ve broken apart into tiny three-dimensional pieces, and said pieces are flying away. This dispersion effect can be applied quickly to your photos, and you can select from four different directions of movement.

3D Dispersion Photoshop Action

Animated 3D Parallax Duotone Action

The Animated 3D Parallax Duotone Action works by creating a 3D stereoscopic GIF. It works by creating a looping animation out of two layers. Other features include 25 color scripts, a thumbnail color preview, fully editable layers, and a quick start guide.

Animated 3D Parallax Duotone Action

Gold 3D Text Effect Photoshop Action

Giving your text a shiny gold effect has never been easier, thanks to the Gold 3D Text Effect Photoshop Action. This one provides a realistic result that’s super easy to implement. With just one click, you’ll have the finished layers. It works on text, vectors, pixel layers, smart objects, and more. It also has a smart shadow you can play with. And a video tutorial is included.

Gold 3D Text Effect Photoshop Action

Real 3D Text Mockup Photoshop Actions

Here’s another fantastic option for adding 3D effects to the text elements of your graphics. Just a few clicks, and you’ll see your results. You can use it in backgrounds and more. It comes with 6 PSD files with the effect in Smart Objects. It also comes with a help file that includes instructions and fonts.

Real 3D Text Mockup Photoshop Actions

Isometric Illustration 3D Photoshop Generator

Now, this is a fun one. The Isometric Illustration 3D Photoshop Generator makes it easy to create isometric illustrations from all types of illustrations. Apply it to shapes, vectors, smart objects, group layers, pixel layers, or text. It works in 4 directions, you can select from 10 depth sizes, and it comes with 40 different actions.

Isometric Illustration 3D Photoshop Generator

Animated 3D Photography Stereoscopic Action

Last on our list is another animated option. Great a 3D animated GIF from an image with just a few clicks. It uses a parallax effect to create a shift in the image layers. When played on a look, it creates the illusion of 3D. It comes with three different vintage-style color presets, a help file, and a video file.

Animated 3D Photography Stereoscopic Action

Create Captivating 3D Art

When it comes to creating captivating 3D images, having the right tools at your disposal is essential. Fortunately, with our collection of high-quality Photoshop actions for creating 3D effects, you can achieve stunning results quickly and easily.

With the right tools and a little creativity, the possibilities are truly endless. So why wait? Start creating stunning 3D artwork today with our collection of high-quality Photoshop actions.

How to Install Photoshop Actions

  1. Download and unzip the action file
  2. Launch Photoshop
  3. Go to Window > Actions
  4. Select Load Actions from the menu and go to the folder where you saved the unzipped action file to select it
  5. The Action will now be installed
  6. To use the newly installed action, locate it in the Action panel
  7. Click the triangle to the left of the action name to see the list of available actions
  8. Click the action you want to play and press the play button at the bottom of the Actions panel

More Photoshop Action Collections

The post 12 Best Photoshop Actions for Creating 3D Effects appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/3d-photoshop-actions/feed/ 0
10 Stunning 3D Text Effect Tutorials for After Effects https://speckyboy.com/3d-text-effect-after-effects-tutorials/ https://speckyboy.com/3d-text-effect-after-effects-tutorials/#respond Fri, 04 Aug 2023 06:46:06 +0000 https://speckyboy.com/?p=112824 From basic to advanced techniques, learn how to create professional 3D text effects in After Effects with these step-by-step tutorials.

The post 10 Stunning 3D Text Effect Tutorials for After Effects appeared first on Speckyboy Design Magazine.

]]>
Are you looking to add an extra level of depth to your typography and make it stand out in your next video project? If so, 3D typography might be just what you need. With 3D text, you can create a visually stunning effect that adds a professional touch to your video projects.

Thankfully, with the power of After Effects, creating 3D text has never been easier. With various tools and techniques at your disposal, you can quickly and easily add depth and dimension to your text.

But where do you begin? To help, we’ve compiled this collection of the best tutorials for creating 3D text effects in After Effects, whether you’re a seasoned professional or a beginner.

These tutorials cover a variety of techniques and styles, from basic 3D text to more complex effects like metallic finishes, particle effects, and more. With these step-by-step tutorials, you’ll be able to create stunning 3D text effects that will make your video projects stand out.


The post 10 Stunning 3D Text Effect Tutorials for After Effects appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/3d-text-effect-after-effects-tutorials/feed/ 0
8 CSS & JavaScript Snippets for Creating Lighting & Shading Effects https://speckyboy.com/css-javascript-snippets-lighting-shading-effects/ https://speckyboy.com/css-javascript-snippets-lighting-shading-effects/#respond Wed, 02 Aug 2023 07:01:35 +0000 https://speckyboy.com/?p=132295 A collection of lighting and shading effect CSS & JavaScript snippets for recreating the incredible effects we see in modern video games.

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

]]>
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.

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

]]>
https://speckyboy.com/css-javascript-snippets-lighting-shading-effects/feed/ 0
8 CSS & JavaScript Snippets for Creating 3D Components https://speckyboy.com/3d-features-css-javascript/ https://speckyboy.com/3d-features-css-javascript/#respond Tue, 25 Jul 2023 06:15:40 +0000 https://speckyboy.com/?p=140580 We have an entertaining collection of CSS and JavaScript code snippets for adding stunning 3D features to your web projects.

The post 8 CSS & JavaScript Snippets for Creating 3D Components appeared first on Speckyboy Design Magazine.

]]>
Adding 3D features to your website has never been easier. Thanks to advancements in CSS and JavaScript, there are now built-in methods and frameworks for doing so. What’s more, these powerful tools open up the door to some serious creativity.

And while 3D animation is widely-used, a third dimension can be utilized in other ways. Content containers such as card UIs, buttons, or typography, can benefit from the effect, as can product demos and infographics. There are tons of possibilities.

In particular, 3D features can be great fun. Whether you use them to power a game or an attention-grabbing hero area, they naturally draw users in and keep them interested.

And fun is our focus for today. We’ve rounded up eight entertaining code snippets that can help bring a smile to your site’s visitors. Let’s begin!



The Globe You Were Looking For by Ksenia Kondrashova

This interactive 3D globe sports a unique look and includes some interesting technology. Not only can you “spin” it via click-and-drag or touch, but also plot points. Click to add a point, and the script will display its geo coordinates.

See the Pen The Globe you were looking for (Three.js + GLSL + GSAP) by Ksenia Kondrashova

3D Lowpoly Pyramid in CSS by S. Shahriar

Here we have the winning combination of a 3D object and polygon art.

Drag the multicolored pyramid around to change its perspective. Impressively, this snippet is mostly powered by CSS, with a small assist from JavaScript.

See the Pen CSS 3D Lowpoly Pyramid (simplified) by S. Shahriar

Grow Anim by YCW

Watching this eclectic mix of plant life “bloom” on the screen is fun. But start rotating this 3D object for a truly jaw-dropping effect.

The presentation can be rotated a full 360° with incredibly smooth animation. The presentation utilizes HTML canvas and could serve as a guide for creating an interactive product demo.

See the Pen 124. grow anim by ycw

Recreating the “Minimal Keyboard” by Dibyajyoti Mishra by Jacob Foster

There’s more to this virtual keyboard than meets the eye. It not only looks amazing, but it’s also fully interactive.

Make sure your browser is focused on the presentation, and the keyboard will mimic your typing. Hit the colored buttons on the right to set off a fun animated effect.

See the Pen Recreating “Minimal keyboard” by Dibyajyoti Mishra by Jacob Foster

150ml of Vanilla CSS by Paulo Nunes

Here’s proof that you don’t need fancy animation to make a fun 3D element.

This virtual package is built with CSS and takes advantage of the box-shadow and transform properties to create perspective. The fact that it uses text rather than images for labeling is a modern coding marvel in its own right.

See the Pen 150ml of vanilla CSS by Paulo Nunes

Bounce by Louis Hoebregts

There is some serious physics at play with these playful bouncing balls. Watch as they fall onto a rotating 3D platform and burst upon impact.

Bonus points for the comic-like visual effects after each ball reaches the end of its journey.

See the Pen CodePen Challenge – Bounce by Louis Hoebregts

Toggle 3D by Adir

Toggle switches make for a nice addition to forms. They’re incredibly simple and offer a more attractive alternative to a set of “Yes/No” radio buttons.

But this snippet takes it to a whole new level, complete with a 3D ball and some cool animated transitions. It wouldn’t be out of place on a user account dashboard.

See the Pen Toggle 3D by Adir

CSS Only 3D Image Effect by Temani Afif

Are you looking for a way to spice up ordinary images? This pure CSS effect offers a compelling visual experience.

Each image features a 3D perspective while hovering “flattens” the view and reveals a title. No heavy framework is required to add an element of fun.

See the Pen CSS only 3D effect image by Temani Afif

3D Elements That Leap off the Screen

When you think about it, all that’s needed to create a basic 3D element on your website is a tiny bit of CSS. It just goes to show how far the language has progressed over the years.

But CSS is only the starting point. Adding JavaScript, including frameworks such as GSAP, can bring professional-grade results. Some of the snippets above are shining examples of what can be accomplished. The third dimension has never been within closer reach for developers.

The post 8 CSS & JavaScript Snippets for Creating 3D Components appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/3d-features-css-javascript/feed/ 0
10 Beautiful Business Cards with Holographic Effects for Inspiration https://speckyboy.com/business-cards-holographic-effects/ https://speckyboy.com/business-cards-holographic-effects/#respond Sun, 16 Jul 2023 20:41:06 +0000 https://speckyboy.com/?p=113019 Holographic foil business cards can be truly inspiring. They're not just paper with intricate coloring but can create dimension and exude beautiful light.

The post 10 Beautiful Business Cards with Holographic Effects for Inspiration appeared first on Speckyboy Design Magazine.

]]>
When crafting business cards, it is often believed that everything lies solely in the design. We tend to rely on eye-catching illustrations, unique typography, or clever ideas that make our 3.5 x 2-inch card stand out in a sea of others. However, there is always an alternative worth exploring. This alternative involves experimenting with the actual material used as the base for your business card.

One solution that holds the power to truly transform a business card is the use of holographic foils. Their inherent properties offer a vibrancy that spans from light to dark tones, catering to the diverse needs of various designs and styles. Let’s delve into our selection of inspiring examples that demonstrate the immense potential of taking this approach.



Pink & Holographic Business Card Designed by Alexia Roux

The name of this project says it all. The business card takes its beauty from the color pink and a holographic foil that covers a significant part of the front side.

The latter has been designer using colder colors that perfectly balance the pink background, keeping it from looking too schmaltzy. Paired with the letterpress effect, it makes the content look fantastic. The business card conveys not just a feminine beauty, but also the creative soul of the designer.

Inspiration Holographic Business Card Pink and holographic

Sweetland’s Business Card Designed by Lukasz Drozdz

Standing in stark contrast to the example above, the brand identity of Sweetland shows everyone that dark paper and holographic foil can form a potent partnership.

While the black paper gives the design a strong businesslike feel, the radiant holographic foil features a gorgeous gradient, making it feel sophisticated.

Inspiration Holographic Business Card Sweetland

Daniel Barkle’s Personal Identity Designed by Dan Barkle

The personal identity of Daniel Barkle gives us a lovely combination of silver foil with a gradient overlay that creates a subtle holographic effect.

It is used on the entire front of the business card, making it eye-catching. The backside of the card is fairly minimal and clean, with all the contact information allocated to the corners, making it feel spacious. On the whole, the card looks businesslike with a touch of chic.

Inspiration Holographic Business Card Daniel Barkle

Soul Scapes Branding Designed by Mai Creative

Much like the previous business card, the silver foil effect in this example is the focus. It not only offers a simple metallic effect, but it also establishes the mood.

Both cards look similar, but the designer behind Soul Scapes has used a dark background and white font on the backside. This twist gives the design a classy appeal.

Inspiration Holographic Business Card Soul Scapes

Square Holographic Business Card Designed by Pixelbuddha

This high-resolution, square-shaped business card template boasts a mesmerizing holographic effect. Its unusual and effective memorable layout guarantees a lasting impression.

Inspiration Square Holographic Business Card

Dawn Creative’s Identity Designed by Dawn Creative

With Dawn Creative, the holographic foil is not just used for decorative purposes. It’s also a way to display the content on both sides of the business card. The card’s front side greets potential clients with two clever semi-circles that symbolize the agency’s branding.

The back of the card, in turn, contains all of the contact information, which glows at various angles. Note the high quality of the paper. As a result, the business card feels sophisticated.

Inspiration Holographic Business Card Dawn Creative

Joaquin Homs Branding Designed by Anagrama Studio

The personal brand identity of Joaquin Homs has two variants. The first features a radiant holographic foil to display his name on the front. It serves as a base for the contact information on the back. In contrast, the second option has the same design but uses silver foil.

The business card with the holographic effect instantly commands attention with its warm appearance. Even though the black paper attempts to hold back the vibrancy of the foil, you can still feel its power.

Inspiration Holographic Business Card Joaquin Homs

ILNP Boutique Cosmetics Designed by Marcin Usarek

In this business card example, the silver foil makes the letterpressed name stand out from the textured grey background, and the holographic effect on the edges gives the card a touch of vibrancy. This design is excellent for those who want to stick to a businesslike card yet still be brave enough for a little holographic creativity.

Inspiration Holographic Business Card ILNP

HBS Group Designed by Lange & Lange

If you are not quite ready to be swept away by the holographic effect, you can simply use it for establishing natural focal points on your business card, like the way the creative team behind the HBS Group brand identity has done.

They have merely sprinkled the business card with a bit of holographic magic that lightens the mood and enriches the dark environment with a marvelous classic appeal.

Inspiration Holographic Business Card HBS Group

Borealica’s Business Card & Identity Designed by Anagrama Studio

In this example, the designers behind Borealica have used a holographic pattern as a decorative panel on the front side of the card and made it the main design feature.

Even though it occupies almost 90% of the card, it doesn’t feel overwhelming. On the contrary, its gentle beach-inspired gradient makes it soft and kind to the eye.

Inspiration Holographic Business Card Borealica


Holographic foil is a compelling medium. It is not just fancy paper with intricate coloring. It’s much, much more than that. It can sometimes exude a personality that can sometimes be difficult to hold back.

But, if you pair it with high-quality paper, subtle coloring, a beautiful font, and a large scoop of creativity, you will end up with a business card that no one will forget in a hurry.

The post 10 Beautiful Business Cards with Holographic Effects for Inspiration appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/business-cards-holographic-effects/feed/ 0
10 Stunning 3D Projects Built Entirely With CSS & JavaScript https://speckyboy.com/3d-css-javascript/ https://speckyboy.com/3d-css-javascript/#respond Mon, 12 Oct 2020 10:15:48 +0000 https://speckyboy.com/?p=93990 The web has come a long way from dial-up Internet and GeoCities pages. Websites are now fully responsive and accessible from touchscreen devices. But modern browsers have taken things even...

The post 10 Stunning 3D Projects Built Entirely With CSS & JavaScript appeared first on Speckyboy Design Magazine.

]]>
The web has come a long way from dial-up Internet and GeoCities pages. Websites are now fully responsive and accessible from touchscreen devices. But modern browsers have taken things even further beyond “mainstream” web design.

It’s possible to create amazing 3D effects in the browser using only frontend technologies. And in this post, I’ll showcase my favorite 3D web projects that show just how far the web has come in a few short decades.



Perspective Boxes

Believe it or not this box animation was made with pure CSS3 transforms. The actual cubes are pretty easy to render using CSS and the alternating colors work with differing classes.

The animation use looping keyframe animations to give the illusion of these boxes bouncing in 3D space. By clicking any of the perspective buttons in the top-right corner you can even view this 3D model from varying angles. Pretty cool!

Pure CSS3 Graph

One more example of pure CSS3 animation is this bar graph created by Ana Tudor. It uses a simple HTML container with four inner divs representing the four sides of each rectangle.

The bars are easy enough to animate using CSS3 and they all grow to varying heights. But the most impressive part is how this entire animation rotates viewing angles even while the bar graph is growing.

This uses a lot of Sass code to automate the animations with calculation functions so it is a bit technical. But if you’re trying to learn more about 3D then this is a solid pen to dive into.

Tunnel Vision

For a trippy Webkit browser experience take a look at this 3D tunnel created with just some CSS3 transforms and Sass properties.

The alternating colors run through a Sass for loop which alternates the HSL color value after a certain time period. This loops gives off the illusion that you’re traveling through a tunnel of colorful confetti pieces indefinitely. Pretty wild!

It may not seem like anything special and it’s definitely not practical for a major website. But it is a testament to how much you can do with some creativity and coding knowledge.

3D iPhone in CSS

The iPhone 4 offered a radically new design and it got everyone hyped for the killer new smartphone. Developer Jonathan Levaillant must’ve really enjoyed the iPhone 4 since he recreated the design in pure CSS.

As rotating devices go this one’s pretty darn cool. It does look like an iPhone and the outer band even reflects light with a realistic gradient. The iPhone’s screen plays an mp4 video hosted on Apple’s servers and it also distorts properly in perspective.

What’s most insane about this is how it relies solely on CSS for everything. I’ll be psyched in another 10 years when pure CSS3 iPhones are fully interactive in the browser.

3D Solar System

The Milky Way is our little corner of the universe and it’s fully represented in this amazing pen created by Julian Garnier.

It does use a lot of CSS but most of the customizable effects rely on JavaScript. This lets you change the speed, size, and distance of various planets.

You can even switch between the 3D view and an overhead 2D view with relative ease. Talk about a stellar use of frontend development!

Shaded Cubes

These simple shaded cubes may not seem like much. They’re built in CSS and they automatically rotate on one axis using CSS3 animations.

But there’s an interactive setting where you can animate the cubes on mouse hover. This is definitely a cool trick and it relies on a few rare CSS techniques including the :hover and :checked pseudo-classes along with the tilde(~) selector.

CSS 3D Carousel

Image carousels are great to showcase graphics, photos, and even videos in rotation. And with this CSS3 carousel you can take these fun sliders to a whole new level.

This very basic 3D carousel relies on click events to animate between different elements. The 3D style is surprisingly detailed and relies purely on CSS code.

The only JavaScript needed here is to toggle between the next/prev buttons and to animate the 3D styles into place. And this is actually something you could use on a real site so it may have a practical use in modern web design.

Chill the Lion

Here’s something a bit less practical but still incredibly fun to use. This 3D lion render by Karim Maaloul uses Three.js to create a fun game where you can blow some cool air on sweaty lion.

As you move the fan around the page with your cursor the lion’s gaze will follow. Then just click to start the motorized fan and watch the lion’s excitement as you send a cool stream of air his way.

The developer even went so far as to create flapping areas in the lion’s mane along with movement in the whiskers.

This is yet another detailed example of how far 3D effects have come.

3D NES Controller

Classic gaming left its mark on the current generation of coders and you can see this with Johan van Tongeren’s 3D NES controller rendered in pure CSS3.

It works best in Chrome/WebKit browsers although it should render fine in Firefox too. It’s really more of an experiment to see how far CSS has come, so don’t expect it to be perfect!

Kepler Orbits

I cannot imagine how long it took to build this realistic model of a Kepler orbit path. This model shows the movement of a body relative to another in space, and in this case the developer Danie Clawson did an incredible job.

This entire model uses CSS for visuals and Three.js for the 3D effects. In the top-left corner you’ll find an options box where you can change many of the orbit variables to affect the object’s speed, size, and placement.

You might even notice that the orbiting object uses realistic light with shading based on which side is pointing towards the sun. This is wildly impressive and it belongs as #1 on this list for the immense attention to detail.

I hope these examples can inspire you to learn more about frontend development and maybe even create your own 3D projects.

The post 10 Stunning 3D Projects Built Entirely With CSS & JavaScript appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/3d-css-javascript/feed/ 0
The Free Glossy 3D Web UI Kit (Photoshop PSD) https://speckyboy.com/fantastic-freebie-3d-web-ui-kit/ https://speckyboy.com/fantastic-freebie-3d-web-ui-kit/#comments Fri, 27 Jul 2018 23:55:55 +0000 http://speckyboy.com/?p=14856 The free kit is available in both PSD & PNG and is choc-full of beautifully designed modern web elements covering almost all aspects of web design.

The post The Free Glossy 3D Web UI Kit (Photoshop PSD) appeared first on Speckyboy Design Magazine.

]]>
This Glossy 3D Web UI Kit is perfect for web designers looking to add some modern and sleek design elements to their projects. The kit includes both PNG and PSD versions, giving you the flexibility to use the elements in whichever way works best for you.

With a variety of useful navigation elements, including tabs, control buttons, and breadcrumbs, as well as input boxes, drop-downs, sliders, and progress bars, this kit has everything you need to create a polished and professional-looking website.

Plus, with forms for search, mailing lists, and logins, you can ensure that your website is functional as well as stylish. And best of all, this kit is available for free for both personal and commercial use. Thanks to our partners at MediaLoot for providing this fantastic resource.

You might also like: Free Colorful 3D UI Kit (Photoshop PSD).

More Free Icon Sets

The post The Free Glossy 3D Web UI Kit (Photoshop PSD) appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/fantastic-freebie-3d-web-ui-kit/feed/ 4
30 Creative Examples of Logos with 3D Elements https://speckyboy.com/creative-3d-logo-design/ https://speckyboy.com/creative-3d-logo-design/#respond Sun, 26 Feb 2017 09:32:43 +0000 http://speckyboy.com/?p=4204 DeviantART stands out as one of the most popular means of showcasing your design portfolio, where users of any artistic level can upload their art and allow others to offer...

The post 30 Creative Examples of Logos with 3D Elements appeared first on Speckyboy Design Magazine.

]]>
DeviantART stands out as one of the most popular means of showcasing your design portfolio, where users of any artistic level can upload their art and allow others to offer a critique. In this logo design gallery, we have collected some of the most amazing 3D logo designs, all designed with Photoshop and have all been showcased on DevianART.

We have also have provided some links and resources to some useful and insightful tutorials on how to create your own 3D logo at the bottom of the post.


Bunk Logo

Deviantart 3d Logo Showcase

GamerVoice Logo

Deviantart 3d Logo Showcase

Shift Logo v.2

Deviantart 3d Logo Showcase

Shift Logo v.1

Deviantart 3d Logo Showcase

3D Logo

Deviantart 3d Logo Showcase

My Logo

Deviantart 3d Logo Showcase

Emash Logo

Deviantart 3d Logo Showcase

DJKTD Logo

Deviantart 3d Logo Showcase

Encide 3D Logo

Deviantart 3d Logo Showcase

Logo Design

Deviantart 3d Logo Showcase

Team CoolerMaster 3D Logo

Deviantart 3d Logo Showcase

AV Solutions 3d Logo

Deviantart 3d Logo Showcase

Logo Pix Design

Deviantart 3d Logo Showcase

Shift Logo v.3

Deviantart 3d Logo Showcase

Masked Gamers

Deviantart 3d Logo Showcase

Pedroqn Logo

Deviantart 3d Logo Showcase

Maserati Logo Badge

Deviantart 3d Logo Showcase

Medad Logo

Deviantart 3d Logo Showcase

3d YouTube

Deviantart 3d Logo Showcase

Logo 3D

Deviantart 3d Logo Showcase

3d Logo

Deviantart 3d Logo Showcase

3d Logo Concept

Deviantart 3d Logo Showcase

RTdi 3D Logo

Deviantart 3d Logo Showcase

Opposing Forces

Deviantart 3d Logo Showcase

My 3D Logo

Deviantart 3d Logo Showcase

Global Cuisine Logo

Deviantart 3d Logo Showcase

TM Logo

Deviantart 3d Logo Showcase

Xenicore.com Logo

Deviantart 3d Logo Showcase

Advena Co. 3D Concept

Deviantart 3d Logo Showcase

RedFricion

Deviantart 3d Logo Showcase

3d Logo Tutorials with Photoshop and Illustrator

3D Logo with Illustrator

Deviantart 3d Logo Showcase

3d Logo Tutorial in photoshop

Deviantart 3d Logo Showcase

Glowing and Sparkling Lights 3d Logo Tut

Deviantart 3d Logo Showcase

3d Encide Logo Tutorial

Deviantart 3d Logo Showcase

Create a High Quality Metal 3d Text in Photoshop

Deviantart 3d Logo Showcase

3d Crystal Icon in Photoshop

Deviantart 3d Logo Showcase

Create a 3d Glossy Box Logo

Deviantart 3d Logo Showcase

Doixy 3d Logo Tutorial

Deviantart 3d Logo Showcase

Create an Awesome 3d Looking Logo in Photoshop

Deviantart 3d Logo Showcase

Create a Glossy Volt Icon in Photoshop

Deviantart 3d Logo Showcase

The post 30 Creative Examples of Logos with 3D Elements appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/creative-3d-logo-design/feed/ 0
Free Colorful 3D UI Kit (Photoshop PSD) https://speckyboy.com/freebie-colorful-3d-ui-kit/ https://speckyboy.com/freebie-colorful-3d-ui-kit/#comments Tue, 24 Jan 2012 12:24:24 +0000 http://speckyboy.com/?p=19298 The Colorful 3D UI Kit is perfect for web designers of all levels, featuring a range of beautifully designed modern web elements.

The post Free Colorful 3D UI Kit (Photoshop PSD) appeared first on Speckyboy Design Magazine.

]]>
Are you looking for a versatile and eye-catching UI kit for your next web design project? Look no further than the Colorful 3D UI Kit, designed by Land-of-Web.com. This freebie is perfect for web designers of all levels, featuring a range of beautifully designed modern web elements covering almost all web design aspects.

The kit includes drop-down menus, sliders, progress bars, switches, tabs, icons, tooltips, navigation elements, search and select boxes, and media control buttons. The kit comes in Photoshop PSD format, making it easy to customize to fit your specific needs.

The Colorful 3D UI Kit is free for personal and commercial use, with attribution appreciated but not required. However, you may not re-upload or re-distribute this set on any other website.

You might also like: The Free 3D Web UI Kit (Photoshop PSD).

UI Kit Preview

Colorful 3D UI Kit freebie psd

Download: Colorful 3D UI Kit

More Free UI Kits

The post Free Colorful 3D UI Kit (Photoshop PSD) appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/freebie-colorful-3d-ui-kit/feed/ 3