design - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

djemals — Sun, 11 May 2025 06:23:26 +0000

If you’re designing for mobile Safari and notice your phone numbers mysteriously turning blue and underlined, you’re not alone. By default, Safari automatically detects phone numbers and converts them into clickable links—often overriding your CSS styles in the process.

The Problem

Safari’s automatic phone number detection is helpful in some cases, but for designers and developers, it can break the intended layout or brand consistency—especially when you’re working with custom fonts or color schemes.

The Simple Fix

The good news is that you can disable this behavior with just one line of code in your tag:

This tells Safari not to automatically detect and format telephone numbers, allowing you full control over how numbers appear on your site.

Pro Tip

If you still want numbers to be clickable but styled your way, you can manually wrap them in tags and apply your own CSS:

(123) 456-7890

Then style it however you like:

.phone {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

Final Thoughts

Safari’s auto-detection can be helpful for users, but problematic for designers. With a simple meta tag or some controlled styling, you can prevent unwanted design changes and keep your UI consistent across all browsers.

For more quick dev tips like this, check back at blog.identitydesign.us

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It first appeared on identity design.

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It appeared first on identity design.

CSS: How to Make an Anchor Not Clickable in HTML

djemals — Tue, 01 Oct 2024 18:43:52 +0000

When building web pages, there are times you might want an anchor link () to be visible but non-functional. Perhaps you’re still working on that section of your website, or the link is for decorative purposes only. Whatever the reason, making an anchor not clickable is simple with a few CSS rules.

The Code Snippet

Let’s start with a quick code snippet that makes an anchor tag unclickable:

Unclickable Link

Then, in your CSS, add the following styles:

.inactive-link {
    pointer-events: none;
    cursor: default;
}

A Use Case for This Approach

Let’s say you have a navigation menu, but one of the pages is under construction. You still want the link to be visible for design consistency, but don’t want users to interact with it. Here’s an example:


  
    Home
    About
    Contact (Coming Soon)

Conclusion

With just a couple of lines of CSS, you can make any anchor tag unclickable. It’s a quick and effective way to manage inactive or placeholder links on your website. Try this technique next time you need a link to be visible but non-functional!

The post CSS: How to Make an Anchor Not Clickable in HTML first appeared on identity design.

The post CSS: How to Make an Anchor Not Clickable in HTML appeared first on identity design.

CSS Only Animation: Zoom on Hover

djemals — Thu, 11 Apr 2024 08:31:49 +0000

In today’s quick tip, we’ll dive into creating a dynamic ‘zoom on hover’ effect that adds an interactive touch to images on your web pages. By incorporating the provided CSS, your images will elegantly scale up when hovered over. This effect, achieved with minimal code, is a fantastic way to enhance your website’s visual appeal and engage your visitors.

DEMO: Zoom on Hover

HTML

CSS

.zoom-in { transition:transform .2s; }
.zoom-in:hover { transform: scale(1.2); }

The post CSS Only Animation: Zoom on Hover first appeared on identity design.

The post CSS Only Animation: Zoom on Hover appeared first on identity design.

CSS Only Animation: Image Swapping on Hover (Logo Swap)

djemals — Sat, 09 Mar 2024 00:27:13 +0000

Explore how to enhance your website’s interactivity with this simple guide on implementing a logo or image swap effect upon mouse hover. Ideal for web designers and developers, this tutorial includes step-by-step instructions, complete with HTML and CSS code snippets, to seamlessly integrate this dynamic visual cue into your web project. Perfect for adding that extra flair to logos or images on your site, learn how to create a more engaging user experience with ease.

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) first appeared on identity design.

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) appeared first on identity design.

CSS Animation: Image Scrolling on Hover

djemals — Wed, 11 Oct 2023 00:50:39 +0000

In the ever-evolving world of web design, adding interactive and visually appealing elements to your website can greatly enhance the user experience. One exciting way to achieve this is by learning how to create an image scrolling effect on hover with CSS animation. With just a few lines of code, you can transform a static image into an engaging and dynamic component that draws the viewer’s attention. So, let’s dive in and discover how to make your website come to life with CSS image scrolling on hover!

DEMO: Mouse over to see the scrolling animation

HTML

CSS

img { 
	object-fit: cover;
	object-position: top;
	transition: ease-in-out 4s;
	width: 450px;
	height: 300px;
}
img:hover {
	object-position: bottom;
}

The post CSS Animation: Image Scrolling on Hover first appeared on identity design.

The post CSS Animation: Image Scrolling on Hover appeared first on identity design.

HTML-CSS-JS: Simple Hamburger Menu Expandable

djemals — Sat, 10 Dec 2022 01:16:30 +0000

“How to create an expandable hamburger menu?”

DEMO: How It Looks

HTML


  
      
    
      
         Home
         Section 1
         Section 2
         Section 3

CSS

