CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Question

CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Hi, I need help figuring out how to recreate this image using only CSS for the font and style.

I attempted it with this code on JSFIDDLE: JSFIDDLE CSS

 *{
        font-family: 'Asap', sans-serif;
        font-size:130px;
        color:#444;
        font-weight:bold;
        letter-spacing:-3px;
    }
    body{
        background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
    }
    img{
        width:auto;
        height:auto;
    }
    a{

        text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff,
            0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
    }

HTML

<a>asd</a>

Any suggestions are greatly appreciated.

If you believe replicating this image using pure CSS is not possible, please let me know so I can make other arrangements. I am aware that CSS cannot create text gradient colors, so I am considering using a library like this: https://github.com/mrnix/pxgradient

The biggest challenge for me is getting the text shadow to look like in the image. Thank you!

javascript jquery css

Answer 1

Answer №1

I have updated the text-shadow styling to achieve a similar effect:

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

This particular style will only be visible on browsers that support text-shadow spread (such as IE10). While it may not replicate the exact gradient effect in the image, it is a closer match.

Unfortunately, creating a gradient from light-blue to slightly-darker-blue within the text color itself is not feasible at this time. You will need to choose a solid color that complements your design instead.

If you require a solution that works across all browsers, utilizing images for this effect would be the most reliable option.

Answer 2

I have updated the text-shadow styling to achieve a similar effect:

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

This particular style will only be visible on browsers that support text-shadow spread (such as IE10). While it may not replicate the exact gradient effect in the image, it is a closer match.

Unfortunately, creating a gradient from light-blue to slightly-darker-blue within the text color itself is not feasible at this time. You will need to choose a solid color that complements your design instead.

If you require a solution that works across all browsers, utilizing images for this effect would be the most reliable option.

Answer 3

Answer №2

In my opinion, choosing an image for this purpose would be the best decision. For a simple png like this, the effort required to code it is not justified, and using an image will provide optimal cross-browser support. Logos are a crucial aspect of branding, and ensuring full cross-browser compatibility is essential for maintaining brand recognition.

If you still want to code your logo, I recommend using an svg file for the closest match possible. You can replicate the logo in Illustrator (if you have it) and save it as an svg for easy integration into a webpage.

Answer 4

In my opinion, choosing an image for this purpose would be the best decision. For a simple png like this, the effort required to code it is not justified, and using an image will provide optimal cross-browser support. Logos are a crucial aspect of branding, and ensuring full cross-browser compatibility is essential for maintaining brand recognition.

If you still want to code your logo, I recommend using an svg file for the closest match possible. You can replicate the logo in Illustrator (if you have it) and save it as an svg for easy integration into a webpage.

Answer 5

Answer №3

Check out this similar design based on the image.

Using a duplicate anchor is necessary because of the

-webkit-background-clip: transparent;

property, which clips out the shadow while creating a gradient effect on text. Note that this approach may not be compatible across all web browsers.

Here's an example of the code:

<div class="replica">
    <a class="link">asd</a>
    <a class="shadow">asd</a>
</div>

And here's the corresponding CSS:

.replica {
    position: relative;
}
a {
    font-style:italic;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.link {
    position: absolute;
    left:0;
    top:-2px;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.shadow {
    text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 2px 2px #ccc, 0px 4px 4px #ccc, 0px 6px 6px #ccc;
}

Answer 6

Check out this similar design based on the image.

Using a duplicate anchor is necessary because of the

-webkit-background-clip: transparent;

property, which clips out the shadow while creating a gradient effect on text. Note that this approach may not be compatible across all web browsers.

Here's an example of the code:

<div class="replica">
    <a class="link">asd</a>
    <a class="shadow">asd</a>
</div>

And here's the corresponding CSS:

.replica {
    position: relative;
}
a {
    font-style:italic;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.link {
    position: absolute;
    left:0;
    top:-2px;
    background: -webkit-gradient(linear, left top, left bottom, from(#99FFFF), to(#0DC4F3));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
a.shadow {
    text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0px 2px 2px #ccc, 0px 4px 4px #ccc, 0px 6px 6px #ccc;
}

Answer 7

Answer №4

If you're feeling adventurous and don't mind sacrificing some speed, consider using jquery to create a text shadow from every possible angle.

Check out this example on how to implement it.

I experimented with jquery to generate shadows for each specific angle... It does slow things down quite a bit, especially with multiple elements... but it's an interesting effect nevertheless.

function createShadow(element) {
    var spread = 10; // distance of the shadow
    var shadows = []; // array to store all text shadows
    
    for(var i = 0; i <= 361; i++) { // iterate through every angle
        var angle = i;
        var pointX = spread * (Math.sin(angle)); // calculate direction 
        var pointY = spread * (Math.cos(angle)); // of the text shadow
        
        if(i == 361) { // add one final black shadow at the end
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        
        shadows.push(shadow); // add shadow to the array
    }

    element.css({
        textShadow: shadows // apply all shadows (note: can be slow)
    });
}

$('a').each(function() { // apply above function to each link
    var element = $(this);
    createShadow(element);  
});

To create gradient text, refer to this tutorial: http://css-tricks.com/snippets/css/gradient-text/ (CSS3 and Webkit only).

Alternatively, try something like this:

Answer 8

If you're feeling adventurous and don't mind sacrificing some speed, consider using jquery to create a text shadow from every possible angle.

Check out this example on how to implement it.

I experimented with jquery to generate shadows for each specific angle... It does slow things down quite a bit, especially with multiple elements... but it's an interesting effect nevertheless.

function createShadow(element) {
    var spread = 10; // distance of the shadow
    var shadows = []; // array to store all text shadows
    
    for(var i = 0; i <= 361; i++) { // iterate through every angle
        var angle = i;
        var pointX = spread * (Math.sin(angle)); // calculate direction 
        var pointY = spread * (Math.cos(angle)); // of the text shadow
        
        if(i == 361) { // add one final black shadow at the end
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        
        shadows.push(shadow); // add shadow to the array
    }

    element.css({
        textShadow: shadows // apply all shadows (note: can be slow)
    });
}

$('a').each(function() { // apply above function to each link
    var element = $(this);
    createShadow(element);  
});

To create gradient text, refer to this tutorial: http://css-tricks.com/snippets/css/gradient-text/ (CSS3 and Webkit only).

Alternatively, try something like this:

CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

Encountering a 404 error while loading CSS in a Django application

What is the best way to automatically set today's date as the default in a datepicker using jQuery

The added class is not being successfully applied to the ClassList

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Unable to perform real-time transpilation of ES module, a loader plugin must be set up through the SystemJS.config configuration

Error in Javascript, exception was not handled

Is it possible to create a pitch shifter with the web-audio-api?

Creating a web form with HTML and integrating it with jQuery AJAX

The first Ajax call was successful, but the second Ajax call was unexpectedly sent twice

Use JavaScript to access the dynamic checkboxes in an ASP table by utilizing the functions checkall, uncheck, and middlestate

Z-Index Problem with PureCSS Horizontal Scrollable Menu

Preventing the page from scrolling to the top while utilizing an Angular-bootstrap modal and a window position:fixed workaround on an iPad

When redirecting to a .scala.html file in Scala Play, only text is displayed, not the full

Tips for including a line within a circular canvas

Expanding CSS transition for child elements as they increase in size

Issue with JQuery loading causing disruption to HTML text formatting

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

Communicating data transfer between two Node.js servers through the use of the Node Serial Port technology