Snippets - Digital Marketing Journals Hong Kong - Search Engine Optimisation News

8 CSS & JavaScript Snippets for Creating Blur Effects

19Sep

By Eric KarkovackNo Comments

building website, creating a website, CSS, CSS Image Effects, CSS Snippets, google web designer, internet design, JavaScript, JavaScript Snippets, web design, web design company, web designer, web page design, website builder, website design

8 CSS & JavaScript Snippets for Creating Blur Effects

Adding blur effects is a surefire way to make a surrounding design element stand out. For example, adding a bit of haziness to a background photo will draw attention to the layered text on top. Crafting this look used to require photo editing software. But that’s no longer the case. You can add stunning blur effects using CSS and JavaScript. And it’s easier than you may think. There is also a wide array of possibilities. You could opt for that simple blur on a photo. But you can also combine the effect with animation and user actions. This allows you to add some creativity to the mix. With that in mind, let’s explore eight excellent examples of CSS and JavaScript blur effects in action. Animated Blurred Gradients by Wil van der Tuin Blur effects can turn a bold design into something subtl...

JavaScript Snippets For Better UX and UI

18Apr

By Editorial TeamNo Comments

building website, creating a website, google web designer, internet design, JavaScript, responsive web design, UI Design, ux design, web design, web design company, web designer, web page design, website builder, website design

JavaScript Snippets For Better UX and UI