body {
	background-color: black; font-family:sans-serif; 
}
header a {
	color: #111 !important;
	text-decoration: none!important;
	font-weight: 200;
	font-size: 2.2rem;
	line-height: 1.2;
	display: block;
}
.header__menu {
	position: fixed;
	top: 34px;
	right: 30px;
	z-index: 10;
}
.menu__icon {
	z-index: 5;
	display: block;
	position: relative;
	width: 50px;
	height: 22px;
	cursor: pointer;
}
.menu__icon span, .menu__icon::before, .menu__icon::after {
	left: 0;
	position: absolute;
	height: 20%;
	width: 100%;
	transition: all 0.3s ease 0s;
	background-color: white;
}
.menu__icon::before, .menu__icon::after {
	content: '';
}
.menu__icon::before {
	top: 0;
}
.menu__icon::after {
	bottom: 0;
}
.menu__icon span {
	top: 50%;
	transform: scale(1) translate(0, -50%);
}
.menu__icon._active span {
	transform: scale(0) translate(0, -50%);
}
.menu__icon._active::before {
	top: 50%;
	transform: rotate(-45deg) translate(0, -50%);
}
.menu__icon._active::after {
	bottom: 50%;
	transform: rotate(45deg) translate(0, 50%);
}
.menu__body {
	position: fixed;
	top: 0;
	right: -99%;
	width: 34%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 100px 30px 30px 30px;
	transition: right 0.3s ease 0s;
	overflow: auto;
}
.menu__body._active {
	right: 0;
}
.menu__list > li {
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.menu__body ul {
	padding-left: 1rem;
	list-style: none;
}

JavaScript

Link the below external Javascript into the bottom of your HTML.

With having the hamburger menu on your navigation, your website could look more sophisticated and clean.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable first appeared on identity design.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable appeared first on identity design.

Freebies: Kebab Kabob Display Menu Template (PSD)

djemals — Wed, 12 Jan 2022 09:03:56 +0000

The “Kebab” or “Kabob” Mediterranean food display menu template in Photoshop (PSD) by Identity Design is designed in high resolution and ready to use. It’s layered in PSD and available for a free download.

Terms

All Identity Design Freebies can be used for both personal and commercial use.
You may not redistribute or resell Identity Design Freebies in any shape or form.

Download

The post Freebies: Kebab Kabob Display Menu Template (PSD) first appeared on identity design.

The post Freebies: Kebab Kabob Display Menu Template (PSD) appeared first on identity design.

Web Developer / Designer Bookmarks

djemals — Wed, 05 Jan 2022 01:32:31 +0000

Get Inspired!

Behance

Trendy portfolios. Showcase. Adobe.

dribbble

World designers. Top creatives.

awwwards

Awards of design.

Cyrillic Design

Awards of design.

Qode Interactive

High quality WordPress Templates.

Image sharing. Social Media.

Design Resources

Unsplash

Freely-usable photo library.

Freepik

Powerful vector library.

Creative Market

6 free goods. Every week.

Pixelbuddha

Free & premium resources.

Google Fonts

Free web fonts. Downloadable.

Material Icons

Free web icons from Google.

Bensound

Royalty free music.

Tools

Pingdom Website Speed Test

Analyze web. Speed test.

Whois Lookup

Find IP. DNS

Custom Shape Dividers

Custom dividers for web. SVG

Cool Backgrounds

Customize backgrounds in PNG. Abstract. Lines. Gradient.

themer

Generates colors

Web Fundamentals

Web skills learning. HTML, CSS, JavaScript and browser

The post Web Developer / Designer Bookmarks first appeared on identity design.

The post Web Developer / Designer Bookmarks appeared first on identity design.

Freebies: Car Cover Website Mock Up Template (PSD)

djemals — Sat, 25 Dec 2021 19:55:44 +0000

The Car Cover Website Design mockup in Photoshop (PSD) by Identity Design is designed in high quality 2400 pixel in width. This clean & sophisticated design is ready to use on your own design before it’s cut up in HTML. It’s layered in PSD and available for a free download.

Terms

All Identity Design Freebies can be used for both personal and commercial use.
You may not redistribute or resell Identity Design Freebies in any shape or form.

Download

The post Freebies: Car Cover Website Mock Up Template (PSD) first appeared on identity design.

The post Freebies: Car Cover Website Mock Up Template (PSD) appeared first on identity design.

How to Change the Order of Artboards on Adobe Illustrator

djemals — Fri, 08 Oct 2021 23:15:31 +0000

Adobe Illustrator can create multiple paged PDF using multiple artboards. If you need to rearrange the order of pages, here is how-to.

Artboards are like Canvas in Adobe Photoshop.

The two-digit number starting on the left of each artboard is the order of the content in PDF. To change the order of artboards, open up the Artboard Palette and drag layers as you want.

1 Open -> `Window` (on top menu bar) -> choose `Artboards`

2 Change the Order of Artboards by Dragging the Layers

Just need to save your document in PDF.

The post How to Change the Order of Artboards on Adobe Illustrator first appeared on identity design.

The post How to Change the Order of Artboards on Adobe Illustrator appeared first on identity design.

design - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

The Problem

The Simple Fix

Pro Tip

Final Thoughts

Related posts:

CSS: How to Make an Anchor Not Clickable in HTML

The Code Snippet

A Use Case for This Approach

Conclusion

Related posts:

CSS Only Animation: Zoom on Hover

DEMO: Zoom on Hover

HTML

CSS

Related posts:

CSS Only Animation: Image Swapping on Hover (Logo Swap)

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

Related posts:

CSS Animation: Image Scrolling on Hover

DEMO: Mouse over to see the scrolling animation

HTML

CSS

Related posts:

HTML-CSS-JS: Simple Hamburger Menu Expandable

DEMO: How It Looks

HTML

CSS

JavaScript

Related posts:

Freebies: Kebab Kabob Display Menu Template (PSD)

Terms

Related posts:

Web Developer / Designer Bookmarks

Get Inspired!

Behance

dribbble

awwwards

Cyrillic Design

Qode Interactive

Pinterest

Design Resources

Unsplash

Freepik

Creative Market

Pixelbuddha

Google Fonts

Material Icons

Bensound

Tools

Pingdom Website Speed Test

Whois Lookup

Custom Shape Dividers

Cool Backgrounds

themer

Web Fundamentals

Freebies: Car Cover Website Mock Up Template (PSD)

Terms

Related posts:

How to Change the Order of Artboards on Adobe Illustrator

1 Open -> Window (on top menu bar) -> choose Artboards

2 Change the Order of Artboards by Dragging the Layers

Related posts:

1 Open -> `Window` (on top menu bar) -> choose `Artboards`