JavaScript can be used to significantly improve the user experience (UX) and user interface (UI) of your website. In this article, we will discuss some JavaScript snippets that you can use to boost the UX and UI of your website. UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month! DOWNLOAD NOW Smooth Scrolling Smooth scrolling is a popular UX feature that makes scrolling through web pages smoother and more fluid. With this feature, instead of abruptly jumping to the next section of the page, the user will be smoothly transitioned to the next section. To add smooth scrolling to your website, you can use the following JavaScript code: $('a[href*="#"]').on('click', function(e) { ...

Code Snippets That Demonstrate the Repelling Effect in Web Design

30Mar

By Nataly BirchNo Comments

Animation, building website, creating a website, CSS, CSS Animation, CSS Snippets, google web designer, internet design, JavaScript, JavaScript Snippets, UI Components, web design, web design company, Web Design Inspiration, web designer, web page design, website builder, website design

Code Snippets That Demonstrate the Repelling Effect in Web Design

Today, we’d like to highlight the repelling effect – a unique trend in web design that’s both repulsive and attractive at the same time. By pushing elements in various directions or blowing them away encourages users to interact with the page and explore its details. Despite its seemingly off-putting behavior, it’s an incredibly engaging feature that can make the user experience more exciting. We’ve curated a collection of inspiring demos complete with code snippets to showcase this trend. These examples will allow you to see firsthand the beauty and intrigue of the repelling effect. Repelling Lines by Daniel Velasquez This first repelling effect example is reminiscent of a set of guitar strings. At first glance, the lines appear static, but as soon as you move your cursor over them, some...

8 CSS & JavaScript Snippets for Custom Text Paths

1Mar

By Eric KarkovackNo Comments

building website, creating a website, CSS, CSS Snippets, CSS Typography, google web designer, internet design, JavaScript, JavaScript Snippets, responsive web design, web design, web design company, web designer, web page design, website builder, website design

8 CSS & JavaScript Snippets for Custom Text Paths

The ability to manipulate text content’s shape and path are powerful. It allows designers to create a unique flow and make specific elements stand out. But it seems like these effects have always worked better in print design. While web designers have had access to floating images around text, other bells and whistles have required hacks. That’s changing, thanks to modern CSS and JavaScript. Now it’s possible to place text on custom paths that closely resemble those seen in print. Even better is that you can add animation and hover effects to further enhance the experience. The possibilities are endless. To prove our point, here are eight CSS and JavaScript snippets that demonstrate custom text paths. As you’ll see, the results can be quite impressive! SVG textPath Element Sale Banners by ...

8 CSS Snippets for Styling HTML Checkboxes & Radio Buttons

25Jul

By Eric KarkovackNo Comments

building website, creating a website, CSS, CSS Snippets, Forms, google web designer, internet design, UI Design, web design, web design company, web designer, web page design, website builder, website design

8 CSS Snippets for Styling HTML Checkboxes & Radio Buttons

HTML form elements such as checkboxes and radio buttons are staples of the web. But for many years, web designers didn’t do a whole lot to enhance them. That has changed quite a bit in recent times. Thanks to the power of CSS (and the occasional bit of JavaScript), these elements are being put to some seriously creative uses. In some instances, they’re dressed up to the point of being unrecognizable. Finally, their outstanding utility now has looks to match. To demonstrate what checkboxes and radio buttons are capable of, we’ve uncovered eight unique CSS snippets. While some stick to the traditional form-based role, others are used to create an entirely different visual experience. Let’s check out what these previously-mundane elements are capable of. The results may surprise you! The Web...

8 CSS & JavaScript Snippets for Creating Modern Blog Layouts

29Mar

By Eric KarkovackNo Comments

building website, creating a website, CSS, CSS Layouts, CSS Snippets, google web designer, internet design, JavaScript, JavaScript Snippets, responsive web design, web design, web design company, web designer, web page design, website builder, website design

8 CSS & JavaScript Snippets for Creating Modern Blog Layouts

The beauty of blogging is that it provides a way to express ourselves. We can do so not only through words, but design as well. The look and layout of a blog can say a lot about both the author and the contents within. And thanks to modern CSS layout techniques such as CSS Grid and Flexbox, we’ve never had more design possibilities. Whether you’re interested in something complex or minimalistic – there are plenty of ways to accomplish a given layout. With that, we’ve put together a collection of beautiful blog layouts. They run the gamut of styles and use cases. Some are geared towards home pages, while others are laser-focused on single post templates. Enjoy! The Web Designer Toolbox Unlimited Downloads: HTML & Bootstrap Templates, WordPress Themes & Plugins, and much, much more!...

Why You Should Use Rich Snippets To Optimize Your Organic Click Through Rate?

5Mar

By seo-ninjaNo Comments

Advanced SEO Techniques, Content Marketing Strategies, Digital Marketing Strategies, googe optimize, google optimization, google seo, Local SEO, Online marketing, organic search, rich snippet, search engine optimisation, search engine optimising, search engine optimization, SEO, seo services, SEO Strategy

Why You Should Use Rich Snippets To Optimize Your Organic Click Through Rate?

Earlier, Google search result pages looked quite dull and unorganized. They were like pages of a book that have no images and other related information. But today, when a person surfs on the internet, he or she usually gets information in a very standard and easy to read style. This happens because now Google and other search engines use Rich snippets to display search results. What are Rich Snippets? Rich snippets have been the latest trend since their introduction in the year 2009. They work as the vital elements of search engine result query. Today, you will find rich results on almost all search engine result pages. Also known as structured data markup or schema markup, it represents website data in more organized form. By implementing rich snippets you can easily imp...

Why You Should Use Rich Snippets To Optimize Your Organic Click Through Rate? – SEO Ninja

10Jan

By seo-ninjaNo Comments

Advanced SEO Techniques, Content Marketing Strategies, Digital Marketing Strategies, googe optimize, google optimization, google seo, Local SEO, Online marketing, organic search, rich snippet, search engine optimisation, search engine optimising, search engine optimization, SEO, seo services, SEO Strategy

Why You Should Use Rich Snippets To Optimize Your Organic Click Through Rate? – SEO Ninja

Earlier, Google search result pages looked quite dull and unorganized. They were like pages of a book that have no images and other related information. But today, when a person surfs on the internet, he or she usually gets information in a very standard and easy to read style. This happens because now Google and other search engines use Rich snippets to display search results. What are Rich Snippets? Rich snippets have been the latest trend since their introduction in the year 2009. They work as the vital elements of search engine result query. Today, you will find rich results on almost all search engine result pages. Also known as structured data markup or schema markup, it represents website data in more organized form. By implementing rich snippets you can easily imp...

8 CSS & JavaScript Snippets for Creating Infographics

10Sep

By Eric KarkovackNo Comments

building website, creating a website, CSS, CSS Snippets, google web designer, Infographic Design, internet design, JavaScript, JavaScript Snippets, responsive web design, web design, web design company, web designer, web page design, website builder, website design

8 CSS & JavaScript Snippets for Creating Infographics

Infographics are one of those elements that have become equally popular in both print and web design. Regardless of the medium, these graphics help readers to better understand a concept or process. At their best, infographics take something complicated and turn them into a highly visual, yet simplified experience. The web offers its own unique advantages for infographics: Interactivity and responsiveness. Instead of a plain old graphic, these storytelling elements can become even more user-friendly. Animation can be used to demonstrate an idea. And, infographics built with web technologies can also greatly improve accessibility. We’ve put together a collection of snippets that aim to do more with infographics. Some may not necessarily feature a traditional composition. But they still seek...

Bootstrap 4 Code Snippets – 1stWebDesigner

27Dec

By Editorial TeamNo Comments

Bootstrap, building website, Collections, creating a website, CSS, google web designer, internet design, responsive web design, web design, web design company, web designer, web page design, website builder, website design

Bootstrap 4 Code Snippets – 1stWebDesigner

Do you use Bootstrap 4 in your projects? If so, you may be interested to see these examples of it in action that we’ve collected. From modals, sidebars, and thank you pages, to drag and drop, responsive menus, and buttons, we’ve gathered a few samples of code snippets to help you further how you build your next website. So have a look, play with them on CodePen, bookmark, and be sure to check out our other collections while you’re at it. Your Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design AssetsStarting at only $16.50/month! DOWNLOAD NOW See the Pen Modal Demos by SitePoint (@SitePoint) on CodePen.dark See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.dark See the Pen Thank You Page Template by Jacob Lett (